/* Integration Hub · Mirakl edition
   Ink carries structure. Color only means something: an event's status, or a system. */

:root {
  --ground: #EEF1F3; --surface: #FFFFFF; --surface-2: #F6F8F9; --surface-3: #E7EBEF; --hover: #F1F4F7; --sel: #EAF0FA;
  --ink: #111820; --ink-2: #3A4552; --muted: #5E6B78; --faint: #8D99A6;
  --line: #D6DDE3; --line-2: #E6EAEE; --link: #1B56BD; --focus: #3D7BFF;
  --side: #111820; --side-2: #1B2531; --side-3: #253240; --side-text: #AEB9C5; --side-line: #2C3947;
  --btn-pri: #111820; --btn-pri-ink: #FFFFFF;
  --ok-bg: #E1F2E8; --ok: #146C43; --run-bg: #E2EBFB; --run: #1B56BD; --retry-bg: #FCEBD3; --retry: #8A4B00;
  --fail-bg: #FBE3E0; --fail: #A61B12; --warn-bg: #FBF1CF; --warn: #6E5200; --nt-bg: #E7EBEF; --nt: #3A4552;
  --alert-bg: #FFF6F4; --alert-line: #F0C4BD; --alert-ink: #3B0D09;
  --note-bg: #F3F6FB; --note-line: #D5DFEE;
  --mk: #5B3FD9; --sf: #0872A6; --st: #1F4E79; --sa: #2D7D46; --fo: #8A5A00; --hb: #111820;
  --mk-soft: #EEEAFD; --mk-line: #CFC6F5; --mk-ink: #3F2AA8;
  --code-bg: #F6F8F9; --j-key: #5B3FD9; --j-str: #146C43; --j-num: #8A4B00; --j-lit: #A61B12;
  --shadow: 0 10px 30px rgba(17, 24, 32, .12); --shadow-sm: 0 1px 2px rgba(17, 24, 32, .06);
  --display: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D131A; --surface: #141C25; --surface-2: #18212B; --surface-3: #1F2A36; --hover: #1A2430; --sel: #1B2940;
    --ink: #E6ECF2; --ink-2: #C3CDD7; --muted: #93A0AD; --faint: #6B7885;
    --line: #26313D; --line-2: #1F2A36; --link: #8DB4FF; --focus: #6FA0FF;
    --side: #0A0F15; --side-2: #141C25; --side-3: #1F2A36; --side-text: #9AA6B2; --side-line: #1F2A36;
    --btn-pri: #E6ECF2; --btn-pri-ink: #0D131A;
    --ok-bg: #0F3322; --ok: #7FE0AA; --run-bg: #132A4F; --run: #8DB4FF; --retry-bg: #3A2708; --retry: #F5B865;
    --fail-bg: #3A1512; --fail: #FF9E94; --warn-bg: #33290A; --warn: #E9C75B; --nt-bg: #1F2A36; --nt: #C3CDD7;
    --alert-bg: #2A1311; --alert-line: #5A2520; --alert-ink: #FFD5CF; --note-bg: #152033; --note-line: #25365A;
    --mk: #7B63F0; --sf: #1E90C8; --st: #3A6FA3; --sa: #3E9A5A; --fo: #B07A1A; --hb: #2A3542;
    --mk-soft: #221B45; --mk-line: #3D3380; --mk-ink: #C8BCFF;
    --code-bg: #0F161E; --j-key: #B6A6FF; --j-str: #7FE0AA; --j-num: #F5B865; --j-lit: #FF9E94;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0D131A; --surface: #141C25; --surface-2: #18212B; --surface-3: #1F2A36; --hover: #1A2430; --sel: #1B2940;
  --ink: #E6ECF2; --ink-2: #C3CDD7; --muted: #93A0AD; --faint: #6B7885;
  --line: #26313D; --line-2: #1F2A36; --link: #8DB4FF; --focus: #6FA0FF;
  --side: #0A0F15; --side-2: #141C25; --side-3: #1F2A36; --side-text: #9AA6B2; --side-line: #1F2A36;
  --btn-pri: #E6ECF2; --btn-pri-ink: #0D131A;
  --ok-bg: #0F3322; --ok: #7FE0AA; --run-bg: #132A4F; --run: #8DB4FF; --retry-bg: #3A2708; --retry: #F5B865;
  --fail-bg: #3A1512; --fail: #FF9E94; --warn-bg: #33290A; --warn: #E9C75B; --nt-bg: #1F2A36; --nt: #C3CDD7;
  --alert-bg: #2A1311; --alert-line: #5A2520; --alert-ink: #FFD5CF; --note-bg: #152033; --note-line: #25365A;
  --mk: #7B63F0; --sf: #1E90C8; --st: #3A6FA3; --sa: #3E9A5A; --fo: #B07A1A; --hb: #2A3542;
  --mk-soft: #221B45; --mk-line: #3D3380; --mk-ink: #C8BCFF;
  --code-bg: #0F161E; --j-key: #B6A6FF; --j-str: #7FE0AA; --j-num: #F5B865; --j-lit: #FF9E94;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.disp { font-family: var(--display); }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- shell */
.app { display: flex; height: 100vh; overflow: hidden; }
.side { width: 236px; flex-shrink: 0; background: var(--side); color: var(--side-text); display: flex; flex-direction: column; gap: 18px; padding: 16px 12px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: #F4F6F8; color: #111820; display: grid; place-items: center; font: 700 13px var(--display); flex-shrink: 0; }
.brand-name { color: #FFFFFF; font: 700 15px/19px var(--display); }
.brand-sub { font-size: 11px; line-height: 15px; color: #8D99A6; }
.tenant-btn { width: 100%; display: flex; flex-direction: column; gap: 7px; text-align: left; background: var(--side-2); border: 1px solid var(--side-line); border-radius: 10px; padding: 10px 12px; color: #FFFFFF; cursor: pointer; }
.tenant-btn:hover { border-color: #3A4A5C; }
.tenant-btn .row { display: flex; align-items: center; gap: 8px; }
.tenant-btn .lbl { font: 600 10.5px var(--mono); letter-spacing: .6px; color: #8D99A6; }
.tenant-btn .name { font-size: 14px; font-weight: 600; }
.tenant-menu { position: absolute; z-index: 40; width: 300px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.tenant-menu button { display: flex; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px; border-radius: 8px; cursor: pointer; align-items: flex-start; }
.tenant-menu button:hover, .tenant-menu button[aria-current="true"] { background: var(--hover); }
.tenant-menu .t-letter { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-3); display: grid; place-items: center; font: 600 12px var(--mono); flex-shrink: 0; }
.tenant-menu .t-name { font-weight: 600; }
.tenant-menu .t-stack { display: flex; gap: 4px; margin-top: 5px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--side-text); font-size: 14px; }
.nav a:hover { background: var(--side-2); color: #FFFFFF; text-decoration: none; }
.nav a.on { background: var(--side-3); color: #FFFFFF; }
.nav .count { margin-left: auto; font: 600 11px var(--mono); background: #C8372D; color: #FFFFFF; padding: 1px 7px; border-radius: 10px; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--side-2); font-size: 12px; line-height: 17px; }
.side-foot .row { display: flex; align-items: center; gap: 8px; color: #FFFFFF; }
.side-foot .dot { width: 8px; height: 8px; border-radius: 4px; background: #3CCB7F; }
.side-foot button { align-self: flex-start; background: transparent; color: #C3CDD7; border: 1px solid var(--side-line); border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer; }
.side-foot button:hover { color: #FFFFFF; border-color: #3A4A5C; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--surface); }
.top h1 { font: 700 20px/24px var(--display); }
.top .sub { font-size: 12px; line-height: 16px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--ok); }
.live i { width: 8px; height: 8px; border-radius: 4px; background: #1E9E5A; box-shadow: 0 0 0 4px var(--ok-bg); }
.live.off { color: var(--fail); } .live.off i { background: var(--fail); box-shadow: 0 0 0 4px var(--fail-bg); }
.sim-badge { font: 600 11px var(--mono); letter-spacing: .5px; color: var(--ink-2); border: 1px dashed var(--faint); border-radius: 6px; padding: 4px 8px; }
.view { flex: 1; min-height: 0; overflow: auto; padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 18px; outline: none; }

/* ---------------------------------------------------------------- primitives */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.card.pad { padding: 16px 18px; }
.eyebrow { font-size: 11px; line-height: 16px; letter-spacing: 1.1px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.spacer { margin-left: auto; }
.section-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-head .hint { font-size: 12px; color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--hover); border-color: var(--faint); }
.btn.pri { background: var(--btn-pri); color: var(--btn-pri-ink); border-color: var(--btn-pri); }
.btn.pri:hover { opacity: .9; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { color: var(--fail); border-color: var(--alert-line); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); border-top-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { width: 32px; padding: 0; }

.seg { display: inline-flex; background: var(--surface-3); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 1px solid transparent; background: transparent; height: 28px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }

.input { height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 0 10px; font-size: 13px; }
.search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface); }
.search input { border: 0; outline: 0; background: transparent; font-size: 12.5px; width: 220px; color: var(--ink); }
select.input { padding-right: 26px; }

.mg { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font: 600 10px var(--mono); color: #FFFFFF; flex-shrink: 0; }
.mg.lg { width: 28px; height: 28px; font-size: 11px; border-radius: 7px; }
.mg.hb { box-shadow: inset 0 0 0 1px #3A4552; }
.route { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); }

.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: 11px; font: 600 10.5px var(--mono); letter-spacing: .4px; white-space: nowrap; }
.pill svg { flex-shrink: 0; }
.p-OK { background: var(--ok-bg); color: var(--ok); }
.p-PROCESSING, .p-RECEIVED { background: var(--run-bg); color: var(--run); }
.p-PROCESSING svg { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.p-RETRYING { background: var(--retry-bg); color: var(--retry); }
.p-RETRYING svg { animation: spin 1.6s linear infinite; }
.p-FAILED { background: var(--fail-bg); color: var(--fail); }
.p-WARN { background: var(--warn-bg); color: var(--warn); }
.p-DUPLICATE, .p-SKIPPED { background: var(--nt-bg); color: var(--nt); }
.state { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); font: 500 10.5px var(--mono); color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.state.mk { border-color: var(--mk-line); color: var(--mk-ink); background: var(--mk-soft); }
.state.bad { border-color: var(--alert-line); color: var(--fail); background: var(--alert-bg); }
.state.good { border-color: transparent; color: var(--ok); background: var(--ok-bg); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font: 600 10px var(--mono); letter-spacing: .4px; background: var(--surface-3); color: var(--ink-2); }
.tchip { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--surface-3); color: var(--ink-2); font: 600 10.5px var(--mono); flex-shrink: 0; }
.dotc { width: 8px; height: 8px; border-radius: 4px; display: inline-block; flex-shrink: 0; }

.callout { padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 19px; }
.callout.bad { background: var(--alert-bg); border: 1px solid var(--alert-line); color: var(--alert-ink); }
.callout.note { background: var(--note-bg); border: 1px solid var(--note-line); color: var(--ink); }
.callout.warn { background: var(--warn-bg); border: 1px solid transparent; color: var(--ink); }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi .v { font: 700 26px/32px var(--display); font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12px; color: var(--muted); }
.kpi.alert { background: var(--alert-bg); border-color: var(--alert-line); }
.kpi.alert .v { color: var(--fail); }

/* ---------------------------------------------------------------- tables */
.tbl-wrap { overflow: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 12px; height: 36px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.tbl td { padding: 0 12px; height: 46px; border-bottom: 1px solid var(--line-2); font-size: 13px; white-space: nowrap; }
.tbl td.wrap { white-space: normal; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tr.sel td { background: var(--sel); }
.tbl tr.flash td { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: var(--run-bg); } }
.tbl .r { text-align: right; }
.tbl.compact td { height: 36px; }
.footprint-table tbody tr { cursor: default; }
.empty { padding: 36px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- code */
.code { margin: 0; font: 11.5px/19px var(--mono); white-space: pre; color: var(--ink); background: var(--code-bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; overflow: auto; max-height: 420px; }
.code.tall { max-height: 640px; }
.code .k { color: var(--j-key); } .code .s { color: var(--j-str); } .code .n { color: var(--j-num); } .code .l { color: var(--j-lit); }
.code .c { color: var(--faint); }
textarea.code { width: 100%; resize: vertical; min-height: 420px; outline: none; }
textarea.code:focus { border-color: var(--focus); }

/* ---------------------------------------------------------------- drawer */
.drawer-wrap { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: flex-end; background: rgba(13, 19, 26, .18); }
.drawer { width: min(620px, 100vw); height: 100%; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: slidein .18s ease-out; }
@keyframes slidein { from { transform: translateX(24px); opacity: .6; } }
.drawer-head { padding: 16px 20px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line-2); }
.drawer-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--muted); }
.drawer-meta b { color: var(--ink); font-weight: 500; }
.drawer-body { flex: 1; overflow: auto; padding: 14px 20px 30px; display: flex; flex-direction: column; gap: 14px; }
.tabs { display: flex; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.tabs button { border: 0; background: transparent; height: 38px; padding: 0 1px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 56px 22px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line-2); }
.step:first-child { border-top: 0; }
.step .t { font: 11px var(--mono); color: var(--muted); padding-top: 3px; }
.step .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.step .what .u { font: 500 12px var(--mono); overflow-wrap: anywhere; }
.step .what .d { font-size: 12px; color: var(--muted); }
.step .code-st { font: 600 11.5px var(--mono); padding-top: 2px; text-align: right; }
.step .code-st small { display: block; font-weight: 400; color: var(--muted); }
.step details { grid-column: 3 / 5; }
.step summary { font-size: 12px; color: var(--link); cursor: pointer; list-style: none; }
.step summary::-webkit-details-marker { display: none; }
.st-2 { color: var(--ok); } .st-4 { color: var(--fail); } .st-5 { color: var(--retry); } .st-n { color: var(--muted); }
.attempt-sep { font: 600 10.5px var(--mono); letter-spacing: .6px; color: var(--muted); padding: 10px 0 4px; border-top: 1px dashed var(--line); text-transform: uppercase; }

.lineage td { height: 30px; font-size: 12px; }
.kind { white-space: nowrap; overflow-wrap: normal; display: inline-block; font: 600 9.5px var(--mono); letter-spacing: .5px; padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); text-transform: uppercase; }
.kind.lookup { background: var(--mk-soft); color: var(--mk-ink); }
.kind.transform { background: var(--retry-bg); color: var(--retry); }
.kind.constant { background: var(--nt-bg); color: var(--muted); }
.kind.empty { background: transparent; color: var(--faint); border: 1px dashed var(--line); }

/* ---------------------------------------------------------------- toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: min(460px, calc(100vw - 40px)); }
.toast { background: var(--ink); color: var(--surface); border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 18px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: flex-start; animation: rise .2s ease-out; }
.toast.error { background: var(--fail); color: #FFFFFF; }
.toast.warn { background: #6E4A00; color: #FFFFFF; }
.toast a { color: inherit; text-decoration: underline; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

/* ---------------------------------------------------------------- flow map */
.flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.map-card { padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.map-svg { width: 100%; height: auto; display: block; }
.map-svg .edge { fill: none; stroke-width: 2; }
.map-svg .edge.poll { stroke-dasharray: 6 6; }
.map-svg .lbl { font: 500 10.5px var(--mono); }
.node-box { fill: var(--surface); stroke-width: 1.5; }
.node-title { font: 600 14px var(--sans); fill: var(--ink); }
.node-sub { font: 12px var(--sans); fill: var(--muted); }
.node-last { font: 11px var(--mono); }
.hub-box { fill: var(--hb); }
.story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.story-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.story-step .n { width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; font: 600 12px var(--mono); border: 1px solid var(--line); color: var(--muted); flex-shrink: 0; }
.story-step.done .n { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.story-step .t { font-size: 13px; font-weight: 600; line-height: 18px; }
.story-step .s { font-size: 12px; line-height: 16px; color: var(--muted); }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); cursor: pointer; }
.switch-row .t { font-size: 13px; font-weight: 500; }
.switch-row .s { font-size: 12px; color: var(--muted); }
.switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 10px; background: var(--line); transition: background .15s; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 8px; background: #FFFFFF; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + span { background: #C8372D; }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.feed-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); cursor: pointer; }
.feed-item:hover { background: var(--hover); }
.feed-item .ev { font: 600 11.5px var(--mono); }
.feed-item .ob { font: 11px var(--mono); color: var(--muted); }

/* ---------------------------------------------------------------- orders */
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.tl-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: 8px; cursor: pointer; }
.tl-step::before { content: ""; position: absolute; left: 30px; right: -12px; top: 11px; height: 2px; background: var(--line); }
.tl-step:last-child::before { display: none; }
.tl-step .mg, .tl-step .route { position: relative; }
.tl-step .t { font-size: 13px; font-weight: 600; }
.tl-step .s { font: 11px/15px var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- two pane */
.split { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.list-nav { padding: 8px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
.list-nav .grp-h { display: flex; align-items: center; gap: 8px; padding: 6px 8px 2px; }
.list-nav a { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 4px 10px; border-radius: 6px; font-size: 13px; color: var(--ink); }
.list-nav a:hover { background: var(--hover); text-decoration: none; }
.list-nav a.on { background: var(--btn-pri); color: var(--btn-pri-ink); }
.list-nav a .c { width: 38px; font: 600 11px var(--mono); color: var(--muted); flex-shrink: 0; }
.list-nav a.on .c { color: inherit; opacity: .75; }
.conf { font: 600 9.5px var(--mono); letter-spacing: .5px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
.conf.documented { background: var(--ok-bg); color: var(--ok); }
.conf.approximate { background: var(--warn-bg); color: var(--warn); }
.conf.illustrative { background: var(--nt-bg); color: var(--nt); }
.method { font: 600 11px var(--mono); padding: 3px 7px; border-radius: 5px; }
.m-GET { background: var(--ok-bg); color: var(--ok); } .m-POST { background: var(--run-bg); color: var(--run); } .m-PUT { background: var(--retry-bg); color: var(--retry); }
.m-POLL { background: var(--nt-bg); color: var(--nt); } .m-MAP { background: var(--mk-soft); color: var(--mk-ink); } .m-NOTE { background: var(--nt-bg); color: var(--nt); }

/* ---------------------------------------------------------------- money graph */
.graph-svg { width: 100%; height: auto; display: block; }
.g-edge { fill: none; stroke: var(--line); stroke-width: 1.5; transition: stroke .2s, opacity .2s; }
.g-edge.rel { stroke-dasharray: 2 4; }
.g-edge.hi { stroke: var(--ink); stroke-width: 2; }
.g-edge.gap { stroke: #C8372D; stroke-dasharray: 5 4; }
.g-edge.dim { opacity: .35; }
.g-node rect { fill: var(--surface); stroke: var(--line); stroke-width: 1; transition: opacity .2s; }
.g-node.concept rect { stroke: var(--ink); stroke-width: 1.5; }
.g-node.gap rect, .g-node.blocked rect { stroke: #C8372D; stroke-dasharray: 5 4; stroke-width: 1.5; }
.g-node.gap rect { fill: var(--alert-bg); }
.g-node.new rect { stroke: var(--ok); stroke-width: 2; }
.g-node.sel rect { fill: var(--ink); stroke: var(--ink); }
.g-node.sel text { fill: var(--surface); }
.g-node.dim { opacity: .38; }
.g-node { cursor: pointer; }
.g-node text { font: 600 12.5px var(--sans); fill: var(--ink); }
.g-node text.sub { font: 400 11px var(--sans); fill: var(--muted); }
.g-node.impl text:not(.sub) { font: 500 11.5px var(--mono); }
.g-col { font: 600 10.5px var(--sans); letter-spacing: 1px; fill: var(--muted); }
.money-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.ledger { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fact { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); }
.fact.missing { border-color: var(--alert-line); background: var(--alert-bg); }
.fact .h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.fact .v { font: 600 13px var(--mono); }
.fact .s { font-size: 11px; color: var(--muted); }
.big-status { display: flex; align-items: baseline; gap: 12px; }
.big-status .v { font: 700 30px/36px var(--display); }
.test-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-2); font-size: 12.5px; }
.test-row .n { font: 500 11.5px var(--mono); }
.diff-add { color: var(--ok); } .diff-same { color: var(--muted); }

.api-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tbl.fields td { white-space: normal; overflow-wrap: anywhere; height: auto; padding-top: 7px; padding-bottom: 7px; }
@media (max-width: 1280px) { .api-grid { grid-template-columns: minmax(0, 1fr); } }
.offers-under { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .api-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tbl.fields td { white-space: normal; overflow-wrap: anywhere; height: auto; padding-top: 7px; padding-bottom: 7px; }
@media (max-width: 1280px) { .api-grid { grid-template-columns: minmax(0, 1fr); } }
.offers-under { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- connections */
.conn-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line-2); }
.conn-row:first-of-type { border-top: 0; }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; font-size: 12.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-grid, .money-grid { grid-template-columns: minmax(0, 1fr); }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .side { width: 64px; padding: 14px 8px; }
  .side .brand-text, .side .tenant-btn .name, .side .tenant-btn .lbl, .side .nav span, .side .nav .count, .side .side-foot { display: none; }
  .side .tenant-btn { padding: 8px 6px; align-items: center; }
  .side .tenant-btn .row { justify-content: center; }
  .side .tenant-btn .mgs { flex-direction: column; }
  .nav a { justify-content: center; padding: 0; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .list-nav { position: static; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .conn-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .top { padding: 0 16px; }
  .view { padding: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top .sim-badge { display: none; }
}

/* ---------------------------------------------------------------- integration flows */
.lc { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 10.5px var(--mono); white-space: nowrap; background: var(--nt-bg); color: var(--nt); }
.lc-draft { background: var(--nt-bg); color: var(--nt); }
.lc-clarification { background: var(--warn-bg); color: var(--warn); }
.lc-review, .lc-in_development { background: var(--run-bg); color: var(--run); }
.lc-verification { background: var(--retry-bg); color: var(--retry); }
.lc-ready_for_development, .lc-accepted { background: var(--ok-bg); color: var(--ok); }
.lc-excluded { background: transparent; border: 1px dashed var(--faint); color: var(--muted); }
.fb-id { font: 600 11px var(--mono); color: var(--muted); }
.lc-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; }
.lc-track li { flex: 1; min-width: 96px; padding: 6px 8px; font-size: 11.5px; text-align: center; border-radius: 6px; background: var(--surface-2); color: var(--faint); border: 1px solid var(--line-2); white-space: nowrap; }
.lc-track li.done { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.lc-track li.now { color: var(--btn-pri-ink); background: var(--btn-pri); border-color: var(--btn-pri); font-weight: 600; }
.ws-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.op-code { font-weight: 600; color: var(--mk-ink); }
.step-node { position: relative; display: flex; gap: 12px; padding: 0 0 18px; font-size: 13px; }
.step-node:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: var(--line); }
.step-n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; font: 600 12px var(--mono); background: var(--surface-3); color: var(--ink-2); }
.step-fail { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fail); background: var(--alert-bg); border: 1px solid var(--alert-line); border-radius: 6px; padding: 4px 8px; align-self: flex-start; }
.dec-list, .gap-list { list-style: none; margin: 0; padding: 0; }
.dec { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.dec.ok { background: var(--surface-2); }
.dec-in { height: auto; min-height: 54px; padding: 8px 10px; width: 100%; resize: vertical; }
.gap-list li { display: flex; align-items: flex-start; gap: 7px; padding: 8px 14px; font-size: 12.5px; border-bottom: 1px solid var(--line-2); }
.gap-list li.bad { color: var(--fail); } .gap-list li.warn { color: var(--warn); }
.gap-list li svg { flex-shrink: 0; margin-top: 3px; }
.gap-list li.good { color: var(--ok); }

/* onboarding map: explainer, four domain columns of flow cards, detail panel */
.om-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; flex-shrink: 0; }
.om-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.om-col { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); min-width: 0; }
.om-col-h { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 2px 4px; color: var(--ink-2); }
.om-col-h .muted { margin-left: auto; font-size: 12px; }
.om-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); position: relative; transition: border-color .12s, box-shadow .12s, opacity .12s; }
.om-card:hover { border-color: var(--link); }
.om-card:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.om-card.sel { border-color: var(--link); box-shadow: 0 0 0 3px var(--sel); }
.om-card.related { border-color: var(--link); border-style: dashed; }
.om-card.dim { opacity: .45; }
.om-card.excluded { opacity: .5; }
.om-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.om-name { font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.om-dir { font-size: 12px; color: var(--muted); line-height: 1.35; }
.om-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 2px; }
.om-bar i { height: 5px; border-radius: 3px; background: var(--line); }
.om-bar i.on { background: var(--link); }
.om-card.complete .om-bar i.on { background: var(--ok); }
.om-next { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.om-card.complete .om-next { color: var(--ok); }
.om-uses { font-size: 11.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 2px; }
.om-rel:empty { display: none; }
.om-rel { position: absolute; top: -9px; right: 10px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--link); color: #fff; }
.om-panel { position: sticky; top: 0; }
.om-panel-in { display: flex; flex-direction: column; gap: 10px; padding: 18px; font-size: 13px; }
.om-panel-in .eyebrow { margin-top: 4px; }
.om-open { justify-content: center; }
.om-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.om-stats div { display: flex; flex-direction: column; padding: 10px; border-radius: 8px; background: var(--surface-2); }
.om-stats b { font-size: 20px; }
.om-stats span { font-size: 11.5px; color: var(--muted); }
.om-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.om-legend li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12px; color: var(--ink-2); }
.om-ops, .om-open-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.om-ops li { font-size: 12.5px; }
.om-open-list li { display: flex; align-items: center; gap: 6px; color: var(--fail); font-size: 12.5px; }
.om-open-list li.good { color: var(--ok); }
.om-chip { all: unset; cursor: pointer; font-size: 12px; padding: 6px 9px; border-radius: 8px; border: 1px dashed var(--line); color: var(--ink-2); }
.om-chip:hover { border-color: var(--link); }
.om-chip b { color: var(--link); }
.maps-flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; font-size: 13px; }

/* one flow: UCP-style stepper and step page */
.fl-stepper { padding: 20px 18px 16px; }
.fl-stepper ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.fl-stepper ol::before { content: ""; position: absolute; left: 10%; right: 10%; top: 15px; height: 2px; background: var(--line); }
.fl-stepper li { position: relative; display: flex; justify-content: center; }
.fl-stepper a { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.fl-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--mono); background: var(--surface); border: 1.5px solid var(--line); color: var(--faint); }
.fl-stepper li.done .fl-dot { background: var(--link); border-color: var(--link); color: #fff; }
.fl-stepper li.now a { color: var(--ink); font-weight: 600; }
.fl-stepper li.now .fl-dot { box-shadow: 0 0 0 4px var(--sel); border-color: var(--link); }
.fl-stepper li.now:not(.done) .fl-dot { color: var(--link); }
.fl-status { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 13px; }
.fl-body { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(220px, 1fr); gap: 18px; align-items: start; }
.fl-pad { padding: 16px 18px; }
.fl-help { padding: 16px 18px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.fl-field { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.fl-field:last-child { border-bottom: 0; }
.fl-k { color: var(--muted); font-size: 12.5px; }
.fl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fl-table th { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--muted); padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); }
.fl-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line-2); }
.fl-steps { list-style: none; margin: 0; padding: 0; }
.fl-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.fl-steps li:last-child { border-bottom: 0; }
.fl-op { font-size: 12.5px; white-space: nowrap; }
.fl-foot { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 1300px) {
  .om-layout { grid-template-columns: minmax(0, 1fr); }
  .om-panel { position: static; }
}
@media (max-width: 1000px) {
  .om-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fl-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .om-board { grid-template-columns: minmax(0, 1fr); }
  .fl-stepper a > span:last-child { font-size: 11px; }
  .fl-field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fl-steps li { grid-template-columns: 28px minmax(0, 1fr); }
  .fl-op { grid-column: 2; white-space: normal; }
}

/* ---------------------------------------------------------------- integration assistant */
.workflow-toolbar { position: sticky; top: -22px; z-index: 4; box-shadow: var(--shadow-sm); }
.workflow-tabs { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.workflow-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.workflow-tabs button span { font: 600 10px var(--mono); color: var(--muted); }
.workflow-tabs button[aria-pressed="true"] { color: var(--btn-pri-ink); background: var(--btn-pri); border-color: var(--btn-pri); }
.workflow-tabs button[aria-pressed="true"] span { color: inherit; opacity: .7; }
.workflow-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center; padding: 2px 2px 0; }
.workflow-intro h2 { margin-top: 3px; font: 700 24px/30px var(--display); }
.workflow-intro p { max-width: 780px; margin: 4px 0 0; color: var(--muted); }
.workflow-direction { align-items: center; gap: 0; text-align: center; }
.direction-arrow { font: 700 28px/30px var(--display); color: var(--mk); }
.workflow-sides { display: grid; grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.workflow-side { overflow: hidden; }
.workflow-side.left { border-top: 3px solid var(--mk); }
.workflow-side.right { border-top: 3px solid var(--st); }
.workflow-side-head { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.workflow-side-head h2 { font: 700 18px/23px var(--display); }
.system-list { display: flex; flex-wrap: wrap; gap: 6px; }
.system-chip { display: inline-flex; flex-direction: column; min-height: 34px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 12px; }
.system-chip small { color: var(--muted); font-size: 9.5px; font-weight: 500; }
.system-chip.candidate { border-style: dashed; border-color: var(--warn); background: var(--warn-bg); }
.system-chip.unknown { border-style: dashed; border-color: var(--alert-line); color: var(--fail); background: var(--alert-bg); }
.contract-list { display: flex; flex-direction: column; padding: 4px 18px 12px; }
.contract-card { display: flex; flex-direction: column; gap: 6px; padding: 13px 0; border-top: 1px solid var(--line-2); }
.contract-card:first-child { border-top: 0; }
.contract-card.missing { margin: 9px 0 2px; padding: 12px; border: 1px dashed var(--alert-line); border-radius: 9px; background: var(--alert-bg); }
.contract-path { font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.contract-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); font-size: 11px; }
.workflow-connector { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; color: var(--muted); text-align: center; }
.workflow-connector span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); color: var(--mk); font: 700 26px var(--display); box-shadow: var(--shadow-sm); }
.workflow-connector small { font-size: 10.5px; line-height: 14px; }
.workflow-definition { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 18px; align-items: start; }
.workflow-definition h3 { margin: 2px 0 0; font: 700 17px/22px var(--display); }
.flow-step-list { display: flex; flex-direction: column; }
.flow-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.flow-step:first-child { border-top: 0; }
.flow-step-number { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--btn-pri-ink); background: var(--btn-pri); font: 600 11px var(--mono); }
.flow-step-route { color: var(--ink-2); font-size: 11.5px; }
.workflow-decisions ol { display: flex; flex-direction: column; gap: 9px; margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 12.5px; line-height: 18px; }
.assistant-lower { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr); gap: 18px; align-items: start; }
.assistant-chat { min-height: 570px; display: flex; flex-direction: column; overflow: hidden; }
.assistant-chat-head { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.assistant-chat-head .muted { font-size: 12px; }
.assistant-messages { min-height: 260px; max-height: 440px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--surface-2); }
.assistant-empty { margin: auto; max-width: 430px; padding: 28px; color: var(--muted); text-align: center; }
.assistant-message { max-width: min(78%, 680px); padding: 10px 13px; border-radius: 11px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 20px; }
.assistant-message.user { align-self: flex-end; color: var(--btn-pri-ink); background: var(--btn-pri); border-bottom-right-radius: 3px; }
.assistant-message.assistant { align-self: flex-start; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.assistant-message.streaming { color: var(--muted); }
.assistant-message.streaming::after { content: ""; display: inline-block; width: 6px; height: 13px; margin-left: 4px; vertical-align: -2px; background: currentColor; animation: pulse 1s infinite; }
.assistant-message.error { color: var(--fail); border-color: var(--alert-line); background: var(--alert-bg); }
.assistant-starters { display: flex; gap: 6px; padding: 12px 16px 0; overflow-x: auto; }
.assistant-starters button { flex: 0 0 auto; max-width: 240px; min-height: 30px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink-2); font-size: 11.5px; cursor: pointer; }
.assistant-starters button:hover { border-color: var(--focus); color: var(--link); }
.assistant-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 16px 8px; }
.assistant-compose textarea.input { height: auto; min-height: 54px; padding: 9px 11px; resize: vertical; }
.assistant-compose .btn { height: 54px; }
.assistant-disclaimer { padding: 0 16px 14px; color: var(--muted); font-size: 11px; }
.assistant-status { position: sticky; top: 62px; }
.assistant-status .card > .row:first-child .state { margin-left: auto; }
.readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.readiness-grid div { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); }
.readiness-grid b { font: 700 20px/24px var(--display); }
.readiness-grid span { color: var(--muted); font-size: 11px; }
.missing-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; padding-top: 9px; border-top: 1px solid var(--line-2); }
.missing-item .state { grid-row: 1 / 3; align-self: start; }
.missing-item b { font-size: 12px; }
.missing-item > span:last-child { color: var(--muted); font-size: 11.5px; }

@media (max-width: 1180px) {
  .workflow-sides { grid-template-columns: minmax(0, 1fr); }
  .workflow-connector { min-height: 60px; }
  .workflow-connector span { transform: rotate(90deg); }
  .workflow-definition { grid-template-columns: minmax(0, 1fr); }
  .assistant-lower { grid-template-columns: minmax(0, 1fr); }
  .assistant-status { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .workflow-toolbar { position: static; }
  .workflow-toolbar > label { width: 100%; align-items: flex-start; flex-direction: column; }
  .workflow-toolbar select { width: 100%; }
  .workflow-tabs { margin-left: 0; width: 100%; }
  .workflow-tabs button { flex: 1; justify-content: center; }
  .workflow-intro { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .workflow-direction { align-items: flex-start; text-align: left; }
  .assistant-status { grid-template-columns: minmax(0, 1fr); }
  .assistant-message { max-width: 92%; }
  .assistant-compose { grid-template-columns: minmax(0, 1fr); }
  .assistant-compose .btn { height: 38px; }
}