/* ---------- theme tokens (default = Clicky classic) ---------- */
:root{
  --bg:#f2f3f5;--card:#fff;--ink:#2b2f36;--mute:#8a93a0;--line:#e9ecf0;--hover:#f6f9fd;--th:#7c8594;
  --accent:#4a90d9;--accent-ink:#fff;--link:#2a7ab9;--grad:var(--accent);--tab-on:#7ec0ff;
  --nav1:#34495e;--nav2:#34495e;--nav-ink:#fff;--hdr-field:#ffffff1c;--hdr-line:#ffffff30;--hdr-option:#222;
  --chip:#e8f1fb;--input-bg:#fff;--input-line:#d5dae1;--sess-bg:#f8fafc;
  --live-bg:linear-gradient(135deg,#3d566e,#2c3e50);--live-ink:#fff;--live-sub:#c9d6e2;--live-page:#9fd3ff;
  --c1:#4a90d9;--c2:#27ae60;--c3:#f39c12;--c4:#8e44ad;--c5:#e74c3c;--c6:#16a085;
  --ok:#22a559;--bad:#e5484d;--warn:#f59e0b;--radius:10px;--shadow:0 1px 3px rgba(20,30,50,.08);--fs:14px;
}
[data-theme=light]{--bg:#f5f7fb;--link:#2563eb;--accent:#2563eb;--tab-on:#2563eb;--nav1:#fff;--nav2:#fff;--nav-ink:#1f2937;--hdr-field:#f1f5f9;--hdr-line:#dbe2ec;--chip:#e8efff;--live-bg:linear-gradient(135deg,#2563eb,#1e40af);--c1:#2563eb;--c2:#16a34a;--c3:#f59e0b;--c4:#9333ea;--c5:#ef4444;--c6:#0891b2}
[data-theme=dark]{--bg:#0d1017;--card:#161b26;--ink:#e6e9f2;--mute:#8e98ab;--line:#262d3d;--hover:#1b2232;--th:#8e98ab;--accent:#5aa9ff;--accent-ink:#06121f;--link:#7dbaff;--tab-on:#2b5f9e;
  --nav1:#0a0d13;--nav2:#0a0d13;--hdr-field:#ffffff14;--hdr-line:#ffffff24;--hdr-option:#222;--chip:#232b3c;--input-bg:#10141d;--input-line:#2d3649;--sess-bg:#12171f;
  --live-bg:linear-gradient(135deg,#17233d,#0f1830);--shadow:0 1px 3px rgba(0,0,0,.4);--c1:#5aa9ff;--c2:#34d399;--c3:#fbbf24;--c4:#c084fc;--c5:#f87171;--c6:#2dd4bf}
[data-theme=violet]{--bg:#f3f4fb;--link:#5b3fd1;--accent:#7c3aed;--grad:linear-gradient(135deg,#7c3aed,#06b6d4);--tab-on:#7c3aed;--nav1:#1e1b4b;--nav2:#4c1d95;--chip:#efeafd;--live-bg:radial-gradient(500px 220px at 100% 0,#06b6d455,transparent),linear-gradient(135deg,#1e1b4b,#3b2a8c);--c1:#7c3aed;--c2:#22c55e;--c3:#f59e0b;--c4:#06b6d4;--c5:#ec4899;--c6:#ef4444}
[data-theme=emerald]{--bg:#f1f6f4;--link:#047857;--accent:#10b981;--tab-on:#10b981;--nav1:#064e3b;--nav2:#065f46;--chip:#dcfce7;--live-bg:linear-gradient(135deg,#065f46,#064e3b);--live-page:#a7f3d0;--live-sub:#bbf7d0}
[data-theme=ocean]{--bg:#f0f6fa;--link:#0369a1;--accent:#0ea5e9;--tab-on:#0ea5e9;--nav1:#0c4a6e;--nav2:#075985;--chip:#e0f2fe;--live-bg:linear-gradient(135deg,#075985,#0c4a6e);--live-page:#bae6fd}
[data-theme=sunset]{--bg:#faf5f1;--link:#c2410c;--accent:#f97316;--tab-on:#f97316;--nav1:#7c2d12;--nav2:#9a3412;--chip:#ffedd5;--live-bg:linear-gradient(135deg,#9a3412,#7c2d12);--live-page:#fed7aa;--live-sub:#fed7aa}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);font:var(--fs)/1.5 Inter,"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none;cursor:pointer}a:hover{text-decoration:underline}
small{display:block;color:var(--mute);font-size:.82em;line-height:1.35;margin-top:1px}
b{font-weight:650}
button{font:inherit;font-size:.93em;cursor:pointer;border:0;border-radius:7px;padding:8px 15px;background:var(--grad);color:var(--accent-ink);font-weight:600;transition:filter .15s}
button:hover{filter:brightness(1.08)}button[disabled]{opacity:.45;cursor:default}
button.ghost{background:var(--chip);color:var(--ink)}button.danger{background:#fde8e8;color:#b42318}
button.sm{padding:5px 11px;font-size:.85em}
button.act{background:var(--card);color:var(--link);border:1px solid var(--line);padding:3px 10px;font-weight:600}button.act:hover{background:var(--hover);filter:none}
input,select{font:inherit;padding:8px 11px;border:1px solid var(--input-line);border-radius:7px;background:var(--input-bg);color:var(--ink);outline:none}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.tnum,td.n,th.n,.kpi .v,.big{font-variant-numeric:tabular-nums}

/* auth */
.authwrap{min-height:100vh;display:none;align-items:center;justify-content:center;padding:20px;background:var(--nav1)}
.authcard{width:100%;max-width:400px;background:var(--card);border-radius:14px;padding:30px;box-shadow:0 20px 60px #0005}
.authcard h1{margin:12px 0 4px;font-size:1.5em}.authcard p{margin:0 0 18px;color:var(--mute)}
.authcard input{width:100%;margin-bottom:11px}
.seg{display:flex;background:var(--chip);border-radius:9px;padding:3px;margin:16px 0}
.seg a{flex:1;text-align:center;padding:7px;border-radius:7px;color:var(--mute);font-weight:600}.seg a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #0002}
.msg{padding:9px 12px;border-radius:8px;margin-bottom:12px;font-size:.9em}.msg.err{background:#fde8e8;color:#9b1c1c}.msg.ok{background:#dcfce7;color:#166534}
.logo{font-weight:800;font-size:1.3em;display:flex;align-items:center;gap:9px;letter-spacing:-.4px}
.logo i{width:28px;height:28px;border-radius:50%;background:var(--accent);display:inline-block;position:relative}
.logo i:after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--card)}

/* header */
header{position:sticky;top:0;z-index:30;background:linear-gradient(100deg,var(--nav1),var(--nav2));color:var(--nav-ink);min-height:56px;display:flex;align-items:center;gap:10px;padding:8px 22px;flex-wrap:wrap;border-bottom:1px solid var(--hdr-line)}
header select,header .pill{background:var(--hdr-field);color:var(--nav-ink);border:1px solid var(--hdr-line);border-radius:7px;padding:7px 11px;cursor:pointer;font-weight:500}
header select option,header select optgroup{color:var(--hdr-option)}
header .sp{flex:1}
.livepill{display:flex;align-items:center;gap:10px;background:var(--hdr-field);border:1px solid var(--hdr-line);border-radius:999px;padding:5px 16px 5px 12px}
.livepill .big{font-size:1.3em;font-weight:800;line-height:1}
.livepill .lbl{font-size:.68em;text-transform:uppercase;letter-spacing:.8px;opacity:.7;line-height:1.1}
.livepill .stats{font-size:.82em;opacity:.85;border-left:1px solid var(--hdr-line);padding-left:12px;line-height:1.3}
.ld{width:10px;height:10px;border-radius:50%;background:#34d27b;position:relative;flex:none}
.ld:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #34d27b;animation:ring 1.6s infinite}
@keyframes ring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.userchip{display:flex;align-items:center;gap:8px;background:var(--hdr-field);border-radius:999px;padding:3px 4px 3px 13px;font-weight:500}
.userchip em{font-style:normal;font-size:.66em;text-transform:uppercase;letter-spacing:.6px;background:var(--hdr-line);border-radius:999px;padding:2px 8px}
.userchip button{background:var(--hdr-line);color:var(--nav-ink);padding:4px 11px;font-size:.82em}
.iconbtn{background:var(--hdr-field)!important;color:var(--nav-ink)!important;border:1px solid var(--hdr-line);padding:6px 11px!important}

.wrap{max-width:1360px;margin:16px auto;padding:0 14px}
.panel{background:var(--card);border-radius:var(--radius);padding:18px 22px 22px;box-shadow:var(--shadow)}
nav.tabs{display:flex;flex-wrap:wrap;gap:2px 6px;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--line)}
nav.tabs a{color:var(--mute);font-weight:650;padding:6px 12px;border-radius:7px;position:relative;font-size:.98em}
nav.tabs a:hover{background:var(--hover);text-decoration:none;color:var(--ink)}
nav.tabs a.on{background:var(--tab-on);color:#fff}
nav.tabs a .bd{background:var(--bad);color:#fff;border-radius:999px;font-size:.7em;padding:1px 6px;margin-left:5px}
.subtabs{display:flex;gap:4px;margin:0 0 16px;flex-wrap:wrap}
.subtabs a{color:var(--mute);font-weight:650;padding:5px 12px;border-radius:999px;font-size:.93em}
.subtabs a.on{color:var(--link);background:var(--chip)}.subtabs a:hover{text-decoration:none;color:var(--ink)}

.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.grid>*{min-width:0}
@media(max-width:960px){.grid,.grid[style]{grid-template-columns:minmax(0,1fr)!important}.panel{padding:14px}}
.w{border:1px solid var(--line);border-radius:var(--radius);padding:4px 16px 12px;margin-bottom:16px;min-width:0;background:var(--card)}
.w h2,.h2{margin:10px 0 6px;font-size:1.18em;font-weight:700;letter-spacing:-.3px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.w h2{border-bottom:1px solid var(--line);padding-bottom:9px}
.w h2 span{font-size:.72em;font-weight:500;color:var(--mute);letter-spacing:0}
.w h2 span a{margin-left:10px}.w h2 span a.on{color:var(--ink);font-weight:700}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
td,th{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
tr:last-child>td{border-bottom:0}
tr:hover>td{background:var(--hover)}
th{color:var(--th);font-weight:650;font-size:.76em;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;padding-top:7px;padding-bottom:7px}
td.n,th.n{text-align:right;white-space:nowrap}
th.sortable{cursor:pointer;user-select:none}th.sortable i{font-style:normal;margin-left:5px;opacity:.35}th.sortable.on{color:var(--link)}th.sortable.on i{opacity:1}
th.sortable:hover{color:var(--ink)}
td .k{overflow:hidden;text-overflow:ellipsis;max-width:380px;display:inline-block;white-space:nowrap;vertical-align:bottom}
.flag{width:16px;height:12px;margin-right:8px;vertical-align:-1px;border-radius:2px}
.pct{color:var(--mute);font-size:.72em;margin-left:6px;opacity:.8}
.stat td:last-child{font-weight:700}
.empty{color:var(--mute);padding:16px 4px}
.bar{height:3px;background:var(--chip);border-radius:3px;margin-top:5px}.bar i{display:block;height:3px;background:var(--accent);border-radius:3px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
.dur{display:inline-block;min-width:44px;font-weight:650}
.sess td{padding:6px 8px 6px 28px;font-size:.92em;color:var(--mute);background:var(--sess-bg)}
pre.code{background:#0f172a;color:#a5f3fc;padding:14px;border-radius:9px;overflow:auto;font-size:.9em}
.form{display:grid;grid-template-columns:160px minmax(0,1fr);gap:12px;max-width:640px;align-items:center}
@media(max-width:600px){.form{grid-template-columns:1fr}}
.dd{position:relative}.dd .menu{position:absolute;top:42px;left:0;background:#2b3a4b;border-radius:9px;min-width:190px;z-index:40;padding:6px 0;box-shadow:0 12px 30px #0006}
.dd .menu a{display:block;color:#fff;padding:7px 16px}.dd .menu a:hover{background:#ffffff1c;text-decoration:none}
.dd .menu hr{border:0;border-top:1px solid #ffffff2a;margin:5px 0}
svg text{font:10.5px Inter,"Segoe UI",sans-serif;fill:var(--mute)}
.new{animation:fl 2s}@keyframes fl{from{background:var(--chip)}to{background:transparent}}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{border-radius:var(--radius);padding:12px 15px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--k,var(--accent))}
.kpi .l{color:var(--mute);font-size:.74em;text-transform:uppercase;letter-spacing:.6px;font-weight:650}
.kpi .v{font-size:1.85em;font-weight:800;letter-spacing:-.8px;line-height:1.2;margin-top:2px}
.kpi .s{font-size:.82em;color:var(--mute)}

/* live card */
.livecard{border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;color:var(--live-ink);background:var(--live-bg)}
.livehead{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.livehead .n{font-size:3.2em;font-weight:800;line-height:1;letter-spacing:-2px}
.livehead .t{font-size:.9em;opacity:.85}
.lrow{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;cursor:pointer;background:#ffffff12;margin-bottom:5px}
.lrow:hover{background:#ffffff22}
.lrow .lmain{min-width:0;flex:1.1}.lrow .lmain b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lrow .lmain small{color:var(--live-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lpage{flex:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92em;color:var(--live-page)}
.lrow .lmeta{font-size:.8em;color:var(--live-sub);text-align:right;white-space:nowrap}
.lrow .flag{margin-right:0}
.live-empty{opacity:.75;padding:6px 2px}

/* overview / groups */
.chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.chip{padding:5px 12px;border-radius:999px;background:var(--chip);color:var(--ink);font-weight:600;font-size:.9em;cursor:pointer;user-select:none}
.chip.on{background:var(--accent);color:var(--accent-ink)}
.gcard{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;background:var(--card)}
.ghead{display:flex;align-items:center;gap:20px;padding:12px 18px;flex-wrap:wrap;background:var(--hover);border-bottom:1px solid var(--line)}
.ghead .gname{font-size:1.3em;font-weight:800;letter-spacing:-.4px}
.ghead .gstat{font-size:.82em;color:var(--mute)}.ghead .gstat b{display:block;font-size:1.25em;color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-size:.82em;font-weight:700;padding:2px 10px;background:#dcfce7;color:#166534}
.badge.off{background:var(--chip);color:var(--mute)}
.st-pending{background:#fef3c7;color:#92400e}.st-approved{background:#dcfce7;color:#166534}.st-rejected{background:#fde8e8;color:#991b1b}.st-admin{background:#e8e4fb;color:#4c2fb0}
.badge .ld{width:7px;height:7px}.badge .ld:after{inset:-3px;border-width:1.5px}
.sitelink{font-weight:700;font-size:1.05em}
.actions a{margin-right:12px;white-space:nowrap}

.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.toolbar input[type=number]{width:78px}.toolbar input:not([type]),.toolbar input[type=text]{min-width:240px}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:12px;color:var(--mute)}

/* modal + toast */
.modal{position:fixed;inset:0;background:#10102a88;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:6vh 14px;overflow:auto}
.modal .box{background:var(--card);color:var(--ink);border-radius:14px;padding:24px;max-width:640px;width:100%;box-shadow:0 20px 60px #0006}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#1f2937;color:#fff;padding:10px 20px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:80}
#toast.show{opacity:1;transform:translateX(-50%)}
.ucard{display:flex;align-items:center;gap:14px;border:1px solid #fde68a;background:#fffbeb;color:#3b3b3b;border-radius:10px;padding:11px 16px;margin-bottom:10px;flex-wrap:wrap}
.ucard .grow{flex:1;min-width:180px}.ucard small{color:#7a6f4d}

/* theme picker */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:12px 0 18px}
.tcard{border:2px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;background:var(--card)}
.tcard.on{border-color:var(--accent)}
.tcard .sw{height:34px;border-radius:6px;display:flex;overflow:hidden;margin-bottom:6px}.tcard .sw i{flex:1}
.tcard b{font-size:.9em}
.trow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.trow input[type=color]{width:48px;height:36px;padding:2px;cursor:pointer}

/* live indicators */
.lv{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:9px;vertical-align:1px;box-shadow:0 0 7px var(--ok);animation:blink 1.1s ease-in-out infinite}
.lv.off{background:transparent;box-shadow:none;animation:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.bigstat td{padding:11px 8px}.bigstat td:last-child{font-size:1.25em;font-weight:750}
.livepill{cursor:pointer;transition:filter .15s}.livepill:hover{filter:brightness(1.15)}
.plus{display:inline-block;margin-left:7px;background:var(--ok);color:#fff;border-radius:999px;font-size:.74em;padding:1px 8px;font-weight:700;animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}