:root {
  --ground: #F4F5F1; --surface: #FFFFFF; --surface-2: #ECEEE8; --ink: #1B2430; --ink-2: #4B5563; --muted: #7A8491;
  --line: #D9DDD5; --accent: #2F5BD8; --accent-ink: #1E3FA3; --accent-soft: #E4EAFB;
  --good: #1E7A4C; --good-soft: #DDF0E5; --warn: #A85A12; --warn-soft: #FBEBD7; --bad: #B3261E; --bad-soft: #FBE3E1;
  --wire: #5B6B86; --wire-bg: #F3F6FB; --wire-line: #B9C4D8;
  --radius: 8px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #12161C; --surface: #1A2029; --surface-2: #222A35; --ink: #E8ECF1; --ink-2: #B5BECA; --muted: #8590A0;
    --line: #2F3947; --accent: #7C9CF5; --accent-ink: #A9BEFA; --accent-soft: #1F2C4D;
    --good: #5CC08A; --good-soft: #173526; --warn: #E3A25A; --warn-soft: #3A2A16; --bad: #F08A84; --bad-soft: #401C1A;
    --wire: #9FB0CC; --wire-bg: #1C2431; --wire-line: #40506B;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.5 var(--font); }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
a { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn { border: 1px solid var(--line); background: var(--surface); padding: 8px 14px; border-radius: var(--radius); font-weight: 600; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.good { background: var(--good); border-color: var(--good); color: #fff; }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); font-weight: 500; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.field input, .field select, .field textarea, .input { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 9px 11px; font-size: 15px; color: var(--ink); width: 100%; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill.review { background: var(--accent-soft); color: var(--accent-ink); }
.pill.accepted, .pill.live, .pill.test_approved { background: var(--good-soft); color: var(--good); }
.pill.changes_requested, .pill.awaiting_approval, .pill.in_test { background: var(--warn-soft); color: var(--warn); }
.pill.new { background: var(--good-soft); color: var(--good); } .pill.changed { background: var(--warn-soft); color: var(--warn); }
.pill.must { background: var(--ink); color: var(--surface); } .pill.cancelled { text-decoration: line-through; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

.topbar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .brand { font-weight: 800; letter-spacing: -.01em; } .topbar .brand span { color: var(--accent-ink); }
.topbar .grow { flex: 1; }

#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--ink); color: var(--surface); padding: 10px 14px; border-radius: var(--radius); max-width: 360px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.toast.error { background: var(--bad); color: #fff; }

/* login */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }

/* portal */
.portal { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; height: calc(100% - 49px); }
.chat { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface); min-height: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 92%; padding: 10px 13px; border-radius: 12px; white-space: normal; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 3px; }
.msg.assistant { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 3px; }
.msg p { margin: 0 0 8px; } .msg p:last-child { margin-bottom: 0; } .msg ul, .msg ol { margin: 4px 0 8px; padding-left: 20px; }
.msg .who { font-size: 11.5px; opacity: .75; margin-bottom: 2px; }
.msg.note { align-self: center; background: transparent; color: var(--muted); font-size: 13px; padding: 0; }
.working { align-self: flex-start; color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.dots i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); margin-right: 3px; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } }
.composer { border-top: 1px solid var(--line); padding: 12px; display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; max-height: 160px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); }
.docpane { overflow-y: auto; min-height: 0; padding: 20px clamp(16px, 3vw, 36px) 60px; }
.doc { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.doc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; max-width: 980px; margin-inline: auto; }
.doc-tabs button { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 12px; font-size: 13px; }
.doc-tabs button.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.doc-head { display: flex; flex-direction: column; gap: 8px; }
.doc-head h1 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.doc-meta select { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 3px 6px; font-size: 13px; }
.lede { font-size: 17px; color: var(--ink-2); max-width: 68ch; margin: 0; }
.banner { border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); background: var(--surface); }
.banner.ask { border-color: var(--accent); background: var(--accent-soft); }
.banner.warn { border-color: var(--warn); background: var(--warn-soft); }
.banner .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.banner ul { margin: 0; padding-left: 20px; }
.steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.steps .step { padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.steps .step.done { background: var(--good-soft); color: var(--good); } .steps .step.now { background: var(--ink); color: var(--surface); font-weight: 600; }
.steps .arrow { color: var(--muted); }
.sec h2 { font-size: 19px; margin-bottom: 12px; }
.sec ul.plain { margin: 0; padding-left: 20px; max-width: 70ch; } .sec ul.plain li { margin-bottom: 4px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.card h3 { font-size: 15px; } .card .tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.card .id { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.checks { list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--ink-2); }
.checks li { padding-left: 20px; position: relative; margin-bottom: 3px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border: 1.5px solid var(--muted); border-radius: 3px; }
.people { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.flow { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: stretch; margin-bottom: 14px; }
.flow .st { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 10px; font-size: 13.5px; max-width: 220px; display: flex; gap: 7px; }
.flow .st b { color: var(--accent-ink); } .flow .ar { align-self: center; color: var(--muted); }
table.data { border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.data th, table.data td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); }
table.data tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; }

/* wireframes */
.screens { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.screen { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.screen .cap { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .screen .cap h3 { font-size: 15px; }
.screen .why { font-size: 13px; color: var(--ink-2); max-width: 44ch; margin: 0; }
.frame { border: 2px solid var(--wire); border-radius: 10px; background: var(--wire-bg); color: var(--wire); padding: 8px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; line-height: 1.35; }
.frame.mobile { width: 250px; border-radius: 22px; padding: 14px 9px; } .frame.desktop { width: min(470px, 100%); }
.w { border: 1px dashed var(--wire-line); border-radius: 5px; padding: 6px 7px; background: var(--surface); }
.w .t { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; opacity: .8; }
.w.header { display: flex; justify-content: space-between; align-items: center; gap: 6px; border-style: solid; font-weight: 700; font-size: 13px; }
.w .chips { display: flex; flex-wrap: wrap; gap: 4px; } .w .chip { border: 1px solid var(--wire-line); border-radius: 99px; padding: 1px 7px; font-weight: 500; font-size: 11px; }
.w .inp { border: 1px solid var(--wire-line); border-radius: 4px; height: 20px; margin: 2px 0 6px; background: var(--wire-bg); }
.w .lbl { font-size: 11px; }
.w .btnw { display: inline-block; border: 1.5px solid var(--wire); border-radius: 5px; padding: 3px 10px; font-weight: 700; margin: 0 4px 4px 0; background: var(--wire); color: var(--surface); }
.w .btnw + .btnw { background: transparent; color: var(--wire); }
.w .cardsw { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .w .cardw { border: 1px solid var(--wire-line); border-radius: 4px; padding: 5px; min-height: 34px; background: var(--wire-bg); }
.w .roww { border-bottom: 1px dashed var(--wire-line); padding: 3px 0; } .w .roww:last-child { border-bottom: 0; }
.w table { width: 100%; border-collapse: collapse; font-size: 10.5px; } .w th { text-align: left; border-bottom: 1.5px solid var(--wire-line); padding: 2px 3px; }
.w td { border-bottom: 1px dashed var(--wire-line); padding: 5px 3px; } .w td i { display: block; height: 5px; border-radius: 3px; background: var(--wire-line); width: 70%; }
.w .ph { height: 64px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--wire-bg), var(--wire-bg) 6px, var(--surface) 6px, var(--surface) 12px); border-radius: 4px; font-size: 11px; }
.w .bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; } .w .bars i { flex: 1; background: var(--wire-line); border-radius: 2px 2px 0 0; }
.w .tabsw { display: flex; gap: 2px; border-bottom: 1.5px solid var(--wire-line); } .w .tabsw span { padding: 2px 8px; border: 1px solid var(--wire-line); border-bottom: 0; border-radius: 4px 4px 0 0; }
.w .tabsw span:first-child { background: var(--wire); color: var(--surface); }

.empty { max-width: 520px; margin: 12vh auto 0; text-align: center; color: var(--ink-2); display: flex; flex-direction: column; gap: 10px; }
.viewswitch { display: none; }
@media (max-width: 820px) {
  .portal { grid-template-columns: 1fr; }
  .viewswitch { display: flex; gap: 4px; } .viewswitch button { border: 1px solid var(--line); background: var(--surface); padding: 5px 12px; border-radius: 99px; font-size: 13px; }
  .viewswitch button.on { background: var(--ink); color: var(--surface); }
  .portal[data-view="chat"] .docpane, .portal[data-view="doc"] .chat { display: none; }
  .chat { border-right: 0; }
  #who { display: none; } .topbar { gap: 8px; padding: 8px 12px; } .topbar .brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
}

/* operator */
.op { max-width: 1080px; margin: 0 auto; padding: 20px 16px 60px; display: flex; flex-direction: column; gap: 18px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; background: none; padding: 9px 14px; border-bottom: 2px solid transparent; font-weight: 600; color: var(--ink-2); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.panel h2 { font-size: 17px; }
.formgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rowline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kv { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); } .kv b { color: var(--ink); font-variant-numeric: tabular-nums; }
pre.secret { background: var(--surface-2); padding: 10px 12px; border-radius: var(--radius); font-family: var(--mono); font-size: 13px; margin: 0; overflow-x: auto; }

/* ------------------------------------------------------------------------------------------
   "Deck" theme: the customer-facing look. One committed dark world, cyan signal + amber activity.
   ------------------------------------------------------------------------------------------ */
body.deck {
  --ground: #050B18; --surface: #0B1528; --surface-2: #122039; --ink: #E6F1FF; --ink-2: #A9BDD8; --muted: #6F86A6;
  --line: #1E3A63; --accent: #25C8F5; --accent-ink: #7FE3FF; --accent-soft: #0B2C47;
  --good: #4BE3A0; --good-soft: #0C3327; --warn: #FFB547; --warn-soft: #3A2A0C; --bad: #FF7B72; --bad-soft: #401A1A;
  --wire: #8FD6F5; --wire-bg: #0A1A30; --wire-line: #2C5C8C;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, #0E2A52 0%, transparent 60%), radial-gradient(900px 500px at 0% 110%, #2A1A05 0%, transparent 55%), var(--ground);
  background-attachment: fixed;
}
body.deck h1, body.deck h2, body.deck .eyebrow, body.deck .brand, body.deck .btn { font-family: var(--display); letter-spacing: .01em; }
body.deck .topbar { background: rgba(8, 16, 32, .82); backdrop-filter: blur(8px); border-bottom-color: var(--line); }
body.deck .topbar .brand { color: var(--accent-ink); text-shadow: 0 0 14px rgba(37, 200, 245, .5); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
body.deck .btn { background: rgba(18, 32, 57, .8); border-color: var(--line); }
body.deck .btn:hover { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(37, 200, 245, .25), 0 0 16px rgba(37, 200, 245, .18); }
body.deck .btn.primary { background: linear-gradient(180deg, #2BD3FF, #1396D6); border-color: #5EE6FF; color: #031220; box-shadow: 0 0 18px rgba(37, 200, 245, .35); }
body.deck .btn.good { background: linear-gradient(180deg, #5BF0B0, #1FAE74); border-color: #7CF7C4; color: #03170E; box-shadow: 0 0 18px rgba(75, 227, 160, .3); }
body.deck .btn.quiet { background: transparent; border-color: transparent; box-shadow: none; }
body.deck .pill.must { background: var(--accent); color: #031220; }
body.deck .chat { background: rgba(9, 18, 36, .78); border-right-color: var(--line); }
body.deck .msg.user { background: linear-gradient(180deg, #1FA9DE, #1479B3); color: #fff; }
body.deck .msg.assistant { background: var(--surface-2); border: 1px solid var(--line); }
body.deck .composer { border-top-color: var(--line); background: rgba(8, 16, 32, .6); }
body.deck .composer textarea, body.deck .input, body.deck .field input { background: #081223; border-color: var(--line); color: var(--ink); }
body.deck .composer textarea:focus, body.deck .input:focus, body.deck .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 200, 245, .18); }
body.deck .card, body.deck .banner, body.deck table.data, body.deck .flow .st { background: rgba(11, 21, 40, .82); border-color: var(--line); }
body.deck .card { box-shadow: inset 0 1px 0 rgba(127, 227, 255, .06); }
body.deck .banner.ask { background: linear-gradient(180deg, rgba(11, 44, 71, .9), rgba(11, 30, 52, .9)); border-color: var(--accent); box-shadow: 0 0 24px rgba(37, 200, 245, .14); }
body.deck .banner.warn { background: rgba(58, 42, 12, .7); border-color: var(--warn); }
body.deck .doc-head h1 { background: linear-gradient(90deg, #E6F1FF, #7FE3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.deck .sec h2 { display: flex; align-items: center; gap: 10px; }
body.deck .sec h2::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); transform: rotate(45deg); flex: none; }
body.deck .doc-tabs button, body.deck .doc-meta select, body.deck .viewswitch button { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
body.deck .doc-tabs button.on, body.deck .viewswitch button.on { background: var(--accent); color: #031220; border-color: var(--accent); }
body.deck .steps .step { background: var(--surface-2); } body.deck .steps .step.now { background: var(--warn); color: #201400; box-shadow: 0 0 14px rgba(255, 181, 71, .4); }
body.deck .frame { box-shadow: 0 0 0 1px rgba(143, 214, 245, .15), 0 10px 30px rgba(0, 0, 0, .35); }
body.deck .w { background: #0D2038; } body.deck .w .inp, body.deck .w .cardw { background: #0A1A30; }
body.deck .login-card { background: rgba(11, 21, 40, .9); box-shadow: 0 0 40px rgba(37, 200, 245, .12); }
body.deck ::-webkit-scrollbar { width: 10px; height: 10px; } body.deck ::-webkit-scrollbar-thumb { background: #1E3A63; border-radius: 8px; } body.deck ::-webkit-scrollbar-track { background: transparent; }

/* stage */
.stage { position: relative; height: clamp(210px, 31vh, 330px); border-bottom: 1px solid var(--line); overflow: hidden; background: linear-gradient(180deg, #06112A, #050B18); }
.stage.collapsed { height: 40px; } .stage.collapsed .stage-svg { display: none; }
.stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-ticker { position: absolute; left: 12px; bottom: 5px; padding: 4px 6px; font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; max-width: calc(100% - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-ticker b { color: var(--ink); font-family: var(--display); font-weight: 600; }
.stage-ticker .tick { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; }
.stage-ticker .tick.working, .stage-ticker .tick.waiting { background: var(--warn); box-shadow: 0 0 10px var(--warn); animation: beat 1.200s infinite; }
.stage-ticker .tick.done { background: var(--good); box-shadow: 0 0 10px var(--good); } .stage-ticker .tick.standby { background: var(--muted); box-shadow: none; }
.stage-ticker .tick-state { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.stage-toggle { position: absolute; right: 12px; bottom: 6px; z-index: 2; }
.st-trace { fill: none; stroke: #173A66; stroke-width: 1; } .st-pad { fill: #2A6BA8; }
.st-star { fill: #9FE8FF; opacity: .15; animation: twinkle 5s infinite; }
.st-link { fill: none; stroke: #1F4C80; stroke-width: 1.200; } .st-link.done { stroke: #1F7F62; } .st-link.ready { stroke: #2A7DB5; } .st-link.standby { stroke-dasharray: 2 6; opacity: .6; }
.st-flow { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 13; animation: flow 1.100s linear infinite; filter: url(#f-glow); }
.st-flow.working { stroke: #FFB547; } .st-flow.waiting { stroke: #FFB547; opacity: .55; animation-duration: 2.600s; }
.st-dot { fill: #FFE2A8; filter: url(#f-glow); }
.st-ring { fill: none; stroke: #2BD3FF; transform-box: fill-box; transform-origin: center; }
.st-ring.r1 { stroke-width: 1; stroke-dasharray: 3 9; opacity: .55; animation: spin 38s linear infinite; }
.st-ring.r2 { stroke-width: 1.500; stroke-dasharray: 40 14 6 14; opacity: .8; animation: spin 22s linear infinite reverse; }
.st-ring.r3 { stroke-width: .8; opacity: .35; }
.st-net { transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite; }
.st-netline { stroke: #5EE6FF; stroke-width: .6; opacity: .5; } .st-netdot { fill: #CFF6FF; }
.st-core { animation: breathe 3.600s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.st-hubname { fill: #CFE9FF; font: 600 13px var(--display); letter-spacing: .04em; } .st-hubsub { fill: #6F86A6; font: 11px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.st-node { cursor: default; outline: none; }
.st-disc { fill: #0A1A33; stroke: #2BD3FF; stroke-width: 1.600; filter: url(#f-glow); }
.st-orbit { fill: none; stroke: #2BD3FF; stroke-width: .8; stroke-dasharray: 2 5; opacity: .6; transform-box: fill-box; transform-origin: center; animation: spin 16s linear infinite; }
.st-icon { fill: none; stroke: #BFF2FF; stroke-width: 1.500; stroke-linecap: round; stroke-linejoin: round; }
.st-name { fill: #E6F1FF; font: 600 12.500px var(--display); letter-spacing: .03em; } .st-status { fill: #8FA6C4; font: 11.500px var(--font); }
.st-node.working .st-disc, .st-node.waiting .st-disc { stroke: #FFB547; } .st-node.working .st-orbit, .st-node.waiting .st-orbit { stroke: #FFB547; animation-duration: 5s; }
.st-node.working .st-icon, .st-node.waiting .st-icon { stroke: #FFE2A8; } .st-node.working .st-status, .st-node.waiting .st-status { fill: #FFCB7A; }
.st-node.done .st-disc, .st-node.done .st-orbit { stroke: #4BE3A0; } .st-node.done .st-icon { stroke: #B9F7DB; } .st-node.done .st-status { fill: #7FE0B6; }
.st-node.standby .st-disc { stroke: #35527A; filter: none; } .st-node.standby .st-orbit { stroke: #35527A; animation: none; } .st-node.standby .st-icon { stroke: #5F7BA3; } .st-node.standby .st-name { fill: #8FA6C4; }
.st-node:focus-visible .st-disc { stroke-width: 3; }
.st-pulse { fill: none; stroke: #FFB547; stroke-width: 1.500; transform-box: fill-box; transform-origin: center; animation: ping 1.800s ease-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flow { to { stroke-dashoffset: -18; } }
@keyframes ping { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.500); opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.080); opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: .1; } 50% { opacity: .7; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.500); } }
@media (prefers-reduced-motion: reduce) { .st-ring, .st-net, .st-orbit, .st-core, .st-star, .st-flow, .st-pulse, .stage-ticker .tick { animation: none !important; } .st-dot { display: none; } }
body.deck .portal { height: calc(100% - 49px - var(--stage-h, 0px)); }
@media (max-width: 820px) { .stage { height: 200px; } }

/* studio console in the deck theme */
body.deck .panel { background: rgba(11, 21, 40, .82); border-color: var(--line); box-shadow: inset 0 1px 0 rgba(127, 227, 255, .06); }
body.deck .tabs { border-bottom-color: var(--line); } body.deck .tabs button { font-family: var(--display); letter-spacing: .03em; }
body.deck .tabs button.on { color: var(--accent-ink); border-bottom-color: var(--accent); text-shadow: 0 0 12px rgba(37, 200, 245, .5); }
body.deck .field textarea, body.deck .field select { background: #081223; border-color: var(--line); color: var(--ink); }
body.deck pre.secret { background: #081223; border: 1px solid var(--line); color: var(--accent-ink); }
body.deck table.data th { background: #0E1D36; } body.deck a { color: var(--accent-ink); }
body.deck input[type="checkbox"] { accent-color: var(--accent); }

/* first run: template chooser */
.starter { position: fixed; inset: calc(49px + var(--stage-h, 0px)) 0 0 0; z-index: 20; overflow: auto; background: var(--ground); padding: 28px 16px 48px; }
.starter[hidden] { display: none; }
.starter-in { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.starter h1 { font-size: clamp(22px, 3.4vw, 32px); }
.starter .lede { max-width: 62ch; color: var(--ink-2); margin: 0 0 6px; }
.tpl-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.tpl { text-align: left; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: transform .15s, border-color .15s, box-shadow .15s; }
.tpl:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); }
.tpl:disabled { cursor: default; opacity: .62; }
.tpl-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--accent-ink); }
.tpl-name { font-weight: 700; font-size: 17px; }
.tpl .pill { margin-top: auto; }
.mod-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 8px; }
.mod { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.mod input { position: absolute; opacity: 0; }
.mod-box { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 5px; border: 1.500px solid var(--muted); display: grid; place-items: center; }
.mod input:checked + .mod-box { background: var(--accent); border-color: var(--accent); }
.mod input:checked + .mod-box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #031220; border-bottom: 2px solid #031220; transform: rotate(-45deg) translateY(-1px); }
.mod input:focus-visible + .mod-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.mod:has(input:checked) { border-color: var(--accent); }
.mod b { display: block; } .mod .small { display: block; color: var(--ink-2); }
body.deck .starter { background: radial-gradient(900px 420px at 50% -10%, rgba(37, 200, 245, .13), transparent 70%), #050B18; }
body.deck .starter h1 { font-family: var(--display); background: linear-gradient(90deg, #E6F1FF, #7FE3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.deck .tpl, body.deck .mod { background: rgba(11, 21, 40, .86); border-color: var(--line); color: var(--ink); }
body.deck .tpl:not(:disabled):hover { box-shadow: 0 0 0 1px rgba(37, 200, 245, .3), 0 0 26px rgba(37, 200, 245, .2); }
body.deck .tpl-ico { border-color: rgba(94, 230, 255, .5); box-shadow: 0 0 16px rgba(37, 200, 245, .25), inset 0 0 12px rgba(37, 200, 245, .15); }
body.deck .tpl-name { font-family: var(--display); letter-spacing: .02em; }
body.deck .mod:has(input:checked) { box-shadow: 0 0 18px rgba(37, 200, 245, .14); background: rgba(11, 36, 60, .9); }
@media (prefers-reduced-motion: reduce) { .tpl { transition: none; } }
.restart { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 18px; color: var(--ink-2); }
.restart [hidden] { display: none; }
.empty .restart { justify-content: center; }
/* attachments */
.btn.attach { padding: 10px; display: grid; place-items: center; color: var(--ink-2); }
.attach-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.attach-row[hidden] { display: none; }
.files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.filechip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.filechip::before { content: ""; width: 9px; height: 11px; border: 1.500px solid currentColor; border-radius: 2px; flex: none; opacity: .7; }
.filechip.loading { opacity: .65; }
.filechip button { border: 0; background: none; padding: 0 2px; font-size: 16px; line-height: 1; color: inherit; }
.msg.user .filechip { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.chat.dropping { outline: 2px dashed var(--accent); outline-offset: -6px; }
/* portal page: one screen tall, each pane scrolls inside itself (no fixed header heights) */
body.fit { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
body.fit > .topbar, body.fit > .stage { flex: none; }
body.fit .portal, body.deck.fit .portal { flex: 1 1 0; min-height: 0; height: auto; }
body.fit .starter { position: static; flex: 1 1 0; min-height: 0; }
body.fit .starter:not([hidden]) + .portal { display: none; }
body.fit .chat, body.fit .docpane { min-height: 0; height: 100%; }
body.fit .chat-log { min-height: 0; }
body.fit .composer, body.fit .attach-row { flex: none; }
.topbar .btn, .viewswitch button { white-space: nowrap; }
@media (max-width: 820px) { body.fit .stage:not(.collapsed) { height: clamp(150px, 24vh, 200px); } }