:root{
  color-scheme:dark;
  --bg0:#04060d;--bg1:#0a1428;
  --card:rgba(13,23,42,.72);
  --chip:rgba(7,14,28,.66);
  --line:rgba(76,181,255,.16);
  --line-strong:rgba(103,232,249,.45);
  --text:#e6f2ff;--muted:#8aa2c0;
  --cyan:#22d3ee;--cyan-strong:#67e8f9;--blue:#3b82f6;
  --green:#34d399;--red:#fb7185;--amber:#fbbf24;
  font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;color:var(--text);
  background:linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 55%,#060b18 100%);
  overflow-x:hidden;
}
/* 全屏网格层 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(76,181,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(76,181,255,.055) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000 25%,transparent 78%);
}
/* 漂移光斑层 */
body::after{
  content:"";position:fixed;inset:-30%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 30% at 24% 22%,rgba(34,211,238,.13),transparent 70%),
    radial-gradient(30% 26% at 78% 12%,rgba(59,130,246,.15),transparent 70%),
    radial-gradient(26% 24% at 66% 82%,rgba(124,108,255,.09),transparent 70%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(3%,-2%,0) scale(1.06)}
}
.shell{position:relative;z-index:1;width:min(920px,calc(100% - 32px));margin:0 auto;padding:44px 0 60px}

header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:26px}
.eyebrow{
  margin:0 0 8px;color:var(--cyan);font-weight:700;font-size:13px;
  letter-spacing:.32em;text-transform:uppercase;
}
h1,h2{margin:0}
h1{
  font-size:clamp(26px,5vw,42px);letter-spacing:.02em;
  background:linear-gradient(92deg,#eefaff 8%,#9be3ff 48%,#38bdf8 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(56,189,248,.28));
}
h2{margin-bottom:20px;font-size:18px;letter-spacing:.14em;color:var(--cyan-strong)}
h2::before{content:"▍";color:var(--cyan);margin-right:6px}

.card{
  position:relative;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:26px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 80px rgba(2,8,20,.55),inset 0 0 0 1px rgba(120,210,255,.03),0 0 34px rgba(34,211,238,.05);
}
/* 卡片四角装饰 */
.card::before,.card::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
}
.card::before{top:-1px;left:-1px;border-top:2px solid var(--line-strong);border-left:2px solid var(--line-strong);border-top-left-radius:14px}
.card::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--line-strong);border-right:2px solid var(--line-strong);border-bottom-right-radius:14px}

.hidden{display:none}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
label{display:flex;flex-direction:column;gap:9px;color:var(--muted);font-size:13px;letter-spacing:.06em}
input,select,button{font:inherit}
input,select{
  width:100%;border:1px solid var(--line);border-radius:10px;
  background:rgba(5,11,24,.82);color:var(--text);padding:12px 13px;
  transition:border-color .18s,box-shadow .18s;
}
input:focus,select:focus{
  outline:none;border-color:var(--line-strong);
  box-shadow:0 0 0 1px rgba(103,232,249,.28),0 0 18px rgba(34,211,238,.16);
}
input::placeholder{color:#4d637f}

button{
  border:1px solid var(--line);border-radius:11px;background:rgba(18,32,58,.85);
  color:var(--text);padding:12px 20px;cursor:pointer;font-weight:700;letter-spacing:.05em;
  transition:box-shadow .18s,filter .18s,transform .06s;
}
button:hover:not(:disabled){filter:brightness(1.18);box-shadow:0 0 16px rgba(103,232,249,.18)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.38;cursor:not-allowed}
.primary{
  background:linear-gradient(135deg,#0ea5e9 0%,#22d3ee 100%);
  border-color:transparent;color:#03131f;
  box-shadow:0 0 18px rgba(34,211,238,.32),inset 0 0 0 1px rgba(255,255,255,.14);
}
.primary:hover:not(:disabled){box-shadow:0 0 30px rgba(34,211,238,.55)}
.danger{
  background:linear-gradient(135deg,#e11d48 0%,#fb7185 100%);
  border-color:transparent;color:#2a040c;
  box-shadow:0 0 16px rgba(251,113,133,.3),inset 0 0 0 1px rgba(255,255,255,.12);
}
.danger:hover:not(:disabled){box-shadow:0 0 28px rgba(251,113,133,.5)}

.hint{color:var(--muted);font-size:12.5px;margin:16px 0 0;letter-spacing:.02em}
.loginError{color:var(--red);font-size:14px;font-weight:700;margin:14px 0 0;text-shadow:0 0 12px rgba(251,113,133,.4)}

.badge{
  border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;
  letter-spacing:.08em;border:1px solid transparent;white-space:nowrap;
}
.badge.ok{background:rgba(52,211,153,.1);color:var(--green);border-color:rgba(52,211,153,.35);box-shadow:0 0 14px rgba(52,211,153,.15)}
.badge.warn{background:rgba(251,191,36,.1);color:var(--amber);border-color:rgba(251,191,36,.35);box-shadow:0 0 14px rgba(251,191,36,.12)}

.statusRow{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:22px}
.statusRow>div{
  background:var(--chip);border:1px solid var(--line);border-radius:12px;padding:14px 15px;
  transition:border-color .2s,box-shadow .2s;
}
.statusRow>div:hover{border-color:var(--line-strong);box-shadow:0 0 16px rgba(34,211,238,.08)}
.label{display:block;color:var(--muted);font-size:11.5px;margin-bottom:7px;letter-spacing:.22em}
.statusRow strong{
  font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:15px;letter-spacing:.03em;
}
.statusRow strong::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:8px;background:#5b7089;vertical-align:1px;
}
.statusRow strong.st-ok::before{background:var(--green);box-shadow:0 0 9px var(--green);animation:pulse 2.2s ease-in-out infinite}
.statusRow strong.st-warn::before{background:var(--amber);box-shadow:0 0 9px var(--amber);animation:pulse 1.1s ease-in-out infinite}
.statusRow strong.st-err::before{background:var(--red);box-shadow:0 0 9px var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* 通话中声纹：默认CSS律动为降级态，.live时由WebAudio实时数据驱动 */
.wave{display:none;justify-content:center;align-items:flex-end;gap:4px;height:40px;margin:0 0 20px;padding-bottom:3px}
body.in-call .wave{display:flex}
.wave i{
  width:4px;height:8px;border-radius:2px;
  background:linear-gradient(180deg,var(--cyan-strong),var(--blue));
  box-shadow:0 0 8px rgba(34,211,238,.5);
  animation:wv 1.05s ease-in-out infinite;
}
.wave.live i{animation:none;transition:height .07s ease-out,opacity .12s linear}
@keyframes wv{0%,100%{height:7px;opacity:.5}50%{height:30px;opacity:1}}

.actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:24px}
.volume{display:grid;grid-template-columns:auto 1fr 52px;align-items:center;gap:15px;color:var(--muted);font-size:13px}
.volume input{padding:0;accent-color:var(--cyan)}
#volumeValue{font-family:ui-monospace,Consolas,monospace;color:var(--cyan-strong);text-align:right}

details{margin-top:24px;border-top:1px solid var(--line);padding-top:16px;color:var(--muted)}
summary{cursor:pointer;font-size:13px;letter-spacing:.12em}
summary:hover{color:var(--cyan-strong)}
pre{
  max-height:230px;overflow:auto;white-space:pre-wrap;
  background:rgba(3,9,18,.9);border:1px solid rgba(76,181,255,.1);
  padding:13px;border-radius:10px;color:#7ee0a3;
  font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:12px;line-height:1.55;
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(76,181,255,.22);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

@media(max-width:720px){
  .shell{padding-top:24px}
  header{flex-direction:column;align-items:flex-start;gap:10px}
  .grid{grid-template-columns:1fr}
  .statusRow{grid-template-columns:1fr 1fr}
  .actions{gap:11px}
  .actions button{flex:1 1 44%;padding:14px 10px}
  .volume{grid-template-columns:1fr 52px}
  .volume input{grid-column:1}
}