:root {
    --paper:#f4f6f9; --surface:#fff; --ink:#0f172a; --muted:#475569; --faint:#7c8799; --line:#e2e8f0; --line-2:#cbd5e1;
    --acc:#0f172a; --acc-soft:#e9edf3; --ok:#15803d; --ok-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7; --live:#1d4ed8; --live-bg:#dbeafe;
    --sans:Inter,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --r:12px;
  }
  * { box-sizing:border-box }
  html,body { margin:0; background:#dfe4ea; color:var(--ink); font:14px/1.5 var(--sans); -webkit-font-smoothing:antialiased }
  .board { max-width:1240px; margin:0 auto; padding:28px 20px 60px }
  .board-head { display:flex; align-items:baseline; gap:14px; margin:0 0 14px }
  .board-head h1 { font-size:15px; font-weight:600; margin:0 }
  .board-head p { margin:0; color:var(--muted); font-size:13px }
  .tabs { display:flex; gap:6px; margin:0 0 14px }
  .tabs button { font:inherit; font-size:13px; font-weight:500; border:1px solid var(--line-2); background:#eef2f6; color:var(--muted); padding:7px 12px; border-radius:999px; cursor:pointer }
  .tabs button.is-on { background:var(--ink); color:#fff; border-color:var(--ink) }
  .state { display:none } .state.is-on { display:block }
  body.all .state { display:block; margin-bottom:34px } body.all .tabs { display:none }
  .state-label { font-size:12px; color:var(--faint); margin:0 0 8px; font-family:var(--mono) }

  /* app window */
  .app { background:var(--paper); border:1px solid var(--line-2); border-radius:16px; overflow:hidden; box-shadow:0 20px 50px -30px rgba(15,23,42,.45); min-height:720px; display:grid; grid-template-rows:auto 1fr }
  .top { display:flex; align-items:center; gap:18px; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line) }
  .brand { display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px }
  .brand i { width:22px; height:22px; border-radius:7px; background:var(--ink); display:inline-grid; place-items:center }
  .brand i::after { content:""; width:8px; height:12px; border-radius:4px; background:#fff; box-shadow:-5px 2px 0 -1px #fff, 5px 2px 0 -1px #fff }
  .brand small { color:var(--faint); font-weight:500; margin-left:4px }
  .ladder { display:flex; gap:4px; margin-left:auto; align-items:center; font-size:12px; color:var(--faint) }
  .ladder span { padding:4px 10px; border-radius:999px; background:#eef2f6 }
  .ladder span.done { color:var(--ok); background:var(--ok-bg) }
  .ladder span.now { color:var(--live); background:var(--live-bg); font-weight:600 }
  .ladder em { font-style:normal; opacity:.5 }
  .who { width:28px; height:28px; border-radius:50%; background:#cbd5e1; margin-left:10px }
  .main { display:grid; grid-template-columns:260px 1fr; min-height:0 }
  .side { border-right:1px solid var(--line); background:var(--surface); padding:18px 16px }
  .side h4 { margin:0 0 8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint) }
  .recent { list-style:none; margin:0 0 18px; padding:0 }
  .recent li { padding:9px 10px; border-radius:10px; display:grid; gap:2px; cursor:default }
  .recent li.is-on { background:var(--acc-soft) }
  .recent b { font-weight:600; font-size:13px }
  .recent span { font-size:12px; color:var(--faint) }
  .chip { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:#eef2f6; color:var(--muted) }
  .chip.ok { background:var(--ok-bg); color:var(--ok) } .chip.live { background:var(--live-bg); color:var(--live) } .chip.warn { background:var(--warn-bg); color:var(--warn) }
  .content { padding:26px 30px; min-width:0 }
  .steps { display:flex; gap:22px; margin:0 0 20px; padding:0; list-style:none; font-size:13px; color:var(--faint) }
  .steps li { display:flex; gap:8px; align-items:center }
  .steps li i { width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line-2); display:inline-grid; place-items:center; font-size:11px; font-style:normal; font-weight:600 }
  .steps li.now { color:var(--ink); font-weight:600 } .steps li.now i { background:var(--ink); color:#fff; border-color:var(--ink) }
  .steps li.done { color:var(--muted) } .steps li.done i { background:var(--ok-bg); border-color:var(--ok-bg); color:var(--ok) }
  h2 { font-size:22px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px }
  .lede { color:var(--muted); margin:0 0 22px; max-width:60ch }
  .drop { border:1.5px dashed var(--line-2); border-radius:var(--r); background:var(--surface); padding:34px 28px; display:grid; gap:10px; justify-items:center; text-align:center }
  .drop.is-over { border-color:var(--ink); border-style:solid; background:var(--acc-soft) }
  .drop.is-over .big { color:var(--ink) }
  .drop .ic-big { width:54px; height:54px; border-radius:14px; background:var(--acc-soft); display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:var(--muted) }
  .drop.has { border-style:solid; padding:18px 22px; justify-items:stretch; text-align:left }
  .drop .big { font-size:17px; font-weight:600 }
  .drop .or { color:var(--faint); font-size:13px }
  .drop .fine { color:var(--faint); font-size:12px }
  .mic { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line-2); background:#fff; border-radius:999px; padding:8px 16px 8px 10px; font-weight:600; font-size:13px }
  .mic i { width:26px; height:26px; border-radius:50%; background:#dc2626; display:inline-grid; place-items:center } .mic i::after { content:""; width:8px; height:12px; background:#fff; border-radius:4px }
  .file { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center }
  .file .ic { width:40px; height:40px; border-radius:10px; background:var(--acc-soft); display:grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:500; color:var(--muted) }
  .file b { display:block; font-weight:600 } .file span { color:var(--faint); font-size:12px }
  .wave { display:flex; align-items:center; gap:2px; height:38px; margin-top:12px }
  .wave i { flex:1; background:#94a3b8; border-radius:2px; height:var(--h) } .wave i.p { background:var(--ink) }
  .btns { display:flex; gap:10px; margin-top:22px; align-items:center }
  .btn { font:inherit; font-weight:600; font-size:13px; border-radius:10px; padding:10px 16px; border:1px solid var(--line-2); background:#fff; color:var(--ink); cursor:pointer }
  .btn.pri { background:var(--ink); border-color:var(--ink); color:#fff }
  .btn[disabled] { opacity:.45 }
  #s2 .two > .drop:not(.has) { align-self:start; padding:56px 28px }
  .btn.quiet { border-color:transparent; background:transparent; color:var(--muted) }
  .note { color:var(--faint); font-size:12px; margin-left:auto }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:20px }
  .sections { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px }
  .sections li { display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:13px }
  .sections li i { font-style:normal; font-family:var(--mono); font-size:11px; color:var(--faint) }
  .sections li em { font-style:normal; color:var(--faint); font-size:12px }
  .layouts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
  .layouts span { border:1px solid var(--line-2); background:#fff; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:500; color:var(--muted) }
  .opt { margin-top:22px; display:grid; gap:8px }
  .opt label { font-size:13px; font-weight:600 }
  .seg { display:inline-flex; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:#fff; font-size:13px }
  .seg span { padding:7px 14px; color:var(--muted) } .seg span.on { background:var(--ink); color:#fff; font-weight:600 }
  .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px }
  .panel h3 { margin:0 0 10px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px }
  .panel h3 .note { margin-left:auto; font-weight:500 }
  .bar { height:6px; background:#e2e8f0; border-radius:999px; overflow:hidden; margin:8px 0 14px } .bar i { display:block; height:100%; width:36%; background:var(--live); border-radius:999px }
  .tr { display:grid; gap:9px; font-size:14px; line-height:1.55 }
  .tr p { margin:0; display:grid; grid-template-columns:52px 86px 1fr; gap:10px; align-items:baseline }
  .tr time { font-family:var(--mono); font-size:11px; color:var(--faint) }
  .tr .sp { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em }
  .tr .interim { color:var(--faint); font-style:italic }
  .tr .hl { background:#fef08a; border-radius:3px; padding:0 2px }
  .tr .unsure { text-decoration:underline dotted var(--warn); text-underline-offset:3px; cursor:help }
  .tr .fix { display:inline-block; font-size:10px; font-weight:600; color:var(--ok); background:var(--ok-bg); border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:middle }
  .receipt { margin-top:14px; font-size:12px; color:var(--faint); border-top:1px solid var(--line); padding-top:10px }
  .skel h5 { margin:12px 0 4px; font-size:12px; font-weight:600; color:var(--muted) }
  .skel .ln { height:9px; border-radius:999px; background:#e9edf3; margin:6px 0 } .skel .ln.s { width:60% } .skel .ln.fill { background:#c7d2e0 }
  .skel small { color:var(--faint); font-size:11px }
  /* document */
  .doc-wrap { display:grid; grid-template-columns:350px 1fr; gap:20px; align-items:start }
  #s2 .two { grid-template-columns:1.3fr 1fr }
  .transport { display:flex; align-items:center; gap:10px; margin-bottom:12px }
  .transport .play { width:34px; height:34px; border-radius:50%; background:var(--ink); display:grid; place-items:center } .transport .play::after { content:""; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px }
  .transport .skip { font-size:12px; font-weight:600; color:var(--muted); border:1px solid var(--line-2); border-radius:8px; padding:4px 8px; background:#fff }
  .transport time { font-family:var(--mono); font-size:12px; color:var(--muted); margin-left:auto }
  .scrub { position:relative; height:26px; margin:0 0 12px }
  .scrub::before { content:""; position:absolute; left:0; right:0; top:12px; height:3px; background:#e2e8f0; border-radius:999px }
  .scrub .pl { position:absolute; left:0; width:23%; top:12px; height:3px; background:var(--ink); border-radius:999px }
  .scrub .tick { position:absolute; top:8px; width:2px; height:11px; background:var(--warn); border-radius:1px }
  .scrub .head { position:absolute; top:7px; left:23%; width:13px; height:13px; border-radius:50%; background:var(--ink); border:2px solid #fff; box-shadow:0 0 0 1px var(--ink) }
  .actions { display:flex; gap:10px; align-items:center; margin-top:16px }
  .preview { margin-top:14px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#e9edf2; padding:14px; max-height:520px; position:relative }
  .preview .ex { zoom:.5; box-shadow:none; min-height:0 }
  .preview::after { content:""; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(to bottom, rgba(233,237,242,0), #e9edf2) }
  .preview .tag { position:absolute; top:10px; right:10px; z-index:1; font:600 11px var(--sans); background:#fff; border:1px solid var(--line-2); border-radius:999px; padding:4px 10px; color:var(--muted) }
  .doc-wrap .ex { width:auto; min-height:0; padding:34px 30px 28px; border:1px solid var(--line) }
  .doc-wrap .ex .meta { grid-template-columns:96px 1fr } .doc-wrap .ex .meta .wide { grid-column:2 }
  .doc-wrap .ex address { display:none }
  .ann { margin-top:12px; font-size:12.5px; color:var(--muted); max-width:70ch }
  .ann b { color:var(--ink); display:block; margin-bottom:2px }