:root { --fg:#16181d; --muted:#5d6673; --line:#e1e4ea; --bg:#f4f5f8; --card:#fff; --accent:#1f4fd1; --ok:#0b7a5b; --warn:#9a5b00; --bad:#b42318; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:#111827; color:#fff; }
header h1 { font-size:16px; margin:0; }
header .muted { color:#c7ccd6; }
.tag { font-size:11px; background:#f59e0b; color:#111; padding:2px 7px; border-radius:10px; margin-inline-start:6px; vertical-align:middle; }
main { max-width: 1280px; margin: 16px auto; padding: 0 16px; display:grid; gap:14px; }
.narrow { max-width:440px; margin:60px auto; }
section { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
h2 { font-size:15px; margin:0 0 10px; } h3 { font-size:13px; margin:14px 0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:10px; background:none; border:0; padding:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.card.warn { border-color:#f5d9a8; background:#fffaf0; } .card.bad { border-color:#f3c1bb; background:#fff5f4; }
.big { font-size:24px; font-weight:650; margin:2px 0; }
.small { font-size:12px; }
.muted { color:var(--muted); } .ok { color:var(--ok); } .warn { color:var(--warn); } .bad { color:var(--bad); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; } .between { justify-content:space-between; }
button { font:inherit; padding:6px 12px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
button.secondary { background:#fff; color:var(--accent); } button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button.small { padding:3px 9px; font-size:12px; }
header button.secondary { background:transparent; color:#fff; border-color:#6b7280; }
button:disabled { opacity:.45; cursor:default; }
input, select { font:inherit; padding:6px 9px; border:1px solid var(--line); border-radius:6px; }
input[type=search] { min-width:260px; }
label { display:block; margin:8px 0 4px; color:var(--muted); font-size:12px; } label.inline { display:inline; margin:0; }
#aReason { width:100%; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:start; padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; }
.phone { font-weight:600; font-variant-numeric: tabular-nums; }
.pill { font-size:12px; padding:2px 8px; border-radius:10px; background:#374151; } .pill.ok { background:#065f46; color:#d1fae5; } .pill.warn { background:#78350f; color:#fde68a; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
dl { display:grid; grid-template-columns: max-content 1fr; gap:4px 14px; margin:0; } dt { color:var(--muted); } dd { margin:0; word-break:break-all; }
.bars .bar { display:grid; grid-template-columns: 44px 1fr 44px; gap:6px; align-items:center; font-size:12px; }
.bars .bar span { display:block; height:8px; background:var(--accent); border-radius:4px; min-width:2px; }
code { background:#eef0f4; padding:1px 5px; border-radius:4px; font-size:12px; }
#aMsg { min-height:1.4em; }
