/* Shultana — interface concept A (Futuristic AI Command Center), chosen by the owner on 26 Oct 2026 (with concept C for
   the Create area). It grows out of direction B: goal bar on top, live workflow panel, right rail on Today. Space Grotesk
   headings, Inter text, JetBrains Mono only for data. One dark theme; text colours checked at 4.5:1 or better. */
:root {
  --bg: #07090D; --surface: #0E1219; --surface2: #0A0E14; --line: #1C2330;
  --ink: #D8E1EE; --muted: #7F8BA0; --faint: #7F8BA0; --white: #FFFFFF;
  --accent: #5EE1F5; --accent2: #5BE39A; --accent-ink: #05121A; --accent-bg: #0B1A22; --accent-line: #16404C;
  --gold: #F4C35A; --good: #5BE39A; --warn: #F4C35A; --bad: #FF7A85;
  --idea: #5EE1F5; --build: #F4C35A; --check: #5EE1F5; --listed: #C9B6FF; --selling: #5BE39A;
  --chip-gold: #2A2210; --chip-blue: #0B1A22; --chip-lilac: #1E1A33; --chip-green: #0E2A1D; --chip-red: #2E1418; --chip-teal: #0B1A22;
  --shadow: none; --shadow-hover: none; --backdrop: rgba(0,0,0,.7);
  color-scheme: dark;
  --radius: 8px; --f-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", Consolas, Menlo, "Hind Siliguri", monospace;
  --f-head: var(--f-mono); --f-body: var(--f-mono);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--f-head); line-height: 1.2; margin: 0; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 13px; } .tiny { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }

.app { display: flex; min-height: 100vh; }
.nav { flex: 0 0 236px; border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 16px; font: 700 18px var(--f-head); }
.logo { width: 30px; height: 30px; border-radius: 9px; background: var(--gold); color: #0E0F13; display: grid; place-items: center; font: 700 16px var(--f-head); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14px; min-height: 40px; }
.nav a:hover { background: var(--surface2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--surface2); color: var(--ink); font-weight: 600; }
.nav .count { margin-left: auto; }
.nav .foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.main { flex: 1 1 auto; min-width: 0; padding: 26px 32px 0; display: flex; flex-direction: column; gap: 20px; outline: none; }
.credit { text-align: center; color: var(--faint); font-size: 12px; padding: 28px 0 22px; margin-top: auto; }

.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kicker { font: 500 12px var(--f-body); color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.lede { color: var(--muted); max-width: 75ch; margin-top: 6px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grow { flex: 1 1 260px; min-width: 0; }
.cols { display: flex; flex-wrap: wrap; gap: 16px; }
.cols > * { flex: 1 1 320px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sep { border-top: 1px solid var(--line); }

.btn { font: 600 13.5px var(--f-body); border-radius: 10px; padding: 9px 14px; min-height: 40px; cursor: pointer; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { color: var(--bad); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 34px; padding: 6px 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.c-gold { background: var(--chip-gold); color: var(--gold); } .c-blue { background: var(--chip-blue); color: var(--accent); } .c-lilac { background: var(--chip-lilac); color: var(--listed); }
.c-green { background: var(--chip-green); color: var(--good); } .c-red { background: var(--chip-red); color: var(--bad); } .c-teal { background: var(--chip-teal); color: var(--check); } .c-grey { background: var(--surface2); color: var(--muted); }

label.field, .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
input[type=text], input[type=search], input[type=number], input[type=password], input[type=url], input[type=email], input[type=tel], input[type=date], input[type=datetime-local], input:not([type]), select, textarea {
  font: 15px var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 42px; width: 100%; }
textarea { min-height: 220px; resize: vertical; line-height: 1.5; font-size: 14px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); font-size: 14px; cursor: pointer; color: var(--ink); }
.opt input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.opt:has(input:checked) { border-color: var(--accent); }
.drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 26px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.drop.over { border-color: var(--accent); }

.board { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.lane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; border-top-width: 3px; min-height: 120px; }
.lane .item { background: var(--surface2); border-radius: 10px; padding: 10px; font-size: 13px; text-decoration: none; color: var(--ink); display: block; }
.lane .empty { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; font-size: 12px; color: var(--muted); }

.draft { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.draft:first-of-type { border-top: none; }
.est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 13px; }
.est b { font: 600 16px var(--f-head); font-variant-numeric: tabular-nums; }
.est details { width: 100%; }
.est summary { cursor: pointer; color: var(--accent); font-size: 13px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-top: 1px solid var(--line); font-size: 13px; vertical-align: top; }
th { color: var(--muted); font-weight: 500; border-top: none; }
.scroll { overflow-x: auto; }
.bar { height: 8px; background: var(--surface2); border-radius: 99px; overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--gold); }
.chat { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 760px; padding: 12px 14px; border-radius: 14px; white-space: pre-wrap; }
.msg.me { align-self: flex-end; background: var(--chip-blue); }
.msg.ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); }
.note { background: var(--surface2); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.note.bad { background: var(--chip-red); color: var(--ink); }
.note.good { background: var(--chip-green); color: var(--ink); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.kpi .v { font: 700 24px var(--f-head); font-variant-numeric: tabular-nums; margin-top: 4px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a { padding: 7px 12px; border-radius: 999px; text-decoration: none; color: var(--muted); border: 1px solid var(--line); font-size: 13px; }
.tabs a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; z-index: 60; max-width: calc(100vw - 32px); }
.dlg { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: 0; width: min(820px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
.dlg::backdrop { background: var(--backdrop); }
.dlg .inner { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.gate { max-width: 520px; margin: 10vh auto 0; }
.tabbar { display: none; }

@media (max-width: 860px) {
  .nav { display: none; }
  .main { padding: 18px 16px 0; padding-bottom: 90px; }
  h1 { font-size: 24px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--line); padding: 4px 6px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; color: var(--muted); text-decoration: none; min-height: 48px; justify-content: center; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* long URLs and keys wrap instead of widening the page */
.note code,.note a,.est a{overflow-wrap:anywhere;word-break:break-word}
.preview-banner{position:sticky;top:0;z-index:50;background:var(--chip-gold);color:var(--gold);text-align:center;font-size:13px;padding:6px 12px;border-bottom:1px solid currentColor}

/* agent team */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flow-step { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); }
.flow-step.off { opacity: .45; text-decoration: line-through; }
.flow-arrow { color: var(--muted); }
.flow-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--chip-blue); color: var(--accent); flex: none; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.agent-card { gap: 10px; }
.agent-card.off { opacity: .65; }
.check ul { margin: 6px 0 0; padding-left: 18px; }
.prose h2{margin-top:1.4em}.prose p,.prose li{line-height:1.7}.prose a{overflow-wrap:anywhere}

/* saved chats */
.chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.chat-list { gap: 8px; max-height: 75vh; overflow: auto; }
.chat-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.chat-item:hover, .chat-item.on { background: var(--surface2); }
@media (max-width: 860px) { .chat-layout { grid-template-columns: 1fr; } .chat-list { max-height: 220px; } }
[hidden] { display: none !important; }
.nav-group { margin: 14px 12px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.nav-faint { opacity: .7; font-size: 13px; }

/* Release 1 */
.big { font: 600 32px/1.1 var(--f-head); margin: 4px 0 8px; }
.action { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.action:hover { background: var(--surface2); }
.action .grow { display: flex; flex-direction: column; gap: 2px; }
.action-n { font: 700 18px var(--f-head); color: var(--gold); width: 18px; text-align: center; }
.cal-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 8px; overflow-x: auto; }
.cal-day { display: flex; flex-direction: column; gap: 6px; min-height: 160px; padding: 8px; border-radius: 10px; background: var(--surface2); }
.cal-day.today { outline: 2px solid var(--accent); }
.cal-head { font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-item { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; width: 100%; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.cal-item.st-posted { opacity: .7; }
.kit { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.kit-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.kit-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; }
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.idea { gap: 8px; }
@media (max-width: 860px) { .cal-layout { grid-template-columns: 1fr; } .cal-week { grid-template-columns: repeat(7, 140px); } .idea-grid { grid-template-columns: 1fr; } }
.row > select, .row > input[type=search] { width: auto; }
#fs, #fc, #or { width: auto; min-width: 150px; }
.cal-week { grid-template-columns: repeat(7, minmax(96px, 1fr)); }
/* Release 2+ workspace screens */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid .wide { grid-column: 1 / -1; }
.check-row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink); }
.check-row input { margin-top: 3px; }
.empty-box { display: flex; flex-direction: column; gap: 4px; border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.list-row input { width: 100%; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.media-card { gap: 8px; }
.media-card .thumb { aspect-ratio: 4 / 3; border-radius: 10px; background: var(--surface2); display: grid; place-items: center; overflow: hidden; }
.media-card .thumb img, .media-card .thumb video { width: 100%; height: 100%; object-fit: cover; }
.phone { max-width: 340px; margin: 0 auto; border: 1px solid var(--line); border-radius: 22px; padding: 22px 16px; display: flex; flex-direction: column; gap: 10px; text-align: center; background: var(--bg); }
.phone-link { display: block; padding: 12px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.phone-box { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: left; }
.phone-input { border: 1px solid var(--line); border-radius: 8px; padding: 8px; color: var(--faint); font-size: 13px; }
.sw { width: 42px; height: 24px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface2); position: relative; cursor: pointer; flex: 0 0 auto; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--faint); transition: left .15s; }
.sw[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.sw[aria-checked="true"]::after { left: 20px; background: var(--accent-ink); }
.sw:disabled { opacity: .45; cursor: not-allowed; }
.mchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bad-text { color: var(--bad); }
fieldset.plain { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lane .item .row { flex-wrap: wrap; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid textarea, .list-row textarea, form.chat textarea[rows] { min-height: 0; }
input[type=color] { width: 64px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); }

/* M4: approvals, connectors, tools, system health */
.stack { display: flex; flex-direction: column; gap: 14px; }
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cards4 .card { display: flex; flex-direction: column; gap: 6px; }
.cards4 .big { font: 700 26px var(--f-head); }
.approval .small + .small { margin-top: 2px; }
label.c { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 4px 0; }
fieldset.field { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0; }
fieldset.field legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
.score-pill { font: 700 15px var(--f-head); min-width: 44px; text-align: center; padding: 4px 8px; border-radius: 10px; background: var(--surface2); }
.crit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.crit select { min-width: 70px; }
@media (max-width: 760px) { .cards4 { grid-template-columns: 1fr 1fr; } }

/* M5: direction C components + B's live workflow panel */
.card { box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; }
a.card:hover, .card.lift:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.logo { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--accent-ink); }
.nav { background: var(--surface); }
.nav a[aria-current="page"] { background: var(--chip-blue); color: var(--accent); }
.nav .count { background: var(--accent); color: var(--accent-ink); }
.btn.primary { background-color: var(--accent); background-image: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn.primary:hover { filter: brightness(1.05); }
.bar > span { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.action-n { color: var(--accent); background: var(--chip-blue); border-radius: 10px; width: 34px; height: 34px; display: grid; place-items: center; font-size: 15px; flex: none; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { gap: 4px; }
a.card { color: var(--ink); text-decoration: none; }
a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat .v { font: 700 26px var(--f-head); font-variant-numeric: tabular-nums; }
.stat a { text-decoration: none; }
.dash { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.ring { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ring svg { flex: 0 0 auto; }
.ring .track { stroke: var(--chip-blue); } .ring .val { stroke: var(--accent); } .ring text { fill: var(--ink); font: 700 22px var(--f-head); }
.tag { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
/* live workflow (B): every state shown comes from the server */
.live-run { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.live-run:first-of-type { border-top: 0; }
.wf { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px 2px 6px; }
.wf-node { flex: 1 0 140px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wf-node b { font-size: 13.5px; }
.wf-node .tiny { color: var(--muted); }
.wf-node.done { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.wf-node.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent); }
.wf-node.waiting { border-style: dashed; border-color: var(--gold); }
.wf-node.failed { border-color: var(--bad); }
.wf-node.not_needed, .wf-node.pending, .wf-node.cancelled { opacity: .6; }
.wf-link { flex: 0 0 22px; align-self: center; height: 2px; background: var(--line); }
.wf-link.on { background: linear-gradient(90deg, var(--accent), transparent); background-size: 200% 100%; animation: wf-flow 1.4s linear infinite; }
@keyframes wf-flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--faint); }
.dot.done { background: var(--good); } .dot.active { background: var(--accent); animation: dot-pulse 1.2s ease-in-out infinite; } .dot.waiting { background: var(--gold); } .dot.failed { background: var(--bad); }
@keyframes dot-pulse { 50% { opacity: .3; } }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .wf { flex-direction: column; } .wf-node { flex: 0 0 auto; } .wf-link { width: 2px; height: 12px; flex: 0 0 12px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .wf-link.on, .dot.active { animation: none; } a.card:hover, .card.lift:hover { transform: none; } }

/* Menu: Option C keeps the sidebar short, so each section folds; the one you're in stays open. */
.nav details.nav-sec { margin: 0; }
.nav details.nav-sec > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; min-height: 40px; cursor: pointer; user-select: none; }
.nav details.nav-sec > summary::-webkit-details-marker { display: none; }
.nav details.nav-sec > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.nav details.nav-sec[open] > summary::after { transform: rotate(45deg); }
.nav details.nav-sec > summary:hover { background: var(--surface2); color: var(--ink); }
.nav details.nav-sec.here > summary { color: var(--ink); font-weight: 600; }
.nav details.nav-sec > summary .count { margin-left: 0; }
.nav details.nav-sec > a { padding-left: 24px; }
.nav details.nav-sec[open] > summary .count { display: none; }

/* ===== Concept A: command centre ===== */
:root {
  --bg: #070B12; --surface: #0D131D; --surface2: #0A0F18; --line: #1B2636;
  --ink: #E4EBF5; --muted: #8C99AD; --faint: #8C99AD; --white: #FFFFFF;
  --accent: #4FD8EB; --accent2: #3DD68C; --accent-ink: #04222A; --accent-bg: #0C2630; --accent-line: #1E5865;
  --gold: #F5B84A; --good: #3DD68C; --warn: #F5B84A; --bad: #FF7D8C; --violet: #A898FF;
  --st-work: #4FD8EB; --st-queue: #8C99AD; --st-wait: #F5B84A; --st-done: #3DD68C; --st-fail: #FF7D8C; --st-pause: #6B7789;
  --chip-gold: #2A2210; --chip-blue: #0C2630; --chip-lilac: #1E1A33; --chip-green: #0E2A22; --chip-red: #2E1418; --chip-teal: #0C2630;
  --radius: 14px;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, "Hind Siliguri", monospace;
  --f-head: "Space Grotesk", "Inter", "Hind Siliguri", system-ui, sans-serif;
  --f-body: "Inter", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html, body { font-size: 14.5px; line-height: 1.55; }
h1 { font: 600 26px/1.15 var(--f-head); color: var(--white); letter-spacing: -.01em; }
h2 { font: 600 16px var(--f-head); }
.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--surface2); position: sticky; top: 0; z-index: 30; }
.topbar .brandb { color: var(--ink); font: 700 15px var(--f-head); letter-spacing: .08em; text-decoration: none; white-space: nowrap; }
.topbar form { flex: 1; min-width: 0; display: flex; }
.topbar input.cmd { flex: 1; min-height: 40px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font: 14px var(--f-body); color: var(--ink); }
.topbar input.cmd::placeholder { color: var(--muted); }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; color: var(--muted); white-space: nowrap; font: 12px var(--f-mono); text-decoration: none; }
.pill.g { color: var(--good); border-color: #1F4A35; } .pill.w { color: var(--warn); border-color: #4A3B17; } .pill.r { color: var(--bad); border-color: #4A1F25; }
.app { min-height: calc(100vh - 65px); }
.nav { flex: 0 0 224px; padding: 14px 10px; background: var(--surface2); border-right: 1px solid var(--line); top: 65px; height: calc(100vh - 65px); gap: 2px; }
.nav .brand { display: none; }
.nav a, .nav details.nav-sec > summary { border-radius: 8px; padding: 8px 12px; min-height: 38px; font-size: 14px; color: #B8C3D3; border-left: 0; }
.nav a:hover, .nav details.nav-sec > summary:hover { background: #111A27; color: var(--ink); }
.nav a[aria-current="page"] { background: #11202A; color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav details.nav-sec > a { padding-left: 26px; font-size: 13.5px; }
.nav details.nav-sec.here > summary { color: var(--ink); font-weight: 600; }
.nav .count { background: transparent; color: var(--warn); border: 1px solid #4A3B17; font-family: var(--f-mono); }
.nav .foot { padding: 12px 4px 0; }
.nav .foot .card { background: var(--surface); }
.main { padding: 22px 24px 0; gap: 16px; }
.card, .kpi, .lane, .dlg { border-radius: var(--radius); box-shadow: none; }
.card { padding: 16px; gap: 10px; background: var(--surface); border-color: var(--line); }
a.card:hover, .card.lift:hover { transform: none; border-color: var(--accent-line); }
.card > h2, .card > .row > h2, .card h2.ph { font: 600 15px var(--f-head); letter-spacing: 0; text-transform: none; color: var(--ink); }
.kicker { font: 500 12px var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.btn { font: 600 13.5px var(--f-body); border-radius: 10px; min-height: 40px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); }
.btn.primary { background: var(--accent); background-image: none; color: var(--accent-ink); border: 1px solid var(--accent); box-shadow: none; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { min-height: 34px; padding: 5px 11px; border-radius: 8px; }
.chip { border-radius: 999px; font-weight: 600; }
input[type=text], input[type=search], input[type=number], input[type=password], input[type=url], input[type=email], input[type=tel], input[type=date], input[type=datetime-local], input:not([type]), select, textarea { font: 14px var(--f-body); background: var(--surface2); border-radius: 10px; border-color: var(--line); }
.logo { display: none; }
.bar > span, .goalbar i { background: var(--accent); }
.stat .v, .kpi .v, .big, .cards4 .big { font-family: var(--f-head); color: var(--white); font-variant-numeric: tabular-nums; }
.ring .track { stroke: #141F2D; } .ring text { fill: var(--white); }
.toast { background: #0C2630; color: var(--ink); border: 1px solid var(--accent-line); border-radius: 10px; }
.credit { color: var(--muted); }
code, kbd, .mono, .log, .tiny.mono { font-family: var(--f-mono); }
/* Today: main column + right rail */
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; margin: -22px -24px 0; }
.bgrid > .bmain { padding: 22px 0 0 24px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.bgrid > aside { border-left: 1px solid var(--line); padding: 22px 20px; display: grid; gap: 16px; align-content: start; min-height: calc(100vh - 65px); background: #080D15; }
.kpi4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi4 .card { gap: 4px; text-decoration: none; }
.kpi4 .card span { color: var(--muted); font-size: 12.5px; } .kpi4 .card b { font: 600 26px var(--f-head); color: var(--white); }
.ph { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; }
.ph span { font: 500 12px var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.btab { width: 100%; border-collapse: collapse; }
.btab td { padding: 8px 4px; border-top: 1px solid var(--line); }
.btab td:last-child { text-align: right; color: var(--muted); white-space: nowrap; font-family: var(--f-mono); font-size: 12.5px; }
.q { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.q .btn { flex: none; }
.log { color: var(--muted); line-height: 1.8; overflow-wrap: anywhere; font-size: 12.5px; } .log i { color: var(--accent); font-style: normal; }
.goalbar { height: 6px; background: #141F2D; border-radius: 3px; margin-top: 8px; overflow: hidden; } .goalbar i { display: block; height: 100%; border-radius: 3px; }
/* State language (same in every screen): working, queued, waiting for you, completed, failed, paused */
.wf-node { background: var(--surface2); border-radius: 10px; }
.wf-node.active { border-color: var(--st-work); background: #0C2630; }
.wf-node.done { border-color: #1F4A35; } .wf-node.waiting { border-color: var(--st-wait); border-style: solid; }
.wf-node.pending { border-style: dashed; } .wf-node.failed { border-color: var(--st-fail); }
.dot { width: 9px; height: 9px; }
.dot.active { background: var(--st-work); } .dot.waiting { background: var(--st-wait); } .dot.done { background: var(--st-done); }
.dot.failed { background: var(--st-fail); } .dot.queued { background: transparent; border: 1px dashed var(--st-queue); } .dot.paused { background: var(--st-pause); }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.dot.active { box-shadow: 0 0 0 3px rgba(79,216,235,.18); }
@media (prefers-reduced-motion: reduce) { .dot.active { box-shadow: none; } }
@media (max-width: 1400px) { .bgrid { grid-template-columns: 1fr; } .bgrid > aside { border-left: 0; min-height: 0; padding: 0 24px; background: transparent; } }
@media (max-width: 860px) {
  .topbar .pill { display: none; } .topbar { padding: 10px 12px; gap: 10px; }
  .app { min-height: 0; }
  .main { padding: 16px 16px 96px; }
  h1 { font-size: 22px; }
  .bgrid { margin: -16px -16px 0; } .bgrid > .bmain { padding: 16px 16px 0; } .bgrid > aside { order: -1; padding: 16px 16px 0; }
  .kpi4 { grid-template-columns: 1fr 1fr; }
  .tabbar { background: var(--surface2); border-top: 1px solid var(--line); }
  .tabbar a { min-height: 52px; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
}
.warn-text { color: var(--warn); } .good { color: var(--good); }
/* Technology registry: decision filter chips */
button.chip { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 12px; }
button.chip[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ===== Concept C: Creative Studio (Release 17). Scoped to the Create area; the shell stays concept A. ===== */
.studio-c {
  --c-ground: #121214; --c-surface: #1B1B1F; --c-surface2: #222228; --c-line: #2A2A30;
  --accent: #FF8A65; --accent-ink: #1E0D07; --c-blue: #7AA2FF; --good: #4ADE80; --gold: #FBBF24; --bad: #F87171;
  --f-head: "Sora", "Inter", "Hind Siliguri", system-ui, sans-serif;
  display: flex; flex-direction: column; gap: 18px;
  background: radial-gradient(1200px 400px at 0% -10%, rgba(255,138,101,.07), transparent 60%), var(--c-ground);
  margin: -22px -24px 0; padding: 22px 24px 8px; border-bottom: 1px solid var(--c-line);
}
.studio-c .card { background: var(--c-surface); border-color: var(--c-line); border-radius: 18px; }
.studio-c h1 { font: 600 28px/1.15 var(--f-head); }
.studio-c h2, .studio-c .sc-h2 { font: 600 16px var(--f-head); margin: 0 0 10px; }
.studio-c .btn { border-radius: 12px; }
.studio-c a:not(.btn):not(.sc-card) { color: var(--accent); }
.studio-c .dot.done { background: var(--good); } .studio-c .dot.waiting { background: var(--gold); } .studio-c .dot.failed { background: var(--bad); } .studio-c .dot.active { background: var(--accent); }
.sc-run { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-line); }
.sc-run:first-of-type { border-top: 0; }
.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.sc-board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.sc-lane { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.sc-lane-h { display: flex; align-items: center; gap: 4px; } .sc-lane-h h3 { font: 600 14px var(--f-head); flex: 1; }
.sc-n { font: 600 12px var(--f-mono, monospace); color: var(--muted); background: var(--c-surface2); border-radius: 99px; padding: 2px 8px; }
.sc-card { display: flex; flex-direction: column; gap: 3px; background: var(--c-surface2); border: 1px solid transparent; border-radius: 12px; padding: 10px; color: var(--ink); text-decoration: none; font-size: 13px; transition: border-color .15s, transform .15s; }
.sc-card:hover, .sc-card:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.sc-empty { border: 1px dashed var(--c-line); border-radius: 12px; padding: 10px; font-size: 12px; color: var(--muted); }
.sc-side { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sc-crewlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 18px; }
.sc-crew { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--c-line); }
.sc-crew > .tiny { flex-basis: 100%; padding-left: 42px; }
.sc-av { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font: 600 14px var(--f-head); background: rgba(255,138,101,.14); color: var(--accent); flex: 0 0 auto; }
.sc-bad { color: var(--bad); }
.studio-c input { min-height: 40px; }
@media (max-width: 1100px) { .sc-side { grid-template-columns: minmax(0, 1fr); } }
.sc-grid > * { min-width: 0; }
@media (max-width: 860px) { .studio-c { margin: -16px -16px 0; padding: 16px 16px 8px; } }
@media (max-width: 760px) {
  .sc-board { grid-template-columns: repeat(5, minmax(220px, 82vw)); scroll-snap-type: x mandatory; }
  .sc-lane { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .sc-card { transition: none; } .sc-card:hover { transform: none; } }

/* ===== Release 19: concept A visual layer (graphics drawn from real data; motion only for real work) ===== */
.hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.hero .kicker { font: 500 12px var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.hero h1 { font-size: 28px; margin-top: 4px; }
.card { box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 10px 30px -18px rgba(0,0,0,.6); }
.kpi4 .card { position: relative; overflow: hidden; transition: border-color .15s, transform .15s; }
.kpi4 .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .55; }
.kpi4 .card:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.spark { display: block; margin: 2px 0; }
.wf-graph { display: block; margin: 6px auto 4px; overflow: visible; }
.wf-graph .ring { animation: spin 3.2s linear infinite; transform-origin: center; transform-box: fill-box; }
.wf-graph .edge-live { stroke-dasharray: 6 6; animation: edge-flow 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes edge-flow { to { stroke-dashoffset: -24; } }
@keyframes breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.wf-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); }
.wf-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.wf-legend i.q { border: 1px dashed var(--muted); }
/* The step list is the accessible text of the graph: shown on phones, kept for screen readers on wide screens. */
@media (min-width: 861px) { .wf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 860px) { .wf-graph { display: none; } .wf-graph + .wf-legend { display: none; } }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--line); font-size: 13px; }
.timeline li { position: relative; display: flex; gap: 10px; }
.timeline li::before { content: ""; position: absolute; left: -19px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.timeline time { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
#livePill .live-dot { display: inline-block; animation: breathe 1.8s ease-in-out infinite; }
#livePill.g { box-shadow: 0 0 12px -4px var(--good); }
@media (prefers-reduced-motion: reduce) { .wf-graph .ring, .wf-graph .edge-live, #livePill .live-dot { animation: none; } .kpi4 .card:hover { transform: none; } }

/* ===== Release 19: look switch — Creative Studio (C) across the whole app ===== */
:root[data-look="c"] {
  --bg: #121214; --surface: #1B1B1F; --surface2: #17171A; --line: #2A2A30;
  --ink: #EDEDF0; --muted: #A0A0AB; --faint: #A0A0AB;
  --accent: #FF8A65; --accent2: #7AA2FF; --accent-ink: #1E0D07; --accent-bg: #2A1A14; --accent-line: #5A3426;
  --gold: #FBBF24; --good: #4ADE80; --warn: #FBBF24; --bad: #F87171;
  --st-work: #FF8A65; --st-wait: #FBBF24; --st-done: #4ADE80; --st-fail: #F87171;
  --chip-gold: #2B2410; --chip-blue: #2A1A14; --chip-green: #12281A; --chip-red: #2E1616; --chip-teal: #14213A;
  --radius: 18px;
  --f-head: "Sora", "Inter", "Hind Siliguri", system-ui, sans-serif;
}
:root[data-look="c"] body { background: radial-gradient(1200px 500px at 0% -10%, rgba(255,138,101,.07), transparent 60%), var(--bg); }
:root[data-look="c"] .nav a, :root[data-look="c"] .nav details.nav-sec > summary { color: #C9C9D1; }
:root[data-look="c"] .nav a:hover, :root[data-look="c"] .nav details.nav-sec > summary:hover { background: #222228; }
:root[data-look="c"] .nav a[aria-current="page"] { background: #2A1A14; }
:root[data-look="c"] .pill.g { border-color: #1F4A30; } :root[data-look="c"] .pill.w { border-color: #4A3B17; } :root[data-look="c"] .pill.r { border-color: #4A1F22; }
:root[data-look="c"] .btn { border-radius: 12px; }
:root[data-look="c"] .kpi4 .card::before { background: linear-gradient(90deg, var(--accent), var(--accent2) 60%, transparent); }
:root[data-look="c"] .timeline li::before { border-color: var(--accent); }
/* Look picker in Settings */
.look-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.look-opt { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); cursor: pointer; color: var(--ink); text-align: left; font: inherit; }
.look-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.look-opt .look-sw { display: flex; gap: 6px; } .look-opt .look-sw i { width: 22px; height: 22px; border-radius: 6px; display: block; }
.look-btn { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); min-height: 30px; padding: 4px 10px; font: 12px var(--f-mono); cursor: pointer; white-space: nowrap; }
.look-btn:hover { color: var(--ink); border-color: var(--muted); }

/* ===== Release 19: Creative Studio visual layer ===== */
.studio-c { --c-surface2: #222228; }
.sc-card { border-left: 3px solid var(--k, var(--c-line)); }
.sc-card-h { display: flex; gap: 8px; align-items: flex-start; }
.sc-kind { flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); }
.sc-avring { flex: 0 0 40px; }
.sc-crew > .tiny { padding-left: 50px; }
.sc-prod { border: 1px solid var(--c-line); border-radius: 16px; overflow: hidden; background: var(--c-surface2); margin-bottom: 10px; }
.sc-prod .sc-run { padding: 10px 12px; border-top: 0; }
.sc-prod-art { height: 64px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #C7D6FF; background: linear-gradient(110deg, #1A2340 30%, #2A3A6A 50%, #1A2340 70%); background-size: 400px 100%; }
.sc-prod.live .sc-prod-art { animation: shimmer 1.6s linear infinite; }
.sc-prod.wait .sc-prod-art { background: #2B2410; color: var(--gold); }
.sc-track { position: relative; height: 6px; margin: 0 12px 12px; border-radius: 99px; background: #2A2A30; }
.sc-track > i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #7AA2FF); }
.sc-playhead { position: absolute; top: -4px; width: 3px; height: 14px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px var(--accent); animation: bob 1.4s ease-in-out infinite; }
.sk { height: 54px; border-radius: 12px; background: linear-gradient(90deg, #1E1E23 0%, #2A2A31 50%, #1E1E23 100%); background-size: 400px 100%; animation: shimmer 1.4s linear infinite; }
.sk.short { height: 30px; width: 60%; }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .sc-prod.live .sc-prod-art, .sc-playhead, .sk { animation: none; } }

/* ===== Release 20: Launch & Earnings, invoices, social centre ===== */
.launch-strip { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); border-left: 3px solid var(--accent); }
.launch-strip .kicker { font: 500 11px var(--f-mono); letter-spacing: .1em; color: var(--accent); }
.next-card { border-color: var(--accent-line); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); }
.next-card .kicker { font: 500 12px var(--f-mono); letter-spacing: .08em; color: var(--accent); }
.next-card h2 { font-size: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 13.5px; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.stages li { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
.stages li b { font: 600 16px var(--f-head); } .stages li span { overflow-wrap: anywhere; }
.stages li.past { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); } .stages li.past b { color: var(--good); }
.stages li.now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .stages li.now b { color: var(--accent); }
.ltl, .ocl, .steps, .fsc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lt { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.lt.done b, .lt.skipped b { color: var(--muted); }
.fsc li { padding: 5px 0; font-size: 13.5px; } .fsc li.ok span { color: var(--good); }
.funnel { display: flex; flex-direction: column; gap: 6px; }
.funnel .fr { display: grid; grid-template-columns: 130px 1fr 32px; gap: 8px; align-items: center; }
.funnel .fb { height: 10px; border-radius: 99px; background: var(--surface2); overflow: hidden; } .funnel .fb i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.oc { border-top: 1px solid var(--line); padding: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.soc .steps li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 4px 0; }
.soc .steps .opt { flex: 1 1 320px; }
fieldset { border: 0; padding: 0; margin: 4px 0; } legend { margin-bottom: 4px; }
@media (max-width: 860px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .grid3 { grid-template-columns: 1fr; } .funnel .fr { grid-template-columns: 110px 1fr 28px; } }

/* Release 21: money reports and releases */
.rp-bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding: 8px 0; overflow-x: auto; }
.rp-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 34px; height: 100%; }
.rp-pair { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.rp-bar { width: 10px; border-radius: 3px 3px 0 0; min-height: 1px; }
.rp-bar.rev, .rp-key.rev { background: var(--accent); }
.rp-bar.exp, .rp-key.exp { background: var(--gold, #FBBF24); }
.rp-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.rp-share { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr 52px; gap: 8px; align-items: center; margin: 6px 0; }
.rp-track { height: 8px; border-radius: 4px; background: var(--line, rgba(127,127,127,.25)); overflow: hidden; }
.rp-track span { display: block; height: 100%; background: var(--accent); }
.rel-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rel h2 { margin: 0; font-size: 1.05rem; }
.later-card { margin: 10px 0; }
.later-card > summary { cursor: pointer; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.later-card[open] > summary { margin-bottom: 8px; }
.inapp { border: 0; padding: 0; margin: 6px 0; display: grid; gap: 4px; }

/* ===== Release 22: owner's chosen look (26 Oct 2026) = the original command-centre mock-up (docs/ui-options/option-b.html):
   near-black ground, flat 8px panels, one monospace face everywhere, uppercase letter-spaced panel labels, cyan accent.
   It replaces the A and C looks app-wide; layout, screens, graphics and behaviour are unchanged. ===== */
:root, :root[data-look="c"] {
  --bg: #07090D; --surface: #0E1219; --surface2: #0A0E14; --line: #1C2330;
  --ink: #D8E1EE; --muted: #7F8BA0; --faint: #7F8BA0; --white: #FFFFFF;
  --accent: #5EE1F5; --accent2: #5BE39A; --accent-ink: #05121A; --accent-bg: #0B1A22; --accent-line: #16404C;
  --gold: #F4C35A; --good: #5BE39A; --warn: #F4C35A; --bad: #FF7A85; --violet: #A898FF;
  --st-work: #5EE1F5; --st-queue: #7F8BA0; --st-wait: #F4C35A; --st-done: #5BE39A; --st-fail: #FF7A85; --st-pause: #5B6678;
  --chip-gold: #2A2210; --chip-blue: #0B1A22; --chip-lilac: #1E1A33; --chip-green: #0E2A1D; --chip-red: #2E1418; --chip-teal: #0B1A22;
  --radius: 8px;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, "Hind Siliguri", monospace;
  --f-head: var(--f-mono); --f-body: var(--f-mono);
}
html, body, :root[data-look="c"] body { font-size: 13.5px; line-height: 1.5; background: var(--bg); }
h1, .hero h1, .studio-c h1 { font: 600 22px/1.2 var(--f-head); letter-spacing: 0; color: var(--white); }
h2, .studio-c h2, .studio-c .sc-h2 { font: 600 14px var(--f-head); }
.card > h2, .card > .row > h2, .card h2.ph, .ph > h2 { font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.card, .kpi, .lane, .dlg, .studio-c .card, :root[data-look="c"] .card { border-radius: 8px; background: var(--surface); border-color: var(--line); box-shadow: none; }
.kpi4 .card::before, :root[data-look="c"] .kpi4 .card::before { display: none; }
.kpi4 .card b, .stat .v, .kpi .v, .big, .cards4 .big { font: 600 22px var(--f-mono); color: var(--white); }
.topbar, :root[data-look="c"] .topbar { background: var(--surface); padding: 10px 18px; }
.topbar .brandb { color: var(--accent); font: 700 14px var(--f-mono); letter-spacing: .12em; }
.topbar input.cmd { background: #05070A; border-radius: 6px; font: 13.5px var(--f-mono); min-height: 36px; }
.pill { border-radius: 6px; font: 12.5px var(--f-mono); }
.nav, :root[data-look="c"] .nav { background: var(--bg); padding: 12px 0; flex-basis: 210px; }
.nav a, .nav details.nav-sec > summary, :root[data-look="c"] .nav a, :root[data-look="c"] .nav details.nav-sec > summary { border-radius: 0; padding: 7px 18px; min-height: 34px; font-size: 13.5px; color: var(--muted); }
.nav details.nav-sec > a { padding-left: 30px; font-size: 13px; }
.nav a:hover, .nav details.nav-sec > summary:hover, :root[data-look="c"] .nav a:hover { background: var(--surface2); color: var(--ink); }
.nav a[aria-current="page"], :root[data-look="c"] .nav a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.btn, :root[data-look="c"] .btn { font: 500 13px var(--f-mono); border-radius: 6px; min-height: 36px; padding: 6px 12px; background: var(--surface2); border: 1px solid var(--line); color: var(--ink); }
.btn.primary { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-line); font-weight: 600; }
.btn.primary:hover { border-color: var(--accent); filter: none; }
.btn.small { min-height: 30px; padding: 3px 9px; border-radius: 6px; }
.chip { border-radius: 6px; font-weight: 500; font-family: var(--f-mono); }
input[type=text], input[type=search], input[type=number], input[type=password], input[type=url], input[type=email], input[type=tel], input[type=date], input[type=datetime-local], input:not([type]), select, textarea { font: 13.5px var(--f-mono); background: #05070A; border-radius: 6px; }
.kicker, .hero .kicker { font: 500 11px var(--f-mono); letter-spacing: .14em; color: var(--muted); }
.bgrid > aside { background: var(--bg); }
.studio-c, :root[data-look="c"] .studio-c { --c-ground: var(--bg); --c-surface: var(--surface); --c-surface2: var(--surface2); --c-line: var(--line); --accent: #5EE1F5; --accent-ink: #05121A; --c-blue: #5EE1F5; --good: #5BE39A; --gold: #F4C35A; --bad: #FF7A85; --f-head: var(--f-mono); background: var(--bg); }
.sc-av { background: var(--accent-bg); color: var(--accent); border-radius: 6px; }
:root[data-look="c"] body { background: var(--bg); }
.toast { border-radius: 6px; font-family: var(--f-mono); }
svg text { font-family: var(--f-mono); }

/* Release 22: Income Control Centre, Opportunity Explorer, Eligibility tracker */
.ic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ic-act { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ic-act:first-child { border-top: 0; }
.ic-n { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--accent-line); color: var(--accent); border-radius: 6px; font-size: 12px; }
.ic-act .grow { flex: 1; min-width: 0; }
.ic-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ic-kv { display: grid; gap: 2px; padding: 4px 0 8px; } .ic-kv b { font-size: 20px; color: var(--white); }
.ic-funnel { display: grid; gap: 6px; }
.ic-step { display: grid; grid-template-columns: 90px 1fr 36px; gap: 8px; align-items: center; } .ic-step b { text-align: right; font-size: 13px; }
.ic-bar { display: block; height: 6px; background: var(--surface2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .ic-bar i { display: block; height: 100%; background: var(--accent); }
.ic-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ic-side { display: grid; gap: 14px; min-width: 0; }
@media (max-width: 900px) { .ic-cols { grid-template-columns: 1fr; } }
.ic-grp { padding: 6px 0 10px; border-top: 1px solid var(--line); } .ic-grp:first-of-type { border-top: 0; }
.ic-ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; } .ic-ul li { overflow-wrap: anywhere; }
.od-scores { display: grid; gap: 8px; }
.od-s { display: grid; grid-template-columns: 190px 90px 1fr; gap: 10px; align-items: center; }
@media (max-width: 700px) { .od-s { grid-template-columns: 1fr auto; } .od-s .tiny { grid-column: 1 / -1; } }
.od-pips { display: inline-flex; gap: 3px; } .od-pips i { width: 12px; height: 8px; border-radius: 2px; background: var(--surface2); border: 1px solid var(--line); } .od-pips i.on { background: var(--accent); border-color: var(--accent); }
.el-list { display: grid; gap: 12px; }
.el .el-name { font: 600 14px var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--ink); }
/* Release 23: Service Factory, Storefront Centre */
.pk-list { display: grid; gap: 12px; }
.pk .pk-name { font: 600 15px var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--ink); }
.pk-ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.sf-pay { max-width: 420px; overflow-wrap: anywhere; }
.wz-biz { align-items: flex-start; padding: 6px 0; }
/* Release 24: Repair Centre */
.rp-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rp-stages li { font: 500 12px var(--f-mono); padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
.rp-stages li.done { color: var(--good); border-color: #1F4A35; }
.rp-stages li.now { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.rp-ev li { margin: 4px 0; overflow-wrap: anywhere; }
.rp-pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--f-mono); background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; padding: 10px; max-height: 420px; overflow: auto; }

/* Release 25: free AI status bars */
.qbar{height:6px;background:var(--line,#1c2230);border-radius:3px;overflow:hidden;margin-top:4px;min-width:90px}
.qbar i{display:block;height:100%;background:#5EE1F5}
.qbar i.warn{background:#F5C25E}
.qbar i.bad{background:#F55E7A}

/* Release 27: thumbnail frame picker */
.tv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0}
.tv-frame{display:flex;flex-direction:column;gap:4px;padding:4px;border:1px solid var(--line,#1c2230);border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.tv-frame img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.tv-frame[aria-pressed="true"]{border-color:#5EE1F5;box-shadow:0 0 0 2px #5EE1F5}

/* ===== Release 35: three looks and the five rooms.
   a = Mission control (owner's choice, 2 Nov 2026): deep navy, glowing cyan / pink / green panels, one code-style face.
   m = Mission control, readable: the same navy and neon, with a clean sans-serif for text you read.
   s = Calm slate: dark slate, one cyan accent, the clean sans-serif. Text colours are 4.5:1 or better in all three. ===== */
:root, :root[data-look="a"], :root[data-look="m"] {
  --bg: #070B1A; --surface: #0B1226; --surface2: #0E1631; --line: #1C2547;
  --ink: #E2E8FF; --muted: #8E97BC; --faint: #8E97BC; --white: #FFFFFF;
  --accent: #5EE1F5; --accent2: #4DFF9A; --accent-ink: #04121C; --accent-bg: #0D1F3A; --accent-line: #1F4E7A;
  --pink: #FF5FAE; --pink-bg: #2A0F22; --good: #4DFF9A; --gold: #F4C35A; --warn: #F4C35A; --bad: #FF7A85;
  --chip-blue: #0D1F3A; --chip-teal: #0D1F3A; --chip-green: #0C2A1E; --chip-red: #2E1022; --chip-lilac: #1E1A3A; --chip-gold: #2A2210;
  --glow-c: 0 0 0 1px rgba(94,225,245,.10), 0 0 20px rgba(94,225,245,.08);
  --glow-p: 0 0 0 1px rgba(255,95,174,.12), 0 0 20px rgba(255,95,174,.08);
  --glow-g: 0 0 0 1px rgba(77,255,154,.10), 0 0 20px rgba(77,255,154,.07);
  --radius: 6px;
}
:root[data-look="m"] { --bg: #0B1020; --surface: #121A2E; --surface2: #151F38; --line: #222C48; --radius: 10px;
  --f-head: "Figtree", "Hind Siliguri", system-ui, sans-serif; --f-body: "Figtree", "Hind Siliguri", system-ui, sans-serif; }
:root[data-look="s"] {
  --bg: #12151C; --surface: #1A1F29; --surface2: #202633; --line: #2C3342;
  --ink: #E7EAF1; --muted: #9AA2B4; --faint: #9AA2B4; --white: #FFFFFF;
  --accent: #5CB6D4; --accent2: #6CC28F; --accent-ink: #0D1A20; --accent-bg: #1B3340; --accent-line: #2F5A6C;
  --pink: #E08AAE; --pink-bg: #2E1A24; --good: #6CC28F; --gold: #E0B25A; --warn: #E0B25A; --bad: #F08A94;
  --chip-blue: #1B3340; --chip-teal: #1B3340; --chip-green: #173226; --chip-red: #331A20; --chip-lilac: #24213A; --chip-gold: #30281A;
  --glow-c: none; --glow-p: none; --glow-g: none; --radius: 10px;
  --f-head: "Figtree", "Hind Siliguri", system-ui, sans-serif; --f-body: "Figtree", "Hind Siliguri", system-ui, sans-serif;
}
html, body { background: var(--bg); font-family: var(--f-body); }
:root[data-look="a"] body, :root:not([data-look]) body { background: radial-gradient(1100px 520px at 50% -12%, rgba(94,225,245,.07), transparent 62%), var(--bg); }
:root[data-look="m"] body { background: radial-gradient(1100px 520px at 50% -12%, rgba(94,225,245,.05), transparent 62%), var(--bg); }
:root[data-look="m"] h1, :root[data-look="s"] h1 { font-weight: 800; font-size: 24px; }
.card, .kpi, .lane, .dlg { border-radius: var(--radius); background: var(--surface); border-color: var(--line); }
.card { box-shadow: var(--glow-c); }
.card.glow-p { border-color: color-mix(in srgb, var(--pink) 45%, var(--line)); box-shadow: var(--glow-p); }
.card.glow-g { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); box-shadow: var(--glow-g); }
.card.glow-c { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--glow-c); }
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.kicker { color: var(--accent); }
.nav { background: var(--bg); }
.nav a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
/* five rooms on top of the menu, everything else folded under All tools */
.rooms { display: grid; gap: 2px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.rooms a { font-weight: 600; color: var(--ink) !important; }
.rooms a svg { flex: none; color: var(--accent); }
.rooms a.earn svg { color: var(--pink); }
details.nav-all > summary { list-style: none; cursor: pointer; padding: 7px 18px; font: 600 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; min-height: 34px; }
details.nav-all > summary::-webkit-details-marker { display: none; }
details.nav-all > summary::after { content: "›"; margin-left: auto; transition: transform .15s; }
details.nav-all[open] > summary::after { transform: rotate(90deg); }
/* Home room and Library */
.room-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.room-cards .card { display: grid; gap: 6px; align-content: start; }
.room-cards .big-n { font: 700 28px var(--f-mono); font-variant-numeric: tabular-nums; }
.room-cards .glow-c .big-n { color: var(--accent); } .room-cards .glow-p .big-n { color: var(--pink); } .room-cards .glow-g .big-n { color: var(--good); }
.room-cards .item { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; }
.room-cards .item span:last-child { font: 11px var(--f-mono); color: var(--muted); white-space: nowrap; }
.lib-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.lib-filters .field { min-width: 160px; }
.lib-filters .grow { flex: 1 1 220px; }
.lib-card { display: grid; gap: 6px; align-content: start; }
.lib-card[data-type="video"] { border-color: color-mix(in srgb, var(--pink) 45%, var(--line)); box-shadow: var(--glow-p); }
.lib-card[data-type="text"] { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); box-shadow: var(--glow-g); }
.lib-card .thumb video, .lib-card .thumb img { width: 100%; max-height: 220px; object-fit: cover; border-radius: calc(var(--radius) - 2px); background: #000; }
.lib-card .thumb audio { width: 100%; }
.lib-text { margin: 0; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { details.nav-all > summary::after { transition: none; } }
/* Home hub (Release 35), styled after the owner's reference picture */
.hub-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hub-top .stat { display: grid; gap: 4px; }
.lbl { font: 600 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.big-n { font: 700 26px var(--f-mono); font-variant-numeric: tabular-nums; color: var(--white); }
.big-n.small-n { font-size: 15px; }
.glow-c .big-n { color: var(--accent); } .glow-p .big-n { color: var(--pink); } .glow-g .big-n { color: var(--good); }
.pk { color: var(--pink); } .cy { color: var(--accent); } .ok { color: var(--good); } .bad { color: var(--bad); }
.hub { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(560px, 2.4fr) minmax(220px, 1fr); gap: 12px; align-items: start; }
.hub-side-col { display: grid; gap: 12px; }
.hub-side, .hub-log { display: grid; gap: 2px; align-content: start; }
.hub-side .item, .hub-log .item { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 12.5px; min-width: 0; }
.hub-side .item > span:first-child, .hub-log .item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.hub-side .item > span:last-child, .hub-log .item > span:last-child { font: 11px var(--f-mono); color: var(--muted); white-space: nowrap; }
.hub-side .item > span.pk:last-child { color: var(--pink); }
.hub-log .item > span.ok:last-child { color: var(--good); } .hub-log .item > span.bad:last-child { color: var(--bad); }
.hub-core { position: relative; height: 600px; min-width: 0; }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-lines path { fill: none; stroke: var(--line); stroke-width: 1.4; }
.hub-lines .ln-working { stroke: var(--accent); stroke-dasharray: 6 5; animation: flowdash 1.2s linear infinite; filter: drop-shadow(0 0 3px var(--accent)); }
.hub-lines .ln-done { stroke: color-mix(in srgb, var(--good) 60%, transparent); }
.hub-lines .ln-problem { stroke: var(--bad); }
@keyframes flowdash { to { stroke-dashoffset: -22; } }
.hub-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 210px; height: 210px; border-radius: 50%; box-shadow: 0 0 40px rgba(94,225,245,.18); }
.hub-ring { width: 100%; height: 100%; }
.hub-ring .ring-n { font: 700 30px var(--f-mono); fill: var(--accent); }
.hub-ring .ring-l { font: 600 9px var(--f-mono); letter-spacing: .14em; fill: var(--muted); }
.hub-ring .ring-s { font: 10px var(--f-mono); fill: var(--muted); }
.hub-ring .seg-live { filter: drop-shadow(0 0 3px var(--accent)); }
.bot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 196px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 3px; z-index: 1; }
.bot header { display: flex; justify-content: space-between; gap: 6px; font: 600 9.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.bot-tag { color: var(--accent); background: var(--accent-bg); padding: 1px 5px; border-radius: 3px; }
.bot-state { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.bot-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }
.bot h3 { font: 700 12.5px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--white); margin: 0; }
.bot-task { margin: 0; font-size: 11.5px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bot-meta { margin: 0; font: 10.5px var(--f-mono); color: var(--muted); }
.bot.s-working { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.bot.s-working .bot-state { color: var(--accent); } .bot.s-working .bot-state i { background: var(--accent); animation: botpulse 1.4s infinite; }
.bot.s-done { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); box-shadow: 0 0 16px color-mix(in srgb, var(--good) 15%, transparent); }
.bot.s-done .bot-state { color: var(--good); } .bot.s-done .bot-state i { background: var(--good); }
.bot.s-problem { border-color: var(--bad); box-shadow: 0 0 16px color-mix(in srgb, var(--bad) 25%, transparent); }
.bot.s-problem .bot-state { color: var(--bad); } .bot.s-problem .bot-state i { background: var(--bad); }
.bot.s-idle, .bot.s-paused { opacity: .72; }
.bot.s-paused .bot-state i { background: var(--muted); }
@keyframes botpulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
/* how every day runs */
.day-flow { display: grid; gap: 10px; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.flow-steps li a { display: grid; gap: 2px; height: 100%; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface2); color: var(--ink); text-decoration: none; position: relative; }
.flow-steps li.fs-bot a { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.flow-steps li.fs-you a { border-color: var(--pink); box-shadow: 0 0 16px color-mix(in srgb, var(--pink) 25%, transparent); background: var(--pink-bg); }
.flow-steps li:not(:last-child) a::after { content: "›"; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: var(--muted); font: 700 14px var(--f-mono); }
.fs-n { font: 600 10px var(--f-mono); color: var(--accent); letter-spacing: .1em; } .fs-you .fs-n { color: var(--pink); }
.flow-steps b { font-size: 12.5px; }
.fs-who { font-size: 11px; color: var(--ink); } .fs-you .fs-who { color: var(--pink); font-weight: 600; }
.fs-when, .fs-c { font: 10.5px var(--f-mono); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .hub-lines .ln-working, .bot.s-working .bot-state i { animation: none; } }
@media (max-width: 1280px) { .flow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .flow-steps li:nth-child(4n) a::after { display: none; } }
@media (max-width: 1400px) {
  .hub { grid-template-columns: 1fr; }
  .hub-core { height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .hub-lines { display: none; }
  .hub-centre { position: static; transform: none; grid-column: 1 / -1; justify-self: center; }
  .bot { position: static; transform: none; width: auto; }
}
@media (max-width: 700px) { .hub-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-steps li a::after { display: none; } }

/* Release 38: video maker picture picker */
.vpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.vthumb { display: grid; gap: 4px; position: relative; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface2); cursor: pointer; min-width: 0; }
.vthumb input { position: absolute; top: 10px; left: 10px; }
.vthumb img, .vthumb video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; background: #000; }
.vthumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vthumb:has(input:checked) { border-color: var(--accent); box-shadow: var(--glow-c); }

/* Release 39: researched topics */
.topic { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.topic .grow { flex: 1 1 320px; min-width: 0; display: grid; gap: 3px; }
.item-row { padding: 8px 0; border-top: 1px solid var(--line); gap: 8px; flex-wrap: wrap; }

/* ----- Release 41: agent rail ("hologram"): agents and the daily flow on the right of every screen ----- */
.arail { flex: 0 0 auto; margin: 12px 0 6px; padding: 10px 8px 10px; border: 1px solid var(--accent-line); border-radius: 10px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%), repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--accent) 4%, transparent) 3px 4px), var(--surface2); }
.arail[hidden], .arail-m[hidden] { display: none !important; }
.arail-h { display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--accent); margin-bottom: 6px; }
.arail-h b { margin-left: auto; font-weight: 600; color: var(--muted); }
.arail-h b.on { color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
.arail-p { font-family: var(--f-mono); font-size: 11px; color: var(--warn, #F5C451); margin: 0 0 6px; }
.hexc { width: 22px; height: 22px; flex: 0 0 22px; overflow: visible; }
.hexc .hx-o { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: var(--accent-line); stroke-width: 1.4; }
.hexc .hx-i { fill: none; stroke: var(--accent-line); stroke-width: 1; opacity: .7; }
.hexc .hx-c { fill: var(--accent-line); }
.arail-list { list-style: none; margin: 0; padding: 0; position: relative; }
.arail-list::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--line); }
.arail-list.live::before { background: linear-gradient(180deg, transparent, var(--accent), transparent) 0 0 / 100% 40% no-repeat, var(--line); animation: beam 3.2s linear infinite; }
@keyframes beam { from { background-position: 0 -40%; } to { background-position: 0 140%; } }
.arail-list a { display: flex; align-items: flex-start; gap: 8px; padding: 5px 4px 5px 0; min-height: 0; border-radius: 8px; color: var(--muted); position: relative; }
.arail-list a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ar-b { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ar-n { font-size: 12.5px; color: var(--ink); display: flex; gap: 6px; align-items: baseline; }
.ar-n i { font-style: normal; font-family: var(--f-mono); font-size: 9.5px; color: var(--faint); letter-spacing: .08em; }
.ar-t { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.arail-list a { text-decoration: none; }
.arail-side { flex: 0 0 244px; align-self: flex-start; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; margin: 0; border-radius: 0; border-width: 0 0 0 1px; padding: 18px 12px; min-height: 100vh; box-sizing: border-box; }
.ar.s-working .hx-o { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 18%, transparent); filter: drop-shadow(0 0 4px var(--accent)); }
.ar.s-working .hx-i { stroke: var(--accent); }
.ar.s-working .hx-c, .hexc.live .hx-c { fill: var(--accent); animation: core 1.6s ease-in-out infinite; }
.hexc.live .hx-o { stroke: var(--accent); }
.ar.s-working .ar-t { color: var(--accent); }
.ar.s-done .hx-o { stroke: color-mix(in srgb, var(--accent2) 70%, transparent); } .ar.s-done .hx-c { fill: var(--accent2); }
.ar.s-problem .hx-o { stroke: var(--bad, #FF6B6B); } .ar.s-problem .hx-c { fill: var(--bad, #FF6B6B); } .ar.s-problem .ar-t { color: var(--bad, #FF6B6B); }
.ar.s-paused { opacity: .55; }
@keyframes core { 0%, 100% { opacity: .55; r: 2.6px; } 50% { opacity: 1; r: 3.6px; } }
.arail-flow { display: grid; grid-template-columns: 1fr 8px 1fr 8px 1fr 8px 1fr; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.arail-flow > i { height: 1px; background: var(--line); }
.arail-flow a.fl-n { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 0; min-height: 0; border-radius: 6px; color: var(--muted); font-size: 9px; letter-spacing: .04em; text-align: center; }
.fl-n b { font-family: var(--f-mono); font-size: 14px; color: var(--muted); font-weight: 600; }
.fl-n.on b { color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
.arail-m { display: none; }
@media (max-width: 1180px) {
  .arail-side { display: none !important; }
  .arail-m { display: block; border-bottom: 1px solid var(--accent-line); background: var(--surface2); }
  .arail-m-in { display: flex; gap: 4px; overflow-x: auto; padding: 6px 10px; scrollbar-width: none; }
  .arail-m .ar { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; color: var(--muted); text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
  .arail-m .ar.s-working { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); }
  .arail-m .hexc { width: 16px; height: 16px; flex-basis: 16px; }
}
@media (prefers-reduced-motion: reduce) { .arail-list.live::before, .ar.s-working .hx-c, .hexc.live .hx-c { animation: none; } }

/* ----- Release 45: Home dashboard (layout B), platform cards and pages ----- */
body[data-view="start"] #arail, body[data-view="start"] #railM { display: none !important; }
.dash-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.dash-kpis .stat { display: grid; gap: 2px; text-decoration: none; color: var(--ink); }
.hub.dash { grid-template-columns: minmax(230px, 1fr) minmax(520px, 2.4fr) minmax(220px, 1fr); }
.hub-side .item.todo { align-items: center; }
.hub-side .item.todo > a.btn { flex: 0 0 auto; }
.plat-card { display: grid; gap: 3px; text-decoration: none; color: var(--ink); padding: 10px 12px; }
.plat-card:hover { border-color: var(--accent); }
.plat-add { display: flex; align-items: center; justify-content: center; min-height: 54px; border-style: dashed; border-color: var(--accent); color: var(--accent); text-decoration: none; }
.card.dash-ctl { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; padding: 10px; }
.dash-ctl .sw { width: 28px; height: 15px; border-radius: 9px; background: color-mix(in srgb, var(--pink) 18%, var(--surface2)); position: relative; display: inline-block; vertical-align: middle; }
.dash-ctl .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--pink); transition: left .2s; }
.dash-ctl .sw.on { background: color-mix(in srgb, var(--pink) 55%, transparent); } .dash-ctl .sw.on::after { left: 15px; background: #fff; }
.dash-ctl a.pk-on, .dash-ctl a#ctlAuto { border-color: var(--pink); color: var(--pink); }
.dash-low { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; align-items: start; }
/* hex agents in the hub */
.bot.hexbot { background: transparent; border: 0; box-shadow: none; padding: 0; display: flex; align-items: flex-start; gap: 6px; width: min(200px, 29%); }
.bot.hexbot .bot-task { -webkit-line-clamp: 2; }
.bot.hexbot .bot-hex { width: 40px; height: 40px; flex: 0 0 40px; overflow: visible; }
.bot.hexbot .bot-b { display: grid; gap: 1px; min-width: 0; padding: 4px 6px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.bot-hex .hx-o { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: var(--accent-line); stroke-width: 1.4; }
.bot-hex .hx-i { fill: none; stroke: var(--accent-line); stroke-width: .9; }
.bot-hex .hx-c { fill: var(--accent-line); }
.bot.hexbot.s-working, .bot.hexbot.s-done, .bot.hexbot.s-problem { border: 0; box-shadow: none; }
.bot.hexbot.s-working .bot-hex { filter: drop-shadow(0 0 8px var(--accent)); }
.bot.hexbot.s-working .hx-o { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.bot.hexbot.s-working .hx-i { stroke: var(--accent); } .bot.hexbot.s-working .hx-c { fill: var(--accent); animation: core 1.6s ease-in-out infinite; }
.bot.hexbot.s-done .hx-o { stroke: color-mix(in srgb, var(--good) 70%, transparent); } .bot.hexbot.s-done .hx-c { fill: var(--good); }
.bot.hexbot.s-problem .hx-o { stroke: var(--bad); } .bot.hexbot.s-problem .hx-c { fill: var(--bad); }
.bot.hexbot .bot-tag { background: transparent; padding: 0; }
.hub-core { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%), repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--accent) 3%, transparent) 3px 4px); border: 1px solid var(--line); border-radius: var(--radius); }
.hub-lines .ln-flow { fill: none; stroke: var(--pink); stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 3 6; animation: flowdash 2.4s linear infinite; }
.plat-nav { display: grid; gap: 1px; margin-top: 8px; }
.plat-nav .nav-group { margin: 6px 12px 2px; }
.pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; }
.pdot.on { background: var(--good); box-shadow: 0 0 6px var(--good); }
@media (max-width: 1280px) { .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-low { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .hub.dash { grid-template-columns: 1fr; } .bot.hexbot { width: auto; min-width: 0; } .bot.hexbot .bot-b { min-width: 0; } }
@media (max-width: 700px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .hub-lines .ln-flow, .bot.hexbot.s-working .hx-c { animation: none; } }
/* Release 47: autopilot */
.note.ap-on { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 10%, var(--surface)); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
#ctlPilot { border-color: var(--pink); color: var(--pink); }
/* Release 48: quick approve, monetization bars */
.qa-card { max-width: 560px; margin: 0 auto; touch-action: pan-y; transition: transform .15s; user-select: none; }
.qa-card[data-dir="ok"] { box-shadow: 0 0 0 2px var(--good); } .qa-card[data-dir="no"] { box-shadow: 0 0 0 2px var(--bad); }
.qa-media { width: 100%; max-height: 52vh; border-radius: 10px; background: #000; object-fit: contain; }
.qa-text { white-space: pre-wrap; max-height: 34vh; overflow: auto; margin: 0; }
.qa-btns { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; } .qa-btns .btn { min-height: 52px; font-size: 15px; }
.qa-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.mon-bar { display: grid; gap: 4px; margin: 6px 0; } .mon-bar .bar { height: 7px; background: var(--surface2); border-radius: 5px; overflow: hidden; } .mon-bar .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--pink)); }
/* Release 50: channel pack */
.cp { gap: 6px; } .cp-p { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }

/* ----- Release 54: work map. Home keeps its layout; the agent hub is smaller with today's flow beside it. ----- */
.core-pair { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 12px; align-items: stretch; min-width: 0; }
.hub-core.compact { height: 600px; }
.day-rail { display: grid; gap: 8px; align-content: start; }
.dr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.df { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 2px; position: relative; }
.df::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px); opacity: .55; animation: dfflow 1.6s linear infinite; }
@keyframes dfflow { to { background-position: 0 12px; } }
.df::after { content: ""; position: absolute; left: 8px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 3px var(--accent); animation: dfrun 6s ease-in-out infinite; }
@keyframes dfrun { 0% { top: 10px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 18px); opacity: 0; } }
.df-step a { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px 7px 0; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 12px; border: 1px solid transparent; }
.df-step a:hover { border-color: var(--accent-line); background: var(--surface2); }
.df-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); justify-self: center; z-index: 1; }
.df-done .df-dot { border-color: var(--good); background: var(--good); }
.df-now a { border-color: var(--accent-line); background: var(--accent-bg); }
.df-now .df-dot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line), 0 0 12px var(--accent); animation: dfpulse 1.6s ease-in-out infinite; }
@keyframes dfpulse { 50% { box-shadow: 0 0 0 6px transparent, 0 0 18px var(--accent); } }
.df-idle .df-l { color: var(--muted); }
.df-l { min-width: 0; overflow-wrap: anywhere; }
.df-c { font: 10.5px var(--f-mono); color: var(--muted); white-space: nowrap; }
.df-now .df-c { color: var(--accent); }
.df-who { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.df-who b { font: 600 9px var(--f-mono); padding: 0 4px; border-radius: 4px; background: var(--chip-lilac); color: var(--listed); }
.df-who b.s2 { background: color-mix(in srgb, var(--pink) 18%, var(--surface2)); color: var(--pink); }
@media (prefers-reduced-motion: reduce) { .df::before, .df-now .df-dot { animation: none; } .df::after { display: none; } }
@media (max-width: 1400px) { .hub-core.compact { height: auto; } }
@media (max-width: 860px) { .core-pair { grid-template-columns: 1fr; } }

/* the strip at the top of each tab */
.daystrip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface2); }
.ds-steps { display: flex; align-items: center; overflow-x: auto; max-width: 100%; padding: 2px; }
.ds-node { flex: 0 0 auto; font: 11px var(--f-mono); padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; white-space: nowrap; }
.ds-node:hover { color: var(--ink); border-color: var(--accent-line); }
.ds-node.here { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px -2px var(--accent); }
.ds-link { flex: 0 0 14px; height: 1px; background: var(--line); }
.ds-what { flex: 1 1 260px; min-width: 0; font-size: 12px; color: var(--muted); }
.ds-full { font-size: 12px; white-space: nowrap; }
.ds-fold { background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 6px; }
.ds-fold:hover { color: var(--ink); background: var(--surface); }

/* How it works */
.hiw-map img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.hiw-map { display: grid; gap: 8px; }
.hiw-day { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hiw-day li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 13px; padding-top: 6px; border-top: 1px solid var(--line); }
.hiw-day li span:first-child { color: var(--accent); font-size: 12px; }
.hiw-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.hiw-step { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface2); min-width: 0; overflow-wrap: anywhere; }

/* Release 54: Home work chart */
.day-rail svg.wm { width: 100%; height: auto; display: block; }
.wm-lane { fill: color-mix(in srgb, var(--ink) 1.5%, transparent); stroke: var(--line); stroke-dasharray: 3 4; }
.wm-lt { font: 600 8.5px var(--f-mono); letter-spacing: .1em; fill: var(--muted); text-transform: uppercase; }
.wm-e { fill: none; stroke: #3a4f66; stroke-width: 1.4; marker-end: url(#wm-a0); }
.wm-e.flow { stroke: var(--accent); stroke-dasharray: 5 6; animation: wmdash 1.1s linear infinite; marker-end: url(#wm-ac); }
.wm-e.yes { stroke: var(--good); stroke-dasharray: 5 6; animation: wmdash 1.1s linear infinite; marker-end: url(#wm-ag); }
.wm-e.opt { stroke: var(--listed); stroke-dasharray: 3 5; opacity: .7; marker-end: url(#wm-al); }
@keyframes wmdash { to { stroke-dashoffset: -22; } }
.wm-n rect { fill: var(--surface2); stroke: #2a3a4c; stroke-width: 1.2; transition: stroke .2s; }
.wm-n:hover rect, .wm-n:focus-visible rect { stroke: var(--accent); }
.wm-n:focus-visible { outline: none; }
.wm-n .t { font: 700 10px var(--f-mono); fill: var(--ink); }
.wm-n .s { font: 8.5px var(--f-mono); fill: var(--muted); }
.wm-n.people rect { stroke: color-mix(in srgb, var(--pink) 40%, var(--line)); }
.wm-n.st-done rect { stroke: var(--good); } .wm-n.st-done .s { fill: var(--good); }
.wm-n.st-now rect { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 9%, var(--surface2)); filter: url(#wm-gC); animation: wmbreathe 2.2s ease-in-out infinite; } .wm-n.st-now .s { fill: var(--accent); }
.wm-n.st-wait rect { stroke: var(--pink); fill: color-mix(in srgb, var(--pink) 9%, var(--surface2)); filter: url(#wm-gP); animation: wmbreathe 1.6s ease-in-out infinite; } .wm-n.st-wait .s { fill: var(--pink); }
.wm-n.st-start rect { stroke: var(--gold); fill: color-mix(in srgb, var(--gold) 9%, var(--surface2)); filter: url(#wm-gG); animation: wmbreathe 1.3s ease-in-out infinite; } .wm-n.st-start .s { fill: var(--gold); }
.wm-n.st-off rect { stroke-dasharray: 4 3; opacity: .55; } .wm-n.st-off text { opacity: .6; }
@keyframes wmbreathe { 50% { stroke-width: 2.4; } }
.wm-badge circle { stroke: var(--bg); stroke-width: 2; } .wm-badge text { font: 700 8.5px var(--f-mono); fill: #07090D; text-anchor: middle; }
.wm-spark { fill: #eaffff; filter: url(#wm-gC); }
.wm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); }
.wm-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid; margin-right: 5px; vertical-align: -2px; }
.lg-now { border-color: var(--accent) !important; box-shadow: 0 0 6px var(--accent); } .lg-wait { border-color: var(--pink) !important; box-shadow: 0 0 6px var(--pink); } .lg-start { border-color: var(--gold) !important; box-shadow: 0 0 6px var(--gold); } .lg-done { border-color: var(--good) !important; } .lg-off { border-color: #2a3a4c !important; border-style: dashed !important; }
@media (prefers-reduced-motion: reduce) { .wm-e.flow, .wm-e.yes, .wm-n rect { animation: none; } .wm-spark { display: none; } }
.core-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }


/* Release 54: the agent hub keeps its exact look, drawn at a smaller scale so it fits beside the chart */
.hub-core.compact { height: 600px; overflow: visible; }
.hub-core.compact .hub-scale { position: absolute; left: 0; top: 0; width: 160%; height: 160%; transform: scale(.625); transform-origin: 0 0; }
.hub-core.compact .hub-centre { width: 210px; height: 210px; }
@media (max-width: 1400px) { .hub-core.compact { height: auto; } .hub-core.compact .hub-scale { position: static; width: auto; height: auto; transform: none; display: contents; } }

/* Release 55: app address */
.addr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.addr-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.addr-steps li > div { display: grid; gap: 6px; min-width: 0; }
.addr-n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--accent-line); color: var(--accent); display: grid; place-items: center; font: 600 11px var(--f-mono); }
.addr-steps li.done .addr-n { border-color: var(--good); color: var(--good); }
.addr-list { display: grid; gap: 6px; }
.addr-code { font: 12px var(--f-mono); padding: 4px 8px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--line); overflow-wrap: anywhere; }

/* Release 56: setup and limits */
.pg-steps { padding-left: 18px; margin: 0 0 8px; display: grid; gap: 4px; }
.pg-card h3 { margin: 0 0 6px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; }

/* Release 57: create-on-the-platforms checklist */
.cl-item { border-top: 1px solid var(--line); padding: 6px 0; }
.cl-item summary { cursor: pointer; list-style: none; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.cl-item summary::-webkit-details-marker { display: none; }
.cl-s { color: var(--muted); font-family: var(--f-mono); } .cl-s.ok { color: var(--good); }
.cl-body { display: grid; gap: 6px; padding: 8px 0 4px 18px; }
.cl-f { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.cl-v { font-size: 12.5px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .cl-f { grid-template-columns: 1fr auto; } .cl-f > .tiny { grid-column: 1 / -1; } }