/* ============================================================
   VC PANEL — style.css
   Renk temaları: --accent / --accent-rgb, [data-theme] ile değişir.
   Durum renkleri (ok/warn/bad) HER ZAMAN sabittir (semantik anlam
   taşıdıkları için temadan bağımsız kalırlar).
   ============================================================ */

:root{
  --bg:#000;--card:rgba(8,8,8,.98);--surface:#0c0c0c;--surface-hover:#111;
  --border:#151515;--border-light:#1c1c1c;--text:#eee;--muted:#666;--dim:#444;
  --ok:#00ff88;--warn:#ffaa00;--bad:#ff4444;--info:#00aaff;

  /* Varsayılan tema: Yeşil */
  --accent:#00ff88;--accent-rgb:0,255,136;
}
:root[data-theme="green"]  { --accent:#00ff88; --accent-rgb:0,255,136; }
:root[data-theme="blue"]   { --accent:#00aaff; --accent-rgb:0,170,255; }
:root[data-theme="purple"] { --accent:#a855f7; --accent-rgb:168,85,247; }
:root[data-theme="orange"] { --accent:#ff8a00; --accent-rgb:255,138,0; }
:root[data-theme="pink"]   { --accent:#ff2d93; --accent-rgb:255,45,147; }

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
::selection{background:rgba(var(--accent-rgb),.3);color:#fff}
.dot-grid{position:fixed;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);background-size:24px 24px;z-index:-2;pointer-events:none}
.glow{position:fixed;inset:0;background:radial-gradient(ellipse at top center,rgba(var(--accent-rgb),.06),transparent 60%);z-index:-1;pointer-events:none;transition:background .4s}
code{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);background:var(--surface);padding:3px 7px;border-radius:5px;border:1px solid var(--border)}

.brand-gradient{background:linear-gradient(135deg,#fff 20%,var(--accent) 120%);-webkit-background-clip:text;background-clip:text;color:transparent;transition:background .4s}

/* LOGIN */
#login{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.login-card{width:min(380px,100%);background:var(--card);border:1px solid var(--border);border-radius:20px;padding:44px 34px;text-align:center;animation:fadeUp .6s ease;position:relative}
.login-icon{width:60px;height:60px;margin:0 auto 20px;border-radius:16px;background:var(--surface);border:1px solid rgba(var(--accent-rgb),.35);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--accent);box-shadow:0 0 24px rgba(var(--accent-rgb),.12);transition:.4s}
.login-card h1{font-size:22px;font-weight:800;margin-bottom:4px}
.login-card p{font-size:13px;color:var(--muted);margin-bottom:26px}
.login-foot{position:absolute;bottom:14px;left:0;right:0;font-size:10px;color:var(--dim);letter-spacing:.5px}
.inp{width:100%;padding:13px 16px;background:var(--surface);border:1px solid var(--border);border-radius:11px;color:var(--text);font-size:14px;outline:none;transition:border .2s;font-family:'Inter'}
.inp:focus{border-color:rgba(var(--accent-rgb),.55)}
.inp:disabled{opacity:.45;cursor:not-allowed}
.login-card .inp{margin-bottom:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:all .25s;font-family:'Inter'}
.btn:hover{border-color:#2a2a2a;background:var(--surface-hover)}
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn.pri{background:#fff;color:#000;border-color:#fff;font-weight:700}
.btn.pri:hover{background:#ddd;border-color:#ddd}
.btn.bad{color:var(--bad);border-color:rgba(255,68,68,.25)}
.btn.bad:hover{background:rgba(255,68,68,.08)}
.btn.ok{color:var(--ok);border-color:rgba(0,255,136,.25)}
.btn.ok:hover{background:rgba(0,255,136,.08)}
.btn.warnb{color:var(--warn);border-color:rgba(255,170,0,.25)}
.btn.warnb:hover{background:rgba(255,170,0,.08)}
.btn.sm{padding:7px 11px;font-size:12px}
.w100{width:100%;justify-content:center;padding:13px}
.login-err{color:var(--bad);font-size:12px;margin:8px 0;display:none}
.hint{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}

/* NAV */
.top-nav{position:fixed;top:0;left:0;right:0;height:64px;background:rgba(0,0,0,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 32px;z-index:1000;gap:14px}
.nav-left{display:flex;align-items:center;gap:36px;min-width:0}
.brand{font-size:17px;font-weight:800;letter-spacing:.5px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;min-width:0}
.brand-icon{width:32px;height:32px;background:var(--surface);border:1px solid rgba(var(--accent-rgb),.35);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.14);flex-shrink:0;transition:.4s}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-text small{font-size:9px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;gap:6px}
.nav-link{display:flex;align-items:center;gap:8px;padding:8px 15px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;transition:all .25s;border:1px solid transparent;cursor:pointer;background:none;font-family:'Inter'}
.nav-link:hover{color:var(--text);background:var(--surface-hover);border-color:var(--border)}
.nav-link.active{color:#fff;background:var(--surface);border-color:rgba(var(--accent-rgb),.3)}
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--surface)}
.nav-pill.ok{color:var(--ok);border-color:rgba(0,255,136,.2)}
.nav-pill.bad{color:var(--bad);border-color:rgba(255,68,68,.25);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,68,68,.3)}50%{box-shadow:0 0 0 6px rgba(255,68,68,0)}}

/* THEME PICKER DOTS */
.theme-dots{display:flex;align-items:center;gap:8px}
.theme-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;position:relative;transition:.2s;flex-shrink:0}
.theme-dot:hover{transform:scale(1.12)}
.theme-dot.active{border-color:#fff;box-shadow:0 0 0 2px #000,0 0 0 3px currentColor}
.theme-dots.lg{gap:16px;flex-wrap:wrap}
.theme-dots.lg .theme-swatch{display:flex;flex-direction:column;align-items:center;gap:8px}
.theme-dots.lg .theme-dot{width:36px;height:36px}
.theme-dots.lg .theme-swatch span{font-size:11px;color:var(--muted);font-weight:500}
.theme-dots.lg .theme-swatch.is-active span{color:var(--text)}

/* MAIN */
.main{padding:96px 32px 40px;max-width:1400px;margin:auto}
.page-head{margin-bottom:28px}
.page-title{font-size:26px;font-weight:800;letter-spacing:-.5px}
.page-sub{font-size:13px;color:var(--muted);margin-top:4px}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:22px;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.stat::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.35),transparent);opacity:0;transition:.3s}
.stat:hover{border-color:var(--border-light);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.5)}
.stat:hover::after{opacity:1}
.stat.ok{border-top:2px solid var(--ok)}.stat.warn{border-top:2px solid var(--warn)}.stat.bad{border-top:2px solid var(--bad)}.stat.info{border-top:2px solid var(--info)}.stat.neu{border-top:2px solid var(--dim)}
.stat-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.stat-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);font-size:15px;flex-shrink:0}
.stat.ok .stat-ic{color:var(--ok)}.stat.warn .stat-ic{color:var(--warn)}.stat.bad .stat-ic{color:var(--bad)}.stat.info .stat-ic{color:var(--info)}.stat.neu .stat-ic{color:var(--muted)}
.stat-badge{font-size:10px;padding:4px 10px;border-radius:99px;font-weight:600;background:var(--surface);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.stat.ok .stat-badge{color:var(--ok)}.stat.warn .stat-badge{color:var(--warn)}.stat.bad .stat-badge{color:var(--bad)}.stat.info .stat-badge{color:var(--info)}
.stat-val{font-size:30px;font-weight:800;line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums}
.stat-lab{font-size:12px;color:var(--muted);font-weight:500}

/* GRID / CARDS */
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:968px){.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:15px;overflow:hidden;transition:border .3s}
.card:hover{border-color:var(--border-light)}
.card-h{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card-t{font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px}
.card-t i{color:var(--muted);font-size:13px}
.card-b{padding:20px 22px}
.list-col{display:flex;flex-direction:column;gap:8px}
.li-row{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-radius:11px;background:var(--surface);border:1px solid var(--border);transition:.25s;gap:10px}
.li-row:hover{border-color:var(--border-light);background:var(--surface-hover)}
.li-info{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;min-width:0}
.li-ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;background:rgba(255,255,255,.05);flex-shrink:0}

/* TABLE */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:13px 14px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:13px 14px;font-size:12px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr{transition:background .2s}
tbody tr:hover{background:rgba(255,255,255,.02)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:7px;font-size:11px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.b-ok{background:rgba(0,255,136,.08);color:var(--ok);border-color:rgba(0,255,136,.18)}
.b-info{background:rgba(0,170,255,.08);color:var(--info);border-color:rgba(0,170,255,.18)}
.b-bad{background:rgba(255,68,68,.08);color:var(--bad);border-color:rgba(255,68,68,.18)}
.b-warn{background:rgba(255,170,0,.08);color:var(--warn);border-color:rgba(255,170,0,.18)}
.b-dim{background:rgba(255,255,255,.04);color:var(--muted);border-color:var(--border)}
.key-cell{font-family:ui-monospace,monospace;font-size:11px;font-weight:700;color:#fff;cursor:pointer}
.key-cell:hover{color:var(--accent)}
.key-note{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:3px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ellip{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.empty{text-align:center;padding:44px;color:var(--muted);font-size:13px}
.empty i{font-size:28px;display:block;margin-bottom:10px;opacity:.4}
@media(max-width:640px){ .hide-sm{display:none} }

/* action buttons cell — sade tutulur: Detay + Kebab (menü) */
.row-actions{display:flex;gap:6px;flex-wrap:nowrap}

/* TOOLBAR */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .inp{flex:1;min-width:180px}
select.inp{width:auto}

/* FORM GRID */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;align-items:end}
.fgrid label{display:flex;flex-direction:column}
.fgrid label span{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:500}
.fgrid .inp{font-family:'Inter'}
.fgrid .mono{font-family:ui-monospace,monospace;letter-spacing:.4px}

/* ALERT */
.alert{display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:12px;margin-bottom:20px;font-size:13px;font-weight:600;border:1px solid;background:rgba(255,68,68,.07);color:var(--bad);border-color:rgba(255,68,68,.2);animation:fadeUp .4s}

/* VIEWS */
.view{display:none}
.view.on{display:block;animation:fadeUp .4s}

/* MODAL */
.mb{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:2000;padding:16px}
.mb.on{display:flex}
.mbox{background:var(--card);border:1px solid var(--border-light);border-radius:18px;padding:28px;width:min(480px,100%);max-height:86vh;overflow:auto;animation:fadeUp .3s}
.mbox h3{font-size:16px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.mrow{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border-radius:10px;background:var(--surface);border:1px solid var(--border);margin-bottom:8px;font-size:12px;gap:10px}
.mfoot{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.mbox .inp{margin-bottom:10px}

/* Kebab eylem menüsü satırları */
.asheet-btn{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:11px;background:var(--surface);border:1px solid var(--border);margin-bottom:8px;font-size:13px;font-weight:600;font-family:'Inter';color:var(--text);cursor:pointer;transition:.2s;text-align:left}
.asheet-btn:hover{background:var(--surface-hover);border-color:var(--border-light)}
.asheet-btn i{width:18px;text-align:center;color:var(--muted)}
.asheet-btn.warnb{color:var(--warn)}.asheet-btn.warnb i{color:var(--warn)}
.asheet-btn.ok{color:var(--ok)}.asheet-btn.ok i{color:var(--ok)}
.asheet-btn.bad{color:var(--bad)}.asheet-btn.bad i{color:var(--bad)}

/* TOAST */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);background:#0c0c0c;border:1px solid var(--border-light);padding:12px 24px;border-radius:12px;font-size:13px;font-weight:600;opacity:0;transition:.35s;z-index:3000;box-shadow:0 12px 40px rgba(0,0,0,.6);max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%)}

/* TOGGLE */
.tgl{position:relative;width:44px;height:24px;display:inline-block;flex-shrink:0}
.tgl input{opacity:0;width:0;height:0}
.tgl .sli{position:absolute;cursor:pointer;inset:0;background:var(--surface);border:1px solid var(--border);border-radius:24px;transition:.3s}
.tgl .sli::before{content:'';position:absolute;height:16px;width:16px;left:3px;top:3px;background:var(--muted);border-radius:50%;transition:.3s}
.tgl input:checked + .sli{background:rgba(255,68,68,.18);border-color:rgba(255,68,68,.4)}
.tgl input:checked + .sli::before{transform:translateX(20px);background:var(--bad)}
.tgl.green input:checked + .sli{background:rgba(0,255,136,.14);border-color:rgba(0,255,136,.35)}
.tgl.green input:checked + .sli::before{background:var(--ok)}

/* ANIMS */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.anim{animation:fadeUp .5s ease both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}

/* MOBILE */
.mnav{display:none;position:fixed;bottom:0;left:0;right:0;height:64px;background:rgba(0,0,0,.95);backdrop-filter:blur(20px);border-top:1px solid var(--border);justify-content:space-around;align-items:center;z-index:1000}
.mnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);text-decoration:none;font-size:10px;background:none;border:0;cursor:pointer;font-family:'Inter'}
.mnav a i{font-size:17px}
.mnav a.active,.mnav a:hover{color:var(--accent)}
@media(max-width:820px){
    .top-nav{padding:0 16px}.nav-links{display:none}
    .main{padding:84px 16px 96px}.stats{grid-template-columns:repeat(2,1fr)}
    .mnav{display:flex}.nav-pill span{display:none}
    .brand-text small{display:none}
    #toast{bottom:82px}
}
@media(max-width:420px){
    .theme-dots#themeDotsNav{display:none} /* mobilde tema seçimi Ayarlar sayfasında */
}


/* ============================================================
   VC PANEL — FULL THEME SYSTEM v2
   Each theme changes the complete visual language, not only accent.
   ============================================================ */
:root{
  --font-ui:'Inter',sans-serif;
  --bg:#020604;
  --bg-2:#07100b;
  --card:rgba(7,14,10,.92);
  --card-solid:#07100b;
  --surface:#0b1710;
  --surface-hover:#102219;
  --border:rgba(86,255,164,.13);
  --border-light:rgba(86,255,164,.25);
  --text:#effff5;
  --muted:#7f9a8a;
  --dim:#496052;
  --accent:#00ff88;
  --accent-rgb:0,255,136;
  --accent-2:#6affb3;
  --accent-soft:rgba(0,255,136,.10);
  --accent-line:rgba(0,255,136,.28);
  --nav-bg:rgba(2,8,5,.78);
  --input-bg:rgba(5,15,9,.82);
  --card-radius:16px;
  --control-radius:11px;
  --shadow-card:0 18px 55px rgba(0,0,0,.32),0 0 0 1px rgba(0,255,136,.015);
  --shadow-hover:0 22px 65px rgba(0,0,0,.42),0 0 32px rgba(var(--accent-rgb),.07);
  --page-glow:radial-gradient(ellipse 75% 45% at 50% 0%,rgba(var(--accent-rgb),.13),transparent 70%);
  --grid-dot:rgba(255,255,255,.045);
  --card-top:linear-gradient(135deg,rgba(255,255,255,.025),transparent 45%);
  --button-main:linear-gradient(135deg,var(--accent),var(--accent-2));
  --button-text:#00140a;
}

:root[data-theme="green"]{
  --font-ui:'Inter',sans-serif;
  --bg:#020604;--bg-2:#07100b;
  --card:rgba(7,14,10,.92);--card-solid:#07100b;
  --surface:#0b1710;--surface-hover:#102219;
  --border:rgba(86,255,164,.13);--border-light:rgba(86,255,164,.25);
  --text:#effff5;--muted:#7f9a8a;--dim:#496052;
  --accent:#00ff88;--accent-rgb:0,255,136;--accent-2:#6affb3;
  --accent-soft:rgba(0,255,136,.10);--accent-line:rgba(0,255,136,.28);
  --nav-bg:rgba(2,8,5,.78);--input-bg:rgba(5,15,9,.82);
  --card-radius:16px;--control-radius:11px;
  --shadow-card:0 18px 55px rgba(0,0,0,.32),0 0 0 1px rgba(0,255,136,.015);
  --shadow-hover:0 22px 65px rgba(0,0,0,.42),0 0 32px rgba(0,255,136,.07);
  --page-glow:radial-gradient(ellipse 75% 45% at 50% 0%,rgba(0,255,136,.13),transparent 70%);
  --grid-dot:rgba(255,255,255,.045);
  --card-top:linear-gradient(135deg,rgba(255,255,255,.025),transparent 45%);
  --button-main:linear-gradient(135deg,#00ff88,#6affb3);--button-text:#00140a;
}

:root[data-theme="blue"]{
  --font-ui:'Inter',sans-serif;
  --bg:#04101c;--bg-2:#071d31;
  --card:rgba(9,27,44,.72);--card-solid:#0a1d30;
  --surface:rgba(8,31,50,.72);--surface-hover:rgba(13,45,70,.82);
  --border:rgba(99,196,255,.20);--border-light:rgba(99,196,255,.38);
  --text:#edf9ff;--muted:#86a8bb;--dim:#506f82;
  --accent:#25b8ff;--accent-rgb:37,184,255;--accent-2:#8be0ff;
  --accent-soft:rgba(37,184,255,.12);--accent-line:rgba(37,184,255,.35);
  --nav-bg:rgba(3,15,27,.66);--input-bg:rgba(3,20,35,.68);
  --card-radius:20px;--control-radius:13px;
  --shadow-card:0 20px 60px rgba(0,5,15,.38),inset 0 1px 0 rgba(255,255,255,.035);
  --shadow-hover:0 25px 75px rgba(0,5,15,.48),0 0 42px rgba(37,184,255,.10);
  --page-glow:radial-gradient(ellipse 80% 55% at 50% -5%,rgba(37,184,255,.19),transparent 68%),radial-gradient(circle at 90% 80%,rgba(30,100,255,.08),transparent 35%);
  --grid-dot:rgba(150,220,255,.075);
  --card-top:linear-gradient(135deg,rgba(150,225,255,.065),transparent 42%);
  --button-main:linear-gradient(135deg,#1eaef5,#8be0ff);--button-text:#02121d;
}

:root[data-theme="purple"]{
  --font-ui:'Inter',sans-serif;
  --bg:#0a0612;--bg-2:#16091e;
  --card:rgba(20,11,32,.88);--card-solid:#140b20;
  --surface:#1c1030;--surface-hover:#261541;
  --border:rgba(190,126,255,.17);--border-light:rgba(208,155,255,.36);
  --text:#faf4ff;--muted:#a995b7;--dim:#665473;
  --accent:#b967ff;--accent-rgb:185,103,255;--accent-2:#e1a6ff;
  --accent-soft:rgba(185,103,255,.12);--accent-line:rgba(185,103,255,.34);
  --nav-bg:rgba(10,5,17,.72);--input-bg:rgba(22,10,36,.84);
  --card-radius:22px;--control-radius:12px;
  --shadow-card:0 20px 65px rgba(0,0,0,.48),0 0 45px rgba(126,45,180,.045);
  --shadow-hover:0 25px 80px rgba(0,0,0,.56),0 0 46px rgba(185,103,255,.12);
  --page-glow:radial-gradient(ellipse 75% 55% at 50% -10%,rgba(185,103,255,.18),transparent 68%),radial-gradient(circle at 8% 78%,rgba(255,64,189,.08),transparent 32%);
  --grid-dot:rgba(222,178,255,.055);
  --card-top:linear-gradient(135deg,rgba(255,196,255,.05),transparent 40%);
  --button-main:linear-gradient(135deg,#a855f7,#e1a6ff);--button-text:#16051f;
}

:root[data-theme="orange"]{
  --font-ui:'Inter',sans-serif;
  --bg:#100703;--bg-2:#1b0d05;
  --card:rgba(29,15,7,.95);--card-solid:#1d0f07;
  --surface:#29160a;--surface-hover:#351d0d;
  --border:rgba(255,160,72,.18);--border-light:rgba(255,166,75,.38);
  --text:#fff7ed;--muted:#b99b82;--dim:#735b48;
  --accent:#ff8a00;--accent-rgb:255,138,0;--accent-2:#ffc05c;
  --accent-soft:rgba(255,138,0,.11);--accent-line:rgba(255,138,0,.35);
  --nav-bg:rgba(16,7,3,.84);--input-bg:rgba(34,16,7,.90);
  --card-radius:12px;--control-radius:8px;
  --shadow-card:0 16px 45px rgba(0,0,0,.42),0 2px 0 rgba(255,138,0,.035);
  --shadow-hover:0 22px 58px rgba(0,0,0,.52),0 0 34px rgba(255,111,0,.09);
  --page-glow:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,109,0,.17),transparent 70%),radial-gradient(circle at 85% 85%,rgba(255,191,70,.07),transparent 30%);
  --grid-dot:rgba(255,188,115,.055);
  --card-top:linear-gradient(135deg,rgba(255,205,145,.035),transparent 42%);
  --button-main:linear-gradient(135deg,#ff7900,#ffc05c);--button-text:#1d0900;
}

:root[data-theme="pink"]{
  --font-ui:'Inter',sans-serif;
  --bg:#10040d;--bg-2:#1b0717;
  --card:rgba(29,9,25,.88);--card-solid:#1d0919;
  --surface:#2a0f24;--surface-hover:#37132f;
  --border:rgba(255,88,178,.18);--border-light:rgba(255,105,189,.38);
  --text:#fff1fa;--muted:#b991aa;--dim:#76576c;
  --accent:#ff3f9f;--accent-rgb:255,63,159;--accent-2:#ff9dcc;
  --accent-soft:rgba(255,63,159,.12);--accent-line:rgba(255,63,159,.35);
  --nav-bg:rgba(16,4,13,.72);--input-bg:rgba(32,8,27,.84);
  --card-radius:24px;--control-radius:15px;
  --shadow-card:0 22px 65px rgba(0,0,0,.48),0 0 45px rgba(255,63,159,.035);
  --shadow-hover:0 28px 80px rgba(0,0,0,.56),0 0 48px rgba(255,63,159,.12);
  --page-glow:radial-gradient(ellipse 78% 55% at 50% -8%,rgba(255,63,159,.18),transparent 68%),radial-gradient(circle at 8% 88%,rgba(157,71,255,.09),transparent 33%);
  --grid-dot:rgba(255,170,220,.055);
  --card-top:linear-gradient(135deg,rgba(255,184,226,.055),transparent 42%);
  --button-main:linear-gradient(135deg,#ff3298,#ff9dcc);--button-text:#210014;
}

/* Global surfaces */
html{background:var(--bg);transition:background .45s ease}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);transition:background .45s ease,color .35s ease}
.dot-grid{background-image:radial-gradient(circle at 1px 1px,var(--grid-dot) 1px,transparent 0);transition:background-image .45s ease}
.glow{background:var(--page-glow);transition:background .5s ease}
code{background:var(--surface);border-color:var(--border);color:var(--muted);border-radius:calc(var(--control-radius) - 4px)}

/* Brand + headings */
.brand-gradient{background:linear-gradient(135deg,#fff 5%,var(--accent) 82%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.page-title{letter-spacing:-.7px;text-shadow:0 1px 24px rgba(var(--accent-rgb),.07)}

/* Login becomes part of each theme's atmosphere */
#login{background:var(--page-glow)}
.login-card{background:var(--card);border-color:var(--border-light);border-radius:calc(var(--card-radius) + 3px);box-shadow:var(--shadow-card);backdrop-filter:blur(18px);transition:background .4s,border-color .4s,border-radius .4s,box-shadow .4s}
.login-icon{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);box-shadow:0 0 30px rgba(var(--accent-rgb),.14)}

/* Navigation */
.top-nav{height:66px;background:var(--nav-bg);border-bottom-color:var(--border);backdrop-filter:blur(24px) saturate(145%);box-shadow:0 8px 35px rgba(0,0,0,.16);transition:background .4s,border-color .4s,box-shadow .4s}
.brand-icon{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);box-shadow:0 0 20px rgba(var(--accent-rgb),.12);border-radius:calc(var(--control-radius) - 1px)}
.nav-link{border-radius:var(--control-radius)}
.nav-link:hover{color:var(--text);background:var(--surface-hover);border-color:var(--border)}
.nav-link.active{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line);box-shadow:inset 0 0 18px rgba(var(--accent-rgb),.045)}
.nav-pill{background:var(--surface);border-color:var(--border);border-radius:var(--control-radius)}

/* Theme picker */
.theme-dot{border-color:var(--border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.theme-dot.active{border-color:#fff;box-shadow:0 0 0 2px var(--bg),0 0 0 3px currentColor,0 0 18px currentColor}

/* Controls */
.inp{background:var(--input-bg);border-color:var(--border);border-radius:var(--control-radius);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.015);transition:border-color .25s,box-shadow .25s,background .35s,border-radius .35s}
.inp:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08),0 0 24px rgba(var(--accent-rgb),.05)}
.btn{background:var(--surface);border-color:var(--border);color:var(--text);border-radius:var(--control-radius);box-shadow:0 4px 18px rgba(0,0,0,.12);transition:all .25s ease}
.btn:hover{border-color:var(--border-light);background:var(--surface-hover);box-shadow:0 7px 24px rgba(0,0,0,.20);transform:translateY(-1px)}
.btn.pri{background:var(--button-main);color:var(--button-text);border-color:transparent;box-shadow:0 8px 25px rgba(var(--accent-rgb),.16)}
.btn.pri:hover{background:var(--button-main);border-color:transparent;filter:brightness(1.08);box-shadow:0 11px 32px rgba(var(--accent-rgb),.24);transform:translateY(-2px)}

/* Cards / stats */
.card,.stat{background:var(--card);border-color:var(--border);border-radius:var(--card-radius);box-shadow:var(--shadow-card);backdrop-filter:blur(12px);transition:background .4s,border-color .3s,border-radius .4s,box-shadow .3s,transform .3s}
.card{position:relative}
.card::before{content:'';position:absolute;inset:0;background:var(--card-top);pointer-events:none;border-radius:inherit}
.card-h,.card-b,.tbl-wrap{position:relative;z-index:1}
.card-h{border-bottom-color:var(--border)}
.card:hover{border-color:var(--border-light);box-shadow:var(--shadow-hover)}
.stat:hover{border-color:var(--border-light);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.stat{overflow:hidden}
.stat::after{background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.stat-ic{background:var(--accent-soft);border-color:var(--border);color:var(--accent)}
.stat-badge{background:var(--surface);border-color:var(--border)}
.li-row{background:var(--surface);border-color:var(--border);border-radius:var(--control-radius)}
.li-row:hover{background:var(--surface-hover);border-color:var(--border-light)}
.li-ic{background:var(--accent-soft)}

/* Table */
th{border-bottom-color:var(--border)}
td{border-bottom-color:var(--border)}
tbody tr:hover{background:rgba(var(--accent-rgb),.035)}
.key-cell{color:var(--text)}
.key-cell:hover{color:var(--accent)}
.badge{border-radius:calc(var(--control-radius) - 4px)}
.b-dim{background:var(--surface);border-color:var(--border)}

/* Modal / action sheet / toast */
.mb{background:rgba(0,0,0,.58);backdrop-filter:blur(12px)}
.mbox{background:var(--card-solid);border-color:var(--border-light);border-radius:calc(var(--card-radius) + 2px);box-shadow:var(--shadow-card)}
.mrow,.asheet-btn{background:var(--surface);border-color:var(--border);border-radius:var(--control-radius)}
.asheet-btn:hover{background:var(--surface-hover);border-color:var(--border-light)}
#toast{background:var(--card-solid);border-color:var(--border-light);box-shadow:var(--shadow-card);border-radius:var(--control-radius)}

/* Alerts / toggles */
.alert{border-radius:var(--control-radius)}
.tgl .sli{background:var(--surface);border-color:var(--border)}
.tgl.green input:checked + .sli{background:var(--accent-soft);border-color:var(--accent-line)}
.tgl.green input:checked + .sli::before{background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.3)}

/* Mobile navigation */
.mnav{background:var(--nav-bg);border-top-color:var(--border);backdrop-filter:blur(24px) saturate(145%);box-shadow:0 -8px 35px rgba(0,0,0,.22)}
.mnav a.active,.mnav a:hover{color:var(--accent)}

/* Theme-specific signature details */
:root[data-theme="green"] .top-nav{box-shadow:0 8px 35px rgba(0,0,0,.18),0 1px 0 rgba(0,255,136,.03)}
:root[data-theme="green"] .card{border-left-color:rgba(0,255,136,.16)}
:root[data-theme="blue"] .top-nav{border-bottom-color:rgba(100,210,255,.22)}
:root[data-theme="blue"] .card,.theme-swatch .theme-dot[style*="#00aaff"]{backdrop-filter:blur(20px) saturate(150%)}
:root[data-theme="blue"] .stat{background:linear-gradient(145deg,rgba(11,34,54,.84),rgba(7,22,37,.78))}
:root[data-theme="purple"] .card-h{background:linear-gradient(90deg,rgba(185,103,255,.055),transparent 65%)}
:root[data-theme="purple"] .brand-icon{border-radius:50%}
:root[data-theme="orange"] .card-h{background:linear-gradient(90deg,rgba(255,138,0,.065),transparent 60%)}
:root[data-theme="orange"] .nav-link.active{box-shadow:inset 3px 0 0 var(--accent),inset 0 0 18px rgba(var(--accent-rgb),.04)}
:root[data-theme="pink"] .card{background:linear-gradient(145deg,rgba(37,11,31,.91),rgba(20,6,18,.89))}
:root[data-theme="pink"] .brand-icon{border-radius:50%;transform:rotate(-4deg)}
:root[data-theme="pink"] .nav-link.active{box-shadow:0 0 22px rgba(var(--accent-rgb),.10)}

/* Smooth global theme transition for the major surfaces */
body,.top-nav,.mnav,.card,.stat,.login-card,.mbox,.li-row,.inp,.btn,.nav-pill,.nav-link,.stat-ic,.stat-badge,#toast,.asheet-btn,.mrow{
  transition-property:background,background-color,border-color,color,box-shadow,border-radius,transform,filter;
  transition-duration:.35s;
  transition-timing-function:ease;
}

@media(max-width:820px){
  .top-nav{height:62px}
  .main{padding-top:82px}
}

/* ============================================================
   VC PANEL — THEME ENGINE v3
   IMPORTANT: Controls that represent the selected UI theme must
   follow --accent. Semantic danger controls remain red.
   ============================================================ */

/* Theme-aware status/control tokens */
:root{--control-on:var(--accent);--control-on-rgb:var(--accent-rgb)}

/* Every normal ON switch follows the selected theme. */
.tgl.green input:checked + .sli,
.tgl:not(.danger-toggle) input:checked + .sli{
  background:var(--accent-soft) !important;
  border-color:var(--accent-line) !important;
  box-shadow:0 0 14px rgba(var(--accent-rgb),.10),inset 0 0 10px rgba(var(--accent-rgb),.05);
}
.tgl.green input:checked + .sli::before,
.tgl:not(.danger-toggle) input:checked + .sli::before{
  background:var(--accent) !important;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.42),0 0 3px rgba(255,255,255,.55) !important;
}

/* Kill switch is intentionally semantic danger red. */
.tgl.danger-toggle input:checked + .sli{
  background:rgba(255,68,68,.15) !important;
  border-color:rgba(255,68,68,.40) !important;
}
.tgl.danger-toggle input:checked + .sli::before{background:var(--bad) !important;box-shadow:0 0 12px rgba(255,68,68,.35) !important}

/* Theme changes are visible in secondary controls too. */
.btn.ok{color:var(--accent);border-color:var(--accent-line)}
.btn.ok:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.asheet-btn.ok,.asheet-btn.ok i{color:var(--accent)}

/* Selected theme gets a coherent ring, not a generic white ring. */
.theme-dot.active{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),0 0 22px rgba(var(--accent-rgb),.40) !important;
}
.theme-swatch.is-active span{color:var(--accent) !important}

/* Stronger visual separation between themes. */
:root[data-theme="green"] .main{background:radial-gradient(ellipse 60% 28% at 50% 0%,rgba(0,255,136,.035),transparent 75%)}
:root[data-theme="blue"] .main{background:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(37,184,255,.055),transparent 75%)}
:root[data-theme="purple"] .main{background:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(185,103,255,.055),transparent 75%)}
:root[data-theme="orange"] .main{background:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(255,138,0,.055),transparent 75%)}
:root[data-theme="pink"] .main{background:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(255,63,159,.055),transparent 75%)}

/* Orange: compact/industrial */
:root[data-theme="orange"] .card-h{border-bottom-width:2px}
:root[data-theme="orange"] .btn.pri{text-transform:uppercase;letter-spacing:.25px}
/* Blue: glass / spacious */
:root[data-theme="blue"] .card{backdrop-filter:blur(22px) saturate(160%)}
:root[data-theme="blue"] .top-nav{backdrop-filter:blur(28px) saturate(180%)}
/* Purple: softer / rounded */
:root[data-theme="purple"] .btn,:root[data-theme="purple"] .inp{box-shadow:0 0 0 1px rgba(185,103,255,.015)}
:root[data-theme="purple"] .card{backdrop-filter:blur(16px)}
/* Pink: neon / luminous */
:root[data-theme="pink"] .card:hover{box-shadow:var(--shadow-hover),0 0 28px rgba(255,63,159,.08)}
:root[data-theme="pink"] .brand-icon{box-shadow:0 0 28px rgba(255,63,159,.22)}

/* Make the page itself transition when a theme is changed. */
html,body,.dot-grid,.glow,.main,.top-nav,.mnav{transition:background .45s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}

/* ============================================================
   VC PANEL — THEME ENGINE v4
   Six/seven complete visual identities. No normal control keeps
   the old green/white default when another theme is selected.
   ============================================================ */

/* Theme-scoped semantic dashboard colors. Meaning stays stable,
   while each theme gets its own tuned shade. */
:root{
  --status-active:#00e676;--status-active-rgb:0,230,118;
  --status-banned:#ff3b30;--status-banned-rgb:255,59,48;
  --status-unused:#ff9800;--status-unused-rgb:255,152,0;
  --status-frozen:#2196f3;--status-frozen-rgb:33,150,243;
  --status-neutral:#8b8f98;--status-neutral-rgb:139,143,152;
}

:root[data-theme="green"]{--status-active:#00ff88;--status-banned:#ff4d5a;--status-unused:#ffb020;--status-frozen:#38a9ff;--status-neutral:#8b949e;}
:root[data-theme="blue"]{--status-active:#35e38a;--status-banned:#ff6575;--status-unused:#ffb84d;--status-frozen:#5ac8ff;--status-neutral:#8fa9b8;}
:root[data-theme="purple"]{--status-active:#55f0a5;--status-banned:#ff647f;--status-unused:#ffbd55;--status-frozen:#62b6ff;--status-neutral:#a59bb0;}
:root[data-theme="orange"]{--status-active:#4fe39b;--status-banned:#ff5547;--status-unused:#ffc04d;--status-frozen:#4bb9ff;--status-neutral:#a79b91;}
:root[data-theme="pink"]{--status-active:#4de89a;--status-banned:#ff5573;--status-unused:#ffb94a;--status-frozen:#55baff;--status-neutral:#aa96a3;}
:root[data-theme="black"]{--status-active:#5cffb0;--status-banned:#ff5a5a;--status-unused:#ffb347;--status-frozen:#58baff;--status-neutral:#9ca3af;}
:root[data-theme="white"]{--status-active:#079447;--status-banned:#d92d20;--status-unused:#c77700;--status-frozen:#1769aa;--status-neutral:#626b76;}

:root{--ok:var(--status-active);--warn:var(--status-unused);--bad:var(--status-banned);--info:var(--status-frozen);}

/* All semantic badges use the active theme's tuned status palette. */
.b-ok{background:rgba(var(--status-active-rgb),.08)!important;color:var(--status-active)!important;border-color:rgba(var(--status-active-rgb),.20)!important}
.b-info{background:rgba(var(--status-frozen-rgb),.08)!important;color:var(--status-frozen)!important;border-color:rgba(var(--status-frozen-rgb),.20)!important}
.b-bad{background:rgba(var(--status-banned-rgb),.08)!important;color:var(--status-banned)!important;border-color:rgba(var(--status-banned-rgb),.20)!important}
.b-warn{background:rgba(var(--status-unused-rgb),.08)!important;color:var(--status-unused)!important;border-color:rgba(var(--status-unused-rgb),.20)!important}

/* Black theme */
:root[data-theme="black"]{
  --bg:#000;--bg-2:#050505;--card:rgba(10,10,10,.97);--card-solid:#0b0b0b;
  --surface:#111;--surface-hover:#181818;--border:#242424;--border-light:#3a3a3a;
  --text:#f4f4f4;--muted:#858585;--dim:#555;--accent:#d9d9d9;--accent-rgb:217,217,217;--accent-2:#fff;
  --accent-soft:rgba(255,255,255,.08);--accent-line:rgba(255,255,255,.28);
  --nav-bg:rgba(0,0,0,.92);--input-bg:#0d0d0d;--card-radius:14px;--control-radius:9px;
  --shadow-card:0 18px 50px rgba(0,0,0,.55);--shadow-hover:0 22px 65px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.06);
  --page-glow:radial-gradient(ellipse 70% 45% at 50% 0%,rgba(255,255,255,.06),transparent 70%);
  --grid-dot:rgba(255,255,255,.045);--card-top:linear-gradient(135deg,rgba(255,255,255,.025),transparent 45%);
  --button-main:linear-gradient(135deg,#f1f1f1,#fff);--button-text:#050505;
}
:root[data-theme="black"] .dot-grid{background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.075) 1px,transparent 0)}
:root[data-theme="black"] .card{border-color:#252525}
:root[data-theme="black"] .card:hover{border-color:#4a4a4a}
:root[data-theme="black"] .brand-icon{box-shadow:0 0 18px rgba(255,255,255,.08)}

/* White theme */
:root[data-theme="white"]{
  --bg:#f2f4f7;--bg-2:#fff;--card:rgba(255,255,255,.94);--card-solid:#fff;
  --surface:#f5f6f8;--surface-hover:#eceff3;--border:#d9dde4;--border-light:#c3c9d3;
  --text:#17191d;--muted:#69717d;--dim:#8b929c;--accent:#111318;--accent-rgb:17,19,24;--accent-2:#3b4048;
  --accent-soft:rgba(17,19,24,.07);--accent-line:rgba(17,19,24,.24);
  --nav-bg:rgba(255,255,255,.88);--input-bg:#fff;--card-radius:14px;--control-radius:9px;
  --shadow-card:0 10px 32px rgba(20,28,40,.08),0 1px 2px rgba(20,28,40,.05);
  --shadow-hover:0 16px 42px rgba(20,28,40,.12),0 0 0 1px rgba(17,19,24,.05);
  --page-glow:radial-gradient(ellipse 75% 50% at 50% 0%,rgba(17,19,24,.07),transparent 70%);
  --grid-dot:rgba(20,28,40,.075);--card-top:linear-gradient(135deg,rgba(255,255,255,.8),transparent 48%);
  --button-main:linear-gradient(135deg,#15171b,#30343b);--button-text:#fff;
}
:root[data-theme="white"] .dot-grid{background-image:radial-gradient(circle at 1px 1px,rgba(20,28,40,.09) 1px,transparent 0)}
:root[data-theme="white"] .glow{opacity:.7}
:root[data-theme="white"] .top-nav{box-shadow:0 8px 25px rgba(20,28,40,.07)}
:root[data-theme="white"] .mnav{box-shadow:0 -8px 25px rgba(20,28,40,.08)}
:root[data-theme="white"] .btn.pri{box-shadow:0 8px 20px rgba(20,28,40,.15)}
:root[data-theme="white"] .nav-link.active{color:#111318}

/* Theme-safe common controls: nothing normal is hard-coded green. */
.tgl:not(.danger-toggle) input:checked + .sli{background:var(--accent-soft)!important;border-color:var(--accent-line)!important}
.tgl:not(.danger-toggle) input:checked + .sli::before{background:var(--accent)!important;box-shadow:0 0 12px rgba(var(--accent-rgb),.35)!important}
.btn.ok{color:var(--accent)!important;border-color:var(--accent-line)!important}
.btn.ok:hover{background:var(--accent-soft)!important}
.badge.b-ok{color:var(--status-active);border-color:rgba(var(--status-active-rgb),.25);background:rgba(var(--status-active-rgb),.07)}

/* Dashboard stat order/colors requested by the UI spec. */
.stat.active{border-top:2px solid var(--status-active)}
.stat.banned{border-top:2px solid var(--status-banned)}
.stat.unused{border-top:2px solid var(--status-unused)}
.stat.frozen{border-top:2px solid var(--status-frozen)}
.stat.neutral{border-top:2px solid var(--status-neutral)}
.stat.active .stat-ic{color:var(--status-active);background:rgba(var(--status-active-rgb),.09)}
.stat.banned .stat-ic{color:var(--status-banned);background:rgba(var(--status-banned-rgb),.09)}
.stat.unused .stat-ic{color:var(--status-unused);background:rgba(var(--status-unused-rgb),.09)}
.stat.frozen .stat-ic{color:var(--status-frozen);background:rgba(var(--status-frozen-rgb),.09)}
.stat.neutral .stat-ic{color:var(--status-neutral);background:rgba(var(--status-neutral-rgb),.09)}
.stat.active .stat-badge{color:var(--status-active)}
.stat.banned .stat-badge{color:var(--status-banned)}
.stat.unused .stat-badge{color:var(--status-unused)}
.stat.frozen .stat-badge{color:var(--status-frozen)}
.stat.neutral .stat-badge{color:var(--status-neutral)}

/* Keep the dangerous Kill Switch semantic red in every theme. */
.tgl.danger-toggle input:checked + .sli{background:rgba(255,59,48,.14)!important;border-color:rgba(255,59,48,.42)!important}
.tgl.danger-toggle input:checked + .sli::before{background:#ff3b30!important;box-shadow:0 0 12px rgba(255,59,48,.38)!important}

/* White/black theme picker labels and controls remain readable. */
:root[data-theme="white"] .theme-dot.active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),0 0 16px rgba(17,19,24,.22)!important}
:root[data-theme="black"] .theme-dot.active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),0 0 18px rgba(255,255,255,.18)!important}

/* Theme signature differences */
:root[data-theme="black"] .card-h{background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 60%)}
:root[data-theme="black"] .nav-link.active{box-shadow:inset 0 -2px 0 var(--accent)}
:root[data-theme="white"] .card-h{background:linear-gradient(90deg,rgba(17,19,24,.025),transparent 60%)}
:root[data-theme="white"] .nav-link.active{box-shadow:inset 0 -2px 0 var(--accent);background:#eef0f3}
:root[data-theme="white"] .stat{backdrop-filter:blur(8px)}


/* ============================================================
   VC PANEL — THEME ENGINE v5
   Status colors are semantic, but each theme owns its exact shade.
   There is no fallback green for ordinary controls.
   ============================================================ */
:root{
  --status-active:#00e676;--status-active-rgb:0,230,118;
  --status-banned:#ff3b30;--status-banned-rgb:255,59,48;
  --status-unused:#ff9800;--status-unused-rgb:255,152,0;
  --status-frozen:#2196f3;--status-frozen-rgb:33,150,243;
  --status-neutral:#8b8f98;--status-neutral-rgb:139,143,152;
}
:root[data-theme="green"]{
  --status-active:#00ff88;--status-active-rgb:0,255,136;
  --status-banned:#ff4d5a;--status-banned-rgb:255,77,90;
  --status-unused:#ffb020;--status-unused-rgb:255,176,32;
  --status-frozen:#38a9ff;--status-frozen-rgb:56,169,255;
  --status-neutral:#8b949e;--status-neutral-rgb:139,148,158;
}
:root[data-theme="blue"]{
  --status-active:#39e58c;--status-active-rgb:57,229,140;
  --status-banned:#ff6575;--status-banned-rgb:255,101,117;
  --status-unused:#ffb84d;--status-unused-rgb:255,184,77;
  --status-frozen:#55c7ff;--status-frozen-rgb:85,199,255;
  --status-neutral:#91a4b5;--status-neutral-rgb:145,164,181;
}
:root[data-theme="purple"]{
  --status-active:#65f0ac;--status-active-rgb:101,240,172;
  --status-banned:#ff6680;--status-banned-rgb:255,102,128;
  --status-unused:#ffc25c;--status-unused-rgb:255,194,92;
  --status-frozen:#69baff;--status-frozen-rgb:105,186,255;
  --status-neutral:#a99fb6;--status-neutral-rgb:169,159,182;
}
:root[data-theme="orange"]{
  --status-active:#55e49e;--status-active-rgb:85,228,158;
  --status-banned:#ff5b4f;--status-banned-rgb:255,91,79;
  --status-unused:#ffc04d;--status-unused-rgb:255,192,77;
  --status-frozen:#4dbdff;--status-frozen-rgb:77,189,255;
  --status-neutral:#b0a397;--status-neutral-rgb:176,163,151;
}
:root[data-theme="pink"]{
  --status-active:#55e99d;--status-active-rgb:85,233,157;
  --status-banned:#ff5c7b;--status-banned-rgb:255,92,123;
  --status-unused:#ffbd4f;--status-unused-rgb:255,189,79;
  --status-frozen:#59c2ff;--status-frozen-rgb:89,194,255;
  --status-neutral:#b09eaa;--status-neutral-rgb:176,158,170;
}
:root[data-theme="black"]{
  --status-active:#f2f2f2;--status-active-rgb:242,242,242;
  --status-banned:#ff5a5a;--status-banned-rgb:255,90,90;
  --status-unused:#ffb347;--status-unused-rgb:255,179,71;
  --status-frozen:#65bfff;--status-frozen-rgb:101,191,255;
  --status-neutral:#9ca3af;--status-neutral-rgb:156,163,175;
}
:root[data-theme="white"]{
  --status-active:#087f45;--status-active-rgb:8,127,69;
  --status-banned:#d92d20;--status-banned-rgb:217,45,32;
  --status-unused:#b96800;--status-unused-rgb:185,104,0;
  --status-frozen:#1769aa;--status-frozen-rgb:23,105,170;
  --status-neutral:#626b76;--status-neutral-rgb:98,107,118;
}

/* Theme-aware status cards. */
.stat.active,.stat.banned,.stat.unused,.stat.frozen,.stat.neutral{border-top-width:2px}
.stat.active{border-top-color:var(--status-active)}
.stat.banned{border-top-color:var(--status-banned)}
.stat.unused{border-top-color:var(--status-unused)}
.stat.frozen{border-top-color:var(--status-frozen)}
.stat.neutral{border-top-color:var(--status-neutral)}
.stat.active .stat-ic{color:var(--status-active);background:rgba(var(--status-active-rgb),.10);border-color:rgba(var(--status-active-rgb),.20)}
.stat.banned .stat-ic{color:var(--status-banned);background:rgba(var(--status-banned-rgb),.10);border-color:rgba(var(--status-banned-rgb),.20)}
.stat.unused .stat-ic{color:var(--status-unused);background:rgba(var(--status-unused-rgb),.10);border-color:rgba(var(--status-unused-rgb),.20)}
.stat.frozen .stat-ic{color:var(--status-frozen);background:rgba(var(--status-frozen-rgb),.10);border-color:rgba(var(--status-frozen-rgb),.20)}
.stat.neutral .stat-ic{color:var(--status-neutral);background:rgba(var(--status-neutral-rgb),.10);border-color:rgba(var(--status-neutral-rgb),.20)}
.stat.active .stat-badge{color:var(--status-active);border-color:rgba(var(--status-active-rgb),.22);background:rgba(var(--status-active-rgb),.07)}
.stat.banned .stat-badge{color:var(--status-banned);border-color:rgba(var(--status-banned-rgb),.22);background:rgba(var(--status-banned-rgb),.07)}
.stat.unused .stat-badge{color:var(--status-unused);border-color:rgba(var(--status-unused-rgb),.22);background:rgba(var(--status-unused-rgb),.07)}
.stat.frozen .stat-badge{color:var(--status-frozen);border-color:rgba(var(--status-frozen-rgb),.22);background:rgba(var(--status-frozen-rgb),.07)}
.stat.neutral .stat-badge{color:var(--status-neutral);border-color:rgba(var(--status-neutral-rgb),.22);background:rgba(var(--status-neutral-rgb),.07)}

/* No hard-coded green on ordinary switches/buttons. */
.tgl:not(.danger-toggle) input:checked + .sli{
  background:var(--accent-soft)!important;
  border-color:var(--accent-line)!important;
  box-shadow:0 0 14px rgba(var(--accent-rgb),.12),inset 0 0 10px rgba(var(--accent-rgb),.05)!important;
}
.tgl:not(.danger-toggle) input:checked + .sli::before{
  background:var(--accent)!important;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.45),0 0 3px rgba(255,255,255,.35)!important;
}
.btn.pri{background:var(--button-main)!important;color:var(--button-text)!important;border-color:transparent!important}
.btn.pri:hover{background:var(--button-main)!important;filter:brightness(1.08);box-shadow:0 10px 30px rgba(var(--accent-rgb),.20)}
.btn.ok{color:var(--accent)!important;border-color:var(--accent-line)!important}
.btn.ok:hover{background:var(--accent-soft)!important}
.nav-pill.ok{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.nav-link.active{color:var(--accent)!important;background:var(--accent-soft)!important;border-color:var(--accent-line)!important}
.mnav a.active,.mnav a:hover{color:var(--accent)!important}
.brand{color:var(--text)!important}
.key-cell{color:var(--text)!important}

/* Kill Switch is intentionally dangerous/red in every theme. */
.tgl.danger-toggle input:checked + .sli{background:rgba(var(--status-banned-rgb),.14)!important;border-color:rgba(var(--status-banned-rgb),.42)!important}
.tgl.danger-toggle input:checked + .sli::before{background:var(--status-banned)!important;box-shadow:0 0 13px rgba(var(--status-banned-rgb),.42)!important}

/* Force the dashboard's requested visual order even if another stylesheet is cached. */
#dashStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#dashStats .stat:nth-child(1){grid-column:auto;grid-row:auto}
#dashStats .stat:nth-child(2){grid-column:auto;grid-row:auto}
#dashStats .stat:nth-child(3){grid-column:auto;grid-row:auto}
#dashStats .stat:nth-child(4){grid-column:auto;grid-row:auto}
#dashStats .stat:nth-child(n+5){grid-row:auto}
@media(max-width:1100px){#dashStats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){#dashStats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat{padding:18px 16px}.stat-val{font-size:28px}}

/* Black / white are complete visual modes, not accent swaps. */
:root[data-theme="black"] .stat{background:linear-gradient(145deg,#0d0d0d,#070707);box-shadow:var(--shadow-card)}
:root[data-theme="black"] .card{background:linear-gradient(145deg,#0d0d0d,#080808)}
:root[data-theme="black"] .top-nav{background:rgba(0,0,0,.94)}
:root[data-theme="white"] .stat{background:linear-gradient(145deg,#fff,#f6f7f9);box-shadow:var(--shadow-card)}
:root[data-theme="white"] .card{background:linear-gradient(145deg,#fff,#f7f8fa)}
:root[data-theme="white"] .top-nav{background:rgba(255,255,255,.94)}