/* ============================================================
   v3 Premium 视觉层（Codex 精修样板）· 在 style.css 之后加载
   ============================================================ */
:root{
  --p-bg:#070a13;
  --p-panel:rgba(255,255,255,.045);
  --p-line:rgba(255,255,255,.09);
  --p-line-2:rgba(255,255,255,.14);
  --p-ink:#e8ecf6;
  --p-ink-2:#9aa4bd;
  --p-ink-3:#6b7590;
  --p-brand:#6d8bff;
  --p-grad:linear-gradient(135deg,#6d8bff,#a78bfa 48%,#22d3ee);
  --p-radius:16px;
}
html{color-scheme:dark}
body{
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(109,139,255,.20), transparent 60%),
    radial-gradient(820px 500px at 108% 12%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(700px 560px at 52% 116%, rgba(167,139,250,.12), transparent 60%),
    var(--p-bg);
  color:var(--p-ink);
}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34);border:2px solid transparent;background-clip:content-box}
.sidebar{
  width:234px;
  background:linear-gradient(180deg,rgba(13,16,31,.94),rgba(10,13,26,.9));
  border-right:1px solid var(--p-line);
}
.brand{padding:20px 18px 18px}
.brand-logo{background:var(--p-grad);box-shadow:0 8px 24px rgba(109,139,255,.45)}
.nav-item{margin:1px 10px;border-radius:11px;color:var(--p-ink-2);transition:background .18s,color .18s}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--p-ink)}
.nav-item.active{
  background:linear-gradient(90deg,rgba(109,139,255,.26),rgba(109,139,255,.06));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(109,139,255,.3),0 6px 18px -8px rgba(109,139,255,.5);
}
.nav-item.active::before{background:var(--p-grad);box-shadow:0 0 12px rgba(109,139,255,.85)}
.nav-count{background:rgba(255,255,255,.08);color:var(--p-ink-2)}
.sidebar-foot{color:var(--p-ink-3)}
.topbar{background:rgba(8,11,22,.74);border-bottom:1px solid var(--p-line)}
.page-title{color:#fff;font-size:18px}
.searchbox{background:rgba(255,255,255,.04);border-color:var(--p-line-2)}
.searchbox input{color:var(--p-ink)}
.sync-badge{background:rgba(240,173,78,.12);border-color:rgba(240,173,78,.35);color:#fcd68a}
.card{
  background:var(--p-panel);
  border:1px solid var(--p-line);
  border-radius:var(--p-radius);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.65);
  transition:border-color .2s,box-shadow .2s;
}
.card:hover{border-color:var(--p-line-2);box-shadow:0 14px 38px -16px rgba(0,0,0,.7)}
.card-head{border-bottom:1px solid var(--p-line)}
.card-title{color:#fff}
.card-sub{color:var(--p-ink-3)}
.kpi{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.kpi-value{background:var(--p-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi-label{color:var(--p-ink-2)}
.kpi-foot{color:var(--p-ink-3)}
th{color:var(--p-ink-3);background:rgba(255,255,255,.025);border-bottom:1px solid var(--p-line);letter-spacing:.4px}
td{border-bottom:1px solid rgba(255,255,255,.06);color:var(--p-ink-2)}
tr:hover td{background:rgba(109,139,255,.05)}
.strong,.mono,.dm-val{color:var(--p-ink)}
.b-green{background:rgba(18,183,106,.14);color:#7ee2b3}
.b-amber{background:rgba(240,173,78,.14);color:#fcd68a}
.b-red{background:rgba(240,68,56,.14);color:#fca5a5}
.b-blue{background:rgba(59,130,246,.14);color:#93c5fd}
.b-purple{background:rgba(167,139,250,.16);color:#d5c7ff}
.b-gray{background:rgba(148,163,184,.14);color:#cbd5e1}
.btn-primary{background:linear-gradient(135deg,#5b7cfa,#7c6cf0);box-shadow:0 8px 20px -8px rgba(109,139,255,.7);border:none}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--p-line-2);color:var(--p-ink-2)}
.btn-ghost:hover{border-color:var(--p-brand);color:#fff;background:rgba(109,139,255,.08)}
.icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.chip{background:rgba(255,255,255,.04);border-color:var(--p-line-2);color:var(--p-ink-2)}
.chip.active,.chip.act{background:linear-gradient(135deg,#5b7cfa,#7c6cf0);border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px rgba(109,139,255,.7)}
.filter-search{background:rgba(255,255,255,.04)}
.dm-miss{color:var(--p-ink-3)}
.card{animation:premiumIn .5s cubic-bezier(.22,.8,.3,1) both}
.card:nth-child(2){animation-delay:.04s}
.card:nth-child(3){animation-delay:.08s}
.card:nth-child(4){animation-delay:.12s}
.card:nth-child(5){animation-delay:.16s}
@keyframes premiumIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}
.mono,.kpi-value,td{font-variant-numeric:tabular-nums}
a{color:#79b8ff}
*:focus-visible{outline:2px solid rgba(109,139,255,.8);outline-offset:2px;border-radius:6px}