/* 应急直播控制台 · 浅色工作台（中性灰，2026-09-28 改版）。只有外观；所有 id/class 钩子与 app.js 对应。 */
:root {
  color-scheme: light;
  --page: #f2f3f5; --surface: #ffffff; --surface-soft: #f7f8fa;
  --line: #dde0e5; --line-strong: #b7bcc4;
  --text: #1d2127; --muted: #5b6068; --disabled-ink: #8b9098;
  --primary: #0f6e56; --primary-hover: #085041; --on-primary: #ffffff;
  --ok: #0f6e56; --ok-bg: #e1f5ee; --ok-line: #5dcaa5; --ok-ink: #085041;
  --warn: #854f0b; --warn-bg: #faeeda; --warn-line: #ef9f27; --warn-ink: #633806;
  --bad: #a32d2d; --bad-bg: #fcebeb; --bad-line: #e24b4a; --bad-ink: #791f1f;
  --screen: #1d2127;
  --radius: 10px; --radius-lg: 14px;
  --gap: 16px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 16px; line-height: 1.65; background: var(--page); color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
main { width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 64px; }
h1, h2 { margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.25; }
h2 { font-size: 1.08rem; font-weight: 600; line-height: 1.4; }
p { margin: 0; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* 顶部 */
.masthead { margin-bottom: 20px; }
.eyebrow { margin-bottom: 4px; color: var(--primary); font-size: .8rem; font-weight: 600; letter-spacing: .08em; }
.masthead .muted { margin-top: 6px; font-size: .85rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--gap); }
.toolbar-spacer { flex: 1; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; min-width: 0; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.pill::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.pill.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }

/* 面板 */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: var(--gap); }
.panel > h2 { margin-bottom: 14px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.hint { color: var(--muted); font-size: .88rem; line-height: 1.7; margin: 6px 0 14px; }
.login-card { max-width: 440px; margin: 24px auto; }
.login-card h2 { margin-bottom: 16px; }
.login-card form { display: grid; gap: 16px; }
.login-card button { width: 100%; }

/* 表单 */
label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--muted); }
input, select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 400; }
select { height: 48px; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(15, 110, 86, .35); outline-offset: 2px; }

/* 按钮 */
button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 18px;
  border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; }
button:hover:not(:disabled) { background: var(--surface-soft); border-color: var(--muted); }
button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
button.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
button.danger { color: var(--bad); border-color: var(--bad); }
button.danger:hover:not(:disabled) { background: var(--bad-bg); }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
button.ghost:hover:not(:disabled) { background: var(--surface-soft); border-color: var(--line); }
button:disabled { opacity: .45; cursor: not-allowed; }
/* 禁用的主按钮/危险按钮退成中性灰，不抢可点按钮的视线 */
button.primary:disabled, button.danger:disabled { opacity: 1; background: var(--surface-soft); border-color: var(--line); color: var(--disabled-ink); }
.toolbar button { min-height: 44px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; color: var(--primary); font-weight: 600; text-underline-offset: 3px; }

/* 开播向导：默认=等待（琥珀），ok=已接上（绿），bad=失败/过期（红）。文字用同色系深色。 */
.wizard { margin-bottom: var(--gap); padding: 16px 18px; border-radius: var(--radius-lg); background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.wizard.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.wizard.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); border-width: 2px; }
.wizard .phase { font-size: 1rem; font-weight: 500; line-height: 1.75; }
.wizard button.ghost { width: 100%; margin-top: 12px; color: inherit; border-color: currentColor; text-decoration: none; background: rgba(255,255,255,.6); }
.wizard button.ghost:hover:not(:disabled) { background: rgba(255,255,255,.9); border-color: currentColor; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; }
.steps li { position: relative; padding-top: 10px; font-size: .76rem; line-height: 1.4; color: var(--muted); }
.steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(0,0,0,.18); }
.steps li.cap { grid-column: 1 / -1; padding-top: 0; font-weight: 600; color: inherit; }
.steps li.cap::before { content: none; }
.steps li.done { color: var(--ok-ink); }
.steps li.done::before { background: var(--ok); }
.steps li.current { color: inherit; font-weight: 700; }
.steps li.current::before { background: var(--warn); }

/* 流程：第 1 步设备账号 → 第 2 步开启直播 → 第 3 步直播中 → 第 4 步下播。完成=绿灯，当前=琥珀高亮，异常=红，未到=灰。 */
.flow-layout { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: var(--gap); align-items: start; margin-bottom: var(--gap); }
.flow { display: flex; flex-direction: column; gap: 12px; }
.flowstep { margin-bottom: 0; }
.flowstep h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.dot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--line); color: var(--muted); font-size: .9rem; font-weight: 700; }
.tag { margin-left: auto; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); font-size: .78rem; font-weight: 600; }
.tag:empty { display: none; }
.flowstep > button { width: 100%; min-height: 52px; }
.flowstep.done { border-color: var(--ok-line); }
.flowstep.done .dot { background: var(--ok); color: #fff; font-size: 0; }
.flowstep.done .dot::before { content: "✓"; font-size: .95rem; }
.flowstep.done .tag { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.flowstep.current { border: 2px solid var(--warn-line); padding: 19px 21px; background: #fffaf1; }
.flowstep.current .dot { background: var(--warn-line); color: var(--warn-ink); }
.flowstep.current .tag { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
#step-live.current { border-color: var(--ok-line); background: #f4fbf8; }
#step-live.current .dot { background: var(--ok); color: #fff; }
#step-live.current .tag { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.flowstep.bad { border: 2px solid var(--bad-line); padding: 19px 21px; }
.flowstep.bad .dot { background: var(--bad); color: #fff; }
.flowstep.bad .tag { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }
.flowstep.locked { background: var(--surface-soft); }
.flowstep.open .tag { background: var(--surface); border-color: var(--bad); color: var(--bad); }
.flowstep.locked h2 { color: var(--muted); }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.issues { margin-top: 10px; color: var(--bad-ink); font-size: .88rem; font-weight: 600; line-height: 1.7; }
.issues:empty { display: none; }
.small { margin-top: 10px; font-size: .8rem; line-height: 1.7; }
.gate { margin: 0 0 12px; font-size: .85rem; line-height: 1.7; color: var(--muted); }
.result { font-size: .9rem; line-height: 1.7; color: var(--text); }
.gate:empty, .result:empty { display: none; }
.flowstep.done .gate { display: none; }
.flow-foot { padding: 0 4px; }
.flow-foot .small { margin-top: 4px; }
.screen-col { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.screen-col .wizard { margin-bottom: 0; }
#screen-panel { margin-bottom: 0; }

/* 直播画面 */
.screen { margin-top: 4px; border-radius: var(--radius-lg); overflow: hidden; background: var(--screen); padding: 6px; }
.screen iframe { width: 100%; aspect-ratio: 16 / 10; height: auto; max-height: 78vh; border: 0; border-radius: 10px; display: block; background: #111827; }
#screen-panel .hint { margin-bottom: 8px; }

/* 状态格子（card() 输出 .metric.ok/.warn/.bad） */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.capability-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 14px 0 12px; }
.metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-soft); border: 1px solid var(--line); }
.metric span { font-size: .8rem; color: var(--muted); }
.metric strong { display: block; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.metric.ok strong::before, .metric.warn strong::before, .metric.bad strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: .12em; }
.metric.ok strong { color: var(--ok); }
.metric.warn strong { color: var(--warn); }
.metric.bad { background: var(--bad-bg); border-color: var(--bad-line); }
.metric.bad strong { color: var(--bad); }
#human-actions { margin: 10px 0 0; padding-left: 1.2em; font-size: .88rem; line-height: 1.7; }
#human-actions li + li { margin-top: 4px; }
#readiness-summary { font-size: .88rem; line-height: 1.7; }

/* 更多状态（状态卡内的折叠） */
.more { margin-top: 12px; }
.more summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 2px; cursor: pointer; list-style: none; color: var(--muted); font-size: .88rem; font-weight: 600; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "展开 ▾"; font-weight: 400; }
.more[open] summary::after { content: "收起 ▴"; }
.more[open] summary { margin-bottom: 8px; }

/* 折叠面板（生产准备、设备与账号、飞书身份：默认收起，标题行显示摘要） */
.fold { padding-top: 12px; padding-bottom: 12px; }
.fold summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 44px; cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary h2 { margin: 0; }
.fold .brief { margin-left: auto; color: var(--muted); font-size: .85rem; }
.fold summary::after { content: "▾"; color: var(--muted); font-size: .85rem; }
.fold[open] summary::after { content: "▴"; }
.fold[open] { padding-bottom: 20px; }
.fold[open] summary { margin-bottom: 10px; }
.fold > .muted { font-size: .88rem; line-height: 1.7; }

/* 设备与账号 */
.selectors { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.selectors + .muted { margin-top: 12px; font-size: .85rem; }
.flowstep .selectors { grid-template-columns: minmax(0, 1fr) auto; }
.change { margin-top: 4px; }
.change summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--primary); font-size: .9rem; font-weight: 600; list-style: none; }
.change summary::-webkit-details-marker { display: none; }
.change summary::after { content: " ▾"; white-space: pre; }
.change[open] summary::after { content: " ▴"; }
.change[open] summary { margin-bottom: 8px; }
.flowstep .hint:has(+ .issues:empty + .change) { margin-bottom: 0; }

.error { color: var(--bad); min-height: 1.5em; margin-top: 8px; }

/* 平板与手机：单列；画面紧跟第 2 步，之后是第 3、4 步 */
@media (max-width: 900px) {
  .flow-layout { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .flow, .screen-col { display: contents; }
  #step-device { order: 1; } #step-start { order: 2; } #start-wizard { order: 3; } #screen-panel { order: 4; }
  #step-live { order: 5; } #step-stop { order: 6; } .flow-foot { order: 7; }
  .selectors { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 760px) {
  :root { --gap: 18px; line-height: 1.7; }
  main { width: calc(100% - 32px); padding: 22px 0 56px; }
  h1 { font-size: 1.45rem; }
  .masthead { margin-bottom: 18px; }
  .toolbar { gap: 8px; }
  .toolbar button { padding: 0 12px; }
  .pill { flex: 0 1 auto; padding: 0 12px; }
  .panel { padding: 16px; }
  .flowstep.current, .flowstep.bad { padding: 15px; }
  .fold { padding-top: 10px; padding-bottom: 10px; }
  .grid, .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: 12px; }
  .metric strong { font-size: .95rem; }
  .selectors, .flowstep .selectors { grid-template-columns: minmax(0, 1fr); }
  .selectors button, .panel-head button { width: 100%; }
  .steps li { font-size: .74rem; }
  .text-link { margin-left: 0; }
  .screen { padding: 4px; }
  .screen iframe { aspect-ratio: 4 / 3; min-height: 260px; }
}
@media (max-width: 400px) {
  .metric { padding: 10px; }
  .metric strong { font-size: .88rem; }
}