/* HUB工具 · 扩音器（/speaker）。配色跟 HUB 工具页一致：白底、#b91c1c 红、#f3caca 细边。 */
:root { --red:#b91c1c; --red-dark:#7f1d1d; --line:#f3caca; --soft:#fff5f5; --ink:#111827; --muted:#6b7280; }
* { box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:#fffafa; color:var(--ink); touch-action:manipulation;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,sans-serif; }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px; }
.top a { color:var(--red); text-decoration:none; font-size:14px; white-space:nowrap; }
.top h1 { margin:0; font-size:17px; flex:1; text-align:center; padding-right:64px; }
.wrap { max-width:520px; margin:0 auto; padding:16px 16px calc(env(safe-area-inset-bottom, 0px) + 28px); }
.card { background:#fff; border:1px solid var(--line); padding:16px; margin-bottom:12px; }

/* 主按钮：红色圆，里面是代码画的喇叭；开着的时候外圈随音量起伏 */
.stage { display:flex; flex-direction:column; align-items:center; padding:32px 16px 18px; }
.power { position:relative; width:168px; height:168px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:#fff; color:var(--red); box-shadow:0 0 0 2px var(--red) inset, 0 10px 26px rgba(185,28,28,.16);
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s, transform .1s; }
.power:active { transform:scale(.97); }
.power svg { width:86px; height:86px; position:relative; z-index:1; }
.power .ring { position:absolute; inset:-8px; border-radius:50%; border:3px solid rgba(185,28,28,.28);
  transform:scale(var(--lvl, 1)); opacity:0; transition:transform .08s linear, opacity .2s; pointer-events:none; }
.power .waves path { opacity:.25; transition:opacity .15s; }
body.on .power { background:var(--red); color:#fff; box-shadow:0 12px 30px rgba(185,28,28,.35); }
body.on .power .ring { opacity:1; }
body.on .power .waves path.w1 { opacity:var(--w1, .35); }
body.on .power .waves path.w2 { opacity:var(--w2, .2); }
body.on.muted .power { background:#9ca3af; box-shadow:0 10px 24px rgba(0,0,0,.18); }
body.on.muted .power .ring { opacity:0; }
body.starting .power { opacity:.7; pointer-events:none; }
.state { margin-top:30px; font-size:17px; font-weight:700; color:var(--red-dark); text-align:center; }
.sub { margin-top:4px; font-size:13px; color:var(--muted); text-align:center; min-height:18px; }
.mute { margin-top:14px; display:none; border:1px solid var(--red); background:#fff; color:var(--red); font-size:15px;
  padding:9px 22px; cursor:pointer; font-family:inherit; }
body.on .mute { display:inline-block; }
body.on.muted .mute { background:var(--red); color:#fff; }

/* 电平条 */
.meter { position:relative; height:12px; background:#f3f4f6; overflow:hidden; margin:8px 0 4px; }
.meter i { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#16a34a 0%,#16a34a 62%,#f59e0b 80%,#dc2626 100%);
  background-size:var(--full, 100%) 100%; transition:width .06s linear; }
.meter b { position:absolute; top:0; bottom:0; width:2px; background:var(--ink); left:0; opacity:.55; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lab { font-size:14px; color:#374151; }
.val { font-size:14px; color:var(--red-dark); font-weight:700; font-variant-numeric:tabular-nums; }
.hint { font-size:12px; color:var(--muted); margin-top:4px; }

input[type=range] { width:100%; margin:10px 0 4px; accent-color:var(--red); height:28px; }
select { width:100%; margin-top:6px; padding:10px; font-size:16px; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:0; font-family:inherit; }
.field { margin-top:14px; }
.field:first-child { margin-top:0; }

/* 开关：代码画的拨动开关 */
.switch { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; cursor:pointer; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch .knob { flex:none; width:46px; height:26px; border-radius:13px; background:#d1d5db; position:relative; transition:background .2s; }
.switch .knob::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.switch input:checked + .knob { background:var(--red); }
.switch input:checked + .knob::after { transform:translateX(20px); }
.switch input:focus-visible + .knob { outline:2px solid var(--red); outline-offset:2px; }
.switch span.t { font-size:14px; color:#374151; }
.switch small { display:block; font-size:12px; color:var(--muted); margin-top:2px; }

.howl { display:none; margin-top:12px; font-size:13px; color:var(--red-dark); background:var(--soft); border:1px solid var(--line); padding:8px 10px; }
.howl.show { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.howl button { border:none; background:none; color:var(--red); font-size:13px; padding:0; cursor:pointer; font-family:inherit; text-decoration:underline; }

.msg { display:none; margin:0 0 12px; padding:12px 14px; font-size:14px; line-height:1.6; border:1px solid; }
.msg.show { display:block; }
.msg.err { color:#991b1b; background:#fef2f2; border-color:#fecaca; }
.msg.warn { color:#92400e; background:#fffbeb; border-color:#fde68a; }
.msg.ok { color:#166534; background:#f0fdf4; border-color:#bbf7d0; }
.msg button { margin-top:8px; border:1px solid currentColor; background:#fff; color:inherit; padding:6px 14px; font-size:14px; cursor:pointer; font-family:inherit; }

details { background:#fff; border:1px solid var(--line); margin-bottom:12px; }
details summary { list-style:none; cursor:pointer; padding:14px 16px; font-size:15px; font-weight:700; color:var(--red-dark);
  display:flex; justify-content:space-between; align-items:center; }
details summary::-webkit-details-marker { display:none; }
details summary::after { content:""; width:8px; height:8px; border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(45deg); margin-top:-4px; transition:transform .2s; }
details[open] summary::after { transform:rotate(-135deg); margin-top:4px; }
details .body { padding:0 16px 14px; font-size:14px; line-height:1.75; color:#374151; }
details ol, details ul { margin:0; padding-left:20px; }
details li { margin:4px 0; }
details h4 { margin:12px 0 4px; font-size:14px; color:var(--ink); }
.tips { margin:8px 0 0; padding-left:18px; font-size:13px; line-height:1.7; color:#4b5563; }
.tips li { margin:3px 0; }
#outField { margin-top:8px; }
.hidden { display:none !important; }

@media (prefers-reduced-motion: reduce) { .power, .power .ring, .meter i { transition:none; } }