/* 直播前檢查 — site UI（導播台暗色） */
:root {
  color-scheme: dark;
  --page:#0e0f12; --surface:#16181d; --surface-2:#1b1e24; --raise:#20242b;
  --line:#262a32; --divider:#22252c; --input-bg:#101216; --input-line:#323743; --button-line:#323743; --button-line-hover:#4a5160;
  --text:#e8eaee; --text-2:#c3c8d2; --muted:#9aa1ad; --label:#7d8491;
  --accent:#354d96; --accent-strong:#2a3e7a; --accent-text:#9cadde; --accent-soft:#1a2240; --accent-line:#2f3f72; --on-accent:#fff;
  --ring:0 0 0 3px rgba(53,77,150,.45);
  --success:#7cc79d; --success-bg:#14251c; --success-line:#24402f;
  --warning:#e2b25c; --warning-bg:#271f11; --warning-line:#45371b;
  --danger:#f08a80; --danger-bg:#2a1514; --danger-line:#4b2522; --danger-ring:0 0 0 3px rgba(240,138,128,.2);
  --info:#7ec4d6; --info-bg:#122128; --info-line:#1f3a44;
  --toast-bg:#e8eaee; --toast-fg:#0e0f12;
  --summary-bg:#111317; --summary-line:#2a2e37;
  --r-card:10px; --r-control:7px; --r-tag:6px;
  --num-font:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace; --num-weight:500; --num-track:-.04em;
  --shadow-float:0 18px 40px -14px rgba(0,0,0,.6);
}

* { box-sizing:border-box; }
html { font-family:-apple-system,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--page); color:var(--text); font-size:13px; line-height:1.7; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; }
h1,h2,h3,h4 { font-weight:600; }
a { color:var(--accent-text); text-underline-offset:3px; }
a:hover { color:#c3cdee; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent-text); outline-offset:2px; }
.shell { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }

/* Access gate */
.auth-pending .topbar,.auth-pending > main,.auth-pending > dialog,.auth-pending > .toast,.auth-pending > .footer,
.auth-locked .topbar,.auth-locked > main,.auth-locked > dialog,.auth-locked > .toast,.auth-locked > .footer { display:none !important; }
.auth-gate { min-height:100dvh; display:grid; place-items:center; padding:24px; background:var(--page); }
.auth-card { width:min(100%,390px); padding:32px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-float); }
.auth-logo { display:block; width:56px; height:56px; margin-bottom:20px; border-radius:12px; }
.auth-kicker { margin:0 0 4px; color:var(--accent-text); font-size:12px; font-weight:600; letter-spacing:.08em; }
.auth-card h1 { margin:0; font-size:28px; line-height:1.3; letter-spacing:-.02em; }
.auth-description { margin:8px 0 22px; color:var(--muted); font-size:13px; }
.auth-form label { display:block; margin-bottom:6px; color:var(--text-2); font-size:12px; font-weight:600; }
.auth-form input { display:block; width:100%; height:52px; margin-bottom:12px; border:1px solid var(--input-line); border-radius:var(--r-control); background:var(--input-bg); color:var(--text); font-family:var(--num-font); font-size:24px; text-align:center; letter-spacing:.45em; padding-left:.45em; }
.auth-form input:focus { outline:0; border-color:var(--accent-text); box-shadow:var(--ring); }
.auth-form input[aria-invalid="true"] { border-color:var(--danger); box-shadow:var(--danger-ring); }
.auth-message { min-height:1.7em; margin:12px 0 0; color:var(--danger); font-size:12.5px; text-align:center; }
.auth-pending .auth-message { color:var(--muted); }

/* Top bar + tabs */
.topbar { position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--line); }
.topbar-inner { display:flex; align-items:center; gap:24px; min-height:64px; }
.brand { display:flex; align-items:center; gap:11px; flex:none; }
.brand-logo { display:block; width:36px; height:36px; border-radius:9px; flex:none; }
.brand h1 { margin:0; font-size:15px; line-height:1.3; letter-spacing:-.01em; }
.brand-caption { margin:0; font-size:11.5px; color:var(--muted); line-height:1.4; }
.tool-nav { display:flex; gap:4px; margin-left:auto; padding:4px; background:var(--raise); border-radius:11px; }
.tool-tab { display:flex; align-items:center; gap:10px; text-align:left; border:1px solid transparent; background:transparent; color:var(--muted); padding:7px 14px 7px 9px; border-radius:var(--r-control); font-size:13px; font-weight:600; line-height:1.35; transition:background .18s,color .18s,border-color .18s; }
.tool-tab small { display:block; font-size:11.5px; font-weight:400; color:var(--label); }
.tool-tab:hover { color:var(--text); }
.tab-num { display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background:var(--surface); border:1px solid var(--line); font-size:11.5px; font-variant-numeric:tabular-nums; flex:none; }
.tool-tab.active { background:var(--surface); color:var(--text); border-color:var(--line); }
.tool-tab.active .tab-num { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.tool-tab.active small { color:var(--muted); }

/* Panels */
.tool-panel { padding:28px 0 44px; animation:riseIn .22s cubic-bezier(.22,1,.36,1); }
@keyframes riseIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.panel-head { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:20px; }
h2 { margin:0; font-size:26px; line-height:1.3; letter-spacing:-.02em; text-wrap:balance; }
.panel-head > p { margin:0; max-width:420px; color:var(--muted); font-size:13px; text-wrap:pretty; }
.workspace { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr); gap:16px; align-items:start; }
.form-card,.result-card,.test-progress,.test-result { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); }
.form-card { padding:22px 24px 24px; }
.card-title { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:15px; line-height:1.4; }
.step-num { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; background:var(--accent-soft); color:var(--accent-text); border:1px solid var(--accent-line); font-size:11.5px; font-weight:600; flex:none; }

/* Network form */
.choice-group { border:0; padding:0; margin:0 0 22px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.choice-group legend,.field-heading { display:block; font-size:12px; font-weight:600; color:var(--text-2); margin:0 0 8px; padding:0; }
.choice { display:flex; align-items:flex-start; gap:10px; min-height:44px; padding:12px 14px; border:1px solid var(--input-line); border-radius:var(--r-control); background:var(--input-bg); cursor:pointer; transition:border-color .18s,background .18s; }
.choice:hover { border-color:var(--button-line-hover); }
.choice:has(input:checked) { border-color:var(--accent-text); background:var(--accent-soft); }
.choice:has(input:focus-visible) { box-shadow:var(--ring); }
.choice input { accent-color:var(--accent-text); width:16px; height:16px; margin:3px 0 0; flex:none; }
.choice strong { display:block; font-size:13px; font-weight:600; line-height:1.5; }
.choice small { display:block; color:var(--muted); font-size:11.5px; line-height:1.5; }
#direct-fields { border:1px solid var(--line); border-radius:var(--r-control); padding:0 14px; margin-top:6px; }
#direct-fields .field-heading { margin:0 -14px; padding:10px 14px 8px; border-bottom:1px solid var(--divider); background:var(--surface-2); border-radius:var(--r-control) var(--r-control) 0 0; }
.stream-row { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:56px; padding:6px 0; border-bottom:1px solid var(--divider); }
.stream-row:last-child { border-bottom:0; }
.stream-row:has(.check-label input:not(:checked)) .rate-label { opacity:.5; }
.check-label { display:flex; align-items:center; gap:10px; min-height:44px; font-size:13px; font-weight:600; cursor:pointer; }
.check-label input { width:16px; height:16px; margin:0; accent-color:var(--accent-text); }
.rate-label,.unit-input { display:inline-flex; align-items:center; border:1px solid var(--input-line); border-radius:var(--r-control); background:var(--input-bg); overflow:hidden; transition:border-color .18s,box-shadow .18s,opacity .18s; }
.rate-label:focus-within,.unit-input:focus-within { border-color:var(--accent-text); box-shadow:var(--ring); }
.rate-label input,.unit-input input { min-width:0; width:88px; height:40px; border:0; outline:0; padding:0 8px 0 10px; background:transparent; text-align:right; font-family:var(--num-font); font-size:14px; font-variant-numeric:tabular-nums; }
.rate-label span,.unit-input > span { color:var(--muted); font-size:12px; padding:0 11px 0 2px; white-space:nowrap; }
.relay-rate { margin-top:2px; }
.form-note,.tiny-note { color:var(--muted); font-size:11.5px; line-height:1.7; text-wrap:pretty; }
.form-note { margin:14px 0 0; }
.form-error { margin:12px 0 0; padding:9px 12px; border:1px solid var(--danger-line); background:var(--danger-bg); color:var(--danger); border-radius:var(--r-control); font-size:12.5px; font-weight:600; }

/* Summary card */
.result-card { position:sticky; top:88px; padding:20px 22px 22px; display:flex; flex-direction:column; background:var(--summary-bg); border-color:var(--summary-line); }
.card-label { margin:0; font-size:12px; font-weight:600; color:var(--muted); }
.hero-number { display:flex; align-items:baseline; gap:10px; padding:8px 0 16px; border-bottom:1px solid var(--divider); }
.hero-number strong { font-family:var(--num-font); font-size:52px; line-height:1.05; font-weight:var(--num-weight); letter-spacing:var(--num-track); font-variant-numeric:tabular-nums; color:var(--accent-text); }
.hero-number span { font-size:12px; line-height:1.45; color:var(--muted); }
.storage-result .hero-number span { font-size:18px; }
.result-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px solid var(--divider); font-size:13px; }
.result-line span { color:var(--text-2); }
.result-line strong { font-family:var(--num-font); font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.phase-plan { list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.phase-plan li { padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-tag); background:var(--surface-2); }
.phase-plan span { display:block; font-size:11.5px; color:var(--label); line-height:1.4; }
.phase-plan strong { display:block; font-size:12.5px; font-weight:600; line-height:1.5; }
.result-card .tiny-note { margin:12px 0 0; }
.scope-note { margin:14px 0 0; padding:11px 13px; border:1px solid var(--info-line); background:var(--info-bg); border-radius:var(--r-control); color:var(--text-2); font-size:12px; line-height:1.7; text-wrap:pretty; }
.scope-note strong { color:var(--info); font-weight:600; }
.action-stack { display:grid; gap:8px; margin-top:16px; }
.primary-button { min-height:44px; padding:10px 18px; border:1px solid var(--accent); border-radius:var(--r-control); background:var(--accent); color:var(--on-accent); font-size:14px; font-weight:600; width:100%; transition:background .18s,border-color .18s; }
.primary-button:hover { background:var(--accent-strong); border-color:var(--accent-strong); }
.primary-button:disabled { opacity:.4; cursor:not-allowed; }
.primary-button:disabled:hover { background:var(--accent); border-color:var(--accent); }
.quiet-button,.secondary-button { min-height:40px; padding:8px 15px; border:1px solid var(--button-line); border-radius:var(--r-control); background:var(--surface); color:var(--text); font-size:13px; font-weight:600; white-space:nowrap; transition:border-color .18s; }
.quiet-button:hover,.secondary-button:hover { border-color:var(--button-line-hover); }
.quiet-button { min-height:44px; color:var(--danger); }

/* Progress */
.test-progress,.test-result { padding:20px 22px; margin-top:16px; }
.progress-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.progress-phase { margin:0; font-size:12px; font-weight:600; color:var(--accent-text); }
.progress-head h3 { margin:0; font-size:16px; }
.progress-head strong { font-family:var(--num-font); font-size:40px; line-height:1; font-weight:var(--num-weight); letter-spacing:var(--num-track); font-variant-numeric:tabular-nums; }
.phase-steps { list-style:none; display:flex; gap:6px; margin:14px 0 0; padding:0; font-size:12px; }
.phase-steps li { padding:4px 10px; border-radius:var(--r-tag); border:1px solid var(--line); color:var(--muted); background:var(--surface-2); }
[data-phase="sustained"] [data-step="sustained"],[data-phase="burst"] [data-step="burst"] { color:var(--accent-text); background:var(--accent-soft); border-color:var(--accent-line); font-weight:600; }
[data-phase="burst"] [data-step="sustained"] { color:var(--success); background:var(--success-bg); border-color:var(--success-line); }
.progress-track { height:8px; border-radius:4px; background:var(--divider); overflow:hidden; margin:14px 0 16px; }
.progress-track div { height:100%; width:0; background:var(--accent-text); border-radius:4px; transition:width .2s linear; }
.progress-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; font-size:12px; color:var(--muted); }
.progress-stats span { padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-2); }
.progress-stats strong { display:block; margin-top:2px; font-family:var(--num-font); font-size:18px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }

/* Results (built in app.js) */
.test-result { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.test-result > h3 { grid-column:1/-1; margin:0; font-size:16px; }
.test-result > p { grid-column:1/-1; margin:0; }
.outcome { padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-2); }
.outcome-heading { display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.outcome h4 { margin:0; font-size:15px; }
.outcome p { margin:6px 0 0; font-size:13px; font-variant-numeric:tabular-nums; }
.outcome-note { color:var(--muted); font-size:12px !important; }
.badge { padding:3px 9px; border-radius:7px; border:1px solid; font-size:11.5px; font-weight:600; line-height:1.6; }
.badge.good { background:var(--success-bg); border-color:var(--success-line); color:var(--success); }
.badge.warn { background:var(--warning-bg); border-color:var(--warning-line); color:var(--warning); }

/* Storage form */
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-grid label,.stack-field { display:block; font-size:12px; font-weight:600; color:var(--text-2); }
.field-grid select { display:block; width:100%; height:42px; margin-top:6px; border:1px solid var(--input-line); border-radius:var(--r-control); padding:0 12px; background:var(--input-bg); color:var(--text); font-size:13px; }
.field-grid select:focus { outline:0; border-color:var(--accent-text); box-shadow:var(--ring); }
.stack-field { margin-top:20px; }
.hint { display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin:1px 0 6px; }
.unit-input { margin-top:6px; }
.duration-fields { display:flex; flex-wrap:wrap; gap:10px; }
.duration-fields input { width:72px; }
.info-band { margin-top:16px; padding:12px 14px; border:1px solid var(--warning-line); background:var(--warning-bg); border-radius:var(--r-control); }
.info-band strong { display:block; font-size:13px; color:var(--warning); }
.info-band p { color:var(--text-2); font-size:12px; margin:3px 0 0; text-wrap:pretty; }

/* Chat converter */
.chat-control-row { display:flex; gap:8px; align-items:stretch; margin-top:6px; }
.chat-control-row input { min-width:0; flex:1; height:44px; border:1px solid var(--input-line); border-radius:var(--r-control); padding:0 12px; color:var(--text); background:var(--input-bg); font-size:14px; transition:border-color .18s,box-shadow .18s; }
.chat-control-row input::placeholder { color:var(--label); }
.chat-control-row input:focus { outline:0; border-color:var(--accent-text); box-shadow:var(--ring); }
.chat-control-row input[aria-invalid="true"] { border-color:var(--danger); box-shadow:var(--danger-ring); }
.chat-control-row input[readonly] { background:var(--surface-2); font-family:var(--num-font); font-size:12.5px; }
.chat-control-row .primary-button,.chat-control-row .secondary-button { width:auto; flex:none; min-height:44px; padding-inline:18px; }
.chat-result { margin-top:22px; padding-top:18px; border-top:1px solid var(--divider); }
.chat-result .stack-field { display:flex; align-items:center; gap:10px; margin:0; font-size:15px; color:var(--text); }
.chat-setup h3 { font-size:15px; margin:2px 0 14px; }
.chat-dimensions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.chat-dimensions div { padding:12px 14px; border:1px solid var(--line); background:var(--surface-2); border-radius:var(--r-control); }
.chat-dimensions span { display:block; color:var(--muted); font-size:12px; }
.chat-dimensions strong { font-family:var(--num-font); font-size:30px; line-height:1.2; font-weight:var(--num-weight); letter-spacing:var(--num-track); color:var(--accent-text); font-variant-numeric:tabular-nums; }
.chat-dimensions small { margin-left:4px; font-size:12px; color:var(--muted); }
.chat-setup .tiny-note { margin:12px 0 0; }
.chat-css-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.chat-css-actions a { font-size:13px; font-weight:600; }

.secondary-button.is-copied,.secondary-button.is-copied:hover,.primary-button.is-copied,.primary-button.is-copied:hover { background:var(--success-bg); border-color:var(--success-line); color:var(--success); }

/* CSS dialog */
.css-dialog { width:min(640px,calc(100% - 32px)); max-height:min(80vh,720px); padding:0; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); box-shadow:var(--shadow-float); }
.css-dialog[open] { display:flex; flex-direction:column; animation:riseIn .22s cubic-bezier(.22,1,.36,1); }
.css-dialog::backdrop { background:rgba(16,18,23,.7); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 0 22px; }
.dialog-head h3 { margin:0; font-size:16px; }
.icon-button { display:grid; place-items:center; width:40px; height:40px; border:1px solid transparent; border-radius:var(--r-control); background:transparent; color:var(--muted); transition:border-color .18s,color .18s; }
.icon-button:hover { color:var(--text); border-color:var(--button-line); }
.dialog-note { margin:2px 22px 12px; color:var(--muted); font-size:12px; }
.css-source { flex:1; min-height:0; overflow:auto; margin:0 22px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-control); background:var(--input-bg); color:var(--text-2); font-family:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace; font-size:12px; line-height:1.65; white-space:pre-wrap; word-break:break-word; tab-size:2; }
.dialog-actions { display:flex; justify-content:flex-end; padding:14px 22px 18px; }
.dialog-actions .primary-button { width:auto; }

/* Toast + footer */
.toast { position:fixed; z-index:10; left:50%; bottom:20px; max-width:calc(100% - 32px); padding:11px 16px; border-radius:var(--r-control); background:var(--toast-bg); color:var(--toast-fg); font-size:13px; font-weight:600; box-shadow:var(--shadow-float); opacity:0; transform:translate(-50%,6px); pointer-events:none; transition:opacity .18s,transform .18s; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.footer { border-top:1px solid var(--line); padding:20px 0 36px; display:flex; justify-content:space-between; gap:16px; font-size:11.5px; color:var(--muted); }

/* Responsive */
@media (max-width:1023px) {
  .topbar-inner { flex-wrap:wrap; gap:10px; padding:10px 0; }
  .brand-caption { display:none; }
  .tool-nav { margin-left:0; width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .workspace { grid-template-columns:1fr; }
  .result-card { position:static; }
}
@media (max-width:767px) {
  .shell { width:calc(100% - 32px); }
  .topbar { position:static; }
  .tool-tab { flex-direction:column; align-items:flex-start; gap:4px; min-height:56px; padding:8px 9px; }
  .tool-tab small { font-size:11px; }
  .panel-head { display:block; }
  .panel-head > p { margin-top:6px; }
  h2 { font-size:22px; }
  .choice-group,.field-grid,.test-result,.phase-plan { grid-template-columns:1fr; }
  .form-card,.result-card { padding:18px 16px 20px; }
  .test-progress,.test-result { padding:18px 16px; }
  .hero-number strong { font-size:44px; }
  .progress-stats { grid-template-columns:1fr; }
  .progress-stats span { display:flex; justify-content:space-between; align-items:baseline; }
  .progress-stats strong { margin:0; font-size:15px; }
  .rate-label input,.unit-input input,.field-grid select { height:44px; }
  .footer { display:block; } .footer span { display:block; margin-top:4px; }
}
@media (max-width:520px) {
  .tool-tab small { display:none; }
  .tab-num { display:none; }
  .tool-tab { min-height:48px; justify-content:center; font-size:12.5px; }
  .chat-control-row { flex-direction:column; }
  .chat-control-row .primary-button,.chat-control-row .secondary-button { width:100%; }
  .rate-label input { width:68px; }
  .css-dialog { width:100%; max-width:100%; max-height:86vh; margin:auto 0 0; border-radius:18px 18px 0 0; border-bottom:0; }
  .dialog-actions .primary-button { width:100%; }
}
@media (prefers-reduced-motion:reduce) { .tool-panel { animation:none; } .progress-track div,.toast { transition:none; } }

.summary-main,.summary-detail,.summary-action { display:contents; }