/* SERP Radar — единая система оформления. Токены сначала для светлой темы, затем переопределение для тёмной. */
:root{
  --bg:#F3F5F7;--surface:#FFFFFF;--surface-2:#F8FAFB;--ink:#16191D;--ink-2:#3B424B;--muted:#6B7480;--line:#E2E6EB;--line-2:#EEF1F4;
  --accent:#0F6E68;--accent-ink:#0B534E;--accent-soft:#E3F1EF;--accent-soft-2:#CDE6E2;
  --up:#1E8E5A;--up-soft:#E2F4EA;--down:#C8372D;--down-soft:#FBE7E4;--warn:#B7791F;--warn-soft:#FBF0DA;--ad:#B45309;--ad-soft:#FBEBDD;--info:#2563EB;--info-soft:#E6EEFD;
  --pos1:#1E8E5A;--pos1-bg:#DDF3E6;--pos2:#0F6E68;--pos2-bg:#DDEFEC;--pos3:#B7791F;--pos3-bg:#FBEFD6;--pos4:#6B7480;--pos4-bg:#EDF0F3;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --radius:12px;--radius-s:8px;
  --font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --sidebar:232px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F1214;--surface:#171B1F;--surface-2:#1C2126;--ink:#E8ECEF;--ink-2:#C5CCD3;--muted:#8B95A1;--line:#2A3138;--line-2:#222830;
  --accent:#5FC0B8;--accent-ink:#8ED9D2;--accent-soft:#173532;--accent-soft-2:#1E4642;
  --up:#5FCB8E;--up-soft:#173626;--down:#F08A80;--down-soft:#3C1F1C;--warn:#E5B35A;--warn-soft:#3A2E16;--ad:#E5A05A;--ad-soft:#3A2A18;--info:#7AA6F7;--info-soft:#1B2A45;
  --pos1:#5FCB8E;--pos1-bg:#173626;--pos2:#5FC0B8;--pos2-bg:#173532;--pos3:#E5B35A;--pos3-bg:#3A2E16;--pos4:#8B95A1;--pos4-bg:#242A31;
  --shadow:0 1px 2px rgba(0,0,0,.4);}}
:root[data-theme="dark"]{
  --bg:#0F1214;--surface:#171B1F;--surface-2:#1C2126;--ink:#E8ECEF;--ink-2:#C5CCD3;--muted:#8B95A1;--line:#2A3138;--line-2:#222830;
  --accent:#5FC0B8;--accent-ink:#8ED9D2;--accent-soft:#173532;--accent-soft-2:#1E4642;
  --up:#5FCB8E;--up-soft:#173626;--down:#F08A80;--down-soft:#3C1F1C;--warn:#E5B35A;--warn-soft:#3A2E16;--ad:#E5A05A;--ad-soft:#3A2A18;--info:#7AA6F7;--info-soft:#1B2A45;
  --pos1:#5FCB8E;--pos1-bg:#173626;--pos2:#5FC0B8;--pos2-bg:#173532;--pos3:#E5B35A;--pos3-bg:#3A2E16;--pos4:#8B95A1;--pos4-bg:#242A31;
  --shadow:0 1px 2px rgba(0,0,0,.4);}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.95em}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- каркас ---------- */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 14px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand .logo{width:28px;height:28px;border-radius:8px;background:var(--accent);display:grid;place-items:center;color:#fff}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-s);color:var(--ink-2);font-weight:500}
.nav a:hover{background:var(--surface-2);text-decoration:none}
.nav a.on{background:var(--accent-soft);color:var(--accent-ink)}
.nav svg{width:18px;height:18px;flex:none;opacity:.85}
.sidebar .foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:8px 4px 0;font-size:12px;color:var(--muted)}
.chip-balance{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-2)}
.chip-balance b{color:var(--ink);font-size:13px}
.chip-balance.low b{color:var(--down)}
main{min-width:0}
.ctx{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ctx .spacer{margin-left:auto}
.content{padding:20px 24px 48px;max-width:1440px}
.page-title{display:flex;align-items:baseline;gap:12px;margin:2px 0 16px}
.page-title h1{font-size:20px;font-weight:700;margin:0;letter-spacing:-.01em}
.page-title .sub{color:var(--muted);font-size:13px}
.menu-btn{display:none}

/* ---------- элементы управления ---------- */
.seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);gap:2px}
.seg button{border:0;background:transparent;padding:5px 11px;border-radius:7px;color:var(--ink-2);font-weight:500;cursor:pointer;white-space:nowrap}
.seg button:hover{background:var(--surface)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-weight:600}
.select{appearance:none;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:6px 32px 6px 12px;font-weight:600;cursor:pointer;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7480' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 14px;font-weight:600;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink)}
.btn.danger{color:var(--down)}
.btn.sm{padding:4px 10px;font-size:13px;border-radius:8px}
.input,textarea.input{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface)}
textarea.input{min-height:96px;font-family:var(--mono);font-size:13px;line-height:1.5}
.search{position:relative}
.search input{padding-left:34px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.hint{color:var(--muted);font-size:12.5px}
.label{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---------- панели ---------- */
.grid{display:grid;gap:14px}
.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.grid.two{grid-template-columns:1.4fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;min-width:0}
.panel h2{font-size:15px;font-weight:700;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.panel .sub{color:var(--muted);font-size:12.5px;margin:0 0 12px}
.panel .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.panel .head .spacer{margin-left:auto}
.kpi-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi-tile .l{font-size:12.5px;color:var(--muted);font-weight:500;display:flex;justify-content:space-between;gap:6px}
.kpi-tile .v{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kpi-tile .v small{font-size:13px;font-weight:500;color:var(--muted)}
.kpi-tile canvas{width:100%;height:34px;margin-top:4px}
.kpi-tile .foot{font-size:12px;color:var(--muted)}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;padding:1px 7px;border-radius:999px;font-variant-numeric:tabular-nums}
.delta.up{color:var(--up);background:var(--up-soft)}.delta.down{color:var(--down);background:var(--down-soft)}.delta.flat{color:var(--muted);background:var(--line-2)}
.pos{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 7px;border-radius:7px;font-family:var(--mono);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pos.b1{color:var(--pos1);background:var(--pos1-bg)}.pos.b2{color:var(--pos2);background:var(--pos2-bg)}.pos.b3{color:var(--pos3);background:var(--pos3-bg)}.pos.b4{color:var(--pos4);background:var(--pos4-bg)}
.pos.none{color:var(--muted);background:transparent;border:1px dashed var(--line)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.tag.ad{color:var(--ad);background:var(--ad-soft)}.tag.warn{color:var(--warn);background:var(--warn-soft)}.tag.crit{color:var(--down);background:var(--down-soft)}.tag.ok{color:var(--up);background:var(--up-soft)}.tag.info{color:var(--info);background:var(--info-soft)}.tag.muted{color:var(--muted);background:var(--line-2)}
.bar{height:8px;background:var(--line-2);border-radius:4px;overflow:hidden;min-width:60px}.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.bar.me i{background:var(--info)}
.alerts{display:flex;flex-direction:column;gap:8px}
.alert{display:grid;grid-template-columns:4px 1fr;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface-2);cursor:pointer}
.alert:hover{border-color:var(--accent)}
.alert i{border-radius:2px;background:var(--info)}.alert.crit i{background:var(--down)}.alert.warn i{background:var(--warn)}.alert.ok i{background:var(--up)}
.alert b{display:block;font-weight:600;margin-bottom:2px}.alert span{color:var(--muted);font-size:12.5px}
.empty{padding:36px 16px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);margin-bottom:4px}
.skeleton{background:linear-gradient(90deg,var(--line-2),var(--surface-2),var(--line-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px;min-height:18px}
@keyframes sk{0%{background-position:0 0}100%{background-position:-200% 0}}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:100;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}

/* ---------- таблицы ---------- */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;max-height:72vh}
table.tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
.tbl th{position:sticky;top:0;z-index:2;background:var(--surface-2);color:var(--muted);font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;cursor:pointer;user-select:none}
.tbl th.r,.tbl td.r{text-align:right}
.tbl th.sorted::after{content:" ↓";color:var(--accent)}.tbl th.sorted.asc::after{content:" ↑"}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle;white-space:nowrap}
.tbl tr:hover td{background:var(--surface-2)}
.tbl td.kw{white-space:normal;min-width:220px;max-width:360px}
.tbl td.kw a{color:var(--ink);font-weight:500}
.tbl td.date{padding:5px 4px;text-align:center}
.tbl th.date{text-align:center;padding:9px 4px;font-family:var(--mono);letter-spacing:0;text-transform:none}
.tbl .sticky-l{position:sticky;left:0;background:var(--surface);z-index:1}
.tbl th.sticky-l{z-index:3;background:var(--surface-2)}
.tbl tr.expand td{background:var(--surface-2);white-space:normal;padding:12px 14px}
.tbl tfoot td{color:var(--muted);font-size:12.5px}
.legend-row{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:10px;align-items:center}
.legend-row .pos{height:18px;min-width:26px;font-size:11px}
.mx{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mx .cell{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-2)}
.mx .cell h3{font-size:13px;margin:0 0 4px;font-weight:600}.mx .n{font-size:24px;font-weight:700;letter-spacing:-.02em}.mx .act{color:var(--muted);font-size:12.5px;margin-bottom:6px}
.mx ul{margin:0;padding-left:18px;max-height:200px;overflow:auto;font-size:12.5px}.mx li{margin:1px 0}
.form .row{display:grid;grid-template-columns:200px 1fr;gap:8px 16px;align-items:start;margin-bottom:12px}
.form label{color:var(--muted);padding-top:8px;font-size:13px}
.form .chips{display:flex;gap:16px;flex-wrap:wrap;padding-top:8px}
.form .chips label{padding:0;display:inline-flex;gap:6px;align-items:center;color:var(--ink)}
.plist{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.plist .btn.on{background:var(--accent-soft);border-color:var(--accent-soft-2);color:var(--accent-ink)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
.msg{padding:8px 12px;border-radius:8px;background:var(--up-soft);color:var(--up);margin:8px 0;font-weight:500}.msg.err{background:var(--down-soft);color:var(--down)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block;margin-right:6px}.status-dot.ok{background:var(--up)}.status-dot.bad{background:var(--down)}
.chart-wrap{position:relative;height:280px}
.chart-wrap.short{height:220px}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--muted)}

/* ---------- адаптив ---------- */
@media (max-width:1100px){:root{--sidebar:64px}.sidebar .brand span,.nav a span,.sidebar .foot{display:none}.nav a{justify-content:center;padding:10px}.brand{justify-content:center;padding:6px 0 14px}.grid.two,.grid.three{grid-template-columns:1fr}}
@media (max-width:720px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;bottom:0;width:232px;transform:translateX(-100%);transition:transform .2s;z-index:40;box-shadow:0 0 0 100vw rgba(0,0,0,0)}.sidebar.open{transform:none;box-shadow:0 0 0 100vw rgba(0,0,0,.35)}.sidebar .brand span,.nav a span,.sidebar .foot{display:flex}.nav a{justify-content:flex-start}.menu-btn{display:inline-flex}.ctx{padding:8px 12px}.content{padding:12px 12px 40px}.form .row{grid-template-columns:1fr}.form label{padding-top:0}.mx{grid-template-columns:1fr}.kpi-tile .v{font-size:22px}}