:root{
  color-scheme:dark;
  --bg-0:#050810;
  --bg-1:#09111d;
  --bg-2:#0e1928;
  --surface:rgba(15,25,41,.82);
  --surface-strong:rgba(20,33,54,.94);
  --surface-soft:rgba(255,255,255,.035);
  --line:rgba(148,163,184,.15);
  --line-strong:rgba(125,211,252,.24);
  --text:#f5f8ff;
  --muted:#93a5bd;
  --muted-2:#667a95;
  --cyan:#67e8f9;
  --blue:#60a5fa;
  --green:#34d399;
  --yellow:#fbbf24;
  --red:#fb7185;
  --purple:#a78bfa;
  --gold:#f7d58b;
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:15px;
  --shadow-xl:0 28px 80px rgba(0,0,0,.48);
  --shadow-lg:0 18px 50px rgba(0,0,0,.34);
  --shadow-glow:0 0 0 1px rgba(103,232,249,.08),0 18px 55px rgba(13,148,136,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg-0)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:"Inter","SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:15px;
  letter-spacing:.005em;
  background:
    radial-gradient(900px 520px at 12% -10%,rgba(56,189,248,.18),transparent 62%),
    radial-gradient(780px 560px at 92% 0%,rgba(52,211,153,.13),transparent 58%),
    radial-gradient(600px 480px at 50% 105%,rgba(167,139,250,.11),transparent 62%),
    linear-gradient(145deg,#050810 0%,#07101c 46%,#050810 100%);
  background-attachment:fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 86%);
}
body::after{
  content:"";
  position:fixed;
  width:520px;
  height:520px;
  right:-210px;
  top:26%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(96,165,250,.12),transparent 68%);
  filter:blur(18px);
  animation:floatGlow 12s ease-in-out infinite alternate;
}
main{
  position:relative;
  z-index:1;
  width:min(1240px,94vw);
  margin:0 auto;
  padding:38px 0 84px;
}
a{color:#8bd8ff;text-decoration:none}
a:hover{color:#d8f4ff}
h1,h2,h3{letter-spacing:-.025em}
h1{
  margin:0 0 12px;
  font-size:clamp(34px,4.8vw,62px);
  line-height:1.02;
  font-weight:850;
  background:linear-gradient(120deg,#ffffff 4%,#dff7ff 38%,#a7f3d0 78%,#f7d58b 110%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 12px 44px rgba(103,232,249,.08);
}
h2{font-size:clamp(21px,2.2vw,28px);margin:0 0 8px;font-weight:800}
h3{font-size:18px;margin:0 0 8px}
p{line-height:1.75}
small{font-size:.48em;color:var(--muted);font-weight:600;vertical-align:middle}
.muted,.mini,.sub,.meta,.foot,.basis,.reasons,.notice{color:var(--muted)}
.mini{font-size:12px;line-height:1.55;margin-top:6px}
.sub{line-height:1.8;font-size:14px}
.top,.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:28px;
  padding:32px 34px;
  margin-bottom:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:
    linear-gradient(135deg,rgba(19,32,52,.92),rgba(9,17,29,.88)),
    radial-gradient(520px 240px at 86% 0%,rgba(103,232,249,.12),transparent 62%);
  box-shadow:var(--shadow-xl),var(--shadow-glow);
  backdrop-filter:blur(20px);
}
.top::before,.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 25%,transparent 70%,rgba(52,211,153,.06));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent);
}
.top::after,.hero::after{
  content:"";
  position:absolute;
  left:34px;
  right:34px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),rgba(103,232,249,.3),transparent);
}
.top > *,.hero > *{position:relative;z-index:1}
.badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 15px;
  border-radius:999px;
  color:#bfffe9;
  background:linear-gradient(135deg,rgba(52,211,153,.17),rgba(103,232,249,.08));
  border:1px solid rgba(52,211,153,.28);
  box-shadow:0 0 30px rgba(52,211,153,.09);
  font-size:13px;
  white-space:nowrap;
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(52,211,153,.13),0 0 18px rgba(52,211,153,.85);
  animation:pulse 2s ease-in-out infinite;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
  margin:24px 0 28px;
}
.card,.panel{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(20,33,54,.87),rgba(9,17,29,.78));
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(18px);
}
.card{
  min-height:142px;
  padding:20px;
  border-radius:var(--radius-lg);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.card::before,.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(130deg,rgba(255,255,255,.07),transparent 30%,transparent 72%,rgba(103,232,249,.035));
  opacity:.8;
}
.card::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.65),transparent);
  opacity:.45;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.42),0 0 0 1px rgba(103,232,249,.06);
}
.card .label{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.card .value{
  position:relative;
  font-size:clamp(23px,2.4vw,32px);
  line-height:1.16;
  font-weight:860;
  letter-spacing:-.035em;
  color:#fff;
}
.card .foot{position:relative;font-size:12px;line-height:1.62;margin-top:10px}
.panel{
  padding:24px;
  margin:18px 0;
  border-radius:var(--radius-xl);
}
.panel > *{position:relative;z-index:1}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:18px;
  padding-bottom:15px;
  border-bottom:1px solid rgba(148,163,184,.11);
}
.panel-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.65;max-width:920px}
.summary{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-radius:999px;
  color:#d9e8fb;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  font-size:12px;
  font-weight:650;
  white-space:nowrap;
}
.status,.grade{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid transparent;
  white-space:nowrap;
}
.ok{background:rgba(52,211,153,.13);color:var(--green);border-color:rgba(52,211,153,.22)}
.warn{background:rgba(251,191,36,.12);color:var(--yellow);border-color:rgba(251,191,36,.2)}
.bad{background:rgba(251,113,133,.12);color:var(--red);border-color:rgba(251,113,133,.2)}
.neutral{background:rgba(148,163,184,.1);color:#a9b8cc;border-color:rgba(148,163,184,.14)}
.grade-a{background:linear-gradient(135deg,rgba(52,211,153,.24),rgba(52,211,153,.08));color:#a7f3d0;border-color:rgba(52,211,153,.32);box-shadow:0 0 24px rgba(52,211,153,.08)}
.grade-b{background:linear-gradient(135deg,rgba(96,165,250,.24),rgba(96,165,250,.08));color:#bfdbfe;border-color:rgba(96,165,250,.32)}
.grade-c{background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(251,191,36,.07));color:#fde68a;border-color:rgba(251,191,36,.28)}
.grade-watch{background:rgba(148,163,184,.12);color:#b6c2d3;border-color:rgba(148,163,184,.18)}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:16px;
  background:rgba(5,10,19,.22);
}
thead{background:rgba(255,255,255,.035)}
th,td{
  text-align:left;
  padding:13px 12px;
  border-bottom:1px solid rgba(148,163,184,.1);
  vertical-align:top;
  font-size:13.5px;
}
th{
  color:#aebed2;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:800;
  white-space:nowrap;
}
tbody tr{transition:background .18s ease}
tbody tr:hover{background:rgba(103,232,249,.045)}
tr:last-child td{border-bottom:0}
td strong{color:#fff}
.track{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:13px}
.step{
  position:relative;
  overflow:hidden;
  padding:17px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(150deg,rgba(255,255,255,.052),rgba(255,255,255,.018));
}
.step::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,transparent,var(--blue),transparent);opacity:.6}
.step.done::before{background:linear-gradient(180deg,transparent,var(--green),transparent)}
.step.active::before{background:linear-gradient(180deg,transparent,var(--yellow),transparent)}
.step-head{display:flex;justify-content:space-between;gap:10px;font-weight:800;color:#fff}
.step p{color:var(--muted);font-size:12px;line-height:1.65;margin:10px 0 0}
.bar{
  height:9px;
  border-radius:999px;
  background:rgba(3,7,15,.72);
  overflow:hidden;
  margin-top:12px;
  border:1px solid rgba(148,163,184,.09);
}
.bar i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#38bdf8,#34d399 62%,#f7d58b);
  box-shadow:0 0 18px rgba(52,211,153,.35);
}
.callout,.notice{
  border:1px solid rgba(251,191,36,.18);
  border-left:3px solid var(--yellow);
  background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(251,191,36,.025));
  color:#f4dfa8;
  padding:15px 17px;
  border-radius:14px;
  font-size:13px;
  line-height:1.8;
  margin-top:16px;
}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.actions a{
  position:relative;
  overflow:hidden;
  color:#eaf8ff;
  background:linear-gradient(135deg,rgba(34,54,84,.9),rgba(18,30,50,.9));
  border:1px solid rgba(125,211,252,.19);
  padding:11px 15px;
  border-radius:13px;
  font-size:12.5px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.18);
  transition:transform .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.actions a::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.11),transparent);transform:translateX(-120%);transition:transform .45s ease}
.actions a:hover{transform:translateY(-2px);border-color:rgba(103,232,249,.42);box-shadow:0 14px 32px rgba(0,0,0,.3),0 0 0 1px rgba(103,232,249,.06)}
.actions a:hover::after{transform:translateX(120%)}
.head,.card-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.pick{font-size:18px;line-height:1.65;margin:18px 0 16px;color:#dbe8fa}
.pick strong{color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stats div{
  padding:13px;
  border:1px solid rgba(148,163,184,.12);
  border-radius:14px;
  background:linear-gradient(150deg,rgba(5,10,19,.55),rgba(255,255,255,.028));
}
.stats span{display:block;color:var(--muted);font-size:11px;letter-spacing:.04em;margin-bottom:6px}
.stats strong{font-size:15px;color:#fff}
.basis{margin-top:13px;font-size:12px;line-height:1.7}
.reasons{padding-left:20px;line-height:1.85;font-size:13.5px}
.panel,.card,table{scrollbar-color:rgba(103,232,249,.3) rgba(255,255,255,.03)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.025)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(103,232,249,.32),rgba(96,165,250,.25));border-radius:999px;border:2px solid rgba(5,8,16,.8)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.65;transform:scale(.86)}}
@keyframes floatGlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-42px,34px,0)}}
@media(max-width:900px){
  main{width:min(100% - 28px,1240px);padding-top:24px}
  .top,.hero{padding:25px 22px;border-radius:24px}
  .panel{padding:19px;border-radius:24px;overflow-x:auto}
  .panel-head,.head,.card-head{display:block}
  .badge{margin-top:16px}
  table{min-width:720px}
}
@media(max-width:620px){
  body{font-size:14px}
  h1{font-size:34px}
  .grid{grid-template-columns:1fr}
  .summary{gap:8px}
  .pill{font-size:11px;padding:8px 10px}
  .card{min-height:auto}
  .panel{width:100%;padding:16px}
  th,td{padding:11px 10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

.card .value.value-compact{font-size:clamp(18px,1.8vw,24px);line-height:1.28;letter-spacing:-.02em}
.card .value{overflow-wrap:anywhere}

/* ===== Premium visual refresh v2 ===== */
body{
  background:
    radial-gradient(1100px 720px at -6% -12%,rgba(14,165,233,.36),transparent 58%),
    radial-gradient(920px 680px at 106% -6%,rgba(168,85,247,.30),transparent 56%),
    radial-gradient(880px 640px at 84% 106%,rgba(16,185,129,.24),transparent 62%),
    radial-gradient(720px 560px at 18% 98%,rgba(59,130,246,.20),transparent 62%),
    linear-gradient(140deg,#020617 0%,#061424 42%,#030712 100%) !important;
  background-attachment:fixed !important;
}
body::before{
  opacity:.34;
  mix-blend-mode:screen;
  background-image:
    linear-gradient(rgba(56,189,248,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.075) 1px,transparent 1px),
    radial-gradient(circle at 30% 20%,rgba(34,211,238,.15),transparent 34%),
    radial-gradient(circle at 72% 76%,rgba(168,85,247,.14),transparent 36%);
  background-size:48px 48px,48px 48px,auto,auto;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),transparent 94%);
}
body::after{
  width:820px;
  height:820px;
  right:-260px;
  top:8%;
  opacity:.50;
  filter:blur(82px);
  background:conic-gradient(from 120deg,rgba(34,211,238,.26),rgba(59,130,246,.20),rgba(168,85,247,.27),rgba(16,185,129,.18),rgba(34,211,238,.26));
  animation:auroraDrift 18s ease-in-out infinite alternate;
}
.top,.hero{
  background:
    linear-gradient(135deg,rgba(11,29,50,.96),rgba(6,15,28,.90)),
    radial-gradient(520px 280px at 82% -10%,rgba(34,211,238,.40),transparent 62%),
    radial-gradient(440px 300px at 12% 118%,rgba(168,85,247,.27),transparent 64%) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.50),
    0 0 0 1px rgba(103,232,249,.12),
    0 0 62px rgba(34,211,238,.10),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.top::before,.hero::before{
  opacity:.95;
  background:
    linear-gradient(115deg,rgba(255,255,255,.15),transparent 24%,transparent 64%,rgba(34,211,238,.13)),
    radial-gradient(340px 180px at 88% 12%,rgba(34,211,238,.20),transparent 72%) !important;
}
.top::after,.hero::after{
  left:auto;
  right:-86px;
  top:-170px;
  width:450px;
  height:450px;
  border-radius:50%;
  background:conic-gradient(from 90deg,rgba(34,211,238,.48),rgba(96,165,250,.28),rgba(167,139,250,.44),rgba(52,211,153,.28),rgba(34,211,238,.48));
  filter:blur(52px);
  opacity:.45;
  animation:slowSpin 26s linear infinite;
}
.panel{
  background:
    linear-gradient(180deg,rgba(14,30,50,.92),rgba(6,14,26,.88)),
    radial-gradient(680px 280px at 105% 0%,rgba(34,211,238,.08),transparent 64%) !important;
  box-shadow:0 22px 64px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.panel:nth-of-type(odd){border-color:rgba(56,189,248,.20)}
.panel:nth-of-type(even){border-color:rgba(52,211,153,.16)}
.panel-head{position:relative}
.panel-head h2::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:10px;
  border-radius:3px;
  vertical-align:middle;
  background:linear-gradient(135deg,#22d3ee,#34d399);
  box-shadow:0 0 18px rgba(34,211,238,.55);
}
.card{
  background:
    linear-gradient(155deg,rgba(16,34,57,.94),rgba(7,15,28,.90)),
    radial-gradient(260px 160px at 100% 0%,rgba(34,211,238,.09),transparent 72%) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.card:nth-child(6n+1){border-color:rgba(34,211,238,.24)}
.card:nth-child(6n+2){border-color:rgba(96,165,250,.23)}
.card:nth-child(6n+3){border-color:rgba(52,211,153,.22)}
.card:nth-child(6n+4){border-color:rgba(167,139,250,.24)}
.card:nth-child(6n+5){border-color:rgba(251,191,36,.20)}
.card:nth-child(6n+6){border-color:rgba(251,113,133,.20)}
.card::after{
  left:20px;
  right:auto;
  width:88px;
  height:2px;
  background:linear-gradient(90deg,#22d3ee,transparent) !important;
  opacity:.82;
}
.card:nth-child(6n+2)::after{background:linear-gradient(90deg,#60a5fa,transparent) !important}
.card:nth-child(6n+3)::after{background:linear-gradient(90deg,#34d399,transparent) !important}
.card:nth-child(6n+4)::after{background:linear-gradient(90deg,#a78bfa,transparent) !important}
.card:nth-child(6n+5)::after{background:linear-gradient(90deg,#fbbf24,transparent) !important}
.card:nth-child(6n+6)::after{background:linear-gradient(90deg,#fb7185,transparent) !important}
.card:nth-child(6n+1) .value{color:#d9fbff}
.card:nth-child(6n+2) .value{color:#e1efff}
.card:nth-child(6n+3) .value{color:#ddfff0}
.card:nth-child(6n+4) .value{color:#eee8ff}
.card:nth-child(6n+5) .value{color:#fff4d6}
.card:nth-child(6n+6) .value{color:#ffe5ea}
thead{background:linear-gradient(90deg,rgba(34,211,238,.12),rgba(59,130,246,.055),rgba(167,139,250,.05)) !important}
tbody tr:hover{background:linear-gradient(90deg,rgba(34,211,238,.075),rgba(59,130,246,.035),transparent) !important}
.actions a{
  background:linear-gradient(135deg,rgba(18,45,72,.95),rgba(12,24,47,.92)) !important;
  border-color:rgba(103,232,249,.25) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.22),0 0 22px rgba(34,211,238,.04) !important;
}
.actions a:hover{
  border-color:rgba(103,232,249,.55) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.34),0 0 28px rgba(34,211,238,.12) !important;
}
.callout,.notice{
  background:linear-gradient(135deg,rgba(251,191,36,.10),rgba(34,211,238,.035),rgba(167,139,250,.03)) !important;
}
.status.ok,.grade-a{box-shadow:0 0 22px rgba(52,211,153,.12)}
.status.warn{box-shadow:0 0 22px rgba(251,191,36,.10)}
@keyframes auroraDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-70px,58px,0) scale(1.08)}
}
@keyframes slowSpin{
  to{transform:rotate(360deg)}
}
@media(max-width:900px){
  body{background-attachment:scroll !important}
  body::after{width:520px;height:520px;right:-260px;top:16%;opacity:.38}
  .top::after,.hero::after{width:300px;height:300px;right:-150px;top:-120px}
}
@media(prefers-reduced-motion:reduce){
  body::after,.top::after,.hero::after{animation:none!important}
}

/* ===== Transparent background image switcher v3 ===== */
body{--bg-art:url("./backgrounds/cyber-city-photos-v2/v2-05-neon-rain-street.jpg")}
body[data-bg="aurora"]{--bg-art:url("./backgrounds/aurora-mesh.svg")}
body[data-bg="cyber"]{--bg-art:url("./backgrounds/cyber-grid.svg")}
body[data-bg="vortex"]{--bg-art:url("./backgrounds/data-vortex.svg")}
body[data-bg="energy"]{--bg-art:url("./backgrounds/energy-field.svg")}
body::before{
  opacity:.56;
  background-image:
    var(--bg-art),
    linear-gradient(rgba(56,189,248,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.065) 1px,transparent 1px),
    radial-gradient(circle at 30% 20%,rgba(34,211,238,.14),transparent 34%),
    radial-gradient(circle at 72% 76%,rgba(168,85,247,.12),transparent 36%) !important;
  background-size:cover,48px 48px,48px 48px,auto,auto !important;
  background-position:center,center,center,center,center !important;
  background-blend-mode:screen,screen,screen,screen,screen !important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.92),rgba(0,0,0,.30) 78%,transparent 100%) !important;
}
.bg-switcher{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.switcher-label{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-right:3px;
}
.bg-switcher button{
  appearance:none;
  border:1px solid rgba(103,232,249,.18);
  background:linear-gradient(135deg,rgba(12,29,48,.86),rgba(8,18,33,.80));
  color:#c9d9ec;
  border-radius:999px;
  padding:8px 11px;
  font:inherit;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  transition:transform .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,background .18s ease;
}
.bg-switcher button:hover{
  transform:translateY(-1px);
  color:#effcff;
  border-color:rgba(103,232,249,.42);
  box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 18px rgba(34,211,238,.08);
}
.bg-switcher button.active{
  color:#eaffff;
  border-color:rgba(103,232,249,.58);
  background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(52,211,153,.12),rgba(168,85,247,.12));
  box-shadow:0 0 22px rgba(34,211,238,.16),inset 0 1px 0 rgba(255,255,255,.10);
}
@media(max-width:620px){
  .bg-switcher{gap:6px}
  .bg-switcher button{padding:7px 9px;font-size:10px}
}

/* ===== Cyber photo backgrounds v5 ===== */
body[data-bg="cyber-v2-metropolis"]{--bg-art:url("./backgrounds/cyber-city-photos-v2/v2-01-high-tech-metropolis.jpg")}
body[data-bg="cyber-v2-ruins"]{--bg-art:url("./backgrounds/cyber-city-photos-v2/v2-02-ruined-city.jpg")}
body[data-bg="cyber-v2-dragon"]{--bg-art:url("./backgrounds/cyber-city-photos-v2/v2-03-dragon-sunset.jpg")}
body[data-bg="cyber-v2-dystopia"]{--bg-art:url("./backgrounds/cyber-city-photos-v2/v2-04-dystopian-city.jpg")}
body[data-bg="cyber-v2-rainstreet"]{--bg-art:url("./backgrounds/cyber-city-photos-v2/v2-05-neon-rain-street.jpg")}
body[data-bg="cyber-v2-motorcycle"]{--bg-art:url("./backgrounds/cyber-city-photos-v2/v2-06-motorcycle-neon-street.jpg")}
body[data-bg^="cyber-"]::before{
  opacity:.72;
  filter:saturate(1.38) contrast(1.10) hue-rotate(-10deg);
  background-image:
    var(--bg-art),
    linear-gradient(180deg,rgba(2,6,18,.32),rgba(2,6,18,.68) 60%,rgba(2,6,18,.96)),
    linear-gradient(115deg,rgba(34,211,238,.22),transparent 36%,rgba(168,85,247,.18) 72%,transparent),
    radial-gradient(circle at 22% 28%,rgba(34,211,238,.28),transparent 34%),
    radial-gradient(circle at 78% 70%,rgba(255,45,149,.16),transparent 32%) !important;
  background-size:cover,cover,cover,auto,auto !important;
  background-position:center !important;
  background-blend-mode:normal,multiply,screen,screen,screen !important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.96),rgba(0,0,0,.68) 72%,transparent 100%) !important;
}
body[data-bg^="cyber-"]::after{
  width:100%;
  height:100%;
  inset:0;
  right:0;
  top:0;
  opacity:.72;
  filter:none;
  border-radius:0;
  background:
    radial-gradient(circle at 50% 35%,transparent 0,rgba(2,6,18,.18) 42%,rgba(2,6,18,.72) 100%),
    repeating-linear-gradient(0deg,rgba(103,232,249,.025) 0,rgba(103,232,249,.025) 1px,transparent 1px,transparent 4px);
  animation:none;
}
body[data-bg^="cyber-"] .top,
body[data-bg^="cyber-"] .hero{
  background:linear-gradient(135deg,rgba(6,14,28,.84),rgba(4,10,22,.76)) !important;
  backdrop-filter:blur(22px) saturate(1.25);
}
body[data-bg^="cyber-"] .card,
body[data-bg^="cyber-"] .panel{
  background:linear-gradient(155deg,rgba(9,20,38,.82),rgba(4,10,22,.80)) !important;
  backdrop-filter:blur(18px) saturate(1.2);
}
.bg-switcher .bg-more{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border-radius:999px;
  color:#dffcff;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(168,85,247,.18),rgba(52,211,153,.12));
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 0 20px rgba(34,211,238,.10);
}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.photo-card{position:relative;overflow:hidden;min-height:390px;border:1px solid rgba(103,232,249,.20);border-radius:26px;background:#030712;box-shadow:0 24px 70px rgba(0,0,0,.42)}
.photo-art{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.35) contrast(1.10) hue-rotate(-10deg);transform:scale(1.02)}
.photo-card:nth-child(1) .photo-art{background-image:url("./backgrounds/cyber-city-photos-v2/v2-01-high-tech-metropolis.jpg")}
.photo-card:nth-child(2) .photo-art{background-image:url("./backgrounds/cyber-city-photos-v2/v2-02-ruined-city.jpg")}
.photo-card:nth-child(3) .photo-art{background-image:url("./backgrounds/cyber-city-photos-v2/v2-03-dragon-sunset.jpg")}
.photo-card:nth-child(4) .photo-art{background-image:url("./backgrounds/cyber-city-photos-v2/v2-04-dystopian-city.jpg")}
.photo-card:nth-child(5) .photo-art{background-image:url("./backgrounds/cyber-city-photos-v2/v2-05-neon-rain-street.jpg")}
.photo-card:nth-child(6) .photo-art{background-image:url("./backgrounds/cyber-city-photos-v2/v2-06-motorcycle-neon-street.jpg")}
.photo-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(2,6,18,.02),rgba(2,6,18,.30) 42%,rgba(2,6,18,.92)),radial-gradient(circle at 78% 22%,rgba(34,211,238,.18),transparent 38%)}
.photo-card::after{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(0deg,rgba(103,232,249,.035) 0,rgba(103,232,249,.035) 1px,transparent 1px,transparent 4px);pointer-events:none}
.photo-copy{position:absolute;z-index:2;inset:auto 0 0;padding:23px}
.photo-copy h2{margin:7px 0 7px;color:#fff;font-size:26px}
.photo-copy p{margin:0 0 15px;color:#b7c9dd;font-size:13px;line-height:1.7}
.photo-credit{color:#7f95ad;font-size:11px;line-height:1.5;margin-bottom:13px}
.photo-use{appearance:none;border:1px solid rgba(103,232,249,.42);background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(168,85,247,.18));color:#f2fdff;border-radius:12px;padding:10px 14px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 0 26px rgba(34,211,238,.12)}
.photo-use:hover{transform:translateY(-1px);border-color:rgba(103,232,249,.72)}
@media(max-width:760px){.photo-grid{grid-template-columns:1fr}.photo-card{min-height:330px}}

/* P2 controls */
.p2-filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.p2-filter-bar input,.p2-filter-bar select{background:#0b1423;color:#eff6ff;border:1px solid #243550;border-radius:9px;padding:9px 11px;font:inherit;min-width:180px}
.p2-filter-bar input{flex:1 1 260px}
#p2-enable-notifications{position:fixed;right:18px;bottom:18px;z-index:50;border:1px solid rgba(52,211,153,.45);background:rgba(16,185,129,.18);color:#d1fae5;border-radius:999px;padding:11px 15px;font:600 13px "Microsoft YaHei",sans-serif;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.35)}
#p2-enable-notifications:hover{background:rgba(16,185,129,.3)}
@media(max-width:560px){.p2-filter-bar{flex-direction:column}.p2-filter-bar input,.p2-filter-bar select{width:100%}}
#p2-live-odds-status{position:fixed;left:18px;bottom:18px;z-index:50;background:rgba(15,23,42,.92);border:1px solid rgba(96,165,250,.4);color:#dbeafe;border-radius:999px;padding:10px 14px;font:600 12px "Microsoft YaHei",sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.35)}
#p2-live-odds-status.has-alerts{border-color:rgba(251,191,36,.55);color:#fde68a}