/* ============================================================
   群青智能 · 现场影像 — QUNQING LIVE VISION
   Design: Ultramarine Ops / 曜蓝指挥舱
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
:root{
  color-scheme:dark;
  --bg0:#04070D;
  --bg1:#070C16;
  --card:rgba(147,178,255,.05);
  --card-hi:rgba(147,178,255,.09);
  --line:rgba(147,178,255,.13);
  --line-soft:rgba(147,178,255,.07);
  --text:#EAF0FA;
  --t2:#9DB0C9;
  --t3:#5F7188;
  --brand:#3E63FF;
  --brand-hi:#6E8DFF;
  --cyan:#22D3EE;
  --ok:#3ED598;
  --bad:#F76B6B;
  --radius:16px;
  --font:"Inter","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Courier New",monospace;
  --ease:cubic-bezier(.22,.68,.28,1);
}
html{scrollbar-color:#22314d var(--bg0)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:#1E2C46;border-radius:6px;border:2px solid var(--bg0)}
::-webkit-scrollbar-thumb:hover{background:#2C3F63}
::selection{background:rgba(62,99,255,.45);color:#fff}
html,body{margin:0;min-height:100%}
body{background:var(--bg0);color:var(--text);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--brand-hi);outline-offset:3px}
button:disabled{cursor:wait;opacity:.55}
.hidden{display:none!important}
.mono{font-family:var(--mono)}

/* ---------- Ambient backdrop ---------- */
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--bg0)}
.ambient::before{content:"";position:absolute;inset:0;background:
  radial-gradient(58% 42% at 12% -6%,rgba(46,75,255,.20),transparent 62%),
  radial-gradient(46% 38% at 88% 108%,rgba(34,211,238,.09),transparent 60%),
  radial-gradient(38% 30% at 70% 8%,rgba(62,99,255,.08),transparent 65%)}
.ambient::after{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(147,178,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(147,178,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(72% 60% at 50% 0%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(72% 60% at 50% 0%,#000 30%,transparent 100%)}
.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}

/* ---------- Top navigation ---------- */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:22px;height:72px;padding:0 clamp(18px,4vw,44px);
  background:rgba(5,9,17,.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:13px;min-width:0;flex-shrink:0}
.brand-mark{width:40px;height:40px;border-radius:11px;overflow:hidden;padding:5px;
  background:linear-gradient(145deg,#F2F6FF,#D9E4F7);
  box-shadow:0 0 0 1px rgba(147,178,255,.25),0 4px 18px rgba(62,99,255,.28);
  display:grid;place-items:center}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand-name{line-height:1.25;white-space:nowrap}
.brand-name b{font-size:16px;font-weight:650;letter-spacing:.06em}
.brand-name span{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--t3);font-family:var(--mono)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.health{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t2);white-space:nowrap}
.health i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(62,213,152,.55);animation:pulse 2.4s var(--ease) infinite}
.health.bad i{background:var(--bad);animation:pulse-bad 2.4s var(--ease) infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(62,213,152,0)}100%{box-shadow:0 0 0 0 rgba(62,213,152,0)}}
@keyframes pulse-bad{70%{box-shadow:0 0 0 9px rgba(247,107,107,0)}100%{box-shadow:0 0 0 0 rgba(247,107,107,0)}}
.clock{text-align:right;line-height:1.3;padding:0 6px}
.clock b{display:block;font-size:15.5px;font-weight:560;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.clock small{display:block;font-size:10.5px;color:var(--t3);letter-spacing:.06em}
.nav-btn{height:38px;padding:0 15px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--t2);font-size:13px;white-space:nowrap;transition:all .2s var(--ease)}
.nav-btn:hover{color:var(--text);border-color:rgba(147,178,255,.32);background:var(--card-hi)}
.nav-btn svg{width:15px;height:15px}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(46px,6vw,84px) clamp(18px,4vw,44px) clamp(30px,4vw,54px);overflow:hidden}
.hero-inner{max-width:1440px;margin:0 auto;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--brand-hi);text-transform:uppercase}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--brand),transparent)}
.hero-title{margin:18px 0 16px;font-size:clamp(34px,4.6vw,64px);font-weight:600;line-height:1.22;letter-spacing:.01em}
.hero-title em{font-style:normal;background:linear-gradient(100deg,#7EA0FF 5%,#22D3EE 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{margin:0;max-width:560px;color:var(--t2);font-size:15px;line-height:1.9}
.hero-stats{display:flex;align-items:stretch;gap:clamp(22px,3.5vw,54px);margin-top:clamp(30px,4vw,48px)}
.stat{position:relative;padding-left:20px}
.stat::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(147,178,255,.5),rgba(147,178,255,.06))}
.stat.ok::before{background:linear-gradient(180deg,rgba(62,213,152,.85),rgba(62,213,152,.08))}
.stat b{display:block;font-size:clamp(34px,3.6vw,54px);font-weight:600;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat.ok b{color:var(--ok);text-shadow:0 0 26px rgba(62,213,152,.35)}
.stat span{display:block;margin-top:9px;font-size:12px;color:var(--t3);letter-spacing:.14em}
.hero-rings{position:absolute;right:clamp(10px,5vw,70px);top:42%;translate:0 -50%;width:230px;height:230px;pointer-events:none;opacity:.55}
.hero-rings i{position:absolute;inset:0;border:1px solid rgba(126,160,255,.28);border-radius:50%;animation:ring 5.2s linear infinite}
.hero-rings i:nth-child(2){animation-delay:-1.73s}
.hero-rings i:nth-child(3){animation-delay:-3.46s}
.hero-rings::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;translate:-50% -50%;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px 3px rgba(34,211,238,.55)}
@keyframes ring{0%{transform:scale(.14);opacity:0}18%{opacity:.9}100%{transform:scale(1);opacity:0}}

/* ---------- Page / toolbar ---------- */
.page{max-width:1440px;margin:0 auto;padding:0 clamp(18px,4vw,44px) 40px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:6px 0 20px}
.section-head h2{margin:0;font-size:21px;font-weight:620;letter-spacing:.02em;display:flex;align-items:center;gap:12px}
.section-head h2::before{content:"";width:9px;height:9px;border-radius:2px;background:linear-gradient(135deg,var(--brand),var(--cyan));box-shadow:0 0 12px rgba(62,99,255,.6)}
.section-note{color:var(--t3);font-size:12px;letter-spacing:.04em}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:14px 0;margin-bottom:26px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filter{position:relative;height:38px;padding:0 16px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--t2);font-size:13.5px;display:inline-flex;align-items:center;gap:8px;transition:all .2s var(--ease)}
.filter:hover{color:var(--text);background:var(--card)}
.filter.active{color:#fff;background:linear-gradient(135deg,rgba(62,99,255,.85),rgba(34,103,238,.85));border-color:rgba(126,160,255,.5);box-shadow:0 4px 20px rgba(46,75,255,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.filter em{font-style:normal;font-size:11px;font-family:var(--mono);padding:2px 7px;border-radius:6px;background:rgba(147,178,255,.1);color:var(--t2)}
.filter.active em{background:rgba(255,255,255,.18);color:#fff}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:14px;width:16px;height:16px;color:var(--t3);pointer-events:none}
.search input{width:300px;height:42px;padding:0 52px 0 40px;border:1px solid var(--line);border-radius:11px;background:rgba(9,15,27,.65);color:var(--text);outline:0;font-size:13.5px;transition:border-color .2s,box-shadow .2s}
.search input::placeholder{color:var(--t3)}
.search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(62,99,255,.22)}
.search kbd{position:absolute;right:12px;padding:3px 8px;border-radius:6px;border:1px solid var(--line);background:var(--card);font-family:var(--mono);font-size:11px;color:var(--t3);pointer-events:none}

/* ---------- Device grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{position:relative;min-width:0;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,var(--card),rgba(147,178,255,.02));
  border:1px solid var(--line-soft);
  transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
  animation:cardIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card.online{cursor:pointer}
.card.online:hover{transform:translateY(-5px);border-color:rgba(126,160,255,.42);
  box-shadow:0 22px 48px rgba(3,8,20,.65),0 0 0 1px rgba(126,160,255,.18),0 8px 40px rgba(46,75,255,.16)}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0A1120}
.thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .3s;filter:saturate(.92)}
.card.online:hover .thumb img{transform:scale(1.045)}
.card.offline .thumb img{filter:grayscale(.55) brightness(.55) saturate(.6)}
.thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,7,13,.18),transparent 32%,transparent 58%,rgba(4,7,13,.78))}
.status{position:absolute;z-index:2;top:13px;left:13px;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;
  background:rgba(5,10,19,.62);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:11.5px;letter-spacing:.05em;color:var(--t2)}
.status i{width:6px;height:6px;border-radius:50%;background:#5A6B7F}
.card.online .status{color:#B9F5DF;border-color:rgba(62,213,152,.35)}
.card.online .status i{background:var(--ok);box-shadow:0 0 10px 1px rgba(62,213,152,.8);animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.45}}
.thumb-tag{position:absolute;z-index:2;left:14px;bottom:12px;font-size:11px;letter-spacing:.14em;color:rgba(219,231,246,.75);font-family:var(--mono)}
.thumb .no-cover-note{display:none}
.thumb.no-cover{display:grid;place-items:center}
.thumb.no-cover .no-cover-note{display:block;position:absolute;z-index:2;left:0;right:0;top:50%;translate:0 -50%;text-align:center;color:var(--t3);font-size:12.5px;letter-spacing:.1em}
.play-fab{position:absolute;z-index:3;right:15px;bottom:15px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#5C80FF,#2E4BFF);border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 26px rgba(46,75,255,.5),inset 0 1px 0 rgba(255,255,255,.35);
  color:#fff;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.play-fab svg{width:17px;height:17px;margin-left:2px}
.card.online:hover .play-fab{transform:scale(1.1);box-shadow:0 10px 34px rgba(46,75,255,.75),inset 0 1px 0 rgba(255,255,255,.4)}
.card-body{padding:17px 19px 0}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--t3);font-family:var(--mono);letter-spacing:.03em}
.card-name{margin:8px 0 15px;font-size:16.5px;font-weight:620;letter-spacing:.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-foot{min-height:52px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--t3)}
.watch{display:inline-flex;align-items:center;gap:8px;align-self:stretch;padding:0 2px;border:0;background:none;color:var(--brand-hi);font-size:13.5px;font-weight:600;letter-spacing:.02em;transition:color .2s}
.watch svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.card.online:hover .watch{color:#9BB4FF}
.card.online:hover .watch svg{transform:translate(2px,-2px)}
.card.offline .card-foot{color:#4C5B70}
.skeleton{border-radius:var(--radius);border:1px solid var(--line-soft);overflow:hidden;background:var(--card);animation:cardIn .4s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
.skeleton .sk-thumb{aspect-ratio:16/9;background:linear-gradient(100deg,rgba(147,178,255,.05) 30%,rgba(147,178,255,.11) 50%,rgba(147,178,255,.05) 70%);background-size:220% 100%;animation:shine 1.4s linear infinite}
.skeleton .sk-body{padding:18px 19px 20px;display:grid;gap:11px}
.skeleton .sk-line{height:12px;border-radius:6px;background:rgba(147,178,255,.08)}
.skeleton .sk-line.w60{width:60%}
.skeleton .sk-line.w35{width:35%}
@keyframes shine{to{background-position:-120% 0}}
.empty{grid-column:1/-1;padding:74px 24px;text-align:center;border:1px dashed rgba(147,178,255,.18);border-radius:var(--radius);color:var(--t2);background:var(--card);font-size:13.5px}
.empty b{display:block;color:var(--text);font-size:18px;margin-bottom:8px;font-weight:600}
.page-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:22px;border-top:1px solid var(--line-soft);color:var(--t3);font-size:12px;letter-spacing:.05em}
/* ---------- Overlays / dialogs ---------- */
.overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(3,6,12,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease),visibility .22s}
.overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.dialog{width:460px;max-width:96vw;max-height:92dvh;overflow:auto;padding:30px;border-radius:20px;
  background:linear-gradient(180deg,#0C1424,#080E1A);border:1px solid var(--line);
  box-shadow:0 40px 110px rgba(0,4,14,.75),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(10px) scale(.985);transition:transform .25s var(--ease)}
.overlay.open .dialog{transform:none}
.dialog.wide{width:880px}
.dialog h2{margin:0;font-size:22px;font-weight:620;letter-spacing:.01em}
.dialog .lead{margin:9px 0 24px;color:var(--t2);font-size:13.5px;line-height:1.75}
.field{margin-bottom:19px}
.field label{display:block;margin-bottom:8px;color:var(--t2);font-size:13px;letter-spacing:.03em}
.field input,.field select{width:100%;height:48px;padding:0 15px;border:1px solid var(--line);border-radius:11px;background:rgba(6,11,21,.7);color:var(--text);outline:0;font-size:14px;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:var(--t3)}
.field input:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(62,99,255,.22)}
.field select option{background:#0C1424}
.form-error{min-height:22px;color:var(--bad);font-size:13px;margin-bottom:2px}
.row{display:flex;gap:12px;margin-top:24px}
.btn{height:46px;padding:0 20px;border-radius:11px;font-size:14px;font-weight:600;letter-spacing:.02em;border:1px solid var(--line);background:var(--card);color:var(--t2);transition:all .2s var(--ease)}
.btn:hover{color:var(--text);border-color:rgba(147,178,255,.35);background:var(--card-hi)}
.btn.primary{border:0;color:#fff;background:linear-gradient(135deg,#5C80FF,#2E4BFF);box-shadow:0 8px 26px rgba(46,75,255,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{box-shadow:0 10px 34px rgba(46,75,255,.6),inset 0 1px 0 rgba(255,255,255,.3);filter:brightness(1.07)}
.row .btn{flex:1}
.share-result{padding:17px;border-radius:12px;border:1px solid var(--line);background:rgba(6,11,21,.65);color:var(--t2);font-size:13.5px;line-height:2;word-break:break-all}
.share-result strong{color:var(--text)}

/* ---------- Admin cover list ---------- */
.admin-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-height:56vh;overflow:auto;padding-right:4px}
.admin-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line-soft);border-radius:13px;background:var(--card);transition:border-color .2s}
.admin-item:hover{border-color:rgba(147,178,255,.28)}
.admin-item img{width:76px;height:54px;object-fit:cover;border-radius:8px;background:#0A1120;flex-shrink:0}
.admin-item .txt{min-width:0;flex:1}
.admin-item b{display:block;font-size:13.5px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-item small{color:var(--t3);font-size:11px;font-family:var(--mono)}
.upload{flex-shrink:0;border:1px solid rgba(126,160,255,.4);border-radius:9px;background:rgba(62,99,255,.14);color:#9BB4FF;padding:8px 13px;font-size:12.5px;font-weight:600;transition:all .2s}
.upload:hover{background:rgba(62,99,255,.28);color:#fff}

/* ---------- Login ---------- */
.login{padding:0;background:var(--bg0);backdrop-filter:none;-webkit-backdrop-filter:none}
.login-stage{width:100%;min-height:100dvh;display:grid;grid-template-columns:1.12fr .88fr}
.login-art{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(30px,4vw,64px)}
.login-art .art-img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center}
.login-art::after{content:"";position:absolute;z-index:-1;inset:0;background:
  linear-gradient(78deg,rgba(4,8,17,.93) 8%,rgba(6,12,26,.62) 46%,rgba(6,12,26,.28) 78%),
  linear-gradient(0deg,rgba(4,8,17,.9) 4%,transparent 46%),
  radial-gradient(60% 45% at 88% 6%,rgba(34,211,238,.14),transparent 65%)}
.art-brand{display:flex;align-items:center;gap:13px}
.art-brand b{font-size:17px;letter-spacing:.14em;font-weight:620}
.art-copy{margin-top:auto;padding-top:120px;max-width:560px}
.art-copy .eyebrow{color:#8FC9F5}
.art-copy h1{margin:18px 0 18px;font-size:clamp(32px,3.4vw,54px);font-weight:600;line-height:1.34;letter-spacing:.015em}
.art-copy h1 em{font-style:normal;background:linear-gradient(100deg,#8FB4FF,#22D3EE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.art-copy p{margin:0;color:#B4C6DC;font-size:14.5px;line-height:2;max-width:430px}
.art-foot{display:flex;align-items:center;gap:14px;color:#7E93AC;font-size:11.5px;letter-spacing:.18em;font-family:var(--mono)}
.art-foot::before{content:"";width:34px;height:1px;background:rgba(147,178,255,.35)}
.login-panel{position:relative;display:grid;place-items:center;padding:clamp(30px,4vw,60px);
  background:radial-gradient(70% 50% at 100% 0%,rgba(62,99,255,.1),transparent 60%),var(--bg1);
  border-left:1px solid var(--line-soft)}
.login-form{width:400px;max-width:100%}
.login-form h2{margin:16px 0 10px;font-size:31px;font-weight:620;letter-spacing:-.01em}
.login-form>p{margin:0 0 34px;color:var(--t2);font-size:13.5px}
.login-form .field{margin-bottom:21px}
.login-form .btn{width:100%;height:52px;font-size:15px;margin-top:4px}
.login-foot{margin-top:26px;text-align:center;color:var(--t3);font-size:11.5px;letter-spacing:.08em}

/* ---------- Player ---------- */
.player-overlay{padding:0;align-items:stretch;background:#02040A;backdrop-filter:none;-webkit-backdrop-filter:none}
.player-shell{height:100dvh;width:100%;display:flex;flex-direction:column}
.player-bar{flex:none;min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px clamp(16px,3vw,30px);background:rgba(6,10,19,.85);border-bottom:1px solid var(--line-soft)}
.player-id{min-width:0;display:flex;align-items:center;gap:15px}
.live-dot{flex:none;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(247,107,107,.45);background:rgba(247,107,107,.1);color:#FDAFAF;font-family:var(--mono);font-size:11px;letter-spacing:.22em}
.live-dot i{width:7px;height:7px;border-radius:50%;background:var(--bad);box-shadow:0 0 12px 2px rgba(247,107,107,.8);animation:blink 1.6s ease-in-out infinite}
.player-id .names{min-width:0}
.player-id h2{margin:0;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-id small{display:block;margin-top:2px;color:var(--t3);font-size:11px;font-family:var(--mono);letter-spacing:.08em}
.player-actions{display:flex;gap:9px;flex-shrink:0}
.p-btn{height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--t2);font-size:13px;transition:all .2s var(--ease)}
.p-btn:hover{color:#fff;border-color:rgba(147,178,255,.4);background:var(--card-hi)}
.p-btn svg{width:15px;height:15px}
.p-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
/* Preserve decoder geometry: Jessibuca's inline scale must not crop the frame. */
.decoder,.decoder>*,.decoder>*>*{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
.decoder canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important;transform-origin:center!important}
.player-state{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:radial-gradient(60% 55% at 50% 42%,#0A1322,#04070D);transition:opacity .25s}
.player-state.ready{opacity:0;pointer-events:none}
.state-box{text-align:center;padding:24px;max-width:420px}
.spinner{width:46px;height:46px;margin:0 auto 24px;border-radius:50%;border:2px solid rgba(147,178,255,.16);border-top-color:var(--brand-hi);animation:spin .85s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.state-box b{font-size:17px;font-weight:560;letter-spacing:.02em}
.state-box p{margin:10px 0 0;color:var(--t2);font-size:13.5px;line-height:1.8}
.state-box.error .spinner{display:none}
.state-actions{display:none;justify-content:center;gap:10px;margin-top:26px}
.state-box.error .state-actions{display:flex}
.player-foot{flex:none;height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(16px,3vw,30px);background:rgba(6,10,19,.85);border-top:1px solid var(--line-soft);color:var(--t3);font-size:11.5px;font-family:var(--mono);letter-spacing:.06em}
.format{padding:4px 9px;border:1px solid var(--line);border-radius:7px;color:var(--t2);white-space:nowrap}

/* ---------- Toasts ---------- */
.toasts{position:fixed;right:22px;bottom:22px;z-index:300;display:grid;gap:10px;max-width:calc(100vw - 44px)}
.toast{padding:13px 18px;border-radius:12px;font-size:13.5px;background:rgba(12,20,36,.92);border:1px solid var(--line);color:var(--text);box-shadow:0 16px 44px rgba(0,4,14,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:toastIn .28s var(--ease);border-left:3px solid var(--brand)}
.toast.bad{border-left-color:var(--bad);color:#FBD5D5}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media(max-width:1280px){
  .hero-rings{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .nav{height:64px;gap:12px}
  .clock{display:none}
  .health span{display:none}
  .hero-stats{gap:26px;flex-wrap:wrap}
  .login-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .login-art{min-height:230px;padding:26px;gap:30px}
  .art-copy{padding-top:0}
  .art-copy h1{font-size:29px;margin:12px 0 10px}
  .art-copy p{display:none}
  .art-foot{display:none}
  .login-panel{border-left:0;border-top:1px solid var(--line-soft)}
  .login-form{width:100%}
  .admin-list{grid-template-columns:1fr}
  .section-note{display:none}
  .search{flex:1}
  .search input{width:100%}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr;gap:18px}
  .nav-btn .txt{display:none}
  .nav-btn{width:38px;padding:0;justify-content:center}
  .brand-name span{display:none}
  .brand-name b{font-size:14px}
  .hero-title{font-size:34px}
  .hero-stats{gap:20px}
  .stat b{font-size:34px}
  .page-foot{flex-direction:column;gap:6px}
  .dialog{padding:24px}
  .overlay{padding:14px}
  .login,.player-overlay{padding:0}
  .player-bar{min-height:66px;padding:12px 14px;gap:10px}
  .player-id h2{font-size:15px}
  .p-btn .txt{display:none}
  .p-btn{width:38px;padding:0;justify-content:center}
  .player-foot{padding:0 14px;font-size:10px}
  .player-foot>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .card.online:hover{transform:none}
}