/* ==========================================================================
   batcrow · Spy — design system
   Dark "night" theme: black/graphite surfaces, steel greys, a restrained yellow accent.
   ========================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/static/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:dark;
  /* surfaces (elevation 0 → 4) */
  --bg:#07080a; --s1:#0d0e11; --s2:#121418; --s3:#181a1f; --s4:#1f2228;
  --line:#1f2227; --line-2:#2a2e35; --line-3:#383d46;
  /* ink */
  --t1:#eceef1; --t2:#a3a9b4; --t3:#6c727d; --t4:#4a4f58;
  /* accent: subtle yellow */
  --acc:#e8b931; --acc-hi:#f3cd55; --acc-ink:#15130c; --acc-soft:rgba(232,185,49,.10); --acc-line:rgba(232,185,49,.32);
  /* destino (validated categorical, dark surface) */
  --d-wa:#22a86f; --d-site:#4a8ff0; --d-direct:#a96ae0; --d-ind:#b98520; --d-sem:#5c616b;
  /* status */
  --ok:#22a86f; --warn:#d49a1f; --bad:#e5484d; --info:#4a8ff0;
  /* type */
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:13.5px; --fs-lg:15px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:28px;
  /* spacing (4px grid) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  /* radius */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;
  /* elevation */
  --sh-1:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -10px rgba(0,0,0,.7);
  --sh-3:0 24px 64px -12px rgba(0,0,0,.85),0 0 0 1px var(--line-2);
  --ease:cubic-bezier(.2,.7,.2,1);
  --sidebar:252px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;background:var(--bg);color:var(--t1);font:400 var(--fs-md)/1.5 var(--font);
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01","tnum" 0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(232,185,49,.28)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.92em}
.muted{color:var(--t3)} .soft{color:var(--t2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ------------------------------------------------------------------ layout */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--s1);
  border-right:1px solid var(--line);padding:var(--sp-4) var(--sp-3);overflow:hidden}
.side::before{content:"";position:absolute;inset:0 0 auto 0;height:220px;pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%,rgba(232,185,49,.06),transparent 60%)}
.brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-2) var(--sp-5)}
.brand img{width:34px;height:34px;flex:none}
.brand b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em}
.brand b span{color:var(--acc)}
.brand small{display:block;color:var(--t3);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:1px}
.side-scroll{flex:1;overflow-y:auto;margin:0 calc(var(--sp-3) * -1);padding:0 var(--sp-3)}
.nav-label{font-size:10.5px;font-weight:600;color:var(--t4);letter-spacing:.12em;text-transform:uppercase;
  padding:var(--sp-4) var(--sp-3) var(--sp-2);display:flex;align-items:center;justify-content:space-between}
.nav a{display:flex;align-items:center;gap:var(--sp-3);height:34px;padding:0 var(--sp-3);border-radius:var(--r-md);
  color:var(--t2);font-weight:500;position:relative;transition:background .15s,color .15s}
.nav a:hover{background:var(--s3);color:var(--t1)}
.nav a.on{background:var(--s3);color:var(--t1);box-shadow:inset 0 0 0 1px var(--line-2)}
.nav a.on svg.i{color:var(--acc)}
.nav a.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}
.nav .cnt{margin-left:auto;font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.nav .cnt.hot{color:var(--acc-ink);background:var(--acc);padding:0 6px;border-radius:var(--r-full);font-weight:650;line-height:17px}
.nav .cnt.bad{color:#fff;background:var(--bad);padding:0 6px;border-radius:var(--r-full);font-weight:650;line-height:17px}
.nav .live{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(34,168,111,.18);margin-left:auto;animation:pulse 1.8s infinite}
.nav .live.paused{background:var(--bad);box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.niche-nav a{height:30px;font-size:var(--fs-sm)}
.niche-nav .nd{width:6px;height:6px;border-radius:2px;background:var(--line-3);flex:none}
.niche-nav a.on .nd{background:var(--acc)}
.niche-nav .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-2) 0;margin-top:var(--sp-3);border-top:1px solid var(--line)}
.avatar{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:650;font-size:12px;
  background:linear-gradient(135deg,#2a2d34,#15171b);color:var(--acc);box-shadow:inset 0 0 0 1px var(--line-2)}
.side-foot .who{min-width:0;flex:1}
.side-foot .who b{display:block;font-size:12px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who small{color:var(--t3);font-size:11px}

.main{min-width:0;padding:var(--sp-6) var(--sp-8) var(--sp-10)}
.topbar{display:none}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6);flex-wrap:wrap}
.crumb{font-size:var(--fs-xs);color:var(--t3);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:6px;display:flex;gap:6px;align-items:center}
h1{margin:0;font-size:var(--fs-3xl);font-weight:680;letter-spacing:-.025em;line-height:1.15}
.page-head p{margin:6px 0 0;color:var(--t2);font-size:var(--fs-md)}
.actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
h2{margin:0;font-size:var(--fs-lg);font-weight:620;letter-spacing:-.01em}
h3{margin:0;font-size:var(--fs-md);font-weight:600}

/* ------------------------------------------------------------------ grid & cards */
.grid{display:grid;gap:var(--sp-4)}
.g-kpi{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.row{display:flex;align-items:center;gap:var(--sp-2)}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)}

.card{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);min-width:0}
.card-h{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.card-h h3{display:flex;align-items:center;gap:var(--sp-2)}
.card-h .sub{color:var(--t3);font-size:var(--fs-sm)}
.card-h .actions{margin-left:auto}
.card-b{padding:var(--sp-5)}
.card-b.tight{padding:var(--sp-2) 0}
.card.pad{padding:var(--sp-5)}

.kpi{padding:var(--sp-4) var(--sp-5);position:relative;overflow:hidden}
.kpi .lbl{display:flex;align-items:center;gap:var(--sp-2);color:var(--t2);font-size:var(--fs-sm);font-weight:500}
.kpi .lbl svg.i{width:15px;height:15px;color:var(--t3)}
.kpi .val{font-size:30px;font-weight:650;letter-spacing:-.03em;margin-top:var(--sp-2);font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .foot{margin-top:6px;font-size:var(--fs-xs);color:var(--t3)}
.kpi.accent{background:linear-gradient(160deg,rgba(232,185,49,.10),transparent 55%),linear-gradient(180deg,var(--s2),var(--s1));border-color:var(--acc-line)}
.kpi.accent .val{color:var(--acc-hi)}
.kpi .glyph{position:absolute;right:-8px;bottom:-12px;width:72px;height:72px;color:var(--t1);opacity:.035}

/* ------------------------------------------------------------------ buttons */
.btn{--h:34px;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--h);padding:0 var(--sp-3);
  border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--s3);color:var(--t1);font-weight:550;font-size:var(--fs-sm);
  cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .05s;box-shadow:var(--sh-1)}
.btn:hover{background:var(--s4);border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.inp:focus-visible,.sel:focus-visible,.chip:focus-visible{outline:2px solid var(--acc-line);outline-offset:1px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.pri{background:linear-gradient(180deg,var(--acc-hi),var(--acc));border-color:#c99a1c;color:var(--acc-ink);font-weight:650;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 18px -8px rgba(232,185,49,.55)}
.btn.pri:hover{background:linear-gradient(180deg,#f7d76d,var(--acc-hi))}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--t2)}
.btn.ghost:hover{background:var(--s3);color:var(--t1)}
.btn.danger{color:#ff8b8e;border-color:rgba(229,72,77,.35);background:rgba(229,72,77,.08)}
.btn.danger:hover{background:rgba(229,72,77,.16)}
.btn.sm{--h:28px;padding:0 10px;font-size:12px;border-radius:var(--r-sm)}
.btn.icon{width:var(--h);padding:0}
.btn.lg{--h:42px;padding:0 var(--sp-5);font-size:var(--fs-md)}
.btn.block{width:100%}
.btn .kbd{font-size:10.5px;color:var(--t3);border:1px solid var(--line-2);border-radius:4px;padding:0 4px}
.iconbtn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--t3);cursor:pointer;transition:.15s}
.iconbtn:hover{background:var(--s4);color:var(--t1)}
.iconbtn.on{color:var(--acc)}
.iconbtn.on svg.i{fill:var(--acc)}

/* ------------------------------------------------------------------ inputs */
.inp,.sel,.ta{height:34px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--s1);color:var(--t1);
  padding:0 var(--sp-3);font-size:var(--fs-sm);transition:border-color .15s,box-shadow .15s;min-width:0}
.inp::placeholder,.ta::placeholder{color:var(--t4)}
.inp:hover,.sel:hover{border-color:var(--line-3)}
.inp:focus,.sel:focus,.ta:focus{outline:none;border-color:var(--acc-line);box-shadow:0 0 0 3px rgba(232,185,49,.10)}
.sel{appearance:none;padding-right:30px;cursor:pointer;
  background:var(--s1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c727d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center/16px}
.ta{height:auto;min-height:96px;padding:var(--sp-3);line-height:1.5;resize:vertical;width:100%}
.inp.lg{height:42px;font-size:var(--fs-md);padding:0 var(--sp-4)}
.search{position:relative;display:flex;align-items:center}
.search svg.i{position:absolute;left:10px;color:var(--t3);pointer-events:none}
.search .inp{padding-left:32px;width:100%}
.field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--t2);font-weight:500}
.field .hint{font-size:var(--fs-xs);color:var(--t3);font-weight:400}
.inline-num{display:inline-flex;align-items:center;gap:6px;color:var(--t3);font-size:var(--fs-sm)}
.inline-num .inp{width:64px;text-align:center}
.switch{position:relative;width:32px;height:18px;flex:none;display:inline-block;cursor:pointer}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;border-radius:var(--r-full);background:var(--s4);box-shadow:inset 0 0 0 1px var(--line-3);transition:.2s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--t2);transition:.2s var(--ease)}
.switch input:checked+span{background:rgba(232,185,49,.22);box-shadow:inset 0 0 0 1px var(--acc-line)}
.switch input:checked+span::after{transform:translateX(14px);background:var(--acc)}
.chk{appearance:none;width:16px;height:16px;border-radius:4px;border:1px solid var(--line-3);background:var(--s1);cursor:pointer;display:inline-grid;place-items:center;margin:0;vertical-align:middle}
.chk:checked{background:var(--acc);border-color:var(--acc)}
.chk:checked::after{content:"";width:8px;height:4px;border:2px solid var(--acc-ink);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.chk:indeterminate{background:var(--acc);border-color:var(--acc)}
.chk:indeterminate::after{content:"";width:8px;height:2px;background:var(--acc-ink)}

/* segmented + chips */
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--s1);border:1px solid var(--line-2);border-radius:var(--r-md)}
.seg button{height:26px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:var(--t2);font-size:12px;font-weight:550;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg button:hover{color:var(--t1)}
.seg button.on{background:var(--s4);color:var(--t1);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line-3)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-full);font-size:11.5px;font-weight:550;
  background:var(--s3);color:var(--t2);border:1px solid var(--line-2);white-space:nowrap;cursor:default}
button.chip{cursor:pointer}
button.chip:hover{border-color:var(--line-3);color:var(--t1)}
.chip.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-hi)}
.chip .x{cursor:pointer;color:var(--t3);margin-right:-3px}
.chip .x:hover{color:var(--t1)}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:11px;font-weight:550;
  background:rgba(163,169,180,.08);color:var(--t2);border:1px solid var(--line-2);white-space:nowrap}

/* destino / status badges */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 7px;border-radius:var(--r-full);font-size:11.5px;font-weight:600;
  white-space:nowrap;border:1px solid;--c:var(--d-sem);color:color-mix(in srgb,var(--c) 70%,#fff);
  background:color-mix(in srgb,var(--c) 13%,transparent);border-color:color-mix(in srgb,var(--c) 32%,transparent)}
.badge svg.i{width:12px;height:12px;stroke-width:2.2}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--c)}
.badge.wa{--c:var(--d-wa)} .badge.site{--c:var(--d-site)} .badge.direct{--c:var(--d-direct)} .badge.ind{--c:var(--d-ind)} .badge.sem{--c:var(--d-sem)}
.badge.ok{--c:var(--ok)} .badge.warn{--c:var(--warn)} .badge.bad{--c:var(--bad)} .badge.info{--c:var(--info)} .badge.neutral{--c:#8a909a}
.badge.acc{--c:var(--acc)}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--c,var(--ok));animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,var(--ok)) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ------------------------------------------------------------------ toolbar / filters */
.toolbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line)}
.toolbar .search{flex:1 1 240px;max-width:340px}
.toolbar .count{color:var(--t3);font-size:var(--fs-sm);margin-left:auto;white-space:nowrap}
.bulkbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-2) var(--sp-4);background:linear-gradient(90deg,rgba(232,185,49,.09),rgba(232,185,49,.02));
  border-bottom:1px solid var(--acc-line);animation:slide .18s var(--ease)}
.bulkbar b{color:var(--acc-hi);font-weight:650;margin-right:var(--sp-2);font-size:var(--fs-sm)}
@keyframes slide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ table */
.tbl-wrap{overflow:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
.tbl th{position:sticky;top:0;z-index:1;background:var(--s2);text-align:left;font-weight:600;color:var(--t3);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:0 10px;height:38px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
.tbl th.sort{cursor:pointer}
.tbl th.sort:hover{color:var(--t1)}
.tbl th .ar{display:inline-block;width:10px;color:var(--acc);margin-left:2px}
.tbl td{padding:0 10px;height:54px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{transition:background .12s;cursor:pointer}
.tbl tbody tr:hover{background:rgba(255,255,255,.018)}
.tbl tbody tr.sel{background:rgba(232,185,49,.045)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .c-chk{width:40px;padding-left:var(--sp-4)}
.tbl .c-star{width:34px;padding:0}
.tbl .r{text-align:right}
.tbl .pname{font-weight:580;color:var(--t1);max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl .pdesc{color:var(--t3);font-size:12px;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.tbl .dom{color:var(--t2);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tbl .tags{display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;max-width:130px}
.dupcell{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);font-variant-numeric:tabular-nums;font-weight:600}
.dupbar{width:46px;height:4px;border-radius:2px;background:var(--s4);overflow:hidden}
.dupbar i{display:block;height:100%;background:linear-gradient(90deg,#8d6b14,var(--acc));border-radius:2px}
.pager{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);color:var(--t3);font-size:var(--fs-sm)}
.pager .spacer{flex:1}

/* list rows (inside cards) */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line);min-width:0}
.li:last-child{border-bottom:0}
.li.click{cursor:pointer;transition:background .12s}
.li.click:hover{background:rgba(255,255,255,.02)}
.li .main-t{min-width:0;flex:1}
.li .main-t b{display:block;font-weight:580;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .main-t small{display:block;color:var(--t3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--s4);color:var(--t2);font-size:11px;font-weight:650;flex:none}
.ico-tile{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--s4);color:var(--t2);box-shadow:inset 0 0 0 1px var(--line-2)}
.ico-tile.acc{background:var(--acc-soft);color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc-line)}
.ico-tile.bad{background:rgba(229,72,77,.1);color:#ff8b8e;box-shadow:inset 0 0 0 1px rgba(229,72,77,.3)}
.ico-tile.ok{background:rgba(34,168,111,.1);color:#4fd39a;box-shadow:inset 0 0 0 1px rgba(34,168,111,.3)}

/* ------------------------------------------------------------------ charts */
.chart{position:relative}
.chart svg{display:block;width:100%;overflow:visible}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .axis-t{fill:var(--t3);font-size:10.5px;font-family:var(--font)}
.chart .bar{fill:var(--s4);transition:fill .12s}
.chart .bar.has{fill:url(#barg)}
.chart .bar.hi{fill:var(--acc-hi)}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .xh{stroke:var(--line-3);stroke-dasharray:3 3}
.tip{position:absolute;pointer-events:none;z-index:5;background:var(--s4);border:1px solid var(--line-3);border-radius:var(--r-md);padding:7px 10px;
  font-size:12px;box-shadow:var(--sh-2);white-space:nowrap;transform:translate(-50%,calc(-100% - 10px));opacity:0;transition:opacity .1s}
.tip.on{opacity:1}
.tip b{font-variant-numeric:tabular-nums;font-size:13px}
.tip small{display:block;color:var(--t3);font-size:11px}
.split{display:flex;height:10px;border-radius:var(--r-full);overflow:hidden;gap:2px;background:var(--s1)}
.split i{display:block;height:100%}
.split i:first-child{border-radius:var(--r-full) 0 0 var(--r-full)} .split i:last-child{border-radius:0 var(--r-full) var(--r-full) 0}
.legend{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-4)}
.legend .lg{display:flex;align-items:center;gap:var(--sp-2);padding:6px 0;font-size:var(--fs-sm);color:var(--t2);border-bottom:1px dashed var(--line)}
.legend .lg:last-child{border-bottom:0}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
.legend .lg b{margin-left:auto;color:var(--t1);font-variant-numeric:tabular-nums;font-weight:600}
.legend .lg .pct{width:44px;text-align:right;color:var(--t3);font-variant-numeric:tabular-nums}
.spark{display:block;width:100%;height:44px}

/* ------------------------------------------------------------------ progress */
.prog{height:6px;border-radius:var(--r-full);background:var(--s4);overflow:hidden}
.prog i{display:block;height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,#b98a12,var(--acc-hi));transition:width .6s var(--ease);position:relative}
.prog i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shine 1.6s infinite}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ------------------------------------------------------------------ collector */
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,185,49,.10),transparent 65%);pointer-events:none}
.state-pill{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px;border-radius:var(--r-full);font-weight:650;font-size:12px;
  background:var(--s4);color:var(--t2);box-shadow:inset 0 0 0 1px var(--line-3)}
.state-pill.run{--c:var(--ok);background:rgba(34,168,111,.12);color:#4fd39a;box-shadow:inset 0 0 0 1px rgba(34,168,111,.35)}
.state-pill.bad{--c:var(--bad);background:rgba(229,72,77,.12);color:#ff8b8e;box-shadow:inset 0 0 0 1px rgba(229,72,77,.35)}
.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.stats-row > div{background:var(--s1);padding:var(--sp-3) var(--sp-5)}
.stats-row small{display:block;color:var(--t3);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.stats-row b{font-size:var(--fs-xl);font-weight:650;font-variant-numeric:tabular-nums}
.term{background:#060708;border:1px solid var(--line);border-radius:var(--r-md);font:12px/1.65 var(--mono);color:#b9bec7;padding:var(--sp-3) var(--sp-4);
  height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.term .ts{color:var(--t4)} .term .add{color:#4fd39a} .term .dis{color:#8a909a} .term .err{color:#ff8b8e} .term .hd{color:var(--acc-hi)} .term .snap{color:#7fb0f5}
.alert-box{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);border:1px solid rgba(229,72,77,.35);
  background:linear-gradient(90deg,rgba(229,72,77,.12),rgba(229,72,77,.03));margin-bottom:var(--sp-4)}
.alert-box .t{flex:1}
.alert-box b{display:block;color:#ffb3b5}
.alert-box p{margin:2px 0 0;color:var(--t2);font-size:var(--fs-sm)}
.niche-pick{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.niche-pick label{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 8px;border-radius:var(--r-md);border:1px solid var(--line-2);
  background:var(--s1);cursor:pointer;font-size:var(--fs-sm);color:var(--t2);user-select:none;transition:.15s}
.niche-pick label:hover{border-color:var(--line-3)}
.niche-pick label.on{border-color:var(--acc-line);background:var(--acc-soft);color:var(--t1)}
.niche-pick .ord{min-width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-size:10.5px;font-weight:700;background:var(--s4);color:var(--t3)}
.niche-pick label.on .ord{background:var(--acc);color:var(--acc-ink)}
.niche-pick small{color:var(--t3);font-size:11px}
.qitem{display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--sp-5);border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.qitem:last-child{border-bottom:0}
.qitem .n{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--s4);font-size:11px;font-weight:650;color:var(--t2)}

/* keywords */
.kw-tabs{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:var(--sp-1);margin-bottom:var(--sp-4);scrollbar-width:none}
.kw-tabs::-webkit-scrollbar{display:none}
.kw-row{display:grid;grid-template-columns:28px 34px minmax(0,1fr) 120px 110px 44px 64px;align-items:center;gap:var(--sp-3);padding:0 var(--sp-5);height:48px;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.kw-row:last-child{border-bottom:0}
.kw-row.head{height:36px;color:var(--t3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;background:var(--s2)}
.kw-row.off .kw{color:var(--t3);text-decoration:line-through;text-decoration-color:var(--t4)}
.kw-row .kw{font-weight:550;display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.kw-row .kw span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw-row .pos{color:var(--t3);font-variant-numeric:tabular-nums;font-size:12px;text-align:right}
.kw-row.drag{opacity:.4}
.kw-row.over{box-shadow:inset 0 2px 0 var(--acc)}
.handle{cursor:grab;color:var(--t4);display:grid;place-items:center}
.handle:hover{color:var(--t2)}
.mv{display:flex;flex-direction:column}
.mv button{height:14px;width:22px;border:0;background:none;color:var(--t4);cursor:pointer;padding:0;display:grid;place-items:center}
.mv button:hover{color:var(--acc)}
.mv svg.i{width:12px;height:12px}

/* monitored */
.mon-card{display:flex;flex-direction:column;cursor:pointer;transition:border-color .15s,transform .15s}
.mon-card:hover{border-color:var(--line-3);transform:translateY(-1px)}
.mon-card .top{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4) var(--sp-4) 0}
.mon-card .top .t{min-width:0;flex:1}
.mon-card .top b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-card .top small{color:var(--t3);font-size:12px}
.mon-card .big{display:flex;align-items:baseline;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4) 0}
.mon-card .big b{font-size:26px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mon-card .big span{color:var(--t3);font-size:12px}
.delta{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.delta.up{color:#4fd39a} .delta.down{color:#ff8b8e} .delta.flat{color:var(--t3)}
.mon-card .foot{display:flex;gap:var(--sp-2);align-items:center;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);margin-top:auto;color:var(--t3);font-size:11.5px}

/* day strip */
.days{display:flex;gap:var(--sp-2);overflow-x:auto;padding:2px 2px var(--sp-2);scrollbar-width:thin}
.day{flex:none;width:62px;padding:8px 0 9px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--s1);text-align:center;cursor:pointer;transition:.15s}
.day:hover{border-color:var(--line-3)}
.day small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);font-weight:600}
.day b{display:block;font-size:17px;font-weight:650;margin:1px 0}
.day i{display:block;font-style:normal;font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.day.has i{color:var(--acc)}
.day.on{background:var(--acc-soft);border-color:var(--acc-line)}
.day.on b{color:var(--acc-hi)}

/* ------------------------------------------------------------------ drawer & modal */
.scrim{position:fixed;inset:0;background:rgba(3,4,6,.62);backdrop-filter:blur(3px);z-index:40;opacity:0;transition:opacity .2s;pointer-events:none}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);z-index:41;background:var(--s1);border-left:1px solid var(--line-2);box-shadow:var(--sh-3);
  transform:translateX(102%);transition:transform .28s var(--ease);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-h{padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line);display:flex;gap:var(--sp-3);align-items:flex-start}
.drawer-h .t{flex:1;min-width:0}
.drawer-h h2{font-size:var(--fs-xl);font-weight:650;letter-spacing:-.015em;line-height:1.3}
.drawer-h .meta{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2);align-items:center}
.drawer-b{flex:1;overflow-y:auto;padding:var(--sp-5) var(--sp-6) var(--sp-8)}
.drawer-b section{margin-bottom:var(--sp-6)}
.sec-t{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);font-weight:650;margin-bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2)}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.kv > div{background:var(--s2);padding:var(--sp-3) var(--sp-4);min-width:0}
.kv small{display:block;color:var(--t3);font-size:11px;font-weight:550;margin-bottom:2px}
.kv span,.kv a{display:block;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv a{color:var(--acc-hi)}
.kv a:hover{text-decoration:underline}
.mon-toggle{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--s2)}
.mon-toggle.on{border-color:var(--acc-line);background:linear-gradient(90deg,rgba(232,185,49,.08),transparent)}
.mon-toggle .t{flex:1}
.mon-toggle b{display:block;font-size:var(--fs-sm)}
.mon-toggle small{color:var(--t3);font-size:12px}
.tag-edit{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--s1);min-height:38px}
.tag-edit input{border:0;background:none;outline:none;flex:1;min-width:100px;font-size:var(--fs-sm);height:24px}
.modal{position:fixed;left:50%;top:50%;z-index:42;width:min(720px,calc(100vw - 24px));max-height:calc(100vh - 48px);transform:translate(-50%,-48%) scale(.98);opacity:0;pointer-events:none;
  transition:.2s var(--ease);background:var(--s1);border-radius:var(--r-xl);box-shadow:var(--sh-3);display:flex;flex-direction:column}
.modal.on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.modal .card-b{overflow:auto}
.modal.sm{width:min(420px,calc(100vw - 24px))}

/* ------------------------------------------------------------------ feedback */
.toasts{position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:60;display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-end}
.toast{display:flex;align-items:center;gap:var(--sp-3);min-width:260px;max-width:380px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);
  background:var(--s3);border:1px solid var(--line-3);box-shadow:var(--sh-2);font-size:var(--fs-sm);animation:toastin .25s var(--ease)}
.toast .ti{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(34,168,111,.15);color:#4fd39a}
.toast.err .ti{background:rgba(229,72,77,.15);color:#ff8b8e}
.toast .ti svg.i{width:13px;height:13px;stroke-width:2.4}
.toast.out{animation:toastout .2s forwards}
@keyframes toastin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateY(6px)}}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp-10) var(--sp-6);color:var(--t2)}
.empty .em-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:var(--sp-4);color:var(--t3);
  background:radial-gradient(circle at 30% 20%,var(--s4),var(--s2));box-shadow:inset 0 0 0 1px var(--line-2),0 10px 24px -12px rgba(0,0,0,.8)}
.empty .em-ic svg.i{width:22px;height:22px}
.empty b{color:var(--t1);font-size:var(--fs-lg);font-weight:600}
.empty p{margin:6px 0 var(--sp-4);max-width:380px;font-size:var(--fs-sm);color:var(--t3)}
.empty.sm{padding:var(--sp-6) var(--sp-4)}
.empty.sm .em-ic{width:40px;height:40px;border-radius:11px;margin-bottom:var(--sp-3)}
.sk{position:relative;overflow:hidden;background:var(--s3);border-radius:var(--r-sm)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);animation:shine 1.3s infinite}
.sk.line{height:12px;margin:8px 0}
.sk.kpi{height:112px;border-radius:var(--r-lg)}
.sk.block{height:260px;border-radius:var(--r-lg)}
.tbl tr.skr td{height:58px;padding:6px var(--sp-5);cursor:default}
.tbl tr.skr .sk.line{margin:5px 0}

/* ------------------------------------------------------------------ auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:var(--sp-6);position:relative;overflow:hidden}
.auth::before{content:"";position:absolute;width:900px;height:900px;left:50%;top:-420px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(232,185,49,.09),transparent 60%);pointer-events:none}
.auth::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 65%)}
.auth-card{position:relative;z-index:1;width:min(400px,100%);padding:var(--sp-8);border-radius:var(--r-xl);background:linear-gradient(180deg,rgba(24,26,31,.92),rgba(13,14,17,.96));
  border:1px solid var(--line-2);box-shadow:var(--sh-3);backdrop-filter:blur(8px)}
.auth-logo{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:var(--sp-6)}
.auth-logo img{width:56px;height:56px;margin-bottom:var(--sp-4);filter:drop-shadow(0 10px 24px rgba(232,185,49,.18))}
.auth-logo h1{font-size:var(--fs-2xl)}
.auth-logo p{margin:6px 0 0;color:var(--t2);font-size:var(--fs-sm)}
.auth form{display:flex;flex-direction:column;gap:var(--sp-4)}
.auth .err{color:#ff8b8e;font-size:var(--fs-sm);min-height:18px;display:flex;gap:6px;align-items:center}
.auth .who{display:flex;align-items:center;gap:var(--sp-2);padding:6px 6px 6px 12px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line-2);font-size:var(--fs-sm)}
.auth .who span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth .foot{text-align:center;color:var(--t4);font-size:11.5px;margin-top:var(--sp-6)}
.meter{display:flex;gap:4px;margin-top:2px}
.meter i{flex:1;height:3px;border-radius:2px;background:var(--s4);transition:background .2s}
.meter.l1 i:nth-child(-n+1){background:var(--bad)} .meter.l2 i:nth-child(-n+2){background:var(--warn)}
.meter.l3 i:nth-child(-n+3){background:var(--acc)} .meter.l4 i{background:var(--ok)}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1280px){
  .g-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-21,.g-12{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1100px){ .g-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:280px;z-index:50;transform:translateX(-102%);transition:transform .25s var(--ease);box-shadow:var(--sh-3)}
  .side.open{transform:none}
  .topbar{display:flex;align-items:center;gap:var(--sp-3);position:sticky;top:0;z-index:30;height:56px;padding:0 var(--sp-4);
    background:rgba(7,8,10,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .topbar img{width:28px;height:28px}
  .topbar b{font-weight:650;font-size:14px} .topbar b span{color:var(--acc)}
  .main{padding:var(--sp-5) var(--sp-4) var(--sp-10)}
  h1{font-size:var(--fs-2xl)}
  .page-head{margin-bottom:var(--sp-5)}
  .g-2,.g-3{grid-template-columns:minmax(0,1fr)}
  .g-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .g-kpi > :first-child{grid-column:1/-1}
  .kpi .val{font-size:26px}
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar .search{max-width:none;flex-basis:100%}
  .toolbar .count{margin-left:0}
  .toolbar .sel{flex:1 1 40%}
  .tbl.resp tr.skr{display:block}
  .tbl.resp tr.skr td{display:block}
  /* table → cards */
  .tbl.resp thead{display:none}
  .tbl.resp,.tbl.resp tbody{display:block}
  .tbl.resp tr{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"chk name star" "chk meta dup";gap:4px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl.resp td{display:none;height:auto;padding:0;border:0}
  .tbl.resp td.c-chk{display:block;grid-area:chk;width:auto;padding:2px 0 0}
  .tbl.resp td.c-name{display:block;grid-area:name;min-width:0}
  .tbl.resp td.c-star{display:block;grid-area:star;width:auto}
  .tbl.resp td.c-meta{display:flex;grid-area:meta;gap:6px;align-items:center;flex-wrap:wrap}
  .tbl.resp td.c-dup{display:block;grid-area:dup}
  .tbl.resp .pname,.tbl.resp .pdesc{max-width:none}
  .tbl.resp .dupbar{display:none}
  .kw-row{grid-template-columns:22px minmax(0,1fr) 40px 44px;padding:0 var(--sp-4)}
  .kw-row .c-pos,.kw-row .c-last,.kw-row .c-res{display:none}
  .drawer-h,.drawer-b{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .toasts{left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);align-items:stretch}
  .toast{max-width:none}
  .hide-m{display:none !important}
  .card-h{padding:var(--sp-3) var(--sp-4)}
  .card-b{padding:var(--sp-4)}
  .li{padding:var(--sp-3) var(--sp-4)}
}
@media (min-width:901px){ .show-m{display:none !important} .tbl.resp td.c-meta{display:none} .tbl.resp th.c-meta{display:none} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }