@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

/* MB Corpo — the current Mercedes-Benz digital brand fonts (Workbench design system), same
   files mercedes-benz.de serves: MBCorpo Title (condensed display, headings, 400 only — never
   synthesize bold on it) and MBCorpo Text (body sans, 400/700). Bundled in wwwroot/fonts/. */
@font-face {
    font-family: 'MBCorpo Title';
    src: url('fonts/MBCorpoATitleCond-Regular-Web.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MBCorpo Text';
    src: url('fonts/MBCorpoSText-Regular-Web.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MBCorpo Text';
    src: url('fonts/MBCorpoSText-Bold-Web.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* CorpoS — the older Mercedes-Benz corporate typeface. Licensed (Monotype/MB brand portal), so the
   files are NOT in the repo: drop the woff2 exports into wwwroot/fonts/ (see fonts/README.md)
   and these declarations activate automatically. Until then local() catches machines that have
   the desktop font installed, and the stack falls through to MBCorpo Text / IBM Plex Sans. */
@font-face {
    font-family: 'CorpoS';
    src: local('CorpoS'), local('Corporate S'), local('CorporateS-Regular'),
         url('fonts/CorpoS.woff2') format('woff2'), url('fonts/CorpoS.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CorpoS';
    src: local('CorpoS Italic'), local('CorporateS-Italic'),
         url('fonts/CorpoSItalic.woff2') format('woff2'), url('fonts/CorpoSItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'CorpoS';
    src: local('CorpoS Demi'), local('CorporateS-Demi'),
         url('fonts/CorpoSDemi.woff2') format('woff2'), url('fonts/CorpoSDemi.woff') format('woff');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CorpoS';
    src: local('CorpoS Bold'), local('CorporateS-Bold'),
         url('fonts/CorpoSBold.woff2') format('woff2'), url('fonts/CorpoSBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #0b0d14;
    --fg: #e9edf6;
    --muted: #9aa3b8;
    --accent: #3b82f6;
    --accent-2: #60a5fa;
    --border: #262d40;
    --radius: 6px;
    /* elevation + motion scale (Material-inspired) used to give generated sites depth & feel */
    --elev-1: 0 1px 2px rgba(20, 18, 40, 0.06), 0 1px 3px rgba(20, 18, 40, 0.09);
    --elev-2: 0 2px 6px rgba(20, 18, 40, 0.08), 0 6px 16px rgba(20, 18, 40, 0.07);
    --elev-3: 0 10px 24px rgba(20, 18, 40, 0.12), 0 20px 48px rgba(20, 18, 40, 0.10);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 200ms;
    --font-sans: 'MBCorpo Text', 'CorpoS', 'Corporate S', 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: 'MBCorpo Title', 'MBCorpo Text', 'CorpoS', 'IBM Plex Sans', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

/* Links default to the themed accent (never the browser's purple). Components with their own
   colour (.toplink, .brand, .back, .tile, .navlink, buttons…) override via higher specificity. */
a { color: var(--accent); text-decoration: none; }
a:visited { color: var(--accent); }
a:hover { text-decoration: underline; }

/* Black base on the root element too — otherwise the browser's default white shows through
   the overscroll/rubber-band gap above the fixed body gradient (the "white rebound" on scroll). */
html { font-size: 15px; background: var(--bg); }

/* Headings take the MB display face, like mercedes-benz.de: MBCorpo Title exists ONLY at
   weight 400 — forcing it here keeps the true face and avoids ugly synthesized bold. */
h1, h2 {
    font-family: var(--font-display);
    font-weight: 400;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    /* Flat background — depth comes from hairline borders, not glows. */
    background-color: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

/* sticky-footer app frame */
.app-shell {
    height: 100vh; height: 100dvh; display: flex; flex-direction: column;
    /* Total height of any fixed header banner(s) stacked above the topbar. 0 by default;
       each banner class below adds its height. Fixed-position chrome that must clear the
       topbar (the AI orb) reads this so it never collides with the topbar buttons when a
       banner pushes everything down. Add future banners (e.g. announcements) to the sum. */
    --banner-offset: 0rem;
    /* Height of the sticky app topbar — fixed chrome that should sit BELOW the header (the docked
       side panel) adds this so the page header stays visible above it. MUST match the topbar's
       real rendered height: .topbar derives its min-height from this var, so the two can't drift
       (they did once — 3rem here vs 52px on .topbar left every below-the-bar panel 4px under it). */
    --topbar-h: 52px;
    /* Left sidenav widths: icon rail vs expanded (labels + quick links). Toggled by
       .app-shell--nav-open (cookie `aeon-nav`, flipped by window.aeon.navToggle()). */
    --sidenav-rail: 3.4rem;
    --sidenav-open: 15rem;
}
.app-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 1.25rem; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 0.78rem; background: #0c0f18;
}
.app-footer .ver { font-family: ui-monospace, monospace; opacity: 0.8; display: inline-flex; align-items: center; gap: 0.5rem; }
.app-footer .env-chip {
    font-family: inherit; background: #f0b352; color: #1b1430; padding: 0.08rem 0.55rem;
    border-radius: 4px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
}

/* smooth, restrained motion */
button, .tile, .navlink, .big-button, a.toplink, .hero-card { transition: all 160ms ease; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* FocusOnNavigate focuses the <h1> (tabindex=-1) after load — keep the a11y behaviour
   but hide the focus rectangle it draws. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.conjure-shell, .shell {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* No bottom padding: a page's own .page padding gives the bottom breathing room, and zeroing
       it here lets a sticky .page-actionbar lock flush to the scroll-area bottom (sticky offsets
       are measured from the scrollport's content box — a bottom padding would leave a gap under
       the bar and let page content show through beneath it). */
    padding: 2rem 2rem 0;
}

/* ---- top bar — mercedes-benz.de style: pure black, slim, quiet ---- */
.topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 1.1rem;
    padding: 0 1.25rem; min-height: var(--topbar-h, 52px);
    background: #000; border-bottom: 1px solid #1f1f1f;
}
/* The MB wordmark is set in the Title face — Aeon's brand follows, with the three-pointed
   star (the official asset mercedes-benz.de serves, white fill) beside it. */
.topbar .brand {
    display: inline-flex; align-items: center; gap: 0.55rem;
    color: #fff; text-decoration: none;
    font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.01em;
}
.brand-star { width: 22px; height: 22px; flex: 0 0 auto; }
.topbar .spacer { flex: 1; }
.topbar .topuser { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.topbar .topuser:hover { color: #fff; text-decoration: underline; }
.topbar .toplink {
    color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.85rem;
    background: none; border: 0; cursor: pointer; font-family: inherit;
}
.topbar .toplink:hover { color: #fff; }
/* Native selects (market / language) sit on the black bar like the MB account controls. */
.topbar select {
    background: #000; color: rgba(255, 255, 255, 0.85);
    border: 1px solid #333; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.82rem;
}
.topbar select:hover { border-color: #555; color: #fff; }
/* AI trigger, docked in the topbar right of Sign out. Lights up while the drawer is open. */
.topbar .ai-launch-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; margin-left: 0.2rem;
    background: none; border: 1px solid transparent; border-radius: 8px;
    color: var(--fg); opacity: 0.85; cursor: pointer;
}
.topbar .ai-launch-btn:hover { opacity: 1; background: rgba(127, 127, 127, 0.14); }
.topbar .ai-launch-btn.on {
    opacity: 1; background: rgba(110, 168, 255, 0.16); border-color: rgba(110, 168, 255, 0.4);
}
.topbar .ai-launch-btn .ai-icon { display: block; }
.logout-form { margin: 0; display: inline; }

/* ---- Contract servicing (shared: CM console + contract detail page) ----
   The case rows, action picker and early-settlement stepper are rendered by both the
   Contract Management console and ContractCasesPanel on /contracts/{id}. */
.cm-search { margin-left:auto; min-width:17rem; padding:.45rem .75rem; border-radius:8px;
    border:1px solid var(--border); background:transparent; color:var(--fg); font-size:.88rem; }
.cm-search::placeholder { color:var(--muted); }
.cm-search:focus { outline:none; border-color:var(--accent); }
.cm-case { display:flex; align-items:center; gap:.7rem; padding:.35rem 0; flex-wrap:wrap; }
.cm-case + .cm-case { border-top:1px solid var(--border); }
.cm-case-kind { font-size:.68rem; font-weight:700; text-transform:uppercase; color:var(--muted);
    background:rgba(148,163,184,0.14); padding:.05rem .45rem; border-radius:6px; }
.cm-case-title { font-size:.86rem; }
.cm-case-actions { margin-left:auto; display:flex; gap:.35rem; }
.cm-action-list { display:flex; flex-direction:column; gap:.4rem; }
.cm-action-btn { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
    padding:.55rem .7rem; border-radius:10px; border:1px solid var(--border); background:transparent;
    color:var(--fg); font-size:.9rem; cursor:pointer; }
.cm-action-btn:hover:not(:disabled) { background:rgba(140,150,170,0.08); border-color:var(--accent); }
.cm-action-btn:disabled { opacity:.5; cursor:default; }
.cm-action-ico { width:1.4rem; text-align:center; color:var(--accent); }
.cm-action-urgent { margin-left:auto; font-size:.66rem; font-weight:700; text-transform:uppercase;
    color:#fca5a5; background:rgba(248,113,113,0.14); padding:.05rem .45rem; border-radius:4px; }
.cm-steps { display:inline-flex; align-items:center; gap:.3rem; }
.cm-step { font-size:.68rem; color:var(--muted); padding:.05rem .5rem; border:1px solid var(--border);
    border-radius:4px; }
.cm-step.done { color:#7ee2a8; border-color:#2f5b48; }
.cm-step.on { color:#fff; background:var(--accent); border-color:var(--accent); font-weight:600; }
.cm-settle-amt { font-weight:700; font-size:.9rem; }
.cm-settle-amt::before { content:"€"; opacity:.6; margin-right:.1rem; font-weight:400; }
.ccp-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.4rem; }

/* Contract extension guided intake (ContractCasesPanel). */
.cm-ext-intake { display:flex; flex-direction:column; gap:.7rem; }
.cm-ext-field { display:flex; flex-direction:column; gap:.3rem; }
.cm-ext-reasons { margin:.2rem 0 .4rem 1.1rem; padding:0; color:#fca5a5; font-size:.85rem; }
.cm-ext-quote { display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem .8rem; padding:.6rem .7rem;
    border:1px solid var(--border); border-radius:8px; background:rgba(140,150,170,0.06); }
.cm-ext-quote > div { display:flex; flex-direction:column; gap:.1rem; font-size:.85rem; }
.cm-ext-uploaded { color:#7ee2a8; font-size:.85rem; }

/* ContractBillingPanel's per-invoice-line editor row. */
.cbp-lines { display:flex; flex-direction:column; gap:.4rem; margin:.6rem 0; }
.cbp-line { display:grid; grid-template-columns:2fr .7fr .9fr .8fr 1.3fr auto; gap:.35rem; align-items:center; }
.cbp-cm-line { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:.35rem; align-items:center; }
.cbp-line input, .cbp-line select, .cbp-cm-line input { min-width:0; }
.cbp-actions { display:flex; gap:.35rem; flex-wrap:wrap; }
.cbp-apply-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.2rem 0; }
.cbp-apply-row input { width:8rem; }

/* Danger zone (clear transactional data) on /admin/data-transfer. */
.danger-panel { border-color: rgba(248, 113, 113, 0.35); }
.danger-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.lp-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.lp-btn.danger:hover:not(:disabled) { filter: brightness(1.1); }

/* Overdue instalments + accrued late charges on the CM console — warning semantics. */
.cm-overdue { margin-top: 0.25rem; font-size: 0.78rem; color: #f0b65a; font-weight: 600; }

/* Queue age — how long a proposal/query has been waiting (PM queue, CM queries column). */
.queue-age { font-size: 0.82rem; color: var(--fg); white-space: nowrap; }
.queue-age-old { color: #f0b65a; font-weight: 600; }

/* Closed/declined/cancelled application — quiet end-state panel on the form page. */
.app-ended-panel { display: flex; gap: 0.8rem; align-items: flex-start; }
.app-ended-panel .app-ended-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%; flex: 0 0 auto;
    border: 1px solid var(--border); color: var(--accent-2); font-size: 0.95rem;
}
.app-ended-panel p.sm { margin: 0.3rem 0 0; font-size: 0.85rem; }

/* ---- /profile (self-service user page) ---- */
.pf-role-chip {
    display: inline-block; margin-left: 0.45rem; padding: 0.08rem 0.5rem;
    border: 1px solid var(--border); border-radius: 4px;
    font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.pf-usage-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.pf-usage-tile {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.7rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: #10131b; min-width: 180px;
}
.pf-usage-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pf-usage-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- left sidenav (hamburger rail) --------------------------------------------------------
   .app-body is the row below the topbar: sidenav + main.shell. The nav is in normal flow on
   desktop (rail ↔ expanded via flex-basis, cookie-persisted); on narrow screens it leaves the
   flow and the open state is a fixed overlay above a scrim. The scrim is a SIBLING of the nav,
   not a child — the nav animates with transform, and position:fixed inside a transformed
   element resolves against that element, not the viewport. */
.app-body { flex: 1; min-height: 0; display: flex; }

.nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin: 0 -0.25rem 0 -0.35rem;
    background: none; border: 1px solid transparent; border-radius: 8px;
    color: var(--fg); opacity: 0.85; cursor: pointer;
}
.nav-burger:hover { opacity: 1; background: rgba(127, 127, 127, 0.14); }

.sidenav {
    flex: 0 0 var(--sidenav-rail); width: var(--sidenav-rail); min-height: 0;
    background: #0e1118; border-right: 1px solid #242a36;
    overflow: hidden; transition: flex-basis 200ms ease, width 200ms ease;
}
.app-shell--nav-open .sidenav { flex-basis: var(--sidenav-open); width: var(--sidenav-open); }
.sidenav-inner {
    height: 100%; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 0.15rem; padding: 0.65rem 0.45rem;
}
.app-shell--nav-open .sidenav-inner { padding: 0.75rem 0.65rem; }

.sidenav-item-form { margin: 0; display: block; }
.sidenav-item {
    position: relative; display: flex; align-items: center; gap: 0.65rem; width: 100%;
    padding: 0.52rem 0.6rem; border: 0; border-radius: 10px;
    background: none; color: var(--fg); opacity: 0.78; cursor: pointer;
    font: inherit; font-size: 0.87rem; text-align: left; text-decoration: none; white-space: nowrap;
}
.sidenav-item:hover { opacity: 1; background: rgba(127, 127, 127, 0.12); }
.sidenav-item.on { opacity: 1; background: rgba(110, 168, 255, 0.14); }
.sidenav-item.on::before {
    content: ""; position: absolute; left: -0.45rem; top: 22%; bottom: 22%;
    width: 3px; border-radius: 2px; background: var(--accent-2, #6ea8ff);
}
.sidenav-ico { display: inline-flex; justify-content: center; flex: 0 0 auto; width: 1.5rem; font-size: 1.3rem; line-height: 1; }
.sidenav-label { display: none; overflow: hidden; text-overflow: ellipsis; }
.app-shell--nav-open .sidenav-label { display: block; }

.sidenav-divider { flex: 0 0 1px; height: 1px; background: #242a36; margin: 0.5rem 0.3rem; }
.sidenav-group-label { display: none; }
.app-shell--nav-open .sidenav-group-label {
    display: block; padding: 0.4rem 0.6rem 0.15rem; color: var(--muted);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}

/* Quick links — expanded only, hung off a faint tree line under their section header. */
.sidenav-sub { display: none; }
.app-shell--nav-open .sidenav-sub {
    display: flex; flex-direction: column; gap: 1px;
    margin: 0.1rem 0 0.35rem 1.35rem; padding-left: 0.7rem; border-left: 1px solid #242a36;
}
.sidenav-sublink-form { margin: 0; display: block; }
.sidenav-sublink {
    display: block; width: 100%; box-sizing: border-box;
    color: var(--fg); opacity: 0.6; text-decoration: none; font: inherit; font-size: 0.8rem;
    padding: 0.28rem 0.5rem; border: 0; border-radius: 7px;
    background: none; text-align: left; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidenav-sublink:hover { opacity: 1; background: rgba(127, 127, 127, 0.1); }
.sidenav-sublink.on { opacity: 1; color: var(--accent-2, #8ab8ff); background: rgba(110, 168, 255, 0.1); }

.sidenav-scrim { display: none; }

/* Peek mode — viewing an earlier journey step; locked once the deal is submitted/decided. */
.peek-banner {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin: 0.5rem 0 0.75rem; padding: 0.6rem 0.8rem;
    border: 1px solid rgba(110, 168, 255, 0.35); border-radius: 10px;
    background: rgba(110, 168, 255, 0.08); font-size: 0.88rem;
}
.peek-banner-locked { border-color: rgba(255, 184, 77, 0.45); background: rgba(255, 184, 77, 0.08); }
.peek-ico { font-size: 1.15rem; }
.peek-text { flex: 1 1 340px; }
.peek-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.peek-fieldset:disabled { opacity: 0.78; }

/* Re-quote confirmation modal + arrival banner — loud on purpose. */
.requote-modal { max-width: 620px; }
.requote-body ul { margin: 0.5rem 0 0.75rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.requote-banner { border-color: rgba(255, 184, 77, 0.5); background: rgba(255, 184, 77, 0.09); }
.lp-btn.warn {
    background: rgba(255, 184, 77, 0.16); border: 1px solid rgba(255, 184, 77, 0.55); color: #ffd166;
}
.lp-btn.warn:hover { background: rgba(255, 184, 77, 0.26); }

/* Advance-in-progress pill in the Move-forward strip — narrates each stage of the transition. */
.phase-working {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.8rem; border-radius: 4px; font-size: 0.86rem;
    background: rgba(110, 168, 255, 0.12); color: var(--accent-2, #8ab8ff);
    border: 1px solid rgba(110, 168, 255, 0.35);
}
/* "Awaiting signature" notice next to the locked Activate button — amber, not an error. */
.phase-await-sign {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.8rem; border-radius: 4px; font-size: 0.84rem;
    background: rgba(240, 190, 90, 0.10); color: #e8c884;
    border: 1px solid rgba(240, 190, 90, 0.35);
}
.phase-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(110, 168, 255, 0.3); border-top-color: var(--accent-2, #8ab8ff);
    animation: phase-spin 0.8s linear infinite;
}
@keyframes phase-spin { to { transform: rotate(360deg); } }

/* /admin/translations — gap chips, category chips, English reference, AI review panel */
.tr-missing-chip {
    display: inline-block; margin-left: 0.45rem; padding: 0.05rem 0.5rem; border-radius: 4px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
    background: rgba(255, 184, 77, 0.15); color: #f0b65a; border: 1px solid rgba(255, 184, 77, 0.4);
}
.tr-data-chip {
    display: inline-block; margin-left: 0.45rem; padding: 0.05rem 0.5rem; border-radius: 4px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
    background: rgba(255, 110, 110, 0.13); color: #ff9b86; border: 1px solid rgba(255, 110, 110, 0.4);
}
.tr-cat-chip {
    display: inline-block; padding: 0.05rem 0.55rem; border-radius: 4px; font-size: 0.72rem;
    background: rgba(110, 168, 255, 0.1); color: var(--accent-2, #8ab8ff); border: 1px solid rgba(110, 168, 255, 0.25);
    white-space: nowrap;
}
.tr-en-ref {
    margin: 0.6rem 0 0; padding: 0.45rem 0.6rem; border-left: 3px solid var(--accent-2, #6ea8ff);
    background: rgba(110, 168, 255, 0.07); border-radius: 0 8px 8px 0; font-size: 0.88rem;
}
.tr-ai-review { margin-bottom: 1rem; }
.tr-ai-review table { width: 100%; }

/* Prompt transparency + per-batch flight recorder (AI translate). Monospace blocks that scroll
   inside their own box so a long reply never widens the page. */
.tr-prompt-preview, .tr-diag { margin: 0.75rem 0 1rem; }
.tr-diag-lbl {
    display: block; margin: 0.7rem 0 0.25rem; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.tr-diag-pre {
    margin: 0; padding: 0.55rem 0.7rem; max-height: 22rem; overflow: auto;
    background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8rem;
    line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--text, #e8ecf1);
}
.tr-diag-batch {
    margin: 0.6rem 0; padding: 0.6rem 0.75rem; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.02);
}
.tr-diag-batch.bad { border-color: rgba(255, 120, 100, 0.45); background: rgba(255, 90, 70, 0.06); }
.tr-diag-batch.ok { border-color: rgba(90, 200, 140, 0.35); }
.tr-diag-head { font-size: 0.86rem; margin-bottom: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.65rem; align-items: baseline; }
.tr-diag-err { color: #ff9b86; font-weight: 600; }
.tr-diag-good { color: #6ddc9f; font-weight: 600; }
.tr-diag-batch details { margin-top: 0.35rem; }
.tr-diag-batch summary { cursor: pointer; }

/* Site-wide breadcrumb strip — slim, muted, sits between the topbar and the page.
   Class is nav-crumbs, NOT site-crumbs: `.site-crumbs` already belongs to the light-themed
   journey-preview mockup (its later rule painted these near-white). Grep before naming CSS. */
.nav-crumbs {
    align-self: stretch; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    margin: -1.1rem 0 0.35rem; font-size: 0.88rem; color: var(--muted);
}
.nav-crumbs a { color: var(--muted); text-decoration: none; }
.nav-crumbs a:hover { color: var(--fg); text-decoration: underline; }
.nav-crumbs-sep { opacity: 0.55; }
.nav-crumbs-here { color: var(--fg); opacity: 0.85; }

/* Resumed-draft banner — quote-start reused an existing empty draft; say so + offer a fresh start. */
.resume-banner {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin: 0.35rem 0 0.75rem; padding: 0.6rem 0.8rem;
    border: 1px solid rgba(110, 168, 255, 0.35); border-radius: 10px;
    background: rgba(110, 168, 255, 0.08); font-size: 0.86rem;
}
.resume-banner-ico { font-size: 1.15rem; color: var(--accent-2, #8ab8ff); }
.resume-banner-text { flex: 1 1 320px; }

/* Lead Source chip next to the application title — Walk In vs an inbound interface origin. */
.lead-source-chip {
    display: inline-block; vertical-align: middle; margin-left: 0.6rem;
    padding: 0.14rem 0.6rem; border: 1px solid rgba(110, 168, 255, 0.35); border-radius: 4px;
    background: rgba(110, 168, 255, 0.1); color: var(--accent-2, #8ab8ff);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}

/* The application number — the stable, quotable id shown prominently on the app header + work-list. */
.app-number-badge {
    display: inline-block; margin-bottom: 0.35rem;
    padding: 0.2rem 0.7rem; border: 1px solid var(--border); border-radius: 8px;
    background: #141823; color: var(--accent-2, #8ab8ff);
    font-family: var(--mono); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em;
}
/* Application № + Contract № shown side by side once a contract exists. */
.deal-id-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.contract-number-badge { color: var(--ok, #5dd39e); }
.app-number-link { font-family: var(--mono); font-weight: 600; letter-spacing: 0.02em; }
.app-ref-sub { font-size: 0.74rem; color: var(--muted); margin-top: 0.1rem; }

/* Narrow screens: no rail — the open state slides in as an overlay over a scrim. */
@media (max-width: 900px) {
    .sidenav {
        position: fixed; z-index: 60; left: 0; bottom: 0;
        top: calc(var(--banner-offset) + var(--topbar-h));
        width: min(80vw, 17rem); flex: 0 0 auto;
        transform: translateX(-100%); transition: transform 200ms ease;
        box-shadow: 12px 0 34px rgba(0, 0, 0, 0.45);
    }
    .app-shell--nav-open .sidenav { transform: translateX(0); width: min(80vw, 17rem); }
    /* Overlay always renders the expanded content (labels, groups, links). */
    .sidenav .sidenav-label, .sidenav .sidenav-group-label { display: block; }
    .sidenav .sidenav-sub { display: flex; flex-direction: column; gap: 1px;
        margin: 0.1rem 0 0.35rem 1.35rem; padding-left: 0.7rem; border-left: 1px solid #242a36; }
    .sidenav .sidenav-inner { padding: 0.75rem 0.65rem; }
    .app-shell--nav-open .sidenav-scrim {
        display: block; position: fixed; inset: 0; z-index: 55; background: rgba(4, 6, 12, 0.5);
    }
}

/* Topbar market switcher — only visible to Host-scope users. */
.market-switcher-form { display: inline-flex; align-items: center; gap: 0.35rem; }
.market-switcher-label { opacity: 0.65; font-size: 0.95rem; }
.market-switcher-select {
    font: inherit; font-size: 0.82rem; padding: 0.18rem 0.5rem; line-height: 1.2;
    background: #1b1f2a; color: var(--fg); border: 1px solid #2c3242; border-radius: 6px;
    cursor: pointer;
}
.market-switcher-select:hover { border-color: #3d4456; }
.market-switcher-select option { background: #1b1f2a; color: var(--fg); }

/* ---- landing ---- */
.landing { width: min(820px, 100%); margin: 0 auto; padding: 2rem 1.5rem; text-align: center; }
.landing-hero h1 { font-size: 3.5rem; margin: 0; }
.landing .tagline { font-size: 1.4rem; opacity: 0.9; margin: 0.25rem 0 1rem; }
.landing .blurb { opacity: 0.8; max-width: 600px; margin: 0 auto 1.75rem; line-height: 1.6; }
.cta { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.big-button.ghost, .big-button.google {
    background: transparent; border: 1px solid var(--accent); color: var(--fg); text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.landing-steps { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
.step { background: #181b23; border: 1px solid #2b313d; border-radius: 14px; padding: 1.25rem; width: 200px; }
.step h3 { margin: 0.5rem 0 0.25rem; }
.step p { opacity: 0.7; margin: 0; font-size: 0.9rem; }

/* ---- auth pages ---- */
.auth { width: min(380px, 100%); margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 0.5rem; }
.auth .brand { color: var(--fg); text-decoration: none; font-weight: 800; font-size: 2.4rem; letter-spacing: -0.5px; margin-bottom: 1rem; display: block; }

/* modern split sign-in / register: marketing pitch beside a form card */
.auth-split { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; max-width: 940px; margin: 2.5rem auto; min-height: 56vh; }
.auth-pitch { text-align: left; }
.auth-pitch .brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--fg); text-decoration: none; font-weight: 800; font-size: 1.4rem; margin-bottom: 1.6rem; }
.auth-sigil { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(96, 165, 250, 0.5); border-radius: 50%; color: var(--accent-2); font-size: 0.9rem; }
.auth-pitch h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; font-weight: 700; }
.auth-pitch h2 em { font-style: normal; color: var(--accent-2); }
.auth-pitch > p { color: var(--muted); font-size: 1.05rem; max-width: 42ch; margin: 0 0 1.7rem; line-height: 1.6; }
.auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.auth-points li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--fg); font-size: 0.95rem; }
.auth-points li span { color: #f2b88a; }
.auth-split .auth { width: 100%; max-width: 400px; margin: 0; text-align: left; background: #12141c; border: 1px solid var(--border); border-radius: 18px; padding: 2rem; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85); gap: 0.6rem; }
.auth-split .auth h1 { margin: 0; font-size: 1.6rem; }
.auth-sub { color: var(--muted); margin: 0 0 0.6rem; font-size: 0.92rem; }
@media (max-width: 820px) {
    .auth-split { grid-template-columns: 1fr; gap: 2rem; max-width: 440px; min-height: 0; }
    .auth-pitch { text-align: center; }
    .auth-pitch .brand { font-size: 1.6rem; }
    .auth-pitch > p { margin-inline: auto; }
    .auth-points { max-width: 340px; margin: 0 auto; }
    .auth-split .auth { margin: 0 auto; }
}
.auth h1 { margin: 0 0 0.5rem; }
.auth label { text-align: left; font-size: 0.85rem; opacity: 0.8; margin-top: 0.5rem; }
/* label on the left, field on the right */
.auth-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 0.7rem; margin-top: 0.5rem; }
.auth-row label { margin: 0; }
.auth-input {
    width: 100%; padding: 0.6rem 0.7rem; border-radius: 10px; border: 1px solid #2b313d;
    background: #181b23; color: var(--fg); font: inherit; box-sizing: border-box;
}
.auth .big-button { width: 100%; margin-top: 0.75rem; justify-content: center; }
.auth .google { margin-top: 0.5rem; }

/* ---- admin ---- */
.admin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (max-width: 760px) { .admin-cards { grid-template-columns: 1fr; } }
.admin .panel { text-align: left; }
/* admin dashboard tiles */
/* The admin hub uses a wider container so more tiles fit per row on a big screen.
   Needs `.page.admin-hub` to outrank `.page`'s own width (defined later in the file).
   Full-width like `.page.wide` — the hub reads like the rest of the site's work pages. */
.page.admin-hub { width: 100%; max-width: 100%; box-sizing: border-box; text-align: left; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.admin-filter { max-width: 420px; margin-top: 1rem; }
/* Platform + per-workspace tab strip on the hub — single line, scrolls sideways rather than wraps */
.admin-tabs {
    display: flex; gap: 0.15rem; margin-top: 1.2rem; border-bottom: 1px solid var(--border);
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
}
.admin-tab {
    background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 0.88rem; padding: 0.5rem 0.8rem 0.55rem;
    border-radius: 8px 8px 0 0; display: inline-flex; align-items: center; gap: 0.4rem;
    margin-bottom: -1px; white-space: nowrap; flex: none;
}
.admin-tab:hover { color: var(--fg); background: rgba(140,150,170,0.08); }
.admin-tab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.admin-tab-ico { display: inline-flex; align-items: center; font-size: 1.05em; }
.admin-ws-open {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.4rem; padding: 0.65rem 1rem; border-radius: 10px; font-size: 0.9rem;
    border: 1px solid rgba(59,130,246,0.35); background: rgba(59,130,246,0.07);
}
.admin-ws-open a { font-weight: 600; }
/* recently-used: a slim always-visible strip under the tabs (every tab, not just Platform) */
.admin-recent-strip { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }
.admin-recent-label {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
    border: 1px dashed var(--border); border-radius: 4px; padding: 0.14rem 0.6rem;
}
.admin-recent-chip {
    font-size: 0.76rem; color: var(--fg); text-decoration: none; background: var(--panel-2, #141927);
    border: 1px solid var(--border); border-radius: 4px; padding: 0.18rem 0.7rem; white-space: nowrap;
}
.admin-recent-chip:hover { border-color: var(--accent); text-decoration: none; }
.admin-group { margin-top: 2.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(140,150,170,0.12); }
.admin-group:first-of-type { margin-top: 1.5rem; border-top: none; padding-top: 0; }
.admin-recently-used { margin-top: 1.5rem; }
.admin-group-desc { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--muted); }
.admin-group-h {
    margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted, #8a93a6);
    padding-bottom: 0.5rem; border-bottom: 1px solid rgba(140, 150, 170, 0.18);
}
.admin-group .admin-tiles { margin-top: 0.9rem; }
.admin-tile {
    display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; text-align: left;
    background: #181b23; border: 1px solid #2b313d; border-radius: 16px; padding: 1.3rem; color: var(--fg);
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.admin-tile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32); }
.at-ico { display: inline-flex; align-items: center; width: 30px; height: 30px; color: var(--accent); }
.at-ico svg { width: 28px; height: 28px; }
.at-title { font-weight: 700; font-size: 1.05rem; }
.at-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.version-line { margin-top: 1.5rem; font-size: 0.8rem; }

/* usage & cost report */
.cost-filters {
    display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: end; margin-bottom: 1.2rem;
    padding: 0.9rem 1rem; background: #12151d; border: 1px solid var(--border); border-radius: 12px;
}
.cost-filters .fld { gap: 0.3rem; }
.cost-filters input[type=date] {
    background: #fff; color: #14121d; border: 1px solid #d8d3e8; border-radius: 7px;
    padding: 0.35rem 0.5rem; font: inherit; font-size: 0.85rem;
}
.cost-filter-actions { display: flex; gap: 0.4rem; }
.cost-display { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.cost-display .fld.inline { flex-direction: row; align-items: center; gap: 0.55rem; }
.cost-display .fld.inline > span { margin: 0; }
.cost-totals { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.cost-tot { background: #12151d; border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 150px; }
.cost-tot span { font-size: 0.78rem; color: var(--muted); }
.cost-tot strong { font-size: 1.35rem; }
.cost-tot.profit strong { color: #4ade80; }
.cost-tot.rating strong { color: #f5b301; }
.cost-rating-line { margin: -0.6rem 0 1.3rem; font-size: 0.9rem; }
.cost-sub td { background: rgba(255, 255, 255, 0.02); color: var(--muted); font-size: 0.9rem; }

/* wide admin pages (SQL console, domain model) use the full content width */
.page.wide { width: 100%; max-width: 100%; text-align: left; box-sizing: border-box; }

/* SQL console results — a database-style grid that scrolls inside its own panel
   (never widening the page itself) */
/* .panel.sql-results (not just .sql-results): the .panel padding rule is defined later in this
   file and would win otherwise — its top padding becomes a band the rows scroll through ABOVE
   the sticky header. The results grid must sit flush against the panel edges. */
.panel.sql-results, .sql-results { overflow: auto; max-width: 100%; max-height: 62vh; padding: 0; margin-top: 0.7rem; }
/* The legacy .records margin-top would leave a 1.5rem gap above the table INSIDE the scroll
   panel — rows peeked through it while the sticky header pinned below. Flush the table to the
   panel top, and give the pinned header its own edge lines (collapsed borders scroll away). */
.sql-results .records { margin: 0; }
/* This table scrolls INSIDE .sql-results (overflow:auto), not the page — so its sticky header pins
   to that local scrollport (top:0), not the topbar. Reset the -2rem page-scroller offset. */
.sql-results .datagrid th { top: 0; box-shadow: inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border); border-top: none; border-bottom: none; }
.datagrid { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.78rem; }
.datagrid th, .datagrid td {
    color: var(--fg);
    border: 1px solid var(--border); padding: 0.34rem 0.7rem; white-space: nowrap;
    max-width: 460px; overflow: hidden; text-overflow: ellipsis;
}
/* top:-2rem, NOT 0. These tables scroll with the PAGE (.shell), which carries 2rem top padding;
   sticky pins to the scrollport's padding edge, so top:0 locks the header 2rem BELOW the topbar
   with rows sliding through the gap above it. -2rem cancels that padding so the header locks flush
   under the topbar (same recipe as .dbv-pinbar / .page-actionbar). Tables that scroll in their OWN
   overflow container reset this back to 0 — see .sql-results .datagrid th. */
.datagrid th { background: #1a1e27; color: var(--fg); position: sticky; top: -2rem; z-index: 1; text-align: left; font-weight: 600; }
.datagrid tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.022); }
.datagrid tbody tr:hover td { background: rgba(120, 150, 255, 0.07); }
/* The legacy .records styles further down in this file set color: #1b1430 (a Conjure
   light-theme leftover). When a table is `class="records datagrid"` source-order makes
   that win, painting cells in near-invisible dark purple on the dark theme. Bump the
   specificity here to make the dark-friendly color stick. */
.records.datagrid th, .records.datagrid td { color: var(--fg); }
.records.datagrid td.muted, .records.datagrid td .muted, .records.datagrid .muted { color: var(--muted); }
/* User-facing list pages (Customers / Applications / Cases / Contracts / Assets / Reports
   / search results) read better with the system font + a slightly larger size; the .datagrid
   default keeps JetBrains Mono 0.78rem for the SQL console + Domain viewer where it makes
   sense. */
.records.datagrid {
    font-family: var(--font-sans);
    font-size: 0.88rem;
}
.records.datagrid th, .records.datagrid td {
    padding: 0.5rem 0.8rem;
    white-space: normal;
    /* Kill the Conjure light-theme leftover: the legacy `.records th,td` sets a near-white #ece8f5
       bottom border, which only got overridden to a dark line on `.admin` pages. On a plain content
       page (e.g. Contract Management → All contracts) it painted a bright line under the header that
       looked nothing like the same datagrid on admin / Vehicle Sales. Pin every border to the theme
       colour so the table looks identical everywhere. */
    border-color: var(--border);
}
.records.datagrid code {
    background: rgba(255,255,255,0.05);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.82rem;
}
.datagrid td.cell-null { color: #5a5470; font-style: italic; }
.datagrid .rownum { color: var(--muted); text-align: right; width: 1%; white-space: nowrap; user-select: none; position: sticky; left: 0; background: #12151d; }
.datagrid th.rownum { z-index: 2; background: #1a1e27; }
.admin .code-area { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 0.82rem; padding: 0.65rem 0.8rem; line-height: 1.5; }

/* SQL layout: editor + history side by side. minmax(0,…) keeps the table from
   stretching the column and giving the whole page a horizontal scrollbar. */
.sql-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.4rem; align-items: start; margin-top: 0.6rem; }
.sql-layout > div { min-width: 0; }

/* SQL console v2 — docked schema | editor+results | history/saved rail */
.sql-shell { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.4rem; align-items: start; margin-top: 0.6rem; }
.sql-shell-schema { grid-template-columns: 340px minmax(0, 1fr) 290px; }
.sql-main { min-width: 0; }
.sql-schema { padding: 0.7rem; max-height: 640px; overflow-y: auto; }
.sql-schema-search { width: 100%; margin: 0.4rem 0 0.5rem; }
.sql-editor { width: 100%; }
.sql-savebar { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.sql-savebar input { max-width: 280px; }
.sql-ai { padding: 0.7rem 0.9rem; margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; }
.sql-ai-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.sql-ai-prompt { flex: 1; resize: vertical; }
.sql-results-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 0.7rem; gap: 0.6rem; }
.sql-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sql-th:hover { text-decoration: underline; }
.sql-cell { cursor: copy; }
.sql-rail-tabs { display: flex; gap: 0.3rem; margin-bottom: 0.5rem; }
.sql-rail-tab { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 0.25rem 0.7rem; color: var(--muted); cursor: pointer; font-size: 0.8rem; }
.sql-rail-tab.on { color: var(--fg); border-color: var(--accent, #6ea8ff); }
.sql-saved-row { display: flex; align-items: flex-start; gap: 0.2rem; }
.sql-saved-row .sql-history-item { flex: 1; }
.sql-saved-del { flex: 0 0 auto; opacity: 0.6; }
.sql-saved-del:hover { opacity: 1; color: #ff8f8f; }
.sql-actions { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0; }
.sql-actions .msg { margin-right: auto; display: inline-flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.sql-actions .auto-limit { font-size: 0.78rem; color: #f0b352; }
.sql-tools { margin: 0.4rem 0 0.8rem; }

/* schema reference panel (slides in from the right; click to copy names) */
.schema-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 88vw; z-index: 50;
    background: #12151d; border-left: 1px solid var(--border); box-shadow: -12px 0 30px rgba(0, 0, 0, 0.4);
    padding: 1rem; overflow-y: auto; animation: schemaIn 0.18s ease both;
}
@keyframes schemaIn { from { transform: translateX(100%); } to { transform: none; } }
.schema-head { display: flex; justify-content: space-between; align-items: center; }
.schema-hint { font-size: 0.75rem; margin: 0.2rem 0 0.8rem; }
.schema-list { display: flex; flex-direction: column; gap: 0.1rem; }
.schema-trow { display: flex; align-items: center; gap: 0.35rem; }
.schema-exp { border: 0; background: none; color: var(--muted); cursor: pointer; width: 1.1rem; padding: 0; }
.schema-tname {
    border: 0; background: none; color: var(--fg); cursor: pointer; font-family: var(--mono);
    font-size: 0.82rem; padding: 0.25rem 0.3rem; border-radius: 6px; text-align: left; flex: 1;
}
.schema-tname:hover { background: rgba(255, 255, 255, 0.06); color: var(--accent-2); }
.copied-tag { font-size: 0.68rem; color: #4ade80; }
.schema-cols { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.2rem 0 0.5rem 1.4rem; }
.schema-col {
    border: 1px solid var(--border); background: #181b23; color: var(--muted); cursor: pointer;
    font-family: var(--mono); font-size: 0.72rem; padding: 0.12rem 0.45rem; border-radius: 6px;
}
.schema-col:hover { color: var(--fg); border-color: var(--accent); }
.sql-history { background: #12151d; border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem; max-height: 520px; overflow-y: auto; }
.sql-history h3 { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); }
.sql-history-item {
    display: block; width: 100%; text-align: left; border: 0; background: #181b23; color: var(--fg);
    border-radius: 8px; padding: 0.45rem 0.55rem; margin-bottom: 0.4rem; cursor: pointer;
    font-family: var(--mono); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sql-history-item:hover { background: #20242f; }
.sql-history .empty { font-size: 0.78rem; color: var(--muted); }
@media (max-width: 900px) { .sql-layout { grid-template-columns: 1fr; } }

/* domain-model tabs + ER diagram */
.dm-tabs { display: inline-flex; gap: 0.4rem; margin-bottom: 1rem; }
.dm-tabs button { padding: 0.4rem 0.9rem; border-radius: 4px; border: 1px solid var(--border); background: #181b23; color: var(--muted); cursor: pointer; }
.dm-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.dm-tabs .dm-board-link { align-self: center; margin-left: 0.5rem; }
.er-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.er-zoom { display: inline-flex; gap: 0.35rem; }
.er-zoom .lp-btn { min-width: 2.4rem; }
.er-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); cursor: pointer; user-select: none; }
.er-toggle input { accent-color: var(--accent); }
.dm-tools { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
/* The /admin/domain accordion PANEL (a div wrapping a .records table). Scoped to .panel because
   /admin/data-model reuses the .dm-table class on the <table> itself — overflow:hidden there CLIPPED
   the squeezed row-action buttons right out of view. */
.panel.dm-table { padding: 0; overflow: hidden; }
/* SDM nested tree view */
.dm-viewtoggle { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.8rem; flex-wrap: wrap; }
.dm-tree { list-style: none; margin: 0 0 1.2rem; padding: 0 0 0 0.4rem; }
.dm-tree-field { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; }
.dm-tree-field code { background: color-mix(in srgb, var(--accent) 8%, #12141c); padding: 0.05rem 0.35rem; border-radius: 5px; }
.dm-tree-label { font-weight: 600; }
.dm-tree-ref { margin: 0.35rem 0; padding: 0.4rem 0 0.2rem; border-top: 1px dashed color-mix(in srgb, var(--accent) 25%, var(--border)); }
.dm-tree-refhead { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.dm-tree-refarrow { color: var(--accent); }
.dm-tree-refhead code { background: color-mix(in srgb, var(--accent) 14%, #12141c); padding: 0.05rem 0.35rem; border-radius: 5px; }
.dm-tree-reflabel { font-weight: 700; }
.dm-tree-refto { color: var(--accent); font-size: 0.8rem; font-weight: 600; }
.dm-tree-nested { margin: 0.35rem 0 0.35rem 0; padding-left: 1.4rem; border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.dm-tree-more { padding: 0.2rem 0; }
.dm-head {
    width: 100%; text-align: left; border: 0; background: transparent; color: var(--fg);
    cursor: pointer; font: inherit; padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.6rem;
}
.dm-head:hover { background: rgba(255, 255, 255, 0.03); }
.dm-head strong { font-size: 1rem; }
.dm-caret { color: var(--muted); width: 1rem; }
.dm-table .records { margin: 0; border-top: 1px solid var(--border); }
.er-diagram {
    background: #0e1118; border: 1px solid var(--border); border-radius: 12px;
    height: 75vh; overflow: hidden; position: relative; touch-action: none; user-select: none;
}
.er-pan { position: absolute; top: 1rem; left: 1rem; transform-origin: 0 0; }
.er-pan svg { max-width: none !important; height: auto; display: block; }

/* Diagram tab: table-picker sidebar + diagram. */
.dm-diagram-layout { display: flex; gap: 1rem; align-items: stretch; }
.dm-diagram-layout .er-diagram { flex: 1; min-width: 0; }
/* Wider by default (schema-qualified names are long) + drag the right edge to resize against the
   diagram (which is flex:1, so it gives/takes the freed space). */
.dm-table-picker { width: 360px; flex: none; height: 75vh; display: flex; flex-direction: column; padding: 0.85rem 1rem;
    overflow: hidden; resize: horizontal; min-width: 240px; max-width: 70vw; }
.dm-picker-head { display: flex; align-items: baseline; justify-content: space-between; }
.dm-picker-hint { font-size: 0.75rem; margin: 0.35rem 0 0.5rem; }
.dm-picker-actions { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.dm-picker-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.dm-picker-item { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0; font-size: 0.85rem; cursor: pointer; }
.dm-picker-item input { flex: none; }
.dm-picker-li { position: relative; }
/* The table name is a button (so a click navigates to the SQL console without toggling the checkbox). */
.dm-tname { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0.1rem 0.2rem; margin: 0;
    font: inherit; font-size: 0.85rem; color: var(--link, #1a4d8f); cursor: pointer; border-radius: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-tname:hover { background: rgba(0, 0, 0, 0.06); text-decoration: underline; }
/* Per-table preview toggle — fixed-width so the buttons line up in a column down the list. */
.dm-peek {
    flex: none; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 1px solid var(--border); border-radius: 5px; background: rgba(140, 150, 170, 0.08);
    color: var(--fg); cursor: pointer; font-size: 0.85rem; line-height: 1;
}
.dm-peek:hover { border-color: rgba(91, 162, 255, 0.6); }
.dm-peek.on { border-color: rgba(91, 162, 255, 0.9); background: rgba(91, 162, 255, 0.16); color: #cfe0ff; }
.dm-peek-key { font-family: ui-monospace, monospace; }
/* Hover preview renders inline (in the scrolling list flow) so it's never clipped, and moving the
   cursor from the name down into it stays within the <li> — only leaving the row dismisses it. */
.dm-preview { margin: 0.15rem 0 0.45rem; padding: 0.5rem 0.55rem; }
.dm-preview-msg { margin: 0; font-size: 0.72rem; }
.dm-preview-head { font-weight: 600; font-size: 0.72rem; margin-bottom: 0.35rem; }
.dm-preview-scroll { overflow-x: auto; max-width: 100%; }
.dm-preview-scroll table.records { font-size: 0.68rem; margin: 0; }
.dm-preview-scroll th, .dm-preview-scroll td { white-space: nowrap; max-width: 9rem; overflow: hidden;
    text-overflow: ellipsis; padding: 0.15rem 0.3rem; }
.dm-preview-foot { margin-top: 0.4rem; font-size: 0.68rem; color: var(--muted, #777); }
@media (max-width: 760px) { .dm-diagram-layout { flex-direction: column; } .dm-table-picker { width: auto; height: auto; max-height: 40vh; } }

/* editor Theme panel */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.theme-drawer .fld.inline { flex-direction: row; align-items: center; gap: 0.6rem; }
.theme-drawer input[type=color] { width: 48px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: none; cursor: pointer; }
.theme-drawer input[type=range] { accent-color: var(--accent); }
.theme-bg-img { margin-bottom: 0.8rem; }
.theme-bg-img .ip-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); max-height: 220px; }
.theme-bg-img .ip-item.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-headerlinks { margin-bottom: 0.9rem; }
.theme-headerlinks .fld-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.5rem; }
.hl-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hl-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; background: #181b23; border: 1px solid var(--border); border-radius: 8px; padding: 0.35rem 0.65rem; cursor: pointer; }

/* direct block / section editor */
.blocks-drawer .block-edit { border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem; margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; background: #12151d; }
.block-edit-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.block-edit-top select { flex: 1; min-width: 0; max-width: 230px; }
/* block-editor controls: full-width, no overflow, accent focus (not the default blue outline) */
.block-edit .auth-input, .block-edit select, .block-edit textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.block-edit .auth-input:focus, .block-edit select:focus, .block-edit textarea:focus,
.panel-body .auth-input:focus, .panel-body .code-area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.block-actions { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.block-actions .lp-btn { min-width: 2rem; }
.block-img { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.block-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.blocks-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.blocks-drawer textarea.code-area { min-height: auto; height: auto; }
@media (max-width: 760px) { .admin-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .admin-tiles { grid-template-columns: 1fr; } }
/* selected-model info panel (admin → AI models) */
.model-info { margin-top: 0.8rem; padding: 0.7rem 0.9rem; background: #12151d; border: 1px solid var(--border); border-radius: 10px; }
.mi-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mi-price, .mi-ctx { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 4px; font-weight: 600; }
.mi-price { background: rgba(59, 130, 246, 0.16); color: var(--accent-2); }
.mi-ctx { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.mi-desc { margin: 0.55rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.kv { list-style: none; padding: 0; margin: 0; }
.kv li { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #242a36; }
.kv span { opacity: 0.7; }
.admin .records th, .admin .records td,
.usage .records th, .usage .records td,
.profile .records th, .profile .records td { color: var(--fg); border-bottom: 1px solid #242a36; }
.admin .records th, .usage .records th, .profile .records th { color: #b7aee0; }

/* profile page */
.profile-head { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 1.4rem; }
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), #7c3aed); flex-shrink: 0; }
.profile-head h2 { margin: 0; }
.prof-tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; flex-wrap: wrap; }
.prof-tabs button { background: none; border: 0; color: var(--muted); padding: 0.55rem 0.9rem; cursor: pointer; font: inherit; font-size: 0.9rem; border-bottom: 2px solid transparent; }
.prof-tabs button:hover { color: var(--fg); }
.prof-tabs button.active { color: var(--fg); border-bottom-color: var(--accent); }
.prof-props th { text-align: left; width: 180px; color: var(--muted) !important; font-weight: 500; }
/* profile → API keys tab */
.apikey-create { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.apikey-create input { min-width: 22rem; }
.apikey-fresh { background: #1a2030; border: 1px solid var(--accent); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 1rem; }
.apikey-fresh p { margin: 0 0 0.4rem; }
.apikey-value { display: block; padding: 0.6rem 0.8rem; background: #0f1218; border: 1px solid var(--border); border-radius: 8px; font-family: var(--mono); font-size: 0.85rem; word-break: break-all; margin-bottom: 0.5rem; }
.panel.narrow { max-width: 420px; }
.panel.narrow .fld.stack { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; }
.panel.narrow .fld.stack > span { font-size: 0.82rem; color: var(--muted); }

/* admin configuration page */
.cfg-note { background: rgba(255, 196, 84, 0.08); border: 1px solid rgba(255, 196, 84, 0.3); border-radius: 12px; padding: 0.9rem 1.1rem; margin: 0.4rem 0 1.2rem; line-height: 1.55; font-size: 0.9rem; }
.cfg-table td.cfg-src { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.cfg-table td.cfg-unset { color: var(--muted); font-style: italic; }
.cfg-table td:nth-child(2) { font-family: var(--mono); font-size: 0.82rem; }

/* admin chat & error log */
.chk { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; white-space: nowrap; }
.admin .chatlog td { vertical-align: top; font-size: 0.85rem; }
.admin .chatlog .nowrap { white-space: nowrap; opacity: 0.75; }
.admin .chatlog .chat-text { max-width: 640px; white-space: normal; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.admin .chatlog .chat-err td { background: rgba(220, 38, 38, 0.08); }
.admin .chatlog details { margin-top: 0.3rem; }
.admin .chatlog summary { cursor: pointer; color: #ff9aa6; font-size: 0.78rem; }
.admin .chatlog pre {
    white-space: pre-wrap; word-break: break-word; font-size: 0.76rem; margin: 0.3rem 0 0;
    background: #0f131c; border: 1px solid #242a36; border-radius: 6px; padding: 0.5rem;
    max-height: 240px; overflow: auto; color: #cdd3e0;
}
.role-badge {
    font-size: 0.7rem; padding: 0.12rem 0.45rem; border-radius: 6px; text-transform: capitalize;
    background: #2a2f3c; color: #b7aee0;
}
.role-badge.error { background: #3a1d22; color: #ff9aa6; }
.role-badge.user { background: #1d2a3a; color: #9ac5ff; }
.role-badge.assistant { background: #1f2e26; color: #8fe0b6; }
.fb-tag { margin-top: 0.3rem; font-size: 0.76rem; color: #ff9aa6; }

.hero { width: min(640px, 100%); text-align: center; }

.hero h1 {
    font-size: 3rem;
    margin: 0;
    color: var(--fg);
}

.tagline { opacity: 0.8; margin-top: 0.25rem; }

.prompt-box {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

textarea {
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid #2b313d;
    background: #181b23;
    color: var(--fg);
    resize: vertical;
    font: inherit;
}

button {
    align-self: center;
    padding: 0.75rem 1.75rem;
    border: 0;
    border-radius: 4px;
    background: var(--accent);
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

button:disabled { opacity: 0.4; cursor: not-allowed; }

/* close/✕ link-buttons: reset the default pill/accent background (they only set colour) */
.toplink {
    align-self: auto; background: none; border: 0; padding: 0.15rem 0.4rem; border-radius: 6px;
    color: inherit; font: inherit; font-size: 0.95rem; cursor: pointer;
}
.toplink:hover { background: rgba(127, 127, 127, 0.14); }

/* "recording config into a feature set" chip in the topbar */
.rec-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
    font-size: 0.82rem; font-weight: 600;
    background: rgba(224, 83, 58, 0.16); color: #ffb3a3;
    border: 1px solid rgba(224, 83, 58, 0.45); border-radius: 4px; padding: 0.12rem 0.6rem;
}
.rec-chip:hover { background: rgba(224, 83, 58, 0.26); }
.rec-dot {
    width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #e0533a;
    box-shadow: 0 0 0 0 rgba(224, 83, 58, 0.7); animation: rec-pulse 1.6s ease-out infinite;
}
@keyframes rec-pulse {
    0% { box-shadow: 0 0 0 0 rgba(224, 83, 58, 0.6); }
    70% { box-shadow: 0 0 0 0.4rem rgba(224, 83, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 83, 58, 0); }
}

.echo { margin-top: 1.5rem; opacity: 0.75; }

/* ---- management UI (workspaces + websites) ---- */
.page {
    width: min(900px, 100%);
    margin: 0 auto;
    /* Sticky topbar already breathes; collapsing the page's own top padding stops a
       second wasted gap appearing above the back-button on every list/detail page. */
    padding: 1rem 1.5rem 2rem;
    text-align: center;
}

.lead { opacity: 0.8; margin-top: -0.25rem; font-size: 1.1rem; }

.back {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: var(--fg);
    opacity: 0.7;
    text-decoration: none;
}
.back:hover { opacity: 1; }

/* Page H1 sits right under the back button — collapse the default UA top margin so
   the title isn't pushed an extra ~0.7em down. */
.page > h1 { margin-top: 0.25rem; margin-bottom: 0.4rem; }

.card-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}

/* /app landing: section headers + "what's new" release tiles */
.land-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 2.4rem; }
.land-head + .card-grid { margin-top: 1rem; }
.land-head h2 { margin: 0; font-size: 1.1rem; color: var(--fg); }
/* the "What's new" footnote: deliberately low-key so workspaces stay the focus */
.land-head.quiet { margin-top: 3.2rem; }
.land-head.quiet h2 { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.land-head.quiet .toplink { font-size: 0.8rem; }
.rel-tiles { margin-top: 0.7rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.7rem; opacity: 0.75; }
.rel-tile {
    background: transparent; border: 1px solid var(--border); border-radius: 10px;
    padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.rel-tile-head { display: flex; align-items: center; gap: 0.6rem; }
.rel-tile-head .rel-date { margin-left: auto; font-size: 0.72rem; }
.rel-tile-head .rel-ver { font-size: 0.68rem; }
.rel-tile-title { font-size: 0.84rem; line-height: 1.35; color: var(--fg); }
.rel-tile-sum { margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border-radius: 18px;
    border: 1px solid #2b313d;
    background: #181b23;
    color: var(--fg);
    cursor: pointer;
    font: inherit;
    min-height: 140px;
    justify-content: center;
    transition: transform 0.08s ease, border-color 0.08s ease;
}
.tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.site-tile { position: relative; }
.tile-del {
    position: absolute; top: 0.5rem; right: 0.5rem; border: 0; background: transparent;
    color: var(--fg); cursor: pointer; opacity: 0; font-size: 0.95rem; line-height: 1;
    padding: 0.25rem; border-radius: 6px; transition: opacity 0.1s ease, background 0.1s ease;
}
.site-tile:hover .tile-del { opacity: 0.65; }
.tile-del:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.del-list { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; color: var(--muted); font-size: 0.9rem; }
.del-list li { margin: 0.15rem 0; }

.tile-emoji { font-size: 2.5rem; }
.tile-name { font-size: 1.2rem; font-weight: 600; }
.tile-sub { opacity: 0.6; font-size: 0.9rem; }

.tile-new { cursor: default; background: #13161d; border-style: dashed; }
.tile-new:hover { transform: none; }
.tile-new input {
    width: 100%;
    padding: 0.6rem;
    border-radius: 10px;
    border: 1px solid #2b313d;
    background: #0f1218;
    color: var(--fg);
    font: inherit;
    text-align: center;
}

.big-button {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 4px;
    background: var(--accent);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
}
.big-button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- website page: contents + AI chat ---- */
.site { width: min(1100px, 100%); margin: 0 auto; padding: 2rem 1.5rem; }
.site h1 { margin: 0.25rem 0 1.25rem; }
.site-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 760px) { .site-grid { grid-template-columns: 1fr; } }

.panel {
    background: #181b23;
    border: 1px solid #2b313d;
    border-radius: 16px;
    padding: 1.25rem;
    text-align: left;
}
.panel h2 { margin-top: 0; font-size: 1.15rem; }
.muted { opacity: 0.6; }

.entity { margin-bottom: 1rem; }
.entity-name { font-weight: 600; margin-bottom: 0.35rem; }
.fields { list-style: none; margin: 0; padding: 0 0 0 1.25rem; }
.fields li { display: flex; justify-content: space-between; padding: 0.15rem 0; opacity: 0.9; }
.f-type { opacity: 0.55; font-size: 0.85rem; }

.chat { display: flex; flex-direction: column; font-size: 0.85rem; }
.chat h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    padding-right: 0.25rem;
}
.msg { padding: 0.45rem 0.65rem; border-radius: 10px; max-width: 88%; white-space: pre-wrap; line-height: 1.35; }
.msg.user { align-self: flex-end; background: var(--accent); color: white; }
.msg.assistant { align-self: flex-start; background: #1c2130; }
.msg-usage { align-self: flex-start; font-size: 0.68rem; color: var(--muted); margin: 0.1rem 0 0.3rem 0.2rem; opacity: 0.85; }
/* per-reply star rating */
.rate-row { display: flex; align-items: center; gap: 0.5rem; align-self: flex-start; margin: 0 0 0.5rem 0.2rem; flex-wrap: wrap; }
.rate-stars { display: inline-flex; }
.rate-star { background: none; border: 0; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0 1px; color: #454a59; transition: color 0.1s; }
.rate-star:hover, .rate-star.on { color: #f5b301; }
.rate-val { font-size: 0.72rem; color: var(--muted); }
.rate-hint { font-size: 0.66rem; color: var(--muted); opacity: 0.5; }
.rate-row:hover .rate-hint { opacity: 1; }
.rate-comment { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.25rem; }
.rate-comment textarea { width: 100%; box-sizing: border-box; background: #181b23; color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.5rem; font: inherit; font-size: 0.82rem; resize: vertical; }
.rate-comment-actions { display: flex; gap: 0.4rem; }
.rate-avg { color: #f5b301; font-weight: 600; }
.cj-css-holder { display: none; }   /* holds the keyed custom-CSS <style>; no layout */

/* admin releases / changelog */
.rel-form { display: flex; flex-direction: column; gap: 0.7rem; max-width: 640px; }
.rel-form .code-area { min-height: 90px; }
.rel-item { border-bottom: 1px solid var(--border); padding: 0.9rem 0; }
.rel-item:last-child { border-bottom: 0; }
.rel-item-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.rel-ver { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); background: rgba(124, 92, 255, 0.12); padding: 0.1rem 0.5rem; border-radius: 6px; }
.rel-date { font-size: 0.8rem; color: var(--muted); }
.rel-item-head .lp-btn { margin-left: auto; }
.rel-notes { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--fg); }
.rel-notes li { margin: 0.2rem 0; }
.rel-model { font-family: var(--mono); font-size: 0.72rem; color: #7fd8d4; background: rgba(127, 216, 212, 0.1); padding: 0.1rem 0.45rem; border-radius: 6px; }
.rel-request { margin: 0.5rem 0 0; color: var(--muted); font-style: italic; font-size: 0.88rem; }
.rel-summary { margin: 0.5rem 0; color: var(--fg); font-size: 0.95rem; line-height: 1.55; }
.reg-disabled { background: rgba(255, 196, 84, 0.08); border: 1px solid rgba(255, 196, 84, 0.3); border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.88rem; line-height: 1.5; margin: 0.3rem 0 0.6rem; }

/* feedback triage */
.fb-item { margin-bottom: 0.9rem; }
.fb-item.done { opacity: 0.6; }
.fb-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.fb-stars { color: #f5b301; letter-spacing: 1px; }
.fb-done-tag { color: #4ade80; font-size: 0.8rem; margin-left: auto; }
.fb-reply { margin: 0.2rem 0; color: var(--fg); }
.fb-comment { margin: 0.3rem 0; color: #ffb4a8; font-style: italic; }
.fb-action { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.6rem; }
.fb-action .auth-input.slim { flex: 1; min-width: 160px; max-width: 380px; }
.fb-action .fb-ver { flex: 0 0 160px; min-width: 120px; }
.fb-models { margin-top: 0.9rem; }
.fb-models .fld-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.45rem; }
.fb-recs { margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.fb-rec { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; background: #12151d; }
.fb-rec-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.fb-rec-text { white-space: pre-wrap; color: var(--fg); font-size: 0.9rem; line-height: 1.5; }
.fb-rec-usage { font-size: 0.72rem; color: var(--muted); margin-left: auto; }
.fb-rec-tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0.5rem 0 0; }
.fb-rectab { background: #181b23; border: 1px solid var(--border); border-bottom: none; color: var(--muted); padding: 0.35rem 0.7rem; border-radius: 8px 8px 0 0; cursor: pointer; font: inherit; font-size: 0.78rem; }
.fb-rectab.active { color: var(--fg); background: #12151d; border-color: var(--accent); }
.fb-recs .fb-rec, .fb-rec { margin-top: 0; }
.fb-prompt { margin-top: 0.6rem; }
.fb-prompt summary { cursor: pointer; color: var(--muted); font-size: 0.8rem; }
.fb-prompt pre { white-space: pre-wrap; word-break: break-word; background: #0f1218; border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem; font-size: 0.74rem; max-height: 320px; overflow: auto; color: #cdd6e6; }
.fb-howitworks { margin-top: 0.8rem; }
.fb-howitworks summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
/* action row: button + wide "what you did" + small version + aligned mark button */
.fb-action { align-items: center; }
.fb-action .fb-res { flex: 1 1 240px; min-width: 200px; max-width: none; }
.fb-action .fb-ver { flex: 0 0 96px; min-width: 80px; max-width: 96px; }
.fb-action .fb-mark { margin-left: auto; }

/* "Advise Me" */
.adv-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.adv-head h2 { margin: 0; }
.adv-sep { border: none; border-top: 1px solid var(--border); margin: 1.1rem 0 0.9rem; }
.adv-text { width: 100%; box-sizing: border-box; margin-bottom: 0.6rem; }
textarea.adv-text { resize: vertical; min-height: 4.5rem; }
.adv-row { display: flex; gap: 0.6rem; align-items: center; }
/* Advise Me page: extra breathing room between tiles (profile / leaderboard / new-entry / models / each journal entry) */
.adv-page > .panel + .panel { margin-top: 1.6rem; }

/* Stacked content panels in the main column touch by default (border + border), which reads as one
   merged block. Give consecutive full-width panels a small gap so each reads as its own card. Scoped
   to DIRECT children of .page so side-by-side panel layouts (which live inside their own flex/grid
   wrappers) are unaffected. Applies across every workspace/dashboard that stacks panels. */
.page > .panel + .panel { margin-top: 0.75rem; }
/* Improve-with-AI action row that sits below each profile textarea */
.adv-improve { flex-wrap: wrap; margin-top: -0.3rem; margin-bottom: 1.1rem; }
.adv-improve .adv-model { width: auto; min-width: 14rem; max-width: 22rem; padding: 0.35rem 0.6rem; }
.adv-improve .adv-improve-note { font-size: 0.78rem; flex-basis: 100%; margin-top: 0.1rem; }
.adv-err { color: #f0b352; font-size: 0.82rem; }
.adv-content { white-space: pre-wrap; color: var(--fg); line-height: 1.5; margin: 0.2rem 0 0.4rem; }
.adv-of { font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.adv-best-btn { margin-left: auto; }
.adv-del { margin-left: auto; }

/* admin users */
.user-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.user-add .auth-input.slim { flex: 1; min-width: 150px; }
.user-off td { opacity: 0.5; }
.user-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.danger-btn { color: #f87171; }
.danger-btn:hover { background: rgba(248, 113, 113, 0.12); }
.usage-cell { font-size: 0.72rem; color: var(--muted); line-height: 1.45; white-space: nowrap; }
.msg.error {
    align-self: stretch; max-width: 100%;
    background: #2a1418; border: 1px solid #6b2330; color: #ffb4b4;
}
.msg-err-head { font-weight: 700; margin-bottom: 0.2rem; color: #ff9aa6; }
.msg.error details { margin-top: 0.4rem; }
.msg.error summary { cursor: pointer; font-size: 0.85rem; }
.msg.error pre {
    margin: 0.5rem 0 0; white-space: pre-wrap; word-break: break-word;
    font-size: 0.78rem; max-height: 220px; overflow: auto;
}
.composer {
    display: flex; gap: 0.4rem; align-items: flex-end;
    background: #0f1218; border: 1px solid var(--border); border-radius: 14px;
    padding: 0.35rem 0.4rem 0.35rem 0.75rem;
}
.composer:focus-within { border-color: var(--accent); }
.composer textarea {
    flex: 1; border: 0; background: transparent; color: var(--fg); resize: none;
    font: inherit; font-size: 0.9rem; line-height: 1.45; padding: 0.45rem 0;
    min-height: 3.2rem; max-height: 200px; outline: none;
}
.send-btn {
    flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.send-btn:hover:not(:disabled) { filter: brightness(1.1); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.send-btn svg { width: 17px; height: 17px; }
.composer-hint { font-size: 0.72rem; margin: 0.35rem 0 0; text-align: center; }

.row-del {
    border: 0; background: transparent; color: #b06; cursor: pointer;
    font-size: 0.85rem; opacity: 0.6;
}
.row-del:hover { opacity: 1; color: #e0426a; }
.row-edit {
    border: 0; background: transparent; color: #6b6385; cursor: pointer;
    font-size: 0.9rem; opacity: 0.6; margin-right: 0.4rem;
}
.row-edit:hover { opacity: 1; color: var(--site-accent, var(--accent)); }
.form-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.2rem; }
.form-actions .add-parent { margin-top: 0; }

/* ---- editor: AI (left) + website (right, fills the side) ---- */
.editor-page { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; text-align: left; }
.editor-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.editor-top h1 { margin: 0; font-size: 1.4rem; flex: 1; }
.editor-top .back { margin: 0; }
.preview-btn { width: auto; padding: 0.5rem 1.1rem; text-decoration: none; }

.editor { flex: 1; min-height: 0; display: flex; gap: 1rem; }
.editor .chat { width: 380px; flex: 0 0 380px; height: 100%; margin: 0; }
.editor .site-side { flex: 1; min-width: 0; height: 100%; display: flex; }

/* browser-frame preview */
.browser {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    border: 1px solid #2b313d; border-radius: 14px; overflow: hidden;
    background: #ffffff; color: #1b1430;
}
/* simple browser frame: traffic-light dots + an address pill */
.browser-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.85rem; background: #ece9f5; border-bottom: 1px solid #d9d4ea; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #c9c4dd; }
.dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
.bz-dots { display: inline-flex; gap: 8px; }
.browser-bar .url {
    font-size: 0.78rem; color: #4a4d52; background: #fff; border-radius: 4px;
    padding: 0.3rem 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0;
}
.bz-urltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-ic { display: inline-flex; align-items: center; color: #5f6368; }
.bz-lock svg { width: 12px; height: 12px; }

/* smooth page transition on navigation. Opacity ONLY — a transform here would create a
   containing block that traps fixed popups rendered inside (e.g. related-list dialogs in an
   expanded row) and let the site header paint over them. */
.site-view { animation: viewFade 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes viewFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .site-view { animation: none; } }

/* nested pages (one level) in the sidebar */
.navlink-row.nested { margin-left: 0.5rem; }
.navlink-row.nested .navlink { font-size: 0.92em; opacity: 0.9; border-left: 2px solid #e2dcf0; border-radius: 0 8px 8px 0; }
.navlink-row.nested .navlink.active { opacity: 1; }
/* "nest under" control on a page (editor) */
.page-editbar { margin: 0.1rem 0 0.4rem; font-size: 0.8rem; color: #6b6385; }
.page-editbar label { display: inline-flex; align-items: center; gap: 0.4rem; }
.page-editbar select {
    font: inherit; font-size: 0.82rem; padding: 0.25rem 0.45rem; border: 1px solid #d8d3e8;
    border-radius: 7px; background: #fff; color: #1b1430;
}

/* rename a page (editor) */
.page-rename-btn { border: 0; background: none; cursor: pointer; color: #8b80b0; font-size: 0.85rem; margin-left: 0.4rem; }
.page-rename-btn:hover { color: var(--site-accent, var(--accent)); }
.page-rename { display: flex; align-items: center; gap: 0.4rem; flex: 1; }
.page-rename input {
    font-size: 1.1rem; font-weight: 600; padding: 0.3rem 0.5rem; border: 1px solid #d8d3e8;
    border-radius: 8px; color: #1b1430; background: #fff; min-width: 0; flex: 1; max-width: 340px;
}
.site-nav {
    display: flex; gap: 0.25rem; flex-wrap: wrap;
    padding: 0.5rem 0.85rem; background: #f6f4fc; border-bottom: 1px solid #e6e2f2;
}
.navlink {
    border: 0; background: transparent; color: #4a4360; cursor: pointer;
    padding: 0.4rem 0.8rem; border-radius: 8px; font: inherit; font-weight: 500;
}
.navlink:hover { background: #ece8f7; }
.navlink.active { background: var(--site-accent, var(--accent)); color: #fff; }
.site-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.75rem; }
/* generated-site home: landing-style hero + image + feature cards */
.gen-home {
    --gen-accent: var(--site-accent, var(--accent));
    max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; padding: 0.5rem 0 1.5rem;
}

/* ---- hero: text + theme-aware app mock on a soft accent backdrop ---- */
.gen-hero {
    position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.4rem;
    align-items: center; padding: 2.4rem; border-radius: 24px; overflow: hidden;
    background: color-mix(in srgb, var(--gen-accent) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--gen-accent) 16%, #eee);
}
.gen-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(38% 60% at 88% 8%, color-mix(in srgb, var(--gen-accent) 26%, transparent), transparent 70%),
        radial-gradient(40% 60% at 8% 100%, color-mix(in srgb, var(--gen-accent) 16%, transparent), transparent 70%);
}
.gen-hero-text, .gen-hero-media { position: relative; z-index: 1; }
.gen-hero-text { text-align: left; }
.gen-eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--gen-accent);
    background: #fff; border: 1px solid color-mix(in srgb, var(--gen-accent) 22%, #fff);
    padding: 0.32rem 0.7rem; border-radius: 4px; margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.gen-eyebrow .nav-ico { display: inline-flex; width: 14px; height: 14px; }
.gen-hero-text h1 { font-size: 2.6rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.8rem; color: #14121d; }
.gen-lead { font-size: 1.06rem; line-height: 1.65; color: #4a4360; margin: 0 0 1.6rem; max-width: 42ch; }
.gen-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.gen-cta {
    display: inline-flex; align-items: center; gap: 0.5rem; border: 0; cursor: pointer; font: inherit;
    font-weight: 600; font-size: 0.95rem; padding: 0.72rem 1.25rem; border-radius: 11px;
    background: var(--gen-accent); color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--gen-accent) 35%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.gen-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.gen-cta-arr { transition: transform 0.12s ease; }
.gen-cta:hover .gen-cta-arr { transform: translateX(3px); }
.gen-cta.ghost {
    background: #fff; color: #14121d; box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--gen-accent) 28%, #ddd);
}
.gen-cta.ghost:hover { border-color: var(--gen-accent); }

/* the app mock (shows the site's real pages) */
.gen-window {
    background: #fff; border-radius: 14px; overflow: hidden;
    border: 1px solid #ece8f5; box-shadow: 0 24px 60px rgba(20, 18, 40, 0.16);
    transform: rotate(0.6deg);
}
.gen-window-bar { display: flex; gap: 6px; padding: 0.6rem 0.8rem; background: #f6f4fc; border-bottom: 1px solid #eee; }
.gen-window-bar span { width: 9px; height: 9px; border-radius: 50%; background: #d9d4e6; }
.gen-window-bar span:first-child { background: #f9b8bf; }
.gen-window-bar span:nth-child(2) { background: #ffe0a3; }
.gen-window-body { display: grid; grid-template-columns: auto 1fr; }
.gen-window-head {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.85rem;
    color: #fff; background: var(--gen-accent); padding: 0.6rem 0.8rem;
}
.gen-window-head .gw-logo { display: inline-flex; width: 15px; height: 15px; }
.gen-window-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.5rem; background: #faf9ff; min-width: 116px; }
.gen-window-item {
    display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: #6b6385;
    padding: 0.34rem 0.5rem; border-radius: 7px; white-space: nowrap;
}
.gen-window-item i { display: inline-flex; width: 13px; height: 13px; }
.gen-window-item.on { background: color-mix(in srgb, var(--gen-accent) 14%, #fff); color: var(--gen-accent); font-weight: 600; }
.gen-window-main { padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.gen-window-main .gw-line { height: 9px; border-radius: 5px; background: #eceaf4; }
.gw-line.w60 { width: 60%; } .gw-line.w75 { width: 75%; } .gw-line.w90 { width: 90%; }
.gen-window-main .gw-pill { margin-top: 0.4rem; width: 84px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--gen-accent) 22%, #fff); }

/* ---- feature cards ---- */
.gen-sec-title { font-size: 1.15rem; margin: 0 0 1rem; color: #14121d; }
.gen-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.gen-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; text-align: left;
    background: #fff; border: 1px solid #ece8f5; border-radius: 16px; padding: 1.3rem; cursor: pointer;
    font: inherit; transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.gen-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gen-accent) 40%, #eee); box-shadow: 0 16px 36px rgba(20, 18, 40, 0.1); }
.gen-card-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border-radius: 13px; color: var(--gen-accent);
    background: color-mix(in srgb, var(--gen-accent) 13%, #fff);
}
.gen-card-ico svg { width: 23px; height: 23px; }
.gen-card h3 { margin: 0; font-size: 1.02rem; color: #14121d; }
.gen-card p { margin: 0; font-size: 0.86rem; color: #6b6385; line-height: 1.5; flex: 1; }
.gen-card-link { font-size: 0.82rem; font-weight: 600; color: var(--gen-accent); margin-top: 0.2rem; }

@media (max-width: 680px) {
    .gen-hero { grid-template-columns: 1fr; padding: 1.6rem; }
    .gen-hero-media { display: none; }
    .gen-hero-text h1 { font-size: 2.1rem; }
}

/* ---- AI-designed home (real hero photo + tailored content sections) ---- */
.gen-home.designed { gap: 3rem; }
.dh-hero {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center;
    padding: 2.4rem; border-radius: 24px; overflow: hidden;
    background: color-mix(in srgb, var(--gen-accent) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--gen-accent) 16%, #eee);
}
.dh-hero.no-img { grid-template-columns: 1fr; }
.dh-hero-text { text-align: left; }
.dh-hero-text h1 { font-size: 2.6rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.8rem; color: #14121d; }
.dh-hero-img img {
    width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 16px;
    box-shadow: 0 22px 50px rgba(20, 18, 40, 0.2); display: block;
}
.dh-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.dh-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid #ece8f5;
    border-radius: 16px; overflow: hidden; box-shadow: 0 6px 22px rgba(20, 18, 40, 0.05);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dh-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(20, 18, 40, 0.1); }
.dh-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: #f4f2fa; }
.dh-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-card-ico.dh-card-ico { width: 46px; height: 46px; margin: 1.2rem 1.2rem 0; }
.dh-card-body { padding: 1rem 1.2rem 1.3rem; }
.dh-card-body h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: #14121d; }
.dh-card-body p { margin: 0; font-size: 0.88rem; color: #6b6385; line-height: 1.5; }
@media (max-width: 680px) { .dh-hero { grid-template-columns: 1fr; padding: 1.6rem; } .dh-hero-img { display: none; } }

/* ---- richer landing section kinds (steps / features / quotes / cta) ---- */
.gen-home.designed > section { margin-top: 2.4rem; }

/* numbered "how it works" steps band */
.dh-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: #ece8f5; border: 1px solid #ece8f5; border-radius: 18px; overflow: hidden; }
.dh-step { background: #fff; padding: 2rem 1.6rem; transition: background 0.2s; }
.dh-step:hover { background: #faf9ff; }
.dh-step-num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--site-accent, var(--accent)); display: block; margin-bottom: 1rem; }
.dh-step h3 { margin: 0 0 0.5rem; font-size: 1.1rem; color: #14121d; }
.dh-step p { margin: 0; color: #5a5470; font-size: 0.95rem; line-height: 1.55; }

/* feature cards (icon + benefit) */
.dh-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.dh-feature { border: 1px solid #ece8f5; border-radius: 18px; padding: 1.8rem; background: linear-gradient(160deg, #faf9ff, #ffffff); transition: transform 0.2s, border-color 0.2s; }
.dh-feature:hover { transform: translateY(-3px); border-color: var(--site-accent, var(--accent)); }
.dh-feature-ico { display: inline-flex; align-items: center; width: 30px; height: 30px; color: var(--site-accent, var(--accent)); margin-bottom: 1rem; }
.dh-feature-ico svg { width: 28px; height: 28px; }
.dh-feature h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: #14121d; }
.dh-feature p { margin: 0; color: #5a5470; font-size: 0.93rem; line-height: 1.55; }

/* example / testimonial cards */
.dh-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.dh-quote { border: 1px solid #ece8f5; border-radius: 14px; padding: 1.5rem; background: #faf9ff; transition: border-color 0.2s; }
.dh-quote:hover { border-color: var(--site-accent, var(--accent)); }
.dh-quote-text { margin: 0; color: #2b2540; line-height: 1.6; }
.dh-quote-text::before { content: "❝ "; color: var(--site-accent, var(--accent)); font-weight: 700; }
.dh-quote-by { display: block; margin-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--site-accent, var(--accent)); }

/* centred call-to-action band */
.dh-cta { text-align: center; padding: 3.5rem 1.5rem; border-radius: 22px; border: 1px solid #ece8f5;
    background: linear-gradient(135deg, color-mix(in srgb, var(--site-accent, var(--accent)) 14%, #fff), #faf9ff); }
.dh-cta h2 { font-size: 1.9rem; margin: 0 auto 0.7rem; max-width: 20ch; color: #14121d; }
.dh-cta p { color: #5a5470; margin: 0 auto 1.4rem; max-width: 46ch; }

.site-hero { text-align: center; padding: 1.5rem 0; }
.site-hero h1 { font-size: 2.4rem; margin: 0 0 0.25rem; color: #1b1430; -webkit-text-fill-color: initial; background: none; }
.site-hero .muted { color: #6b6385; }
.hero-cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.hero-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    background: #f4f1fb; border: 1px solid #e0dbf0; border-radius: 14px;
    padding: 1.25rem 1.75rem; cursor: pointer; font: inherit; font-weight: 600; color: #1b1430;
}
.hero-card:hover { border-color: var(--accent); }
.site-page { max-width: 820px; margin: 0 auto; }
.site-page h2 { color: #1b1430; }
.new-related { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; max-width: 680px; }
.big-button.add-parent { margin-top: 1.2rem; }
.preview-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 460px; }
.preview-form label { font-weight: 600; font-size: 0.9rem; color: #4a4360; }
.preview-form input {
    padding: 0.55rem 0.7rem; border: 1px solid #d4cee6; border-radius: 8px;
    background: #fff; color: #1b1430; font: inherit;
}
.preview-form select {
    padding: 0.55rem 0.7rem; border: 1px solid #d4cee6; border-radius: 8px;
    background: #fff; color: #1b1430; font: inherit;
}
.preview-form .big-button { align-self: flex-start; margin-top: 0.75rem; }
.form-error { color: #c0392b; font-size: 0.9rem; margin: 0.25rem 0 0; }

.records { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 0.9rem; }
.records th, .records td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid #ece8f5; color: #1b1430; }
.records th { color: #6b6385; font-weight: 600; }
.records td .cell-img, td > .cell-img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid #ece8f5; display: block; }

.rel-hint { font-size: 0.82rem; margin: 1.2rem 0 0; }

/* expandable parent rows -> inline child records (master-detail) */
.records tr.expandable { cursor: pointer; }
.records tr.expandable:hover td { background: #faf8ff; }
.rec-actions { white-space: nowrap; text-align: right; }
.rec-chevron {
    display: inline-block; margin-right: 0.4rem; color: #8b80b0; font-size: 1.05rem;
    transition: transform 140ms ease;
}
.rec-chevron.open { transform: rotate(90deg); }
.rec-detail-row > td { padding: 0; background: #f8f6ff; border-bottom: 1px solid #ece8f5; }
.rec-detail { display: flex; flex-direction: column; gap: 1rem; padding: 0.9rem 1rem 1.1rem; }

.related-list {
    background: #fff; border: 1px solid #e9e4f5; border-radius: 12px; padding: 0.9rem 1rem;
}
.related-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.related-head h4 {
    margin: 0; display: flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; color: #1b1430;
}
.related-head h4 .page-ico { display: inline-flex; width: 18px; height: 18px; color: #6b6385; }
.rel-add {
    border: 1px solid var(--site-accent, var(--accent)); background: transparent;
    color: var(--site-accent, var(--accent)); cursor: pointer; font: inherit; font-size: 0.82rem;
    font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 8px; white-space: nowrap;
}
.rel-add:hover { background: var(--site-accent, var(--accent)); color: #fff; }

/* neat added-items table */
.related-records { margin: 0; width: 100%; border-collapse: collapse; border: 1px solid #ece8f5; border-radius: 10px; overflow: hidden; }
.related-records th {
    background: #f6f4fc; color: #6b6385; font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.related-records th, .related-records td { padding: 0.5rem 0.7rem; border-bottom: 1px solid #f0ecf8; text-align: left; }
.related-records tbody tr:last-child td { border-bottom: 0; }
.related-records tbody tr:hover td { background: #faf8ff; }
.rel-rowact { text-align: right; width: 1%; white-space: nowrap; }
.related-scroll { overflow-x: auto; }
.related-records td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sortable column headers (both the main records table and related lists) */
.records th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.records th.sortable:hover { color: var(--site-accent, var(--accent)); }
.sort-ind { font-size: 0.7em; opacity: 0.8; }

/* entity page: title + add button on top, records first, form in a popup */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.big-button.page-add { width: auto; }
.page-empty { margin-top: 1.5rem; }
.modal.entry-modal { width: min(620px, calc(100vw - 2rem)); }

/* admin: the approve-models picker */
.modal.model-picker { width: min(880px, calc(100vw - 2rem)); }
.mp-tools { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.mp-tools .auth-input.slim { flex: 1; min-width: 220px; }
.mp-scroll { overflow-y: auto; max-height: min(56vh, 560px); border: 1px solid var(--border); border-radius: 10px; }
.mp-table { width: 100%; margin: 0; }
/* the modal lives outside .admin, so restate the dark-theme table colours */
.mp-table th, .mp-table td { color: var(--fg); border-bottom: 1px solid #242a36; }
.mp-table thead th { position: sticky; top: 0; background: #141823; z-index: 1; color: #b7aee0; }
.mp-table tbody tr { cursor: pointer; }
.mp-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.mp-table tbody tr.mp-on td { background: rgba(124, 92, 255, 0.1); }
.mp-table td, .mp-table th { white-space: nowrap; }
.mp-table td:nth-child(2), .mp-table th:nth-child(2) { white-space: normal; width: 100%; }
.mp-free { font-size: 0.68rem; color: #4ade80; background: rgba(74, 222, 128, 0.12); border-radius: 6px; padding: 0.08rem 0.4rem; margin-left: 0.35rem; }
.mp-new { font-size: 0.68rem; color: #7fb8ff; background: rgba(127, 184, 255, 0.12); border-radius: 6px; padding: 0.08rem 0.4rem; margin-left: 0.35rem; }
.mp-sel { max-width: 190px; }
.mp-drift { font-size: 0.72rem; color: #f5b301; }
.gw-chip { font-family: var(--mono); font-size: 0.72rem; color: #c9a8ff; background: rgba(124, 92, 255, 0.12); padding: 0.1rem 0.45rem; border-radius: 6px; white-space: nowrap; }
.gw-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.9rem; }
.gw-add .gw-url { flex: 1; min-width: 220px; }

/* delete-page ✕ on nav items (editor only) */
.navlink-row { display: flex; align-items: center; }
.navlink-row .navlink { flex: 1; min-width: 0; }
/* drag-to-reorder pages */
.navlink-row.draggable { cursor: grab; }
.navlink-row.draggable:active { cursor: grabbing; }
.nav-grip { color: #b8b0d0; font-size: 0.7rem; letter-spacing: -2px; padding: 0 0.15rem 0 0.1rem; opacity: 0; transition: opacity 0.12s; user-select: none; }
.navlink-row.draggable:hover .nav-grip { opacity: 0.7; }
.navlink-row.drag-over { box-shadow: inset 0 2px 0 0 var(--site-accent, var(--accent)); border-radius: 6px; }
.topnav-item { display: inline-flex; align-items: center; }
.nav-del {
    border: 0; background: none; cursor: pointer; color: #c0392b; opacity: 0;
    font-size: 0.78rem; padding: 0.2rem 0.4rem; border-radius: 6px; transition: opacity 0.1s ease;
}
.navlink-row:hover .nav-del, .topnav-item:hover .nav-del { opacity: 0.7; }
.nav-del:hover { opacity: 1; background: rgba(220, 38, 38, 0.14); }
.topnav-del { color: rgba(255, 255, 255, 0.8); }
.topnav-del:hover { background: rgba(255, 255, 255, 0.2); }
.related-empty {
    font-size: 0.85rem; margin: 0; padding: 0.7rem; text-align: center;
    background: #faf9ff; border: 1px dashed #e6e2f2; border-radius: 10px;
}
/* the add-child popup shows a (light) website form, so the card itself is light.
   Use .modal.related-modal so it beats the dark base .modal regardless of source order. */
.modal.related-modal { background: #fff; color: #1b1430; }
.related-modal .modal-head h2 { color: #1b1430; }
.related-modal .toplink { color: var(--site-accent, var(--accent)); }
.related-modal label { color: #1b1430; }
.related-modal .related-form { margin: 0; }
.related-modal .pf-field input, .related-modal .pf-field select, .related-modal .pf-field textarea {
    background: #fff; color: #1b1430; border: 1px solid #d8d3e8;
}
.related-modal .big-button.ghost {
    background: transparent; color: var(--site-accent, var(--accent)); border-color: var(--site-accent, var(--accent));
}

/* full-screen preview route */
.preview-page { width: min(1000px, 100%); margin: 0 auto; padding: 1.5rem; height: calc(100vh - 3rem); display: flex; flex-direction: column; gap: 0.75rem; }
.preview-page .browser { flex: 1; }

/* full-page preview: the real browser tab IS the window, so drop the mock frame */
.browser.no-chrome { border: 0; border-radius: 0; }
.preview-page.fullpage { position: fixed; inset: 0; z-index: 60; width: 100%; max-width: none; height: 100vh; margin: 0; padding: 0; gap: 0; }
.preview-page.fullpage .browser { flex: 1; height: 100vh; border-radius: 0; }
.preview-back {
    position: fixed; top: 0.7rem; left: 0.7rem; z-index: 100; background: rgba(15, 15, 25, 0.55);
    color: #fff; padding: 0.35rem 0.75rem; border-radius: 4px; text-decoration: none; font-size: 0.8rem;
    backdrop-filter: blur(5px); opacity: 0.45; transition: opacity 0.15s;
}
.preview-back:hover { opacity: 1; }

/* ---- generated website preview: header + collapsible left nav + sticky footer ---- */
.browser .site {
    display: flex; flex-direction: column; flex: 1; min-height: 0; width: auto; margin: 0; padding: 0;
    font-family: var(--site-font, system-ui, sans-serif);
}
.site-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1rem; color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, var(--site-accent, var(--accent)),
        color-mix(in srgb, var(--site-accent, var(--accent)) 78%, #1a1a2e));
}
.hamburger {
    border: 0; background: transparent; color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; padding: 0.3rem; border-radius: 8px;
}
.hamburger:hover { background: rgba(255, 255, 255, 0.18); }
.site-title {
    color: #fff; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 700; padding: 0;
}
.site-title:hover { opacity: 0.8; }
.site-topnav { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-left: 0.7rem; }
.site-header-links { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-left: auto; }
@media (max-width: 640px) { .site-header-links { display: none; } }
.topnavlink {
    border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85); padding: 0.3rem 0.6rem; border-radius: 7px;
}
.topnavlink:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.topnavlink.active { background: rgba(255, 255, 255, 0.25); color: #fff; }
.site-main { flex: 1; min-height: 0; display: flex; position: relative; }
/* on small screens the expanded sidebar overlays the content instead of squashing it */
@media (max-width: 820px) {
    .site .site-sidenav { position: absolute; top: 0; bottom: 0; left: 0; z-index: 6; box-shadow: 2px 0 14px rgba(0, 0, 0, 0.14); }
}
.site-sidenav {
    width: 0; overflow: hidden; background: #f6f4fc; border-right: 1px solid #e6e2f2;
    display: flex; flex-direction: column; gap: 0.2rem; transition: width 160ms ease;
}
.site.nav-open .site-sidenav { width: 200px; padding: 0.6rem; }
.site-sidenav .navlink { display: block; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.site-content { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1.75rem 1.75rem; background: var(--site-bg, #fff); background-attachment: local; }
.site-page > .page-head:first-child { margin-top: 0; }
.site-page .page-head h2 { margin: 0; }

/* when a background image/gradient is set, float the page content on a frosted translucent
   panel so tables and text stay readable over it */
.cj-preview.has-bg .site-page,
.cj-preview.has-bg .gen-home {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(20, 18, 40, 0.12);
}
.cj-preview.has-bg .site-crumbs { backdrop-filter: blur(4px); }

/* AI-designed page intro (above an entity page's records) */
.page-intro { margin-bottom: 1.6rem; }
.page-intro-hero img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 16px; display: block; }
.page-intro-text { margin: 0.9rem 0; }
.page-intro-text h2 { margin: 0 0 0.3rem; font-size: 1.5rem; }
.page-intro-text p { margin: 0; color: #5a5470; }
.page-intro-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; }
.pi-card { background: #fff; border: 1px solid #ece8f5; border-radius: 12px; overflow: hidden; box-shadow: var(--elev-1); }
.pi-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.pi-card-text { padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.25rem; }
.pi-card-text strong { font-size: 0.95rem; }
.pi-card-text span { font-size: 0.82rem; color: #6b6385; }
.site-footer {
    padding: 0.5rem 0.9rem; background: #f0eef8; border-top: 1px solid #e6e2f2;
    color: #6b6385; font-size: 0.8rem; text-align: center;
}

/* ===== landing page (.lp) ===== */
/* Full width like the app itself (was capped at 1060px — the landing read narrower than every
   page behind it). The hero copy stays centered via its own max-widths; the grids stretch. */
.lp { width: 100%; max-width: none; margin: 0 auto; padding: 0 2rem 0; text-align: center; }
/* No max-width caps: the grids stretch edge-to-edge exactly like every app page behind the
   login (the 1500px cap made the pre-login page read narrower than the site). The auto-fit
   grid columns keep card widths sane on ultra-wide screens. */
.lp-quickstart, .lp-recent, .lp-features { margin-left: auto; margin-right: auto; }
/* Release-notes note on the landing page: a constrained, left-aligned, quiet column at the very
   bottom (the landing centres its text, so pull it back to a readable left-aligned block). */

/* Footer flows at the end of content. The landing page has a lot of content
   (hero + 6 features + steps + bottom CTA) so a natural-flow footer always
   lands at the actual bottom. Earlier flex-stickyfooter setup was conflicting
   with the body's gradient background and pushing the footer mid-page. */
.lp-foot {
    margin-top: 3rem;
    padding: 1.5rem 0;
    display: flex; align-items: center; justify-content: space-between;
    color: var(--muted); font-size: 0.85rem;
    border-top: 1px solid var(--border);
}
.lp-foot-meta { opacity: 0.8; }

.lp-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; }
.lp-logo {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.01em;
}
.lp-logo .brand-star { width: 24px; height: 24px; }
.auth-star { width: 28px; height: 28px; vertical-align: -6px; margin-right: 0.35rem; }
.lp-navlinks { display: flex; align-items: center; gap: 1rem; }
.lp-navlinks a { color: var(--fg); opacity: 0.85; text-decoration: none; font-size: 0.9rem; }
.lp-navlinks a:hover { opacity: 1; }

.lp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.7rem 1.4rem; border-radius: 4px; font-weight: 600; font-size: 0.95rem;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.lp-btn.sm { padding: 0.45rem 0.95rem; font-size: 0.85rem; }
.lp-btn.primary { background: var(--accent); color: #fff; box-shadow: 0 8px 24px -10px var(--accent); }
.lp-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lp-btn.ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.lp-btn.ghost:hover { border-color: var(--accent); }

.lp-hero { position: relative; padding: 3.5rem 0 1rem; }
.lp-badge {
    display: inline-block; padding: 0.35rem 0.9rem; border-radius: 4px;
    border: 1px solid var(--border); background: #141823; color: var(--muted);
    font-size: 0.78rem; letter-spacing: 0.02em;
}
.lp-hero h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.05; margin: 1.1rem 0 0.75rem; letter-spacing: -0.02em; }
.lp-hero h1 .grad { color: var(--accent-2); }
.lp-sub { color: var(--muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; line-height: 1.6; }
.lp-cta { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; flex-wrap: wrap; }

/* hero product mockup */
.lp-mock { margin-top: 3rem; perspective: 1400px; }
.mock-window {
    max-width: 860px; margin: 0 auto; border-radius: 16px; overflow: hidden;
    background: #11141b; border: 1px solid var(--border);
    box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02);
}
.mock-bar { display: flex; gap: 0.4rem; padding: 0.7rem 0.9rem; background: #0d1017; border-bottom: 1px solid var(--border); }
.mock-bar span { width: 11px; height: 11px; border-radius: 50%; background: #2b313d; }
.mock-bar span:nth-child(1) { background: #ef5f56; } .mock-bar span:nth-child(2) { background: #f5bd4f; } .mock-bar span:nth-child(3) { background: #5fc454; }
.mock-body { display: flex; gap: 0; min-height: 260px; text-align: left; }
.mock-chat { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; border-right: 1px solid var(--border); }
.mock-msg { padding: 0.55rem 0.8rem; border-radius: 12px; font-size: 0.85rem; max-width: 92%; }
.mock-msg.user { align-self: flex-end; background: var(--accent); color: #fff; }
.mock-msg.bot { align-self: flex-start; background: #1c2130; color: var(--fg); }
.mock-input { margin-top: auto; padding: 0.6rem 0.8rem; border-radius: 10px; background: #0f1218; border: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; }
.mock-site { flex: 1; background: #fff; color: #1b2430; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.mock-site-head { font-weight: 700; font-size: 1.05rem; }
.mock-field { height: 12px; border-radius: 6px; background: #e7eaf1; }
.mock-field.short { width: 55%; }
.mock-cta { margin-top: auto; align-self: flex-start; background: var(--accent); color: #fff; padding: 0.45rem 1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; }
@media (max-width: 680px) { .mock-body { flex-direction: column; } .mock-chat { border-right: 0; border-bottom: 1px solid var(--border); } }

/* feature cards */
.lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 4rem; }
.lp-card { background: #141823; border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem 1.25rem; text-align: left; }
.lp-card:hover { border-color: #38415a; transform: translateY(-3px); }
.lp-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(59,130,246,0.12); color: var(--accent-2); margin-bottom: 0.8rem; }
.lp-ico svg { width: 22px; height: 22px; }
.lp-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.lp-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

/* steps */
.lp-steps { margin-top: 4.5rem; }
.lp-steps h2 { font-size: 1.8rem; margin-bottom: 1.75rem; letter-spacing: -0.01em; }
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.lp-step { background: #11141b; border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; }
.lp-step .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.lp-step h4 { margin: 0.75rem 0 0.35rem; font-size: 1.1rem; }
.lp-step p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* bottom CTA */
.lp-bottom { margin-top: 4.5rem; padding: 3rem 1.5rem; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(180deg, #141823, #0f1218); }
.lp-bottom h2 { font-size: 2rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.lp-bottom .lp-btn { margin-top: 1.25rem; }

/* visual aids in the generated site */
.site-sidenav .navlink { display: flex; align-items: flex-start; gap: 0.55rem; }
.site-sidenav .navlink .nav-ico { margin-top: 1px; flex-shrink: 0; }
.nav-ico { font-size: 1.05rem; line-height: 1; }
.site-page h2 { display: flex; align-items: center; gap: 0.5rem; }
.page-ico { font-size: 1.4rem; }
.hero-badge {
    width: 64px; height: 64px; margin: 0 auto 0.75rem; display: grid; place-items: center;
    font-size: 2rem; border-radius: 18px; background: #eef2fb; border: 1px solid #e0e6f3;
}

/* svg sizing for the generated-site visual aids */
.nav-ico { display: inline-flex; align-items: center; }
.nav-ico svg { width: 16px; height: 16px; }
.page-ico { display: inline-flex; align-items: center; }
.page-ico svg { width: 22px; height: 22px; }
.hero-card .tile-emoji svg { width: 30px; height: 30px; }
.hero-badge svg { width: 30px; height: 30px; color: var(--site-accent, var(--accent)); }

/* generated-site accent: primary buttons + page icons follow the site's chosen colour.
   Ghost/danger keep their own look (outline / red) — only fill true primaries. */
.cj-preview .big-button:not(.ghost):not(.danger) { background: var(--site-accent, var(--accent)); }
.cj-preview .big-button.ghost { background: transparent; border-color: var(--site-accent, var(--accent)); }
.cj-preview .lp-btn.primary { background: var(--site-accent, var(--accent)); box-shadow: 0 8px 24px -10px var(--site-accent, var(--accent)); }
.cj-preview .page-ico svg { color: var(--site-accent, var(--accent)); }

/* code/styles drawer */
.code-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); z-index: 30;
    background: #11141b; border-left: 1px solid var(--border); box-shadow: -20px 0 60px -30px rgba(0,0,0,0.8);
    padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; overflow: hidden;
}
.code-head { display: flex; align-items: center; justify-content: space-between; }
.code-tabs { display: flex; gap: 0.4rem; }
.code-tabs button { background: #181b23; border: 1px solid var(--border); color: var(--fg); padding: 0.35rem 0.8rem; border-radius: 8px; cursor: pointer; font-size: 0.85rem; }
.code-tabs button.active { background: var(--accent); border-color: var(--accent); }
.code-area {
    flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none; font-family: ui-monospace, monospace; font-size: 0.8rem;
    background: #0f1218; color: #cdd6e6; border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem; overflow: auto;
}
.code-area.readonly { white-space: pre-wrap; word-break: break-word; }
.code-area { text-align: left; }   /* JSON should read left-aligned even inside centered modals */
.editor-page { position: relative; } /* anchor the drawer */
.saved { color: #5fc454; font-size: 0.8rem; margin-left: 0.5rem; }

/* admin inline edit */
.inline-edit { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.inline-edit .auth-input { max-width: 320px; }
.auth-input.slim { padding: 0.35rem 0.5rem; max-width: 240px; }
/* AI-models page: model dropdowns carry long labels (name + pricing + context) — give them room */
.admin .inline-edit select.auth-input { max-width: 720px; width: 100%; }
.admin .records select.auth-input.slim { max-width: none; width: 100%; min-width: 280px; }

/* ---- rich form controls in the preview ---- */
.preview-form textarea {
    padding: 0.55rem 0.7rem; border: 1px solid #d4cee6; border-radius: 8px;
    background: #fff; color: #1b1430; font: inherit; resize: vertical;
}
.pf-slider { display: flex; align-items: center; gap: 0.75rem; }
.pf-slider input[type=range] { flex: 1; accent-color: var(--accent); }
.pf-num { min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; color: #4a4360; }
.pf-toggle { position: relative; display: inline-flex; width: 44px; height: 24px; }
.pf-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pf-track { width: 44px; height: 24px; border-radius: 999px; background: #d4cee6; transition: background 160ms; position: relative; }
.pf-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 160ms; }
.pf-toggle input:checked + .pf-track { background: var(--accent); }
.pf-toggle input:checked + .pf-track::after { transform: translateX(20px); }
.pf-radios { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pf-radio { display: inline-flex; align-items: center; gap: 0.35rem; color: #1b1430; }
.pf-radio input { accent-color: var(--accent); }
.pf-color { width: 48px; height: 34px; padding: 2px; border: 1px solid #d4cee6; border-radius: 8px; background: #fff; cursor: pointer; }
.pf-image { display: flex; flex-direction: column; gap: 0.5rem; }
.pf-image-row { display: flex; gap: 0.4rem; align-items: stretch; }
.pf-image-row input { flex: 1; min-width: 0; }
.pf-imgsearch {
    white-space: nowrap; border: 1px solid var(--site-accent, var(--accent)); background: transparent;
    color: var(--site-accent, var(--accent)); cursor: pointer; font: inherit; font-size: 0.82rem;
    padding: 0.3rem 0.6rem; border-radius: 8px;
}
.pf-imgsearch:hover { background: var(--site-accent, var(--accent)); color: #fff; }
.pf-image-prev { max-width: 100%; max-height: 160px; border-radius: 8px; border: 1px solid #e6e2f2; object-fit: cover; }

/* image-search picker (a built-in field helper) */
.modal.img-picker { width: min(640px, calc(100vw - 2rem)); background: #fff; color: #14121d; z-index: 60; }
.img-picker .modal-head h2 { color: #14121d; }
.img-picker .toplink { color: #6b6385; }
.ip-search { display: flex; gap: 0.5rem; }
.ip-search input {
    flex: 1; padding: 0.5rem 0.65rem; border: 1px solid #d8d3e8; border-radius: 9px; font: inherit; color: #14121d; background: #fff;
}
.ip-search input:focus { outline: none; border-color: var(--site-accent, var(--accent)); }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; max-height: 46vh; overflow-y: auto; }
.ip-item { border: 1px solid #ece8f5; border-radius: 10px; overflow: hidden; cursor: pointer; padding: 0; background: #f4f2fa; aspect-ratio: 1; }
.ip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-item:hover { border-color: var(--site-accent, var(--accent)); box-shadow: var(--elev-2); }
.ip-note { font-size: 0.74rem; margin: 0; }

/* inline (non-popup) forms — avoid stacking modals during nested data entry */
.img-picker-inline {
    border: 1px solid #ece8f5; border-radius: 10px; padding: 0.6rem; background: #faf9ff;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.img-picker-inline .ip-grid { max-height: 240px; }
.pf-imgsearch.on { background: var(--site-accent, var(--accent)); color: #fff; }
.related-addform {
    border-top: 1px dashed #e0dbf0; margin-top: 0.7rem; padding-top: 0.8rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.related-addform-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; color: #14121d; font-weight: 600; }
.related-addform .form-actions { margin-top: 0.2rem; }
.pf-rating { display: flex; gap: 0.2rem; }
.pf-star { border: 0; background: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: #d4cee6; padding: 0; }
.pf-star.on { color: #f5b301; }

/* ---- guidance chips ---- */
.chips { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0 0 0.5rem; }
.chip {
    flex: 0 0 auto; padding: 0.35rem 0.7rem; border-radius: 4px; border: 1px solid var(--border);
    background: #141823; color: var(--muted); font-size: 0.78rem; cursor: pointer; white-space: nowrap;
}
.chip:hover:not(:disabled) { border-color: var(--accent); color: var(--fg); }
.chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== editor: website stage + slide-in AI panel ===== */
.editor-body { position: relative; flex: 1; min-height: 0; display: flex; }
.stage { flex: 1; min-height: 0; display: flex; transition: margin-right 220ms ease; }
.stage .browser { flex: 1; }
.ai-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.25); z-index: 24; }
.editor-page { --panel-w: 500px; }   /* wider default; drag the left edge to resize */
.ai-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--panel-w), 96vw); z-index: 25;
    background: #11141b; border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px -30px rgba(0,0,0,0.85);
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem;
    transform: translateX(106%); transition: transform 220ms ease; font-size: 0.85rem;
}
.ai-panel.open { transform: translateX(0); }
/* drag handle on the panel's left edge */
.panel-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 26; }
.panel-resize::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background 0.12s; }
.panel-resize:hover::after, .panel-resize.dragging::after { background: var(--accent); }
/* pinned: the panel docks to the side and the preview shrinks to fit on the left */
.editor-page.pinned .stage { margin-right: min(var(--panel-w), 96vw); }
.editor-page.pinned .ai-panel { transform: none; box-shadow: -8px 0 26px -20px rgba(0, 0, 0, 0.6); }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
/* tabbed editor panel (AI / Pages / Blocks / Theme / Code) */
.panel-tabs { display: flex; justify-content: space-between; gap: 0.25rem; margin: 0 -0.9rem; padding: 0 0.9rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ptab { background: none; border: 0; color: var(--muted); padding: 0.55rem 0.75rem; cursor: pointer; font: inherit; font-size: 0.82rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.ptab:hover { color: var(--fg); }
.ptab.active { color: var(--fg); border-bottom-color: var(--accent); }
.preview-btn.ghost.on { border-color: var(--accent); color: var(--fg); }
/* Code / config modal */
.code-modal { width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.code-modal .code-area { min-height: 320px; }
.code-modal .code-area.readonly { max-height: 52vh; }
.panel-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.panel-body:not(.ai) { overflow-y: auto; overflow-x: hidden; padding: 0.7rem 0.4rem 0 0; scrollbar-gutter: stable; }
.panel-section { display: flex; flex-direction: column; gap: 0.55rem; padding-bottom: 1rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.panel-section:last-child { border-bottom: 0; }
.panel-section h3 { margin: 0; font-size: 0.95rem; color: var(--fg); }
.panel-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* right-click context menu on the preview */
.ctx-backdrop { position: fixed; inset: 0; z-index: 70; }
.ctx-menu { position: fixed; z-index: 71; min-width: 224px; background: #161922; border: 1px solid var(--border); border-radius: 10px; padding: 0.3rem; box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.7); }
.ctx-head { font-size: 0.7rem; color: var(--muted); padding: 0.35rem 0.6rem 0.45rem; text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid var(--border); margin-bottom: 0.25rem; }
.ctx-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--fg); padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer; font-size: 0.88rem; }
.ctx-item:hover { background: var(--accent); color: #fff; }
.panel-section .fld.stack { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.panel-section .fld.stack > span { font-size: 0.8rem; color: var(--muted); }
.panel-section .auth-input { width: 100%; box-sizing: border-box; }
.muted.xs { font-size: 0.74rem; line-height: 1.45; }
.ai-head-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.ai-head-actions .toplink { white-space: nowrap; }
.ai-pin { display: inline-flex; align-items: center; padding: 0.15rem; border-radius: 6px; }
.ai-pin svg { width: 15px; height: 15px; display: block; }
.ai-pin.on { color: var(--accent); }
.ai-pin:hover { background: rgba(255, 255, 255, 0.08); }

/* two-column form */
.preview-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.25rem; max-width: 680px; }
.pf-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.pf-field input, .pf-field select, .pf-field textarea { width: 100%; }
.pf-field input[type=checkbox], .pf-color { width: auto; }
.preview-form > .form-error { grid-column: 1 / -1; }
.preview-form > .big-button { grid-column: 1 / -1; width: auto; justify-self: start; }
@media (max-width: 600px) { .preview-form { grid-template-columns: 1fr; } }

/* chips: wrap instead of a broken horizontal scroll */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; overflow: visible; padding: 0 0 0.25rem; }

/* ---- grill-me clarifying questions ---- */
.grill { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 0 0.4rem; }
.grill-q { background: #141823; border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.7rem; }
.grill-text { font-size: 0.82rem; margin-bottom: 0.45rem; color: var(--fg); }
.grill-why { font-size: 0.72rem; color: var(--muted); margin: -0.2rem 0 0.45rem; }
.grill-opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.grill-opts .chip { background: #1b2233; border-color: #33405e; color: var(--fg); }
.grill-opts .chip:hover { border-color: var(--accent); background: #20283c; }
.grill-opts .chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.grill-opts .chip.selected:hover { background: var(--accent); }
.grill-other {
    width: 100%; margin-top: 0.45rem; padding: 0.4rem 0.55rem; font: inherit; font-size: 0.8rem;
    background: #0f131c; border: 1px solid #2a3346; border-radius: 8px; color: var(--fg);
}
.grill-other:focus { outline: none; border-color: var(--accent); }
.grill-send { align-self: flex-start; }

/* admin response feedback (judge / retry-with-note / save fix) */
.admin-fb { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.5rem 0 0.2rem; border-top: 1px dashed var(--border); }
.fb-flag {
    align-self: flex-start; background: none; border: 1px solid var(--border); color: var(--muted);
    cursor: pointer; font: inherit; font-size: 0.78rem; padding: 0.25rem 0.65rem; border-radius: 7px;
}
.fb-flag:hover { color: #ff9aa6; border-color: #6b2330; }
.fb-comment {
    background: #0f131c; border: 1px solid var(--border); border-radius: 8px; color: var(--fg);
    font: inherit; font-size: 0.85rem; padding: 0.45rem 0.55rem; resize: vertical;
}
.fb-comment:focus { outline: none; border-color: var(--accent); }
.fb-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fb-hint { font-size: 0.72rem; margin: 0; }
.fb-saved { font-size: 0.8rem; color: #8fe0b6; }
.chip-x { opacity: 0.6; }

/* ---- breadcrumbs in the generated site ---- */
.site-crumbs {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.9rem; background: #fbfaff; border-bottom: 1px solid #eee8f6;
    font-size: 0.82rem; color: #6b6385;
}
.site-crumbs .crumb { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.site-crumbs .crumb.current { color: #4a4360; cursor: default; }
.site-crumbs .crumb-sep { color: #b7b0c9; }

/* ---- new-website creation wizard (modal) ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.6); z-index: 40; }
.modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 41;
    width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
    background: #141823; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.2rem 1.3rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column; gap: 1rem; color: var(--fg);
}
.modal-head h2 { color: var(--fg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.fld { display: flex; flex-direction: column; gap: 0.4rem; }
.fld > span { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.panel .fld { margin-bottom: 0.9rem; }
.panel .fld textarea.code-area { width: 100%; box-sizing: border-box; }
.modal input[type=text], .modal .fld input:not([type]), .modal textarea {
    background: #0f131c; border: 1px solid var(--border); border-radius: 9px;
    color: var(--fg); font: inherit; padding: 0.5rem 0.65rem; width: 100%;
}
.modal textarea { resize: vertical; }
.modal input:focus, .modal textarea:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.2rem; }
.modal .fld code { background: #0f131c; border: 1px solid var(--border); border-radius: 5px; padding: 0.05rem 0.35rem; }
.modal pre.code-area { max-height: 45vh; margin: 0; }
.big-button.danger { background: #dc2626; }
.big-button.danger:hover { background: #b91c1c; }
.big-button.ghost.danger { background: transparent; color: #f87171; border-color: #5a2a2a; }
.big-button.ghost.danger:hover { border-color: #dc2626; color: #fca5a5; }

/* layout wireframe picker */
.wf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.wf-card {
    display: flex; flex-direction: column; gap: 0.3rem; cursor: pointer; text-align: left;
    background: #0f131c; border: 1px solid var(--border); border-radius: 11px; padding: 0.6rem;
}
.wf-card:hover { border-color: #3a4a6e; }
.wf-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wf { display: flex; flex-direction: column; gap: 3px; height: 64px; }
.wf-header { height: 12px; background: var(--accent); border-radius: 3px; opacity: 0.85; }
.wf-body { flex: 1; display: flex; gap: 3px; }
.wf-side { width: 22px; background: #2a3346; border-radius: 3px; }
.wf-content { flex: 1; background: #222a3a; border-radius: 3px; }
.wf-footer { height: 7px; background: #2a3346; border-radius: 3px; }
.wf-name { font-size: 0.82rem; font-weight: 600; color: var(--fg); }
.wf-desc { font-size: 0.72rem; color: var(--muted); }

/* accent swatches + colour picker */
.swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatch.selected { border-color: var(--fg); box-shadow: 0 0 0 2px #141823, 0 0 0 3px var(--fg); }
.swatch-pick { width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }

/* font chips */
.font-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.font-chip {
    background: #0f131c; border: 1px solid var(--border); border-radius: 8px;
    color: var(--fg); padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.9rem;
}
.font-chip:hover { border-color: var(--accent); }
.font-chip.selected { border-color: var(--accent); background: #1b2233; }

/* design wizard (step 2): proposal preview */
.modal.create-site.designing { width: min(680px, calc(100vw - 2rem)); }
.dp-busy { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.2rem 1rem; text-align: center; }
.dp-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: dp-spin 0.8s linear infinite; }
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-reply { margin: 0 0 0.2rem; }
.dp { background: #fff; color: #14121d; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.dp-hero { width: 100%; height: 175px; object-fit: cover; display: block; }
.dp-headline { margin: 0.9rem 1rem 0.3rem; font-size: 1.3rem; color: #14121d; }
.dp-sub { margin: 0 1rem 0.7rem; font-size: 0.9rem; color: #4a4360; line-height: 1.5; }
.dp-meta { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem 0.8rem; font-size: 0.76rem; color: #6b6385; flex-wrap: wrap; }
.dp-swatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.12); }
.dp-cta-pill { color: #fff; padding: 0.2rem 0.65rem; border-radius: 4px; font-size: 0.74rem; margin-left: auto; }
.dp-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0 1rem 1rem; }
.dp-sec { display: flex; gap: 0.55rem; align-items: flex-start; background: #f8f6ff; border: 1px solid #ece8f5; border-radius: 10px; padding: 0.5rem; }
.dp-sec img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.dp-sec-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dp-sec-text strong { font-size: 0.82rem; color: #14121d; }
.dp-sec-text span { font-size: 0.74rem; color: #6b6385; line-height: 1.35; }
@media (max-width: 560px) { .dp-sections { grid-template-columns: 1fr; } }

/* ===== generated-site polish: elevation, motion & interaction state layers =====
   (Material-inspired principles applied to the built sites, without a uniform MD skin —
   each site keeps its own accent, font and personality.) */
.cj-preview .gen-card, .cj-preview .related-list,
.cj-preview .dh-card, .cj-preview .hero-card {
    transition: box-shadow var(--dur) var(--ease-standard), transform var(--dur) var(--ease-standard);
}
.cj-preview .gen-card, .cj-preview .related-list { box-shadow: var(--elev-1); }
.cj-preview .gen-card:hover, .cj-preview .dh-card:hover, .cj-preview .hero-card:hover { box-shadow: var(--elev-3); }
.cj-preview .gen-card:active, .cj-preview .hero-card:active { transform: translateY(-1px) scale(0.995); }

/* primary actions: depth + smooth press feedback */
.cj-preview .big-button, .cj-preview .gen-cta, .cj-preview .rel-add, .cj-preview .page-add {
    transition: transform var(--dur) var(--ease-standard), box-shadow var(--dur) var(--ease-standard), filter var(--dur) var(--ease-standard);
}
.cj-preview .big-button { box-shadow: var(--elev-1); }
.cj-preview .big-button:hover:not(:disabled), .cj-preview .gen-cta:hover { box-shadow: var(--elev-2); }
.cj-preview .big-button:active:not(:disabled), .cj-preview .gen-cta:active,
.cj-preview .page-add:active, .cj-preview .rel-add:active { transform: translateY(1px) scale(0.99); }

/* inputs/selects: a focus state layer in the site accent */
.cj-preview input:focus, .cj-preview select:focus, .cj-preview textarea:focus {
    outline: none; border-color: var(--site-accent, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-accent, var(--accent)) 20%, transparent);
}

/* table rows: hover state layer + smooth */
.cj-preview .records tbody tr td { transition: background var(--dur) var(--ease-standard); }
.cj-preview .records tbody tr:not(.rec-detail-row):hover td {
    background: color-mix(in srgb, var(--site-accent, var(--accent)) 6%, #fff);
}

/* nav + crumbs: smooth state transitions */
.cj-preview .navlink, .cj-preview .topnavlink, .cj-preview .crumb, .cj-preview .gen-card-link {
    transition: background var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard), opacity var(--dur) var(--ease-standard);
}

/* popups in the site get the top elevation */
.cj-preview .modal { box-shadow: var(--elev-3); }

/* =============================================================================
   Aeon overrides — colour-rich landing page on top of Conjure's dark base
   ========================================================================== */

/* Faint flag wash — black (top-left) fading DIAGONALLY through up to THREE whispered flag hints
   (bottom-right). The stops default to the German black/red/gold (the host look) and are
   overridden per-market via --mkt-tint-1/2/3, set on :root by MarketBrand from the active
   Market's country / configured theme (Admin → Markets). Tricolour flags use their real third
   colour; two-colour flags weave A→B→A. Deliberately very low-chroma so content sits on what
   still reads as a dark neutral. Pinned to the viewport so it never tiles on tall pages. */
:root { --mkt-tint-1: #0b0b0e; --mkt-tint-2: #1e0d12; --mkt-tint-3: #2c2409; }
body {
    background:
        linear-gradient(135deg,
            var(--bg) 0%,
            var(--bg) 42%,
            var(--mkt-tint-1) 66%,
            var(--mkt-tint-2) 84%,
            var(--mkt-tint-3) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ---- arc hero ---------------------------------------------------------- */
.lp-arc-wrap {
    margin: 2.5rem auto 0;
    max-width: 1180px;
    padding: 1rem;
    border-radius: var(--radius);
    background:
        radial-gradient(60% 80% at 50% 50%, rgba(255, 255, 255, 0.025), transparent 70%);
}
.lp-arc { display: block; width: 100%; height: auto; }
.lp-arc-rail {
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
    filter: drop-shadow(0 0 8px rgba(110, 168, 255, 0.25));
}

.lp-arc-node .halo {
    fill: var(--n, var(--accent));
    opacity: 0.18;
    transform-origin: center;
    animation: arcHalo 3s ease-in-out infinite;
}
.lp-arc-node .dot {
    fill: var(--n, var(--accent));
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--n, var(--accent)) 60%, transparent));
}
.lp-arc-node .label {
    fill: var(--fg);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    text-anchor: middle;
    letter-spacing: 0.01em;
}
.lp-arc-node .sub {
    fill: var(--muted);
    font-family: var(--font-sans);
    font-size: 11px;
    text-anchor: middle;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
@keyframes arcHalo {
    0%, 100% { opacity: 0.18; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(1.18); }
}

/* Stagger the halo pulses around the arc so they don't all flash in lockstep. The
   defs / rail / orb path / orb circle come first, so the eight node groups land at
   nth-child(5)..(12). 0.35s steps spread across most of the 3s pulse cycle. */
.lp-arc-node:nth-child(5)  .halo { animation-delay: 0.00s; }   /* Customer       */
.lp-arc-node:nth-child(6)  .halo { animation-delay: 0.35s; }   /* Quote          */
.lp-arc-node:nth-child(7)  .halo { animation-delay: 0.70s; }   /* Application    */
.lp-arc-node:nth-child(8)  .halo { animation-delay: 1.05s; }   /* Approval       */
.lp-arc-node:nth-child(9)  .halo { animation-delay: 1.40s; }   /* Contract       */
.lp-arc-node:nth-child(10) .halo { animation-delay: 1.75s; }   /* Handover       */
.lp-arc-node:nth-child(11) .halo { animation-delay: 2.10s; }   /* Contract Admin */
.lp-arc-node:nth-child(12) .halo { animation-delay: 2.45s; }   /* Retention      */

@media (prefers-reduced-motion: reduce) {
    .lp-arc-node .halo { animation: none; opacity: 0.22; }
    .lp-arc circle[fill="url(#pulseGlow)"] { display: none; }
}

/* ---- colour-coded feature cards --------------------------------------- */
/* Conjure's base .lp-card stays; we add a coloured top-border and a tinted icon. */
.lp-card {
    border-top: 3px solid var(--accent-card, var(--accent));
    transition: transform var(--dur, 200ms), box-shadow var(--dur, 200ms);
}
.lp-card:hover {
    transform: translateY(-3px);
    box-shadow:
        var(--elev-2),
        0 0 0 1px color-mix(in srgb, var(--accent-card, var(--accent)) 40%, transparent);
}
.lp-card .lp-ico {
    color: var(--accent-card, var(--accent));
    background: color-mix(in srgb, var(--accent-card, var(--accent)) 14%, transparent);
}

/* ---- colour-coded step numbers ---------------------------------------- */
.lp-step .num {
    background: linear-gradient(135deg,
        var(--step-c, var(--accent)) 0%,
        color-mix(in srgb, var(--step-c, var(--accent)) 60%, #ffffff20) 100%);
    color: #0b0d14;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* hero h1 highlight word: solid accent — no gradient text */
.lp-hero h1 .grad { color: var(--accent-2); }


/* =============================================================================
   Dashboard (authenticated home)
   ========================================================================== */

.dashboard h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.01em; }
.dashboard .lead { color: var(--muted); margin: 0.4rem 0 0; font-size: 0.95rem; }

/* "What's new" dashboard card — published customer release notes (Admin → Releases). */
/* Deliberately subtle — a quiet footer note at the very bottom of the dashboard, not a card. No
   panel background/border; a thin top rule separates it, and everything is muted + small so it
   never competes with the KPIs / journey above it. */
/* ---- Release notes, card layout (dashboard What's-new + Admin → Releases) -------------- */
.rn-preamble { font-size: 0.82rem; line-height: 1.55; color: var(--muted); margin-bottom: 0.8rem; }
.rn-preamble p { margin: 0.2rem 0; }
.rn-preamble strong { color: color-mix(in srgb, var(--fg) 82%, transparent); }
.rn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.7rem; align-items: start; }
.rn-card {
    background: color-mix(in srgb, var(--fg) 3%, transparent);
    border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem;
    font-size: 0.8rem; line-height: 1.5; color: var(--muted); min-width: 0;
}
.rn-card-h {
    display: flex; align-items: center; gap: 0.45rem;
    font-family: var(--font-sans, inherit); font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--fg) 80%, transparent);
    margin-bottom: 0.45rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.rn-card-ico { font-size: 0.95rem; }
.rn-card-body p { margin: 0.3rem 0; }
.rn-card-body ul, .rn-card-body ol { margin: 0.25rem 0 0.4rem; padding-left: 1.15rem; }
.rn-card-body li { margin: 0.22rem 0; }
.rn-card-body li::marker { color: color-mix(in srgb, var(--accent, #6ea8ff) 60%, transparent); }
.rn-card-body strong { color: color-mix(in srgb, var(--fg) 85%, transparent); }
.rn-card-body code {
    font-family: var(--mono); font-size: 0.72rem;
    background: color-mix(in srgb, var(--fg) 7%, transparent);
    border-radius: 4px; padding: 0.05rem 0.3rem; overflow-wrap: anywhere;
}
/* Sub-headings INSIDE a card (h4+ in the source, or #### under a split section) — small caps rows. */
.rn-card-body h1, .rn-card-body h2, .rn-card-body h3, .rn-card-body h4, .rn-card-body h5 {
    font-family: var(--font-sans, inherit); font-size: 0.74rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; margin: 0.6rem 0 0.2rem;
    color: color-mix(in srgb, var(--fg) 65%, transparent);
}
.rn-card-body blockquote { margin: 0.4rem 0; padding: 0.3rem 0.6rem; border-left: 2px solid var(--border); }
.rel-notes-body { max-width: none; }

/* What's-new: a quiet button (right of a section header) that opens the release-notes SidePanel;
   inside the panel the section cards stack one under another. */
.lp-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.whatsnew-btn { white-space: nowrap; }
.whatsnew-btn-v { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-left: 0.25rem; }
.rn-stacked .rn-cards { grid-template-columns: 1fr; }
.rn-stacked { padding-bottom: 1rem; }

.dash-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: 2rem 2rem 1.75rem;
    margin-bottom: 2rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #141823, #0f1218);
}
.dash-eyebrow {
    display: inline-block;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 0.5rem;
}
.dash-banner-arc { display: flex; align-items: center; }
.dash-banner-arc svg { width: 220px; height: 80px; display: block; }
@media (max-width: 720px) {
    .dash-banner { grid-template-columns: 1fr; }
    .dash-banner-arc { display: none; }
}

/* KPI grid */
.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
}
.dash-kpi {
    background: #141823;
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-card, var(--accent));
    border-radius: 14px;
    padding: 1.25rem;
    display: flex; flex-direction: column;
    gap: 0.25rem;
    transition: transform var(--dur, 200ms), box-shadow var(--dur, 200ms);
}
.dash-kpi-link, .dash-kpi-link:hover { text-decoration: none; color: inherit; cursor: pointer; }
.dash-kpi-link:hover { border-color: color-mix(in srgb, var(--accent-card, var(--accent)) 45%, var(--border)); }
/* Stop the global `a:hover` underline from leaking through to text inside the tiles. */
.admin-tile, .admin-tile:hover, .admin-tile *,
.dash-kpi-link, .dash-kpi-link:hover, .dash-kpi-link *,
.dash-quick-tile, .dash-quick-tile:hover, .dash-quick-tile *,
.dash-phase-link, .dash-phase-link:hover, .dash-phase-link * { text-decoration: none; }
.dash-phase-link { color: inherit; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.dash-phase-link:hover { border-color: color-mix(in srgb, var(--accent-card, var(--accent)) 45%, var(--border)); transform: translateY(-1px); }
.dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--elev-1),
        0 0 0 1px color-mix(in srgb, var(--accent-card, var(--accent)) 50%, transparent);
}
.dash-kpi-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dash-kpi-value {
    color: var(--fg);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dash-kpi-sub { color: var(--muted); font-size: 0.82rem; }

.dash-section-h {
    font-size: 1.05rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

/* Quick action tiles */
.dash-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.dash-quick-tile {
    background: #141823;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex; flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--fg);
    transition: transform var(--dur, 200ms), border-color var(--dur, 200ms), box-shadow var(--dur, 200ms);
}
.dash-quick-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent-card, var(--accent)) 60%, var(--border));
    box-shadow: var(--elev-2);
    text-decoration: none;
}
.dq-ico {
    width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-card, var(--accent));
    background: color-mix(in srgb, var(--accent-card, var(--accent)) 14%, transparent);
    border-radius: 10px;
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
}
.dq-title { font-weight: 700; font-size: 1rem; }
.dq-desc { color: var(--muted); font-size: 0.88rem; }

.dash-foot { margin-top: 2rem; font-size: 0.85rem; }
.dash-foot code { background: #1a1e27; padding: 0 0.4rem; border-radius: 3px; color: var(--fg); }

/* =============================================================================
   Aeon journey: dimmed arc nodes + dashboard phase progress strip
   ========================================================================== */

/* Dimmed (downstream) arc nodes — visually separate from Aeon-owned phases. */
.lp-arc-node.dim .halo { opacity: 0; animation: none; }
.lp-arc-node.dim .dot { fill: var(--muted); filter: none; opacity: 0.55; }
.lp-arc-node.dim .label,
.lp-arc-node.dim .sub { fill: var(--muted); opacity: 0.75; }

.lp-arc-caption {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.4;
}
.lp-arc-caption .dim-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--muted);
    opacity: 0.55;
    margin: 0 0.25rem;
    vertical-align: middle;
}

/* Dashboard journey strip — four phase cards in a row with progress bars. */
.dash-journey-lead { margin: 0 0 1rem; font-size: 0.9rem; }
.dash-journey {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.dash-phase {
    background: #141823;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.1rem 1.1rem;
    display: flex; flex-direction: column;
    gap: 0.25rem;
    position: relative;
    overflow: hidden;
}
.dash-phase::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent-card, var(--accent)) 10%, transparent) 0%,
        transparent 60%);
}
.dp-head { display: flex; align-items: center; gap: 0.5rem; position: relative; }
.dp-num {
    width: 1.4rem; height: 1.4rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-card, var(--accent));
    color: #0b0d14;
    font-weight: 700;
    font-size: 0.78rem;
}
.dp-title { font-weight: 700; font-size: 1rem; }
.dp-sub { color: var(--muted); font-size: 0.8rem; position: relative; }
.dp-count {
    font-size: 1.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: 0.4rem;
    position: relative;
}
.dp-bar {
    margin-top: 0.4rem;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.dp-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 600ms var(--ease-emphasized, ease);
}

/* =============================================================================
   Logged-in home: quickstart + recent activity (sits below the hero arc)
   ========================================================================== */

.lp-sec-h {
    font-size: 1.05rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin: 3rem 0 1rem;
}

/* Quick-start action tiles */
.lp-quickstart { margin-bottom: 1rem; }
.lp-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.lp-action {
    background: #141823;
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-card, var(--accent));
    border-radius: 14px;
    padding: 1.25rem;
    text-decoration: none;
    color: var(--fg);
    display: flex; flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    transition: transform var(--dur, 200ms), border-color var(--dur, 200ms), box-shadow var(--dur, 200ms);
}
.lp-action:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--elev-2),
        0 0 0 1px color-mix(in srgb, var(--accent-card, var(--accent)) 50%, transparent);
    text-decoration: none;
}
.lp-action-ico {
    width: 2.4rem; height: 2.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent-card, var(--accent));
    background: color-mix(in srgb, var(--accent-card, var(--accent)) 14%, transparent);
    border-radius: 10px;
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}
.lp-action h3 { margin: 0; font-size: 1.05rem; }
.lp-action p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Recent activity columns */
.lp-recent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0 1rem;
}
.lp-recent-col {
    background: #141823;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
}
.lp-recent-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
}
.lp-recent-head h3 { margin: 0; font-size: 1rem; }
.lp-link { color: var(--accent-2); font-size: 0.85rem; }
.lp-empty { margin: 0.5rem 0; font-size: 0.9rem; }

.lp-feed {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.lp-feed-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--fg);
    transition: background var(--dur, 200ms);
}
.lp-feed-row:hover { background: rgba(255, 255, 255, 0.04); text-decoration: none; }
.lp-feed-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-feed-meta { font-size: 0.78rem; white-space: nowrap; }

/* Status pills — sized for inline use in feed rows */
.lp-status {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.07);
    color: var(--fg);
    white-space: nowrap;
}
.lp-status-draft       { background: color-mix(in srgb, #6ea8ff 22%, transparent); color: #b8d3ff; }
.lp-status-inprogress  { background: color-mix(in srgb, #57c4f5 22%, transparent); color: #b3e5fc; }
.lp-status-awaitingcredit,
.lp-status-open        { background: color-mix(in srgb, #c79bff 22%, transparent); color: #e4ccff; }
.lp-status-approved    { background: color-mix(in srgb, #5dd39e 22%, transparent); color: #b6ecd1; }
.lp-status-contracted  { background: color-mix(in srgb, #ff8a4c 22%, transparent); color: #ffd1b3; }
.lp-status-active      { background: color-mix(in srgb, #7fd8d4 22%, transparent); color: #c2efee; }
.lp-status-closed      { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.lp-status-declined,
.lp-status-cancelled   { background: color-mix(in srgb, #f87171 22%, transparent); color: #ffc1c1; }
.lp-status-resolved    { background: color-mix(in srgb, #5dd39e 22%, transparent); color: #b6ecd1; }
.lp-status-waiting     { background: color-mix(in srgb, #ffd166 22%, transparent); color: #ffe9a8; }

/* =============================================================================
   Admin: Market edit page (identity / flags / finance limits / journey)
   ========================================================================== */

.mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.mkt-panel { padding: 1.25rem; }
.mkt-panel.mkt-full { grid-column: 1 / -1; }
/* Customer matching (identity resolution) card */
.mkt-match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin: 0.5rem 0 1rem; }
.mkt-match-rule { border: 1px solid var(--border); border-radius: 9px; padding: 0.6rem; margin-bottom: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mkt-match-fields { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.mkt-check.sm { font-size: 0.78rem; }
.mkt-match-enforce { display: flex; flex-direction: column; gap: 0.3rem; max-width: 34rem; }

/* Environments (deployment topology) card */
.mkt-env-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.mkt-env-flow {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    margin: 0.9rem 0; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 9px;
    background: #12151d;
}
.mkt-env-node {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.22rem 0.6rem; border-radius: 4px; font-size: 0.82rem; font-weight: 600;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--fg);
}
.mkt-env-node.prod { background: color-mix(in srgb, #34d399 16%, transparent); border-color: color-mix(in srgb, #34d399 50%, transparent); }
.mkt-env-prodtag { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.03em; color: #34d399; font-weight: 700; }
.mkt-env-arrow { color: var(--muted); font-size: 1rem; }
.mkt-env-rows { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.4rem; }
.mkt-env-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.6rem; }
.mkt-env-row .fld { display: flex; flex-direction: column; gap: 0.2rem; }
.mkt-env-url { flex: 1 1 16rem; min-width: 12rem; }
.mkt-env-seq {
    flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; margin-bottom: 0.3rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--border); color: var(--fg); font-size: 0.75rem; font-weight: 700;
}
.mkt-env-prodcheck { margin-bottom: 0.35rem; white-space: nowrap; }
.mkt-env-ops { display: flex; gap: 0.25rem; margin-bottom: 0.25rem; }
.mkt-env-pull { margin: 0 0 0.2rem 2rem; }
.mkt-env-pull code { font-size: 0.72rem; }

.mkt-h {
    font-size: 0.85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.mkt-sub { margin: 0 0 1rem; font-size: 0.85rem; }
.mkt-form { display: flex; flex-direction: column; gap: 0.75rem; }
/* User-admin scope panel: shown in place of the org links when the level doesn't use them. */
.scope-hint { font-size: 0.8rem; margin: 0; }
.mkt-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.mkt-form label > span { color: var(--muted); }
.mkt-form .auth-input { width: 100%; }
.mkt-form .mkt-check {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.mkt-form .mkt-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.mkt-form .mkt-check span { color: var(--fg); }

/* Data retention rules editor (AdminMarketEdit). */
.mkt-retention-rules { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.mkt-retention-rule {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.6fr 0.9fr auto;
    gap: 0.6rem;
    align-items: end;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.mkt-retention-rule label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; }
.mkt-retention-rule label > span { color: var(--muted); }
.mkt-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.mkt-flags {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem 1rem;
}
.mkt-actions {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    margin-top: 1.5rem;
}

/* =============================================================================
   Admin: Journey page (per-phase consolidated config)
   ========================================================================== */

.aj-phases { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.aj-phase {
    padding: 1.1rem 1.25rem 1.25rem;
    border-left: 4px solid var(--aj-c, var(--accent));
}
.aj-phase-head {
    display: flex; align-items: center; gap: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.aj-num {
    flex: 0 0 auto;
    width: 1.85rem; height: 1.85rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--aj-c, var(--accent)) 22%, transparent);
    color: var(--aj-c, var(--accent));
    font-weight: 700;
}
.aj-phase-title { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.aj-phase-title h2 { margin: 0; font-size: 1.05rem; }
.aj-phase-title h2 .muted { font-weight: 400; font-size: 0.92em; margin-left: 0.35em; }
.aj-phase-key { font-size: 0.72rem; }
.aj-enable {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.82rem; color: var(--muted); cursor: pointer;
}
.aj-enable input[type="checkbox"] { width: 1.05rem; height: 1.05rem; cursor: pointer; }

.aj-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.aj-col { display: flex; flex-direction: column; gap: 0.45rem; }
.aj-col-h {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}
.aj-col-sub { margin: 0; font-size: 0.8rem; }
.aj-empty { margin: 0.35rem 0; font-style: italic; font-size: 0.82rem; }

.aj-form-list { margin: 0; padding-left: 1.05rem; font-size: 0.85rem; }
.aj-form-link { color: var(--fg); text-decoration: none; }
.aj-form-link:hover { text-decoration: underline; }

.aj-kind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.35rem 0.85rem;
    font-size: 0.85rem;
}
.aj-kind-grid .mkt-check { flex-direction: row; align-items: center; gap: 0.45rem; }
.aj-kind-grid .mkt-check input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; }

.aj-auto-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.aj-auto-row {
    display: flex; gap: 0.6rem; align-items: flex-end;
    padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px;
    background: #141823;
}
.aj-auto-fields {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.45rem;
}
.aj-auto-fields label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; }
.aj-auto-fields .auth-input.sm { padding: 0.3rem 0.5rem; font-size: 0.82rem; }
.aj-auto-fields .mkt-check { flex-direction: row; align-items: center; gap: 0.4rem; }

.aj-raw { margin-top: 1.25rem; }
.aj-raw summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }

.aj-mode-note { margin: 0.25rem 0 1rem; font-size: 0.9rem; }
.aj-mode-note strong { color: var(--fg); }

.aj-readonly { opacity: 0.92; }
.aj-overridden { border-left-width: 4px; }
.aj-overridden::before {
    /* a faint left-edge highlight so overridden phases are scannable in the list */
    content: '';
    position: absolute;
    inset-block: 0; left: 0;
    width: 3px;
    background: var(--aj-c, var(--accent));
    opacity: 0.6;
}
.aj-overridden { position: relative; }

.aj-badge {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.aj-badge-default {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.03);
}
.aj-badge-overridden {
    color: #ffb868;
    background: rgba(255, 184, 104, 0.12);
    border-color: rgba(255, 184, 104, 0.4);
}

.aj-reset { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
.aj-disable { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
.aj-default-note { margin: 0.25rem 0 0; font-size: 0.82rem; }

.aj-market-pick { margin: 1rem 0 1.25rem; }
.aj-market-pick-row {
    display: flex; align-items: center; gap: 0.6rem;
    flex-wrap: wrap;
}
.aj-market-pick-row > span { font-size: 0.82rem; }
.aj-market-pick-row .auth-input { max-width: 360px; }
.aj-locked-note { font-size: 0.78rem; }

.aj-section-h {
    margin: 1.4rem 0 0.5rem;
    font-size: 0.95rem;
    color: var(--fg);
}
.aj-section-h .muted { font-weight: 400; }
.aj-section-disabled { margin-top: 2rem; opacity: 0.85; }

.aj-disabled-list .aj-phase { opacity: 0.65; }
.aj-disabled .aj-phase-head { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }

.aj-order-btns {
    display: flex; flex-direction: column;
    gap: 0.15rem;
    margin-right: 0.4rem;
}
.aj-order-btn {
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.1;
    min-width: auto;
}
.aj-order-btn[disabled] { opacity: 0.3; cursor: not-allowed; }

.aj-badge-inline { vertical-align: middle; margin-left: 0.25rem; }

/* Compact journey strip on /admin/markets/{id} ----------------------------- */
.mkt-journey-strip {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.35rem 0.55rem;
    margin: 0.5rem 0 0.5rem;
}
.mkt-journey-step {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--js-c, var(--accent));
    border-radius: 8px;
    background: #141823;
    font-size: 0.85rem;
}
.mkt-journey-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: color-mix(in srgb, var(--js-c, var(--accent)) 22%, transparent);
    color: var(--js-c, var(--accent));
    font-weight: 700;
    font-size: 0.75rem;
}
.mkt-journey-title { font-weight: 500; }
.mkt-journey-sub { font-size: 0.78rem; }
.mkt-journey-arrow { color: var(--muted); font-size: 0.9rem; }
.mkt-journey-meta { margin: 0.35rem 0 0.6rem; font-size: 0.82rem; }

/* Expand/collapse on phase + form cards ----------------------------------- */
.aj-phase-title-click { cursor: pointer; }
.aj-expand-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    line-height: 1;
}
.aj-expand-btn:hover { color: var(--fg); }
.aj-expanded .aj-phase-head { border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.aj-phase:not(.aj-expanded):not(.aj-readonly):not(.aj-disabled) .aj-phase-head {
    border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}

/* Inline form cards (each ApplicationFormConfig that pins to this phase) -- */
.aj-col-forms .aj-empty { margin-bottom: 0.5rem; }
.aj-form-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #141823;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.aj-form-card.aj-form-inherited {
    border-style: dashed;
    background: #11151f;
}
.aj-phase-forms {
    padding: 0.5rem 0.85rem 0.85rem;
}
.aj-form-card-head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
}
.aj-form-card-head:hover { background: rgba(255, 255, 255, 0.02); }
.aj-form-card-head .spacer { flex: 1; }
.aj-form-card-expanded .aj-form-card-head { border-bottom: 1px solid var(--border); }
.aj-form-card-body { padding: 0.85rem 0.75rem; }
.aj-form-expand { font-size: 0.75rem; }
.aj-form-actions { margin-top: 0.5rem; }

/* Inline form editor body (InlineFormEditor.razor) ------------------------ */
.ife-editor { display: flex; flex-direction: column; gap: 1rem; }
.ife-status { margin: 0.25rem 0; font-size: 0.82rem; }
.ife-empty { margin: 0.35rem 0; font-style: italic; }
.ife-section {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}
.ife-section-head {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.ife-section-head code {
    font-size: 0.72rem; padding: 0.1rem 0.4rem;
    border-radius: 4px; background: rgba(255, 255, 255, 0.04);
}
.ife-section-title { flex: 1; max-width: 360px; }
.ife-section-desc { margin: 0 0 0.5rem; font-size: 0.78rem; }
.ife-fields { width: 100%; font-size: 0.82rem; border-collapse: collapse; }
.ife-fields th {
    text-align: left;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--border);
}
.ife-fields td {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.ife-fields { table-layout: fixed; }
.ife-fields th, .ife-fields td { word-break: break-word; }
.ife-fields code { font-size: 0.72rem; }
.ife-fields .auth-input,
.ife-fields .auth-input.sm {
    /* Pinned min-width was causing the inputs to push the table wider than the
       containing panel, and on narrow containers (the new-form modal, the
       Market admin journey column) the rightmost columns overflowed. Let the
       column drive the input width — box-sizing keeps the padding inside. */
    padding: 0.25rem 0.45rem;
    font-size: 0.82rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.ife-rules-note { margin: 0; font-size: 0.82rem; }
.ife-actions { display: flex; gap: 0.5rem; align-items: center; }

.ife-remove { padding: 0.1rem 0.45rem; font-size: 0.72rem; color: #ff8a8a; }
.ife-remove:hover { color: #ff5a5a; border-color: rgba(255, 100, 100, 0.4); }
.ife-add-section-row { display: flex; justify-content: flex-start; margin-top: 0.3rem; }

/* Rules sub-section — visually distinct from the sections+fields block above
   so the cross-payload concept reads as a different layer. */
.ife-rules {
    margin-top: 1rem; padding-top: 0.8rem;
    border-top: 1px dashed var(--border);
    display: flex; flex-direction: column; gap: 0.6rem;
}
.ife-rules-h { margin: 0; font-size: 0.95rem; }
.ife-rules-help { margin: 0; font-size: 0.8rem; line-height: 1.5; }
.ife-rules-help code { font-size: 0.78rem; padding: 0.05rem 0.3rem; background: rgba(255,255,255,0.04); border-radius: 4px; }
.ife-rule {
    border: 1px solid var(--border); border-radius: 8px;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    display: flex; flex-direction: column; gap: 0.45rem;
}
.ife-rule-head { display: flex; gap: 0.4rem; align-items: center; }
.ife-rule-name { flex: 1; font-weight: 500; }
.ife-rule-sev { flex: 0 0 200px; }
.ife-rule-row { display: flex; flex-direction: column; gap: 0.18rem; font-size: 0.82rem; }
.ife-rule-row > span { color: var(--muted); font-size: 0.74rem; }

/* Read-only viewer in the Market admin journey panel — editing happens on the
   full editor. Keeps the inline space compact + scannable. */
.ife-readonly { display: flex; flex-direction: column; gap: 0.7rem; }
.ife-ro-section {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    display: flex; flex-direction: column; gap: 0.3rem;
}
.ife-ro-section-head { display: flex; gap: 0.5rem; align-items: baseline; }
.ife-ro-section-head code { font-size: 0.72rem; padding: 0.05rem 0.4rem; background: rgba(255,255,255,0.04); border-radius: 4px; }
.ife-ro-desc { margin: 0; font-size: 0.78rem; font-style: italic; }
.ife-ro-fields {
    margin: 0; padding-left: 1rem;
    font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.18rem;
}
.ife-ro-fields li { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.ife-ro-fields code { font-size: 0.72rem; padding: 0.05rem 0.35rem; background: rgba(255,255,255,0.04); border-radius: 3px; }
.ife-ro-label { color: var(--fg); }
.ife-ro-kind { font-size: 0.72rem; text-transform: lowercase; }
.ife-ro-req {
    font-size: 0.7rem;
    color: #ff8a8a;
    border: 1px solid rgba(255, 100, 100, 0.35);
    padding: 0.02rem 0.4rem; border-radius: 4px;
}
.ife-ro-rules { padding-top: 0.4rem; border-top: 1px dashed var(--border); }
.ife-ro-rules-list { margin: 0.25rem 0 0; padding-left: 1rem; font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.45rem; }
.ife-ro-rules-list code { font-size: 0.72rem; padding: 0.05rem 0.35rem; background: rgba(255,255,255,0.04); border-radius: 3px; }
.ife-ro-sev {
    margin-left: 0.4rem;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.05rem 0.45rem; border-radius: 4px;
    background: rgba(255, 184, 104, 0.1); color: #ffb868;
    border: 1px solid rgba(255, 184, 104, 0.3);
}

/* Rules editor on AdminFormEdit (full editor) — same shape as the InlineForm
   editor's rule rows but renders inside the full-width single-column layout. */
.form-edit-rules { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.4rem; }
.form-edit-rule {
    border: 1px solid var(--border); border-radius: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    display: flex; flex-direction: column; gap: 0.45rem;
}
.form-edit-rule-head { display: flex; gap: 0.4rem; align-items: center; }
.form-edit-rule-sev { flex: 0 0 230px; }

/* Phase rules block — visually separated so admins know it's shared state. */
.form-edit-phase-rules {
    padding: 0.85rem 1rem;
    border: 1px dashed rgba(199, 155, 255, 0.4);
    border-radius: 0.55rem;
    background: rgba(199, 155, 255, 0.04);
    display: flex; flex-direction: column; gap: 0.5rem;
    margin-top: 0.4rem;
}
.qc-sub-h { margin: 0.4rem 0 0.2rem; font-size: 0.85rem; color: var(--fg); }

/* Wider modal variant for the new-form flow (step 2 hosts the inline editor). */
.modal-wide { width: min(960px, calc(100vw - 2rem)); }
.modal-sub { font-size: 0.78rem; font-weight: 400; margin-left: 0.4rem; }

/* Small trash-can button on each form card header. Inline so it sits next to
   the expand caret without disrupting the row flow. */
.aj-form-delete {
    background: transparent;
    border: none;
    color: #ff8a8a;
    cursor: pointer;
    padding: 0.1rem 0.4rem;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 120ms ease, background 120ms ease;
}
.aj-form-delete:hover {
    opacity: 1;
    background: rgba(255, 100, 100, 0.12);
    border-radius: 4px;
}

/* Delete-form confirmation modal — sizing + emphatic confirm button */
.aj-delete-modal { width: min(560px, calc(100vw - 2rem)); }
.aj-delete-lead { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.aj-delete-warning {
    margin: 0;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 100, 100, 0.08);
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
}
.aj-delete-confirm {
    background: #dc2626; color: #fff;
    border-color: #dc2626;
}
.aj-delete-confirm:hover { background: #b91c1c; border-color: #b91c1c; }
.aj-delete-confirm:disabled { opacity: 0.6; cursor: wait; }

/* Market-jump list on /admin/journey -------------------------------------- */
.aj-market-jump-list {
    list-style: none; padding: 0; margin: 0.5rem 0 0;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}

/* Phase-header content count chips (forms, auto-create rules, blocking kinds) */
.aj-form-count {
    flex: 0 0 auto;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    border: 1px solid var(--border);
}
.aj-auto-count {
    background: rgba(255, 184, 104, 0.08);
    color: #ffb868;
    border-color: rgba(255, 184, 104, 0.25);
}
.aj-block-count {
    background: rgba(255, 100, 100, 0.08);
    color: #ff8a8a;
    border-color: rgba(255, 100, 100, 0.25);
}

/* Default forms section (above the in-journey list) ---------------------- */
.aj-default-forms { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }

/* =============================================================================
   Impersonation: topbar banner + admin picker page
   ========================================================================== */

.impersonation-bar {
    /* Pinned to the viewport — the admin always sees who they're operating-as. We need
       `fixed` not `sticky` because the parent .app-shell is height: 100dvh with no internal
       scroll; the scrolling actually happens inside `.shell`, which sticky can't reach
       (sticky binds to its nearest scrollable ancestor — there isn't one for the bar).
       .app-shell--impersonating below pushes the rest of the chrome down by the bar's height. */
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(90deg, #f0b352 0%, #e69148 100%);
    color: #1b1430;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 4px 14px -8px rgba(0,0,0,0.45);
}
/* Make room for the fixed bar without reflowing every page's content, and publish the
   bar's height so the AI orb (and any other top-anchored fixed chrome) drops below it.
   A future announcement bar should add its own height here (e.g. via a combined class)
   so the offset stays the sum of all stacked banners. */
.app-shell--impersonating { padding-top: 2.55rem; --banner-offset: 2.55rem; }

/* =============================================================================
   Announcement banner (host-level, dismissible per-browser)
   ========================================================================== */

.annc-bar {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}
.annc-bar .spacer { flex: 1; }
.annc-bar .annc-tag {
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.annc-bar .annc-detail { margin-left: 0.4rem; }
.annc-bar .annc-dismiss {
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 0.35rem 0.9rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.annc-bar .annc-dismiss:hover { background: #000; }

.annc-info {
    background: linear-gradient(90deg, #4d77e0 0%, #5b8dee 100%);
    color: #0c1626;
}
.annc-info .annc-tag    { background: rgba(0,0,0,0.18); color: #0c1626; }
.annc-warning {
    background: linear-gradient(90deg, #f0b352 0%, #e69148 100%);
    color: #1b1430;
}
.annc-warning .annc-tag { background: rgba(0,0,0,0.18); color: #1b1430; }
.annc-critical {
    background: linear-gradient(90deg, #f87171 0%, #ef4444 100%);
    color: #1a0a0a;
}
.annc-critical .annc-tag { background: rgba(0,0,0,0.18); color: #1a0a0a; }

/* Per-severity pill on the admin list */
.annc-sev {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.annc-sev-info     { background: color-mix(in srgb, #6ea8ff 18%, transparent); color: #b6cffa; }
.annc-sev-warning  { background: color-mix(in srgb, #ffd166 18%, transparent); color: #ffe6b0; }
.annc-sev-critical { background: color-mix(in srgb, #f87171 22%, transparent); color: #fbbcbc; }
.annc-row-body { font-size: 0.82rem; margin-top: 0.25rem; }

/* =============================================================================
   <DataGrid> — unified list-page table with search, sort + pagination.
   Replaces the per-page .records.datagrid usage with a consistent component.
   ========================================================================== */

.dg { display: flex; flex-direction: column; gap: 0.85rem; }

.dg-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center;
    padding: 0.65rem 0.85rem;
    background: #141823;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.dg-toolbar .spacer { flex: 1; min-width: 0; }
.dg-search-wrap {
    display: flex; align-items: center; gap: 0.45rem;
    flex: 1; min-width: 200px; max-width: 460px;
    position: relative;
}
.dg-search-icon {
    position: absolute; left: 0.7rem;
    color: var(--muted);
    font-size: 0.95rem;
    pointer-events: none;
}
.dg-search { width: 100%; padding-left: 2rem; }
.dg-count { font-size: 0.82rem; white-space: nowrap; }

.dg-scroll {
    border: 1px solid var(--border);
    border-radius: 12px;
    /* `clip` (not `hidden`) still clips to the rounded corners but does NOT create a scroll
       container — so a sticky <thead> inside binds to the real scroller (.shell) and actually
       sticks (below the topbar) as you scroll the page, instead of being trapped here. */
    overflow: clip;
    background: #141823;
}

.dg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-sans);
    font-size: 0.9rem;
}
.dg-table thead th {
    background: #1a1e27;
    color: var(--fg);
    font-weight: 600;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    /* top:-2rem cancels .shell's 2rem top padding so the header locks flush under the topbar, not
       2rem below it (.dg-scroll is overflow:clip — NOT a scroll container — so this sticky binds to
       the page scroller .shell). See the .datagrid th comment for the full rationale. */
    position: sticky; top: -2rem; z-index: 1;
    white-space: nowrap;
}
.dg-table thead th.dg-sortable {
    cursor: pointer;
    user-select: none;
}
.dg-table thead th.dg-sortable:hover { background: #20242f; }
.dg-th-content { display: inline-flex; align-items: center; gap: 0.4rem; }
.dg-sort { color: var(--muted); font-size: 0.78rem; opacity: 0.7; }
.dg-sortable:hover .dg-sort { opacity: 1; color: var(--fg); }

.dg-table tbody td {
    padding: 0.65rem 0.85rem;
    color: var(--fg);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    vertical-align: middle;
}
.dg-table tbody tr:last-child td { border-bottom: 0; }
.dg-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.018); }
.dg-table tbody tr:hover td { background: rgba(120, 150, 255, 0.06); }
.dg-table tbody td .muted { color: var(--muted); }
.dg-table tbody td code {
    background: rgba(255,255,255,0.05);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--fg) 85%, transparent);
}

.dg-empty {
    text-align: center !important;
    color: var(--muted);
    padding: 2.5rem 1rem !important;
    font-size: 0.92rem;
}

.dg-pager {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    justify-content: center;
    padding: 0.4rem 0;
}
.dg-pager-info { font-size: 0.85rem; margin: 0 0.5rem; }

.dg-cap-note { font-size: 0.8rem; text-align: center; margin: 0; }

.impersonation-bar .imp-pill {
    background: rgba(27, 20, 48, 0.18);
    color: #1b1430;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.impersonation-bar .muted { color: rgba(27, 20, 48, 0.7); }
/* Dealer / Outlet name: a bordered chip so it reads clearly against the orange
   instead of fading into it as muted text did. */
.impersonation-bar .imp-loc {
    background: rgba(27, 20, 48, 0.12);
    color: #1b1430;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
    border-radius: 6px;
    border: 1px solid rgba(27, 20, 48, 0.3);
}
.impersonation-bar .spacer { flex: 1; }
.imp-stop-btn {
    background: #1b1430;
    color: #f0b352;
    border: 0;
    border-radius: 4px;
    padding: 0.4rem 1rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: transform 120ms, background 120ms;
}
.imp-stop-btn:hover { background: #000; transform: translateY(-1px); }
.imp-stop-btn::before { content: "✕  "; }

.imp-current {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    background: color-mix(in srgb, #f0b352 14%, transparent);
    border: 1px solid color-mix(in srgb, #f0b352 35%, var(--border));
    border-radius: 10px;
}
.imp-current .imp-stop { margin-left: auto; }

.imp-form {
    display: flex; flex-direction: column; gap: 1rem;
    max-width: 460px;
    margin-top: 1rem;
}
.imp-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.imp-form label > span { color: var(--muted); }
.imp-form select.auth-input { width: 100%; appearance: auto; }

/* Section heading — small uppercase label. Originally introduced for the (now removed)
   standalone quote calculator; retained because <h3 class="qc-h"> is the shared section-heading
   idiom across the app (customer/asset capture, admin pages, application form panels). */
.qc-h {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.app-quote-actions {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0.3rem 0 1rem;
    font-size: 0.85rem;
}

/* ----- Quote history (versions + deltas) ----- */
.quote-history { margin: 0 0 1.25rem; padding: 1rem 1.25rem; }
.quote-history h3.qc-h { margin: 0 0 0.65rem; }
.qhist-grid td { vertical-align: middle; }
.qhist-grid tr.qhist-active td {
    background: color-mix(in srgb, #5dd39e 8%, transparent);
}
.qhist-delta {
    margin-left: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.qhist-delta.up   { color: #f87171; }   /* increase = more cost / longer term (usually unfavourable) */
.qhist-delta.down { color: #5dd39e; }   /* decrease = lower payment / shorter term (usually favourable) */
.qhist-foot { font-size: 0.78rem; margin: 0.5rem 0 0; }

/* Inline link from a data-grid cell — kept subtle so the table still reads as a list,
   not a wall of links. Used for customer names that should pivot to the detail page. */
.row-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 120ms, color 120ms;
}
.row-link:hover {
    color: var(--accent-2);
    border-bottom-color: var(--accent-2);
}

/* =============================================================================
   Custom error page (/error and /error/{code})
   ========================================================================== */

.err-page { min-height: 100dvh; display: flex; flex-direction: column; }
.err-hero { padding-top: 3rem; padding-bottom: 3rem; text-align: center; }
.err-badge {
    background: color-mix(in srgb, #f87171 18%, transparent);
    border: 1px solid color-mix(in srgb, #f87171 40%, var(--border));
    color: #fbbcbc;
}
.err-diag {
    margin: 2.5rem auto 0;
    max-width: 920px;
    text-align: left;
    background: #141823;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
.err-diag h3 { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: baseline; gap: 0.5rem; }
.err-diag-reason { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.err-diag-path { font-size: 0.85rem; margin: 0 0 0.85rem; }
.err-diag-row { margin: 0.1rem 0; font-size: 0.85rem; }
.err-diag-row > span.muted { margin-right: 0.35rem; }
.err-diag details { margin-top: 0.7rem; }
.err-diag summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; padding: 0.2rem 0; }
.err-trace { margin: 1rem auto 0; font-size: 0.82rem; max-width: 640px; }
.err-trace code { background: #1a1e27; padding: 0 0.4rem; border-radius: 3px; color: var(--fg); }
.err-diag-message {
    background: rgba(0,0,0,0.35);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    overflow-x: auto;
    color: #fbbcbc;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* =============================================================================
   Application form (/applications/{id}/form) — driven by ApplicationFormConfig.
   ========================================================================== */

/* Full width like every other page (the old 920px cap made the deal cockpit the one narrow
   page in the app). The one-screen layout comes from .cockpit below. */
.form-page { max-width: none; }

/* ===== Deal cockpit — customer → signature on ONE SCREEN =====================================
   Two columns on desktop: the capture form (main) + an at-a-glance rail (summary cards, documents).
   The rail is sticky and scrolls internally if taller than the viewport; the journey stepper,
   move-forward strip and activity timeline stay full-width outside the pair. Stacks on narrow —
   rail first, matching the old top-of-page summary order. */
.cockpit { display: flex; gap: 1.25rem; align-items: flex-start; }
.cockpit-main { flex: 1 1 auto; min-width: 0; order: 1; }
.cockpit-rail {
    flex: 0 0 340px; order: 2;
    position: sticky; top: 0.5rem;
    max-height: calc(100vh - 7rem); overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.cockpit-rail .app-summary { margin: 0.5rem 0 0.6rem; }
.cockpit-rail .docs-panel { margin-top: 0; }
@media (max-width: 1279px) {
    .cockpit { flex-direction: column; }
    .cockpit-rail { position: static; order: 0; width: 100%; flex: none; max-height: none; overflow: visible; }
    .cockpit-main { order: 1; width: 100%; }
}

.form-warn { color: #ffd166; margin-left: 0.4rem; }
.form-panel { padding: 1.5rem 1.75rem; }

.form-renderer { display: flex; flex-direction: column; gap: 1.75rem; }
.form-section { display: flex; flex-direction: column; gap: 0.75rem; }
.form-section-title {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--muted); font-weight: 700; margin: 0;
    display: flex; align-items: center; gap: 0.45rem;
}
/* An accent colour tints the heading and adds a short leading rule, so a long form's sections
   read as distinct blocks. --section-accent is set inline from FormSection.Accent. */
.form-section-title.has-accent { color: var(--section-accent); }
.form-section-title.has-accent::before {
    content: ""; width: 0.5rem; height: 0.9rem; border-radius: 2px;
    background: var(--section-accent); flex: none;
}
.form-section-icon { font-size: 1.1rem; line-height: 1; }
/* Collapsible heading — a button that toggles the section's fields. */
.form-section-toggle {
    appearance: none; background: none; border: none; cursor: pointer; text-align: left;
    padding: 0.1rem 0; width: fit-content; font: inherit;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--muted); font-weight: 700;
}
.form-section-toggle:hover { color: var(--fg); }
.form-section-chevron { font-size: 0.7rem; opacity: 0.8; }
.form-section-fields { display: flex; flex-direction: column; gap: 0.85rem; }
.form-section-fields-hidden { display: none; }
.form-section-desc { font-size: 0.85rem; margin: 0; }
.form-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.85rem; }

/* "Cards" presentation — a read-only, SDM-bound form rendered as a polished detail view (Contract, and
   opt-in for any workspace page). Sections become titled cards; read-only fields show as clean
   label→value rows (.form-value) instead of greyed-out disabled inputs (.form-field-readonly). */
.presentation-cards .form-renderer-body { display: flex; flex-direction: column; gap: 1rem; }
.presentation-cards .form-renderer-body > .form-section + .form-section { margin-top: 0; }
.presentation-cards .form-section {
    background: #181b23; border: 1px solid var(--border); border-radius: 14px; padding: 1.05rem 1.25rem 1.15rem;
}
.presentation-cards .form-fields { gap: 1rem 1.4rem; }
.form-field-display { gap: 0.2rem; }
.form-field-display .form-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600;
}
.form-value {
    font-size: 0.95rem; font-weight: 500; color: var(--fg); padding: 0.05rem 0; min-height: 1.4em;
    overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}

/* Deterministic width grid — used when any field in the section declares a width hint
   (FormField.Width: full/half/third). 6 columns so halves and thirds mix on one row. */
.form-fields.form-fields-cols { grid-template-columns: repeat(6, 1fr); }
.form-fields-cols .form-field { grid-column: span 6; }
.form-fields-cols .form-field.fw-half { grid-column: span 3; }
.form-fields-cols .form-field.fw-third { grid-column: span 2; }
@media (max-width: 720px) {
    .form-fields-cols .form-field,
    .form-fields-cols .form-field.fw-half,
    .form-fields-cols .form-field.fw-third { grid-column: span 6; }
}

.form-field {
    display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem;
}
.form-field.has-error .auth-input { border-color: #f87171; }
.form-field-readonly .auth-input, .form-field-readonly .form-range { opacity: 0.6; cursor: not-allowed; }

/* Blueprint glue map (/admin/blueprint) */
.bp-intro { font-size: 0.88rem; max-width: 72rem; }
.bp-counts { margin: 0 0 0.6rem; }
/* Same containment recipe as .mj-diagram-host / .er-diagram: the .er-pan wrapper is absolutely
   positioned, so the host must be position:relative + overflow:hidden or the map spills out. */
.bp-diagram {
    height: 70vh; overflow: hidden; position: relative; touch-action: none;
    background: #0f1320;
}
.bp-diagram svg { cursor: grab; }

/* Mapping drift banner (/admin/data-model/mappings) */
.sdmmap-drift {
    margin: 0.5rem 0; padding: 0.5rem 0.7rem; border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 8px; background: rgba(248, 113, 113, 0.08); font-size: 0.83rem;
}
.sdmmap-drift-path { margin-left: 0.4rem; }
.sdmmap-orphan-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem; }
.sdmmap-when { margin-left: 0.6rem; }

/* Radio group / MultiSelect checkbox list (FieldKind.Radio / .MultiSelect) */
.form-choice-group { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; padding: 0.2rem 0; }
.form-choice-option {
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.85rem;
}
.form-choice-option input { cursor: pointer; }
.form-field-readonly .form-choice-option, .form-field-readonly .form-choice-option input { cursor: not-allowed; opacity: 0.75; }
.form-label { color: var(--muted); }
.form-req { color: #f87171; margin-left: 0.2rem; }
.form-help { font-size: 0.78rem; }
.form-error { color: #f87171; font-size: 0.8rem; }
.form-textarea { resize: vertical; min-height: 3.5rem; }
/* image field (FieldKind.Image) */
.form-image { display: flex; flex-direction: column; gap: 0.4rem; }
.form-image-preview { max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--border); object-fit: contain; background: rgba(255,255,255,0.03); }
.form-image-controls { display: flex; flex-direction: column; gap: 0.3rem; }
.form-image-url { font-size: 0.82rem; }

.form-field input[type="checkbox"].form-check {
    width: 1.05rem; height: 1.05rem; align-self: flex-start; margin-top: 0.2rem;
}
/* A Checkbox field lays out INLINE — [✓] Label on one row — instead of the label-above-input stack
   used for text inputs (which left the tick sitting under its own label). Help / error wrap below. */
.form-field-check {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.55rem;
    /* Don't stretch to the grid row's height (a taller sibling would spread the tick and label to
       opposite ends of a tall cell) — size to content so the pair sits on one tidy row. */
    align-self: start;
    /* A sibling text field is [label ↑ / input ↓]; without this the tick+label would sit at the
       cell TOP, level with the siblings' LABELS instead of their inputs. Drop it by one label row
       (label height + the .form-field 0.3rem gap) so the control lines up with the input boxes. */
    margin-top: 1.55rem;
}
/* …but a checkbox in a repeater cell has no label-above sibling to line up with — keep it at the top. */
.form-repeater-cell.form-field-check { margin-top: 0; }
.form-field-check > .form-check { order: -1; margin-top: 0; align-self: center; flex: none; }
/* flex-basis 0 keeps the label on the checkbox's line (its preferred size is 0, so the pair never
   overflows and wraps) — it then grows to fill the row and wraps its own TEXT if long, instead of
   the whole label dropping to a new line below the tick in a narrow column. */
.form-field-check > .form-label { flex: 1 1 0; min-width: 0; }
.form-field-check > .form-help, .form-field-check > .form-error { flex-basis: 100%; }

/* Slider (FieldKind.Slider): the value sits on the LABEL row (right-aligned) with the range full-
   width below, so the value is unambiguously tied to its own field rather than floating toward the
   next slider in the grid. Layout via a 2-row grid on the field; .form-slider holds only the range. */
.form-field-slider {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "slider slider";
    align-items: baseline;
    column-gap: 0.5rem;
}
.form-field-slider > .form-label { grid-area: label; }
.form-field-slider > .form-slider-readout { grid-area: value; }
.form-field-slider > .form-slider { grid-area: slider; }
.form-slider { display: flex; align-items: center; }
.form-range { flex: 1; min-width: 0; accent-color: var(--accent); }
.form-slider-readout {
    text-align: right; font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--text);
}

/* Output panel (FieldKind.OutputPanel): a read-only computed readout, not an input. */
.form-output-panel {
    padding: 0.5rem 0.7rem; border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text);
}
/* URL-valued output (e.g. an integration deeplink) renders as a link; keep long paths on one line. */
.form-output-link {
    display: inline-block; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
    color: var(--accent);
}
/* Table field (FieldKind.Table) — read-only rows from a mapped array response. */
/* Repeater — editable 0..n collection rows (SDM collection capture) */
.form-repeater { display: flex; flex-direction: column; gap: 0.5rem; }
.form-repeater-row {
    display: flex; align-items: flex-end; gap: 0.6rem;
    padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.02);
}
.form-repeater-cells {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.6rem; flex: 1;
}
.form-repeater-cell { margin: 0; }
.form-repeater-remove { flex: 0 0 auto; align-self: center; }
.form-repeater-empty { margin: 0.1rem 0; font-size: 0.85rem; }
.form-repeater-add { align-self: flex-start; }

.form-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.form-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.form-table thead th {
    text-align: left; font-weight: 600; color: var(--muted); white-space: nowrap;
    padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.03);
}
.form-table tbody td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.05); font-variant-numeric: tabular-nums; }
.form-table tbody tr:last-child td { border-bottom: 0; }
.form-table-empty { color: var(--muted); text-align: center; padding: 0.8rem; }
/* Table field: search / sortable headers / pager */
.form-table-search { max-width: 280px; margin: 0.45rem 0.5rem; font-size: 0.85rem; }
.form-table-th { cursor: pointer; user-select: none; }
.form-table-th:hover { color: var(--fg, #e6e9f0); }
.form-table-pager { display: flex; align-items: center; justify-content: center; gap: 0.7rem;
    padding: 0.4rem; border-top: 1px solid var(--border); font-size: 0.82rem; }

/* Button spinner + section busy overlay ("spinner over the component" while its call runs) */
.form-spinner { display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.45em; vertical-align: -0.1em;
    border: 2px solid rgba(125,180,255,0.35); border-top-color: #7db4ff; border-radius: 50%;
    animation: form-spin 0.7s linear infinite; }
.form-spinner-lg { width: 1.8rem; height: 1.8rem; border-width: 3px; margin: 0; }
@keyframes form-spin { to { transform: rotate(360deg); } }
.form-section-busy { position: relative; }
.form-section-busy-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center;
    justify-content: center; background: rgba(10, 13, 20, 0.45); border-radius: 10px; backdrop-filter: blur(1px); }

/* Lookup field: closed control + search modal */
.form-lookup { display: flex; align-items: center; gap: 0.35rem; position: relative; }
.form-lookup-display { flex: 1; cursor: pointer; }
.form-lookup-open { flex: none; }
.form-lookup-clear { position: absolute; right: 3.2rem; border: none; background: none; color: var(--muted);
    cursor: pointer; font-size: 0.85rem; padding: 0.2rem; }
.form-lookup-clear:hover { color: #fca5a5; }
.form-lookup-scrim { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center; padding: 4vh 2vw; }
.form-lookup-modal { width: min(760px, 96vw); max-height: 86vh; display: flex; flex-direction: column;
    background: #10141f; border: 1px solid rgba(91,162,255,0.5); border-radius: 12px; padding: 0.8rem 0.9rem;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6); }
.form-lookup-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.form-lookup-search { width: 100%; margin-bottom: 0.5rem; }
/* Faceted filter row in the lookup popup */
.lk-facets { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: flex-end; margin-bottom: 0.5rem; }
.lk-facet { display: flex; flex-direction: column; gap: 0.15rem; }
.lk-facet select { min-width: 8rem; }
.lk-clear { align-self: flex-end; }
.form-lookup-pager { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-top: 0.5rem; }
/* Button that opens the vehicle lookup (looks like the select it replaced) */
.vs-lookup-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    cursor: pointer; text-align: left; width: 100%; }
.vs-lookup-btn .vs-lookup-ico { opacity: 0.6; }
.form-lookup-list { overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.form-lookup-row { cursor: pointer; }
.form-lookup-row:hover td { background: rgba(91,162,255,0.10); }
.form-lookup-row.sel td { background: rgba(91,162,255,0.22); }
.form-lookup-info { width: 2rem; }
.form-lookup-infobtn { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; }
.form-lookup-infobtn:hover { color: #7db4ff; }
.form-lookup-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.8rem;
    margin: 0.3rem 0.2rem; font-size: 0.8rem; }
.form-lookup-detail dt { color: var(--muted); }
.form-lookup-detail dd { margin: 0; overflow-wrap: anywhere; }

/* Quote history table — clean form-style table (not the monospace admin grid), with the active
   version highlighted and coloured up/down deltas. */
.quote-history { margin: 0.5rem 0 1.5rem; }
.qhist-grid { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.5rem; }
.qhist-grid thead th {
    text-align: left; font-weight: 600; color: var(--muted); white-space: nowrap;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border);
}
.qhist-grid tbody td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.qhist-grid tbody tr:last-child td { border-bottom: 0; }
.qhist-grid tbody tr:hover td { background: rgba(255,255,255,0.025); }
.qhist-grid .apps-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qhist-active td { background: rgba(91,162,255,0.10); }
.qhist-active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.qhist-delta { font-size: 0.72rem; margin-left: 0.3rem; white-space: nowrap; }
.qhist-delta.down { color: #9fe09f; }   /* a lower figure (cheaper) reads green */
.qhist-delta.up   { color: #ffb3a8; }   /* a higher figure reads warm */
.qhist-foot { font-size: 0.75rem; margin: 0.5rem 0 0; }
/* APIs panel: an array-container response row (maps to a Table field). */
.fc-api-row.arr .fc-api-fname { font-weight: 600; }
.fc-api-row.arr .fc-api-type { color: #b59cff; }

/* Section tabs (FormSection.Tab): a tab bar above the tabbed sections. */
.form-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--border);
    margin-bottom: 0.9rem; padding-bottom: 0; }
/* In the docked-panel layout the body's sections aren't separated by the .form-renderer flex gap (that
   gap is between the body + the panel), so they'd sit flush — give consecutive sections breathing room. */
.form-renderer-body > .form-section + .form-section { margin-top: 1.5rem; }
.form-tab {
    appearance: none; background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1.05rem; font-size: 0.92rem; color: var(--muted);
    border-bottom: 3px solid transparent; margin-bottom: -1px;
    border-radius: 8px 8px 0 0;
}
.form-tab:hover { color: var(--text); background: rgba(91,162,255,0.07); }
.form-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700;
    background: rgba(91,162,255,0.10); }
.form-tab-count { font-size: 0.68rem; font-weight: 600; color: var(--muted); padding: 0.05rem 0.4rem;
    border-radius: 4px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); }
.form-tab.active .form-tab-count { color: var(--accent); border-color: rgba(91,162,255,0.5); }

/* Editor: an advanced-grid cell that spans the full width (e.g. OutputPanel expression). */
.form-edit-advanced-wide { grid-column: 1 / -1; }

/* Standard Data Model panel — derived shape table + merge picker + export. */
.form-datamodel-merge { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.5rem 0 0.75rem; }
.form-datamodel-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.form-datamodel-table th, .form-datamodel-table td {
    text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top;
}
.form-datamodel-table th { color: var(--muted); font-weight: 600; }
.form-datamodel-table tr.dm-conflict td { background: color-mix(in srgb, #f87171 12%, transparent); }
.dm-conflict-tag { color: #c0392b; font-size: 0.78rem; margin-left: 0.4rem; }

/* Editor: the add-section row + the insert-from-library picker beside it. */
.form-edit-section-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.form-edit-insert { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.form-edit-insert .auth-input.slim { min-width: 200px; }

.form-actions {
    display: flex; gap: 0.5rem; margin-top: 1.25rem;
    border-top: 1px solid var(--border); padding-top: 1.25rem;
}
.form-banner {
    margin-top: 1rem; padding: 0.55rem 0.8rem; border-radius: 6px;
    font-size: 0.88rem;
}
.form-banner-ok    { background: color-mix(in srgb, #5dd39e 18%, transparent); color: #b3edcb; }
.form-banner-error { background: color-mix(in srgb, #f87171 18%, transparent); color: #fbbcbc; }
.form-banner-info  { background: rgba(255,255,255,0.05); color: var(--muted); }

/* ----- Rule output panels (cross-field + conditional rules) ----- */
.form-rules {
    margin: 1rem 0 0;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.88rem;
}
.form-rules ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.form-rules li { margin: 0.15rem 0; }
.form-rules li code {
    background: rgba(0,0,0,0.25);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-size: 0.78rem;
}
.form-rules-error {
    background: color-mix(in srgb, #f87171 14%, transparent);
    border-color: color-mix(in srgb, #f87171 45%, var(--border));
    color: #fbbcbc;
}
.form-rules-error strong { color: #fdc6c6; }
.form-rules-warning {
    background: color-mix(in srgb, #ffd166 12%, transparent);
    border-color: color-mix(in srgb, #ffd166 38%, var(--border));
    color: #ffe6b0;
}
.form-rules-warning strong { color: #fff0c2; }

.form-prefill-banner {
    margin: 0 0 1rem;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    background: color-mix(in srgb, #6ea8ff 14%, transparent);
    border: 1px solid color-mix(in srgb, #6ea8ff 35%, var(--border));
    color: #b6cffa;
    font-size: 0.85rem;
}
.form-prefill-banner code {
    background: rgba(0,0,0,0.3);
    padding: 0 0.3rem;
    border-radius: 3px;
    font-size: 0.78rem;
}

/* =============================================================================
   Cases queue (/cases)
   ========================================================================== */

.cases-filters {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin: 1rem 0 1.25rem;
}
.cases-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: #141823;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 120ms, color 120ms;
}
.cases-chip:hover { border-color: var(--accent-2); color: var(--fg); }
.cases-chip.active {
    background: color-mix(in srgb, #c79bff 18%, #141823);
    border-color: color-mix(in srgb, #c79bff 55%, var(--border));
    color: #fff;
}
.cases-chip-count {
    background: rgba(255,255,255,0.08);
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
}

.cases-kind, .cases-status, .cases-prio {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cases-kind                  { background: rgba(255,255,255,0.06); color: var(--muted); }
.cases-kind-application      { background: color-mix(in srgb, #6ea8ff 18%, transparent); color: #b6cffa; }
.cases-kind-credit           { background: color-mix(in srgb, #c79bff 20%, transparent); color: #ddc6ff; }
.cases-kind-collections      { background: color-mix(in srgb, #f87171 18%, transparent); color: #fbbcbc; }
.cases-kind-retention        { background: color-mix(in srgb, #ffd166 18%, transparent); color: #ffe6b0; }
.cases-kind-inquiry          { background: color-mix(in srgb, #7fd8d4 18%, transparent); color: #b6f0ec; }
.cases-kind-exception        { background: color-mix(in srgb, #ff8a4c 20%, transparent); color: #ffc6a4; }
.cases-kind-document         { background: color-mix(in srgb, #5dd39e 18%, transparent); color: #b3edcb; }

.cases-status-open           { background: color-mix(in srgb, #6ea8ff 18%, transparent); color: #b6cffa; }
.cases-status-inprogress     { background: color-mix(in srgb, #ffd166 18%, transparent); color: #ffe6b0; }
.cases-status-waiting        { background: rgba(255,255,255,0.05); }
.cases-status-resolved       { background: color-mix(in srgb, #5dd39e 18%, transparent); color: #b3edcb; }
.cases-status-cancelled      { background: rgba(248,113,113,0.12); color: var(--muted); }

.cases-prio-low              { background: rgba(255,255,255,0.05); color: var(--muted); }
.cases-prio-normal           { background: rgba(255,255,255,0.05); color: var(--muted); }
.cases-prio-high             { background: color-mix(in srgb, #ff8a4c 18%, transparent); color: #ffc6a4; }
.cases-prio-urgent           { background: color-mix(in srgb, #f87171 22%, transparent); color: #fbbcbc; }

.contracts-status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.contracts-status-drafted   { background: rgba(255,255,255,0.06); color: var(--muted); }
.contracts-status-sent      { background: color-mix(in srgb, #6ea8ff 18%, transparent); color: #b6cffa; }
.contracts-status-signed    { background: color-mix(in srgb, #ffd166 18%, transparent); color: #ffe6b0; }
.contracts-status-active    { background: color-mix(in srgb, #5dd39e 20%, transparent); color: #b3edcb; }
.contracts-status-cancelled { background: rgba(248,113,113,0.12); color: var(--muted); }

/* =============================================================================
   Search (/search)
   ========================================================================== */

.search-bar { margin: 1rem 0 1.5rem; }
.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}
.search-hint { padding: 1rem 0; font-size: 0.9rem; }
.search-section-h {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
}

/* Used by both /customers and /assets inline create forms. */
.customer-create-form .customer-create-check {
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
}
.customer-create-form .customer-create-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }

/* =============================================================================
   Documents panel (/applications/{id}/form)
   ========================================================================== */

.docs-panel { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
.docs-panel h3.qc-h { margin: 0 0 0.85rem; }

/* Full-width document manager (application page). The rail keeps only a count + jump link;
   the manager panel is the growing home for document functionality. */
.docs-rail-link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 1.5rem; }
.docs-rail-link h3.qc-h { margin: 0; }
.docs-count {
    display: inline-block; min-width: 1.5em; text-align: center; margin-left: 0.35rem;
    font-size: 0.72rem; font-weight: 700; padding: 0.08rem 0.45rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.docs-manager { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
.docs-mgr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem; margin-bottom: 0.9rem; }
.docs-mgr-head h3.qc-h { margin: 0; }
.docs-mgr-search { width: min(20rem, 100%); }
.docs-mgr-spacer { flex: 1; }
/* Request-from-customer panel inside the document manager */
.docs-request { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .8rem 1rem;
                margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .6rem; }
.docs-req-items { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.docs-req-item { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.docs-req-fields { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.docs-req-fields .auth-input { width: min(22rem, 100%); }
.docs-req-link { user-select: all; word-break: break-all; }
.docs-req-created { margin: 0; }
.docs-mgr-upload { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.docs-name-link {
    font: inherit; color: var(--fg); font-weight: 600; background: none; border: none; padding: 0;
    cursor: pointer; text-align: left;
}
.docs-name-link:hover { color: var(--accent-2, #8ab8ff); text-decoration: underline; }
.docs-row-acts { display: flex; gap: 0.35rem; white-space: nowrap; }
.docs-grid td { vertical-align: middle; }
.docs-kind {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(255,255,255,0.06);
    color: var(--muted);
}

.docs-upload {
    display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}
.docs-upload-row {
    display: flex; flex-direction: column; gap: 0.25rem;
    font-size: 0.85rem;
    min-width: 200px;
}
.docs-upload-row > span { color: var(--muted); }
.docs-file {
    font-size: 0.85rem;
    color: var(--fg);
}
.docs-file::file-selector-button {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--fg);
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    margin-right: 0.6rem;
}
.docs-file::file-selector-button:hover {
    border-color: var(--accent-2);
}

/* =============================================================================
   Activity timeline (/applications/{id}/form)
   ========================================================================== */

.timeline-panel { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
.timeline-panel h3.qc-h { margin: 0 0 1rem; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.timeline-item {
    position: relative;
    padding: 0.5rem 0 0.5rem 2.5rem;
    display: flex;
    flex-direction: column;
}
.timeline-icon {
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--ti-c, var(--accent));
    color: #0f1118;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 0 0 3px #141823;       /* matches the panel bg so it punches through the rail */
}
.timeline-body { display: flex; flex-direction: column; gap: 0.15rem; }
.timeline-head {
    display: flex; align-items: baseline; gap: 0.75rem;
    flex-wrap: wrap;
}
.timeline-head strong { font-size: 0.92rem; }
.timeline-when { font-size: 0.78rem; }
.timeline-detail { font-size: 0.84rem; margin: 0; }

/* ---- Horizontal "Integration procedures" strip ---- */
.tl-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
.tl-head h3.qc-h { margin: 0; }
.tl-hint { font-size: 0.78rem; }
.tl-scroll { overflow-x: auto; padding: 0.5rem 0.1rem 1rem; }
.tl-track { display: flex; align-items: flex-start; position: relative; min-width: max-content; }
.tl-track::before { content: ""; position: absolute; top: 0.85rem; left: 0.6rem; right: 0.6rem; height: 2px; background: var(--border); }
.tl-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.tl-chip { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.85rem; background: #1b2030; color: inherit; border: 1px solid var(--border);
    box-shadow: 0 0 0 3px #141823; }
.tl-chip.iface { color: #6ea8ff; }
.tl-chip.iface.ok { color: #5dd39e; border-color: #2f5b48; }
.tl-chip.iface.bad { color: #f87171; border-color: #6b2f33; }
.tl-chip.pending { color: #8a93a6; }
.tl-gap { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start; min-width: 3.6rem; padding-top: 0.35rem; }
.tl-gp { font-size: 0.66rem; color: #8a93a6; background: #141823; border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.45rem; white-space: nowrap; }
.tl-gp.big { color: #c8cedb; }
.tl-evt { width: 6.5rem; text-align: center; display: flex; flex-direction: column; gap: 0.1rem; }
.tl-evt .tl-t { font-size: 0.78rem; line-height: 1.25; }
.tl-d { font-size: 0.72rem; }
.tl-when { font-size: 0.68rem; }
.tl-card { width: 11.5rem; background: #1b2030; border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.6rem;
    text-align: left; display: flex; flex-direction: column; gap: 0.15rem; }
.tl-card.err { border-color: #6b2f33; }
.tl-tag { font-size: 0.66rem; color: #6ea8ff; background: rgba(110, 168, 255, 0.12); padding: 0.02rem 0.4rem; border-radius: 5px; align-self: flex-start; }
.tl-tag.err { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.tl-name { font-size: 0.82rem; font-weight: 600; }
.tl-route { font-size: 0.68rem; display: flex; gap: 0.25rem; }
.tl-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-top: 0.15rem; }
.tl-pill { font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; }
.tl-pill.ok { color: #5dd39e; background: rgba(93, 211, 158, 0.12); }
.tl-pill.bad { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.tl-pill.pending { color: #8a93a6; background: rgba(138, 147, 166, 0.12); }
.tl-cluster { width: 12.5rem; background: #161b28; border: 1px solid #2c3b63; border-radius: 10px; padding: 0.4rem; }
.tl-cluster.pending { border-color: var(--border); }
.tl-clh { font-size: 0.68rem; color: #6ea8ff; font-weight: 600; margin: 0.1rem 0.15rem 0.4rem; }
.tl-cluster.pending .tl-clh { color: #8a93a6; }
.tl-mini { display: flex; align-items: center; gap: 0.35rem; background: #1b2030; border: 1px solid var(--border); border-radius: 7px; padding: 0.3rem 0.4rem; margin-bottom: 0.3rem; }
.tl-mini:last-child { margin-bottom: 0; }
.tl-mini.pending { opacity: 0.7; }
.tl-mn { font-size: 0.72rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-ov { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.tl-dl { width: 560px; max-width: 100%; max-height: 85vh; overflow: auto; background: #141823; border: 1px solid var(--border); border-radius: 12px; }
.tl-dh { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); }
.tl-dt { font-size: 0.95rem; font-weight: 600; }
.tl-db { padding: 0.85rem 1rem; }
.tl-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 0.8rem; margin-bottom: 0.8rem; }
.tl-kv .k { display: block; font-size: 0.66rem; }
.tl-kv .v { display: block; font-size: 0.82rem; }
.tl-at { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; padding: 0.35rem 0; border-top: 1px solid var(--border); }
.tl-lbl { font-size: 0.7rem; color: #8a93a6; margin: 0.7rem 0 0.2rem; }
.tl-code { font-family: ui-monospace, monospace; font-size: 0.72rem; background: #0f1118; border: 1px solid var(--border); border-radius: 8px;
    padding: 0.5rem 0.6rem; white-space: pre-wrap; word-break: break-word; max-height: 11rem; overflow: auto; margin: 0; }

/* ---- Spaced-out variant (Collections case timeline) — same rail, more breathing room per node
   so a long collections history doesn't feel cramped. Opt-in via .tl-spaced so the default
   Financial Services journey timeline is unaffected. ---- */
.tl-scroll.tl-spaced { padding: 0.85rem 0.15rem 1.5rem; }
.tl-scroll.tl-spaced .tl-node { gap: 0.6rem; }
.tl-scroll.tl-spaced .tl-gap { min-width: 4.75rem; }
.tl-scroll.tl-spaced .tl-evt { width: 8rem; }
.tl-scroll.tl-spaced .tl-evt .tl-t { font-size: 0.82rem; }
.tl-scroll.tl-spaced .tl-d { font-size: 0.76rem; }
.tl-scroll.tl-spaced .tl-cluster { width: 14rem; }
.tl-scroll.tl-spaced .tl-mini { margin-bottom: 0.45rem; gap: 0.5rem; padding: 0.4rem 0.5rem; }

/* ---- Collections guided action wizard (case detail page): big step-by-step choice
   buttons instead of a dropdown form — pick action → who → template → confirm. ---- */
.wiz-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; margin: 0.5rem 0 0.75rem; }
.wiz-choice {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left;
    background: #141823; border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.85rem;
    color: var(--fg); cursor: pointer; font: inherit; transition: border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard);
}
.wiz-choice:hover { border-color: var(--accent-2); background: #1b2030; }
.wiz-choice.sel { border-color: var(--accent); background: rgba(59, 130, 246, 0.08); }
.wiz-ico { font-size: 1.15rem; line-height: 1; }
.wiz-name { font-weight: 600; font-size: 0.88rem; }
.wiz-hint { font-size: 0.72rem; line-height: 1.3; }
.wiz-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0.85rem; }
.wiz-crumb {
    font-size: 0.74rem; padding: 0.15rem 0.6rem; border-radius: 4px;
    border: 1px solid var(--border); color: var(--muted); background: #141823;
}
.wiz-crumb.done { color: #5dd39e; border-color: #2f5b48; }
.wiz-crumb.cur { color: var(--fg); border-color: var(--accent); background: rgba(59, 130, 246, 0.10); }
.wiz-cancel { margin-left: auto; }
.wiz-summary { margin: 0.35rem 0 0.75rem; }
.wiz-summary-line { font-size: 0.92rem; margin-bottom: 0.5rem; }
.wiz-preview {
    font-size: 0.8rem; line-height: 1.45; color: var(--fg); white-space: pre-wrap; word-break: break-word;
    background: #0f1118; border: 1px dashed var(--border); border-left: 3px solid var(--accent);
    border-radius: 8px; padding: 0.6rem 0.75rem; max-width: 46rem;
}

/* =============================================================================
   Reports (/reports)
   ========================================================================== */

.reports-page { max-width: 1200px; }
.reports-range { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 1.25rem; }
.reports-kpis { margin-bottom: 1.5rem; }
.reports-panel { padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }

.bars { display: flex; flex-direction: column; gap: 0.55rem; }
.bars-row {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr 3.5rem;
    align-items: center;
    gap: 0.85rem;
}
.bars-label { font-size: 0.88rem; color: var(--fg); }
.bars-track {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
    height: 1.1rem;
    position: relative;
}
.bars-fill {
    height: 100%;
    border-radius: 4px;
    min-width: 2px;
    transition: width 220ms ease;
}
.bars-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--fg);
}

@media (max-width: 720px) {
    .bars-row { grid-template-columns: 1fr 2.5rem; }
    .bars-label { grid-column: 1 / -1; padding-bottom: 0.15rem; }
    .bars-track { grid-column: 1 / 2; }
    .bars-count { grid-column: 2 / 3; }
}

/* =============================================================================
   Journey stepper — shows where the user is in the customer journey.
   Used at the top of /quote/new and /applications/{id}/form. Each step's accent
   colour mirrors the corresponding node on the landing-page arc.
   ========================================================================== */

.js-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #141823;
    margin: 1rem 0 0.5rem;
}

/* Current journey status — a plain-language pill + one-line meaning under the stepper, so the desk
   always knows where the deal stands and what moves it next. Read-only; admins get the ⚙ deep-link. */
.js-status-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.7rem;
    margin: 0 0.15rem 1.25rem; font-size: 0.86rem;
}
.js-status-pill {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
    padding: 0.14rem 0.6rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04);
}
.js-status-pill.js-status-wip  { color: #8ab8ff; border-color: rgba(122, 167, 255, 0.45); background: rgba(122, 167, 255, 0.12); }
.js-status-pill.js-status-good { color: #6ddc9f; border-color: rgba(93, 211, 158, 0.45); background: rgba(93, 211, 158, 0.12); }
.js-status-pill.js-status-bad  { color: #ff9b86; border-color: rgba(255, 120, 100, 0.45); background: rgba(255, 120, 100, 0.12); }
.js-status-meaning { flex: 1 1 12rem; min-width: 0; }
.js-status-cfg { white-space: nowrap; text-decoration: none; }
.js-status-cfg:hover { text-decoration: underline; }

.js-step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.8rem;
    border-radius: 9px;
    border: 1px solid transparent;
    min-width: 0;
}
.js-step .js-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    border: 1.5px solid transparent;
    flex: 0 0 auto;
}
.js-step .js-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.js-step .js-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--fg);
}
.js-step .js-sub {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.js-step .js-mark {
    margin-left: 0.25rem;
    width: 0.75rem; height: 0.75rem;
    border-radius: 50%;
    background: var(--js-c, var(--accent));
    flex: 0 0 auto;
    font-size: 0.78rem;
    line-height: 0.75rem;
    color: var(--bg);
    text-align: center;
    font-weight: 700;
}
.js-step .js-mark.js-pulse {
    animation: jsPulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--js-c, var(--accent)) 50%, transparent);
}
@keyframes jsPulse {
    0%, 100% { box-shadow: 0 0 0 0  color-mix(in srgb, var(--js-c, var(--accent)) 50%, transparent); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

.js-step.js-done .js-num {
    background: color-mix(in srgb, var(--js-c) 20%, transparent);
    border-color: var(--js-c);
    color: var(--js-c);
}
.js-step.js-done .js-title { color: color-mix(in srgb, var(--fg) 75%, transparent); }

.js-step.js-active {
    border-color: color-mix(in srgb, var(--js-c) 60%, var(--border));
    background: color-mix(in srgb, var(--js-c) 12%, #141823);
}
.js-step.js-active .js-num {
    background: var(--js-c);
    color: var(--bg);
    border-color: var(--js-c);
}

.js-step.js-upcoming .js-title { color: color-mix(in srgb, var(--fg) 65%, transparent); }
.js-step.js-upcoming .js-num { color: var(--muted); }

.js-arrow {
    color: var(--muted);
    font-size: 1rem;
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .js-step .js-sub { display: none; }
    .js-arrow { display: none; }
}

/* Clickable steps — only set by the parent when navigation is allowed (backward, or
   forward by one). Non-clickable steps stay plain text, no hover state. */
.js-step.js-clickable {
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.js-step.js-clickable:hover {
    background: color-mix(in srgb, var(--js-c, var(--accent)) 18%, #141823);
    border-color: color-mix(in srgb, var(--js-c, var(--accent)) 45%, var(--border));
}
.js-step.js-clickable:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--js-c, var(--accent)) 60%, transparent);
    outline-offset: 2px;
}

/* ----- Customer create form (/customers) ----- */
.customer-create { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; }
.customer-create-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 0.75rem 0 1rem;
}
/* Label + input read off this one size (the input is font:inherit), so bumping it scales the pair
   together — the New-customer capture form was noticeably smaller than the rest of the app. */
.customer-create-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; }
.customer-create-form label > span { color: var(--muted); }

/* Two-step "find first, then create" flow on /customers/new */
.cn-step { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.7rem; }
.cn-step-num {
    flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85rem;
    margin-top: 0.1rem;
}
.cn-step .qc-h { margin: 0; }

/* Provenance of a found customer (which dealer / outlet owns it) */
.cn-owner { display: inline-block; }
.cn-share-tag {
    display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem;
    border-radius: 0.7rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; vertical-align: middle;
}
.cn-share-tag.group { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.cn-share-tag.other { background: color-mix(in srgb, #d98324 22%, transparent); color: #b5670f; }
.cn-actions { white-space: nowrap; display: flex; gap: 0.35rem; }

/* Step 2 locked until a search has run */
.cn-locked {
    display: flex; align-items: center; gap: 0.55rem;
    margin-top: 0.5rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem;
    background: var(--surface-2, rgba(127,127,127,0.08)); color: var(--muted); font-size: 0.9rem;
}

/* Duplicate warning shown while filling the create form */
.cn-dup-banner {
    margin: 0.4rem 0 0.9rem; padding: 0.8rem 1rem; border-radius: 0.7rem;
    background: color-mix(in srgb, #d98324 12%, transparent);
    border: 1px solid color-mix(in srgb, #d98324 45%, transparent);
}
.cn-dup-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.98rem; }
.cn-dup-body { margin: 0.35rem 0 0.6rem; font-size: 0.9rem; line-height: 1.45; }
.cn-dup-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.cn-override { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); cursor: pointer; }
.cn-override input { width: 1rem; height: 1rem; }
.cn-blocked-hint { align-self: center; }

/* =============================================================================
   Applications list (/applications)
   ========================================================================== */

.apps-toolbar {
    display: flex; align-items: center; gap: 1rem;
    margin: 1rem 0;
}
.apps-toolbar .apps-count { margin-left: auto; font-size: 0.85rem; }

/* Carried-context banner (e.g. "Quoting for <asset> — pick a customer") shown when an
   asset is threaded from /assets through customer selection into a quote. */
.apps-context-banner {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 1rem 0;
    padding: 0.7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 8px;
    font-size: 0.9rem; color: var(--fg);
}
.apps-context-icon { font-size: 1.1rem; line-height: 1; }
.apps-empty { padding: 1.25rem 1.5rem; }

.apps-grid td { vertical-align: middle; }
.apps-grid .apps-money { font-variant-numeric: tabular-nums; }

.apps-phase, .apps-status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.apps-phase                       { background: rgba(255,255,255,0.05); color: var(--muted); }
.apps-phase-quoteandonboarding    { background: color-mix(in srgb, #6ea8ff 20%, transparent); color: #b6cffa; }
.apps-phase-applicationandcredit  { background: color-mix(in srgb, #c79bff 20%, transparent); color: #ddc6ff; }
.apps-phase-docdatacheck          { background: color-mix(in srgb, #b58cf5 20%, transparent); color: #d8c2fb; }
.apps-phase-approval              { background: color-mix(in srgb, #46cf99 20%, transparent); color: #a8ecd0; }
.apps-phase-contracting           { background: color-mix(in srgb, #ff8a4c 20%, transparent); color: #ffc6a4; }
.apps-phase-handoverandactivation { background: color-mix(in srgb, #7fd8d4 20%, transparent); color: #b6f0ec; }
.apps-phase-ended                 { background: rgba(248,113,113,0.18); color: #fbbcbc; }

.apps-status                      { background: rgba(255,255,255,0.05); color: var(--muted); }
.apps-status-draft                { background: rgba(255,255,255,0.08); }
.apps-status-inprogress           { background: color-mix(in srgb, #6ea8ff 18%, transparent); color: #b6cffa; }
.apps-status-awaitingcredit       { background: color-mix(in srgb, #ffd166 18%, transparent); color: #ffe6b0; }
.apps-status-approved             { background: color-mix(in srgb, #5dd39e 20%, transparent); color: #b3edcb; }
.apps-status-declined             { background: rgba(248,113,113,0.18); color: #fbbcbc; }
.apps-status-contracted           { background: color-mix(in srgb, #ff8a4c 20%, transparent); color: #ffc6a4; }
.apps-status-active               { background: color-mix(in srgb, #7fd8d4 20%, transparent); color: #b6f0ec; }
.apps-status-closed               { background: rgba(255,255,255,0.05); }
.apps-status-cancelled            { background: rgba(248,113,113,0.12); color: var(--muted); }

/* ---- Admin → Security module ---- */
.security-run-panel { margin: 0.5rem 0 1.25rem; }
.security-run-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
.security-check-group { border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.8rem; }
.security-check-group legend { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 0.3rem; }
.security-check-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.9rem; }
.security-run-actions { display: flex; gap: 0.6rem; }
.security-run-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0 1rem; }
.sev-pill { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap; }
.sev-critical { background: rgba(248,113,113,0.22); color: #fbbcbc; }
.sev-high     { background: rgba(251,146,60,0.20); color: #fdd0a8; }
.sev-medium   { background: rgba(250,204,21,0.16); color: #f5e6a3; }
.sev-low      { background: rgba(255,255,255,0.08); color: var(--muted); }
.sev-info     { background: color-mix(in srgb, #7fd8d4 16%, transparent); color: #b6f0ec; }
.security-report { padding: 1rem 1.25rem; }
.security-report h1 { font-size: 1.3rem; }
.security-report h2 { font-size: 1.05rem; margin-top: 1.2rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.security-report h3 { font-size: 0.92rem; color: var(--muted); margin-top: 0.9rem; }
.security-report ul { margin: 0.3rem 0 0.6rem 1.1rem; }
.security-report p { margin: 0.3rem 0; font-size: 0.9rem; }

/* =============================================================================
   Application summary cards (/applications/{id}/form)
   ========================================================================== */

.app-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 0.5rem 0 1.25rem;
}

/* Right-to-be-forgotten (CustomerDetail). */
.cd-forgotten-banner { border-color: rgba(148,163,184,0.35); margin: 0.5rem 0 1rem; }
.cd-forgotten-banner p { margin: 0; }
.cd-forget-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 1rem; }
.cd-forget-panel { margin: -0.5rem 0 1rem; }
.app-summary-card {
    background: #141823;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex; flex-direction: column;
    gap: 0.2rem;
}
.app-summary-card strong { font-size: 1rem; }
.app-summary-card .muted { font-size: 0.8rem; }
.app-summary-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
}
.app-summary-money strong { font-variant-numeric: tabular-nums; font-size: 1.15rem; }

/* Design-time mirror of the summary header inside the form editor (connect fields to blocks). */
.fc-summary-design { margin: 0.4rem 0 1.4rem; }
.fc-card-off { opacity: 0.5; }
.fc-cust-toggle { font-size: 0.7rem; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 0.4rem; display: inline-flex; align-items: center; gap: 0.2rem; color: var(--muted); }
.fc-cust-toggle input { margin: 0; }
.fc-summary-design .app-summary-card { gap: 0.3rem; }
.fc-summary-design .app-summary-card select,
.fc-summary-design .app-summary-card input { width: 100%; margin-top: 0.1rem; }
.fc-sum-note { font-size: 0.78rem; }

/* Editable summary block card: label input + field selects + reorder/remove actions. */
.fc-summary-block .fc-summary-block-head { display: flex; align-items: center; gap: 0.35rem; }
.fc-summary-block .fc-summary-block-head input { flex: 1; margin-top: 0; }
.fc-summary-block-actions { display: flex; gap: 0.15rem; flex-shrink: 0; }
.fc-summary-block-actions .lp-btn { padding: 0.15rem 0.4rem; line-height: 1; }
/* A block line pairs a field with its own format (primary line, secondary line). */
.fc-summary-block-line { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem; margin-top: 0.25rem; }
.fc-summary-block-line select:last-child { width: 6.5rem; }
.fc-summary-add { align-self: center; }

/* Form-config scope: a clear banner + a locked scope value so the host template vs a
   market-specific copy is unmistakable, and the scope can't be silently re-pointed. */
.form-edit-scope {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.6rem 0.85rem; border-radius: 10px; margin: 0 0 1rem;
    border: 1px solid var(--border); font-size: 0.88rem;
}
.form-edit-scope-host   { background: color-mix(in srgb, #6ea8ff 10%, transparent); border-color: color-mix(in srgb, #6ea8ff 35%, transparent); }
.form-edit-scope-market { background: color-mix(in srgb, #46cf99 10%, transparent); border-color: color-mix(in srgb, #46cf99 35%, transparent); }
.form-edit-scope-badge {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.2rem 0.5rem; border-radius: 6px; background: rgba(255,255,255,0.08); white-space: nowrap;
}
.form-edit-scope-fixed { display: inline-flex; align-items: baseline; gap: 0.4rem; font-weight: 600; }
.form-edit-copy { margin: 0.4rem 0 1rem; }
.form-edit-copy-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.3rem 0 0.2rem; }

.phase-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
}
.phase-actions-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
    margin-right: 0.25rem;
}

/* =============================================================================
   Admin form-config editor (/admin/forms/{id})
   ========================================================================== */

/* Full-page editor — the authoring surface uses the whole viewport width. */
.form-edit-page { max-width: 100%; }
/* Single-column editor — sections + fields get the full content width. The
   live preview stacks below in its own full-width section so the authoring
   surface isn't fighting for horizontal space. */
.form-edit-layout {
    display: flex; flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.25rem;
}
/* Sticky action bar — Save always reachable on the long editor, with a live unsaved indicator.
   The scroll container (.shell) has 2rem padding and the topbar is a sibling above it, so a sticky
   child pinned at top:0 would sit 2rem below the topbar (content scrolling through the gap). top:-2rem
   pulls it flush against the topbar — nothing of the page shows above it. The impersonation bar's
   height is absorbed by .app-shell padding, so this holds whether or not you're impersonating. The
   negative-margin bleed + extra top padding fill the 2rem so the bar reads as a solid top strip. */
/* The editor's actions now live in a bottom .page-actionbar (.form-edit-actionbar) — consistent
   with the runtime form and free of the old top-overlap. .spacer pushes the saved/dirty status to
   the right end of the bar. */
.page-actionbar .spacer { flex: 1; }
/* The editor's action bar stays a single row (it has ~9 tools); it scrolls sideways rather than
   wrapping to two rows, so its height is predictable and the Export/Import panel can float a fixed
   distance above it. */
.form-edit-actionbar { flex-wrap: nowrap; overflow-x: auto; }
/* Export / Import panels float just ABOVE the bottom bar (sticky), so they open in view next to the
   button that toggled them rather than at the top of a long page. */
.fc-bar-panel {
    position: sticky; bottom: 5rem; z-index: 9;   /* clears the one-row action bar (~4.5rem) + gap */
    max-height: 50vh; overflow-y: auto;
    /* Solid background — it floats over page content, so it must be opaque (the flat .fc-import tint
       let text bleed through). */
    background: var(--panel-bg, rgba(22, 26, 36, 0.99));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.9);
}
.form-edit-status { font-size: 0.85rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 4px; white-space: nowrap; }
.form-edit-status.dirty { color: #ffcf8f; background: rgba(255, 176, 80, 0.16); }
.form-edit-status.saved { color: #9fe09f; background: rgba(124, 196, 124, 0.16); }
.form-edit-status.err   { color: #ff9a9a; background: rgba(255, 90, 90, 0.16); }
.form-edit-side {
    display: flex; flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
}

/* Identity in a collapsible details — collapsed by default once the form has
   been saved (the header summary shows the key identity fields). */
.form-edit-identity { border: 1px solid var(--border); border-radius: 0.55rem; padding: 0; margin-bottom: 0.4rem; background: rgba(255,255,255,0.02); }
.form-edit-identity > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.form-edit-identity > summary::-webkit-details-marker { display: none; }
.form-edit-identity > summary::before {
    content: '▶';
    font-size: 0.7rem;
    color: var(--muted);
    transition: transform 120ms ease;
}
.form-edit-identity[open] > summary::before { transform: rotate(90deg); }
.qc-h-inline {
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.form-edit-identity-summary { font-size: 0.85rem; }
.form-edit-identity-body { padding: 0 0.85rem 0.85rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* Live preview row sits below the editor at full width (Expanded mode). */
.form-edit-preview-wrap { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.form-edit-preview-panel { padding: 1.25rem 1.5rem; }

/* Live preview, Docked mode — a sticky column beside the editor, own width var (--form-preview-w)
   so it coexists with the Properties panel's --side-panel-w without collision. Only becomes a real
   flex column ≥1621px (same breakpoint as .side-panel.inline); below that .form-edit-workspace isn't
   flex, so this just stacks full width under .form-edit-main — same result as Expanded mode, which is
   the right degrade (three columns don't fit a laptop). */
.form-edit-preview-dock {
    position: relative;
    margin-top: 1.5rem;
    display: flex; flex-direction: column; gap: 0.6rem;
    padding: 0.9rem 1rem 1.25rem;
    border: 1px solid var(--border); border-radius: 10px;
}
.form-edit-preview-dock-resize {
    position: absolute; left: -4px; top: 0; bottom: 0; width: 8px;
    cursor: col-resize; z-index: 3; border-radius: 4px;
}
.form-edit-preview-dock-resize:hover, .form-edit-preview-dock-resize:active { background: rgba(91, 162, 255, 0.4); }
@media (min-width: 1621px) {
    .form-edit-preview-dock {
        margin-top: 0;
        position: sticky; top: 1rem; align-self: flex-start;
        max-height: calc(100vh - 10.5rem); overflow: auto;
        flex: 0 0 var(--form-preview-w, 480px); order: 1;
    }
}
.form-edit-side h3.qc-h { margin-top: 0.5rem; }
.form-edit-row { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; }
.form-edit-row > span { color: var(--muted); }
.form-edit-check { flex-direction: row; align-items: center; gap: 0.5rem; }
.form-edit-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
/* Generic filter/action toolbar row (Scope · Kind · Workspace · … · buttons). Used by several
   admin pages (knowledge, journeys, blueprint, mappings). #346 moved the FORM-EDITOR's own toolbar
   to a bottom action bar and dropped this rule with it — but these pages still rely on it, so
   without it their label-columns + buttons collapse and overlap. Restored as a wrapping flex row. */
.form-edit-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.9rem; margin: 1rem 0; }
.form-edit-toolbar > .spacer { flex: 1 1 auto; }
.form-edit-toolbar .fld { gap: 0.25rem; margin: 0; }
.form-edit-toolbar .form-edit-check { align-self: center; }
.form-edit-help { font-size: 0.82rem; margin: 0; }
.form-edit-json {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.5;
    min-height: 22rem;
    resize: vertical;
    white-space: pre;
}
.form-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* Legacy two-column preview rule kept only because some other admin pages reuse
   the panel shape; the new layout puts the preview in .form-edit-preview-wrap. */
.form-edit-preview { display: flex; flex-direction: column; gap: 0.75rem; }
.form-edit-preview h3.qc-h { margin: 0.5rem 0 0; }

/* Guided structured editor — sections + fields */
/* Property picker (searchable modal for binding a property/field) */
.pp-wrap { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; flex: 1; }
.pp-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.4rem; width: 100%; text-align: left; cursor: pointer; }
.pp-trigger-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-trigger-caret { opacity: 0.6; flex: none; }
.pp-clear { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.8rem; padding: 0 0.2rem; }
.pp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem; }
.pp-modal { background: var(--panel, #11151c); border: 1px solid var(--border); border-radius: 0.7rem; width: min(820px, 100%); max-height: 78vh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
.pp-head { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
.pp-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.95rem; }
/* box-sizing + width-minus-margins so the search box stays inside the modal (a plain width:100% input
   plus horizontal margins overflows the right edge). */
.pp-search { box-sizing: border-box; width: calc(100% - 1.8rem); margin: 0.7rem 0.9rem 0.4rem; }
.pp-body { display: grid; grid-template-columns: 14rem 1fr; gap: 0; min-height: 0; flex: 1; overflow: hidden; }
@media (max-width: 620px) { .pp-body { grid-template-columns: 1fr; } .pp-rail { display: none; } }
.pp-rail { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem; border-right: 1px solid var(--border); overflow: auto; }
/* Group name flush-left with its count right after it (not pushed to the far edge, which read as
   centred); the count keeps the leftover space via margin-left:auto only on the count itself. */
.pp-rail-item { display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 0.35rem 0.55rem; border-radius: 0.4rem; font-size: 0.82rem; }
.pp-rail-item:hover { background: rgba(255,255,255,0.05); }
.pp-rail-item.active { background: rgba(91,162,255,0.18); }
.pp-count { font-size: 0.72rem; color: var(--muted); }
.pp-list { overflow: auto; padding: 0.4rem 0.6rem 0.8rem; }
.pp-group-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #8aa0c6; margin: 0.6rem 0 0.25rem; }
/* Flush-left rows: the label, then the key + hint as muted suffixes right after it (NOT pushed to the
   far right, which read as oddly centred with short labels). */
.pp-opt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.5rem; width: 100%; text-align: left; justify-content: flex-start; background: none; border: 0; color: inherit; cursor: pointer; padding: 0.35rem 0.55rem; border-radius: 0.4rem; }
.pp-opt:hover { background: rgba(255,255,255,0.05); }
.pp-opt.selected { background: rgba(91,162,255,0.22); }
.pp-opt-label { font-size: 0.85rem; font-weight: 500; }
.pp-opt-key { font-size: 0.72rem; color: var(--muted); font-family: var(--mono, monospace); }
.pp-opt-hint { font-size: 0.7rem; color: #7c8aa0; }
.pp-empty { padding: 1rem 0.5rem; }

/* Dealers & Outlets admin: edit form title + compact dealer filter in the toolbar */
.ao-form-title { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
.ao-dealer-filter { flex-direction: row; align-items: center; gap: 0.4rem; margin: 0 0.5rem; }
.ao-dealer-filter > span { font-size: 0.78rem; }

/* Finance-products: Azure-style full-width stepper editor */
.fp-listhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.fp-editor { display: flex; flex-direction: column; gap: 1rem; }
.fp-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fp-steps { display: flex; gap: 0.4rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0.6rem; }
.fp-step {
    display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 0.5rem;
    color: inherit; padding: 0.5rem 0.9rem; font-size: 0.88rem;
}
.fp-step:hover { background: rgba(255,255,255,0.06); }
/* The current step reads clearly as selected: filled accent, bold, lifted, with an underline bar. */
.fp-step.active {
    border-color: var(--accent, #5b8def); background: rgba(91,162,255,0.22);
    box-shadow: inset 0 -3px 0 var(--accent, #5b8def); font-weight: 600;
}
.fp-step.active .fp-step-no { background: var(--accent, #5b8def); color: #fff; }
.fp-step-no {
    display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem;
    border-radius: 50%; background: rgba(255,255,255,0.1); font-size: 0.78rem; font-weight: 600;
}
.fp-step.done:not(.active) .fp-step-no { background: rgba(124,196,124,0.3); color: #9fe09f; }
.fp-panel { min-height: 16rem; padding: 0.6rem 0.1rem; display: flex; flex-direction: column; gap: 1rem; }
/* Roomier fields in the wizard so they don't crowd/overlap. */
.fp-panel .cf-form-row { gap: 1rem 1.25rem; }
.fp-panel .cf-form-row .fld { min-width: 9.5rem; }
.fp-panel .cf-form-row .fld .auth-input { width: 100%; box-sizing: border-box; }
.fp-campaign { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
/* Pricing versions (effective-dating) */
.fp-ver-bar { display: flex; align-items: end; gap: 0.75rem; flex-wrap: wrap; padding-bottom: 0.3rem; border-bottom: 1px dashed var(--border); }
.fp-sched { display: flex; align-items: end; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 0.5rem; background: rgba(91,141,239,0.06); }
.fp-sched .fld.grow { flex: 1 1 14rem; }
.fp-ver-sel > td { background: rgba(91,141,239,0.10); }
.fp-ver-badge { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.fp-ver-badge.active { background: rgba(124,196,124,0.22); color: #9fe09f; }
.fp-ver-badge.sched { background: rgba(91,141,239,0.22); color: #aac4ff; }
.fp-ver-badge.expired { background: rgba(255,255,255,0.08); color: var(--muted); }
.cc-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-bottom: 0.8rem; }
.cc-filter-actions { display: flex; gap: 0.4rem; align-items: end; margin-left: auto; }
.cc-assign { margin-bottom: 1rem; }
.cc-check { width: 2rem; text-align: center; }
.cc-set { font-size: 0.85rem; color: var(--muted); }
.cc-detail { width: 4.5rem; text-align: right; }
.cc-del { color: #ffb3b3; border-color: rgba(255,110,110,0.4); }
.cc-del:hover:not(:disabled) { background: rgba(255,110,110,0.12); border-color: rgba(255,110,110,0.7); }
.cc-msg { margin: -0.4rem 0 0.8rem; }
/* Config-change detail modal: before/after JSON side by side. */
.cc-detail-modal { max-width: min(1000px, 94vw); width: 94vw; }
.cc-detail-meta { margin: 0 0 0.6rem; }
.cc-detail-cols { display: grid; gap: 0.8rem; }
.cc-detail-cols.two { grid-template-columns: 1fr 1fr; }
.cc-detail-col h4 { margin: 0 0 0.3rem; font-size: 0.85rem; }
.cc-json {
    font-family: var(--mono, monospace); font-size: 0.74rem; line-height: 1.4;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 6px;
    padding: 0.6rem; max-height: 60vh; overflow: auto; white-space: pre; margin: 0;
}
@media (max-width: 760px) { .cc-detail-cols.two { grid-template-columns: 1fr; } }
.rv-settings { margin-bottom: 1rem; }
.rv-opt-block { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; }
.rv-opt-scope { margin-top: 0.3rem; padding-top: 0.4rem; border-top: 1px dashed var(--border); }
.rv-opt-scope .fld span { font-size: 0.78rem; color: var(--muted); }
.rv-settings-save { align-self: end; }
.rv-editor { display: flex; flex-direction: column; gap: 0.8rem; }
/* Rate card grid editor */
.rc-bands { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.rc-bands-label { font-size: 0.82rem; color: var(--muted); }
.rc-band-edit { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.85rem; }
.rc-band-input { width: 4.5rem; }
.rc-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.8rem; }
.rc-grid { width: auto; }
.rc-grid th { font-size: 0.78rem; white-space: nowrap; }
.rc-term { width: 5rem; }
.rc-rate { width: 5rem; }
/* Two-up eligibility (vehicles | dealers) with clear separation. */
.fp-elig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem 2.5rem; }
.fp-elig-col { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.fp-footer { display: flex; align-items: center; gap: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.fp-footer-gap { flex: 1; }
.fp-review { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.7rem 1.4rem; }
.fp-review > div { display: flex; flex-direction: column; gap: 0.15rem; }
.fp-review .muted { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Vehicle eligibility tree picker (make → model → variant → years/NST) */
.vsp { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem 0.6rem; max-height: 22rem; overflow: auto; }
.vsp-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; padding: 0.12rem 0; cursor: pointer; }
.vsp-all { font-size: 0.72rem; }
.vsp-children { margin-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.08); padding-left: 0.6rem; }
.vsp-leaf { margin-left: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; padding: 0.2rem 0 0.35rem; }
.vsp-leaf-label { font-size: 0.72rem; color: #8aa0c6; }
.vsp-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; }

/* Finance-products admin: eligibility dealer/outlet checkbox lists */
.fp-checks { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; max-height: 9rem; overflow: auto; padding: 0.3rem 0.1rem; }
.fp-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; }

/* Form overlay (market inherits host base + thin delta) */
.fo-banner { border: 1px solid rgba(124,196,124,0.4); background: rgba(124,196,124,0.07); border-radius: 0.6rem; padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; }
.fo-banner-head { font-size: 0.9rem; }
.fo-banner-sub { font-size: 0.8rem; margin: 0.3rem 0 0; }
.fo-warn { color: #e0b060; }
.fo-warnings { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; color: #e0b060; display: flex; flex-direction: column; gap: 0.15rem; }
.fo-badge { background: rgba(124,196,124,0.22); color: #9fe09f; border: 1px solid rgba(124,196,124,0.5); font-weight: 700; font-size: 0.7rem; }

/* User manual (/admin/manual editor, /manual reader) — one card per workspace chapter. */
.manual-toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 1.2rem; padding: 0.7rem 1rem; border: 1px solid var(--border); border-radius: 8px; }
.manual-chapter { margin-bottom: 0.8rem; }
.manual-chapter-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.manual-chapter-head-clickable { cursor: pointer; user-select: none; }
.manual-chapter-status { flex: 0 0 auto; }
.manual-chapter-chevron { flex: 0 0 auto; width: 1.2rem; text-align: center; color: var(--muted); }
.manual-chapter-icon { font-size: 1.3rem; line-height: 1; }
.manual-chapter-body-wrap { margin-top: 0.7rem; }
.manual-chapter-edit-toolbar { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.manual-chapter-body { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; resize: vertical; }
.manual-chapter-preview { border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 1rem; background: rgba(255,255,255,0.02); }
.manual-chapter-draft { margin-top: 0.9rem; }
.manual-chapter-diff { display: flex; gap: 1rem; margin: 0.6rem 0; }
.manual-chapter-diff > div { flex: 1 1 0; min-width: 0; }
.manual-chapter-diff-pane { max-height: 20rem; overflow: auto; }
@media (max-width: 900px) { .manual-chapter-diff { flex-direction: column; } }
.manual-explore { margin: -0.6rem 0 1.2rem; }
.manual-chapter-journey { margin: 0.4rem 0 0.8rem; font-style: italic; }
.manual-chapter-forms { margin-top: 1rem; }
.manual-forms-group { margin-bottom: 1rem; }
.manual-forms-group h4 { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.manual-forms-grid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.manual-forms-grid .bb-card { width: 26rem; max-width: 100%; flex: 1 1 24rem; }
.manual-chapter-history { margin-top: 1rem; }
.manual-history-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.manual-history-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; flex-wrap: wrap; }
.manual-history-preview { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; color: var(--muted); }
.manual-appendix { margin-top: 1.5rem; }
.manual-appendix h1 { margin-top: 1.6rem; }
.manual-appendix ul { padding-left: 1.2rem; }
span.fo-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem; border-radius: 0.3rem; padding: 0 0.2rem; }

/* Interfaces-at-this-stage panel (build form fields from an interface) */
.fe-ifaces { border: 1px solid rgba(91,162,255,0.28); border-radius: 0.6rem; background: rgba(91,162,255,0.05); margin-bottom: 0.9rem; }
.fe-ifaces-head {
    width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; font-weight: 600; font-size: 0.9rem;
}
.fe-ifaces-caret { width: 0.9rem; display: inline-block; }
.fe-ifaces-sub { font-weight: 400; font-size: 0.8rem; margin-left: auto; }
.fe-ifaces-body { padding: 0 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.fe-ifaces-help { font-size: 0.8rem; margin: 0 0 0.2rem; }
.fe-iface { border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; background: rgba(0,0,0,0.18); }
.fe-iface-head {
    width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; font-size: 0.85rem;
}
.fe-iface-caret { width: 0.9rem; display: inline-block; }
.fe-iface-sys { font-size: 0.78rem; }
.fe-iface-counts { margin-left: auto; font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.fe-iface-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; padding: 0 0.7rem 0.7rem; }
@media (max-width: 800px) { .fe-iface-body { grid-template-columns: 1fr; } }
.fe-iface-col { display: flex; flex-direction: column; gap: 0.35rem; }
.fe-iface-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; }
.fe-iface-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; max-height: 11rem; overflow: auto; }
.fe-iface-fields li { font-size: 0.78rem; display: flex; gap: 0.4rem; justify-content: space-between; }
.fe-iface-fields code { font-size: 0.76rem; }

.form-edit-sections { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.form-edit-section {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.6rem;
    padding: 0.75rem 0.85rem;
    background: rgba(255,255,255,0.025);
    display: flex; flex-direction: column;
    gap: 0.6rem;
}
.form-edit-section-head { display: flex; align-items: center; gap: 0.4rem; }

/* Design-time tabs: filter bar + per-section tab badge so it's obvious which sections live on
   which runtime tab (vs. the always-visible common body). */
.form-edit-tabbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.9rem; }
.form-edit-tabbar > .muted { width: 100%; font-size: 0.8rem; margin-bottom: 0.15rem; }
.fe-tab {
    font: inherit; font-size: 0.8rem; padding: 0.22rem 0.7rem; border-radius: 4px; cursor: pointer;
    border: 1px solid rgba(140, 150, 170, 0.3); background: rgba(140, 150, 170, 0.08); color: var(--fg, #e6e9f0);
}
.fe-tab:hover { border-color: rgba(91, 162, 255, 0.6); }
.fe-tab.active { border-color: rgba(91, 162, 255, 0.9); background: rgba(91, 162, 255, 0.16); color: #cfe0ff; font-weight: 600; }
.fe-tab-add { border-style: dashed; border-color: rgba(91, 162, 255, 0.55); color: #cfe0ff; background: transparent; margin-left: auto; }
.fe-tab-add:hover { background: rgba(91, 162, 255, 0.12); border-style: solid; }
.fe-section-tab {
    font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 6px; white-space: nowrap;
    background: rgba(91, 162, 255, 0.16); color: #aecbff; border: 1px solid rgba(91, 162, 255, 0.4);
}
.fe-section-tab-common { background: rgba(140, 150, 170, 0.12); color: var(--muted, #8a93a6); border-color: rgba(140, 150, 170, 0.3); }
/* A tabbed section gets a left accent so it reads as "belongs to a tab, not the main body". */
.form-edit-section-tabbed { border-left: 3px solid rgba(91, 162, 255, 0.55); }
.form-edit-insert-empty { font-size: 0.82rem; text-decoration: none; align-self: center; }
.form-edit-insert-empty:hover { text-decoration: underline; }
.form-edit-section-title { flex: 1; font-weight: 600; }
.form-edit-section-tools { display: flex; gap: 0.25rem; }
.form-edit-section-meta { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(160px, 2fr); gap: 0.5rem; }
.form-edit-section-meta label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; }
.form-edit-section-meta label > span { color: var(--muted); }

.form-edit-fields { display: flex; flex-direction: column; gap: 0.45rem; padding-left: 0.6rem; border-left: 2px solid rgba(255,255,255,0.06); }
/* Per-field connection badges in the form editor — colour-coded, click to open the inspector. */
.fc-badges { display: inline-flex; align-items: center; gap: 0.2rem; margin: 0 0.1rem; }
.fc-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; padding: 0; border-radius: 50%;
    font-size: 0.74rem; font-weight: 700; line-height: 1; cursor: pointer;
    border: 1px solid transparent;
}
.fc-badge svg { display: block; }
.fc-badge-api   { background: rgba(122,167,255,0.18); color: #9db8ef; border-color: rgba(122,167,255,0.4); }
.fc-badge-rule  { background: rgba(240,179,82,0.18);  color: #e9c07a; border-color: rgba(240,179,82,0.4); }
.fc-badge-valid { background: rgba(122,222,167,0.16); color: #84d6a4; border-color: rgba(122,222,167,0.4); }
.fc-badge-calc  { background: rgba(63,217,155,0.16);  color: #5fd6b0; border-color: rgba(63,217,155,0.4); font-style: italic; }
.fc-badge-src   { background: rgba(181,156,255,0.16); color: #b59cff; border-color: rgba(181,156,255,0.4); }
.fc-badge-cond  { background: rgba(160,160,180,0.16); color: #b6b6c8; border-color: rgba(160,160,180,0.4); }
.fc-badge:hover { filter: brightness(1.25); }

/* Read-only field inspector (right-click a field / the ⓘ button on the form editor) */
.fc-inspect-backdrop {
    position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,0.45);
    display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow-y: auto;
}
.fc-inspect {
    width: min(540px, 100%); background: #141823; border: 1px solid var(--border);
    border-radius: 12px; padding: 1rem 1.2rem; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.7);
}
.fc-inspect-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.fc-inspect-key { font-size: 0.78rem; color: #8aa0c6; margin-left: 0.5rem; }
.fc-inspect-sub { font-size: 0.8rem; margin: 0.2rem 0 0.6rem; }
.fc-inspect-h { font-size: 0.82rem; color: #9db8ef; margin: 0.9rem 0 0.3rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.fc-inspect-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; font-size: 0.85rem; margin: 0; }
.fc-inspect-dl dt { color: #8aa0c6; }
.fc-inspect-line { font-size: 0.85rem; margin: 0.2rem 0; }
.fc-inspect-preview { margin: 0.4rem 0; }
.fc-inspect-opts {
    list-style: none; padding: 0.4rem 0.6rem; margin: 0.35rem 0 0;
    max-height: 220px; overflow: auto;
    background: rgba(110, 168, 255, 0.06);
    border: 1px solid rgba(110, 168, 255, 0.18); border-radius: 8px;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.fc-inspect-opts li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
    font-size: 0.82rem; padding: 0.12rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fc-inspect-opts li:last-child { border-bottom: none; }
.fc-opt-label { color: #e6ecf7; }
.fc-opt-val { color: #8aa0c6; font-size: 0.74rem; white-space: nowrap; }

/* /admin/assets — asset catalogue management */
.aa-count { margin-left: auto; font-size: 0.82rem; }
.aa-editor { margin: 0.8rem 0; }
.aa-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem 0.9rem; }
.aa-check { display: flex; align-items: center; gap: 0.4rem; }
.aa-check input { width: auto; }
.aa-synced { font-size: 0.8rem; margin: 0.5rem 0 0; }
.aa-actions { white-space: nowrap; display: flex; gap: 0.3rem; }
.aa-del { color: #ff8a8a; }
.aa-src { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0.04rem 0.45rem; border-radius: 4px; }
.aa-src-provider { background: rgba(125, 216, 212, 0.16); color: #7fd8d4; border: 1px solid rgba(125, 216, 212, 0.3); }
.aa-src-local { background: rgba(255, 255, 255, 0.06); color: #9fb0cc; border: 1px solid rgba(255, 255, 255, 0.12); }

/* Asset options sub-editor (shared component, used on /assets + /admin/assets) */
.asset-options-editor { margin: 0.6rem 0 0.2rem; }
.aoe-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.35rem; }
.aoe-empty { font-size: 0.85rem; margin: 0.2rem 0 0.5rem; }
.aoe-table { width: 100%; }
.aoe-table td, .aoe-table th { vertical-align: middle; }
.aoe-table th.aoe-fac, .aoe-table td.aoe-fac { text-align: center; width: 4.5rem; }
.aoe-table td.aoe-fac input { width: auto; margin: 0 auto; display: block; }
.aoe-code { max-width: 7rem; }
.aoe-price { max-width: 8rem; text-align: right; }
.aoe-add { margin-top: 0.4rem; }

.fc-inspect-rules { list-style: none; padding: 0; margin: 0.2rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fc-inspect-rules li { font-size: 0.85rem; border-left: 2px solid var(--border); padding-left: 0.6rem; }
.fc-rule-sev { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0.02rem 0.4rem; border-radius: 4px; margin-right: 0.4rem; }
.fc-rule-error { background: rgba(224,83,58,0.16); color: #f0997b; }
.fc-rule-warning { background: rgba(240,179,82,0.16); color: #e9c07a; }

.form-edit-field {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0.45rem;
    padding: 0.5rem 0.55rem;
    background: rgba(255,255,255,0.015);
    cursor: pointer;   /* click the row to edit its properties in the side panel */
}
.form-edit-field.selected {
    border-color: rgba(91, 162, 255, 0.75);
    background: rgba(91, 162, 255, 0.08);
}
/* Inputs inside a field row shouldn't show the row's "pointer" — they're text-editable. */
.form-edit-field .auth-input, .form-edit-field .form-edit-check { cursor: auto; }

/* Property inspector panel (inside the shared SidePanel) */
.fc-props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.7rem; }
.fc-props-grid > label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; }
.fc-props-grid > label > span { color: var(--muted); }
.fc-props-grid .form-edit-check { flex-direction: row; align-items: center; gap: 0.4rem; }
.fc-props-wide { grid-column: 1 / -1; }
/* section inspector: intro note + accent colour picker row */
.fc-props-note { grid-column: 1 / -1; margin: 0 0 0.1rem; line-height: 1.45; }
.fc-accent-row { display: flex; align-items: center; gap: 0.4rem; }
.fc-accent-row .auth-input { flex: 1; min-width: 0; }
.fc-accent-swatch { width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; flex: none; }
.fc-props-source { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.3rem; }
.fc-props-source > span { font-size: 0.8rem; }
/* read-only Integrations preview (form editor left panel) */
.fc-intg { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; }
.fc-intg-head { display: flex; align-items: baseline; gap: 0.5rem; }
.fc-intg-code { font-weight: 600; font-family: var(--mono, monospace); }
.fc-intg-fires { color: var(--muted); font-size: 0.78rem; }
.fc-intg-line { font-size: 0.78rem; margin-top: 0.2rem; }
.fc-intg-line.out { color: #9cc4ff; }
.fc-intg-line.in { color: #8fd9a8; }
.fc-intg-line.muted { color: var(--muted); }
.fc-intg-foot { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.fc-props-conn { border-top: 1px solid var(--border); padding-top: 0.6rem; }
.fc-props-conn h4 { margin: 0 0 0.4rem; }
.fc-conn-line { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.82rem; margin: 0.2rem 0; }
.fc-conn-maps { list-style: none; margin: 0.1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.fc-conn-maps li { font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.fc-badge-tx { background: rgba(255,176,80,0.16); color: #ffcf8f; border: 1px solid rgba(255,176,80,0.4); border-radius: 4px; font-size: 0.66rem; padding: 0.02rem 0.35rem; }
/* One row per field: grip · key · label · kind · req · badges · tools. The template MUST match the
   seven children — the grip in a flexible track once left a huge dead column (and wrapped the tools
   onto a second line), which read as a big empty box on every field row.
   Wrapping keys on the CARD's own width (container query), not the viewport: the same rows render
   inside the ~570px resizable side-panel config column, where a viewport breakpoint never fires and
   the single-row template overflowed out the side. */
.form-edit-field { container-type: inline-size; }
.form-edit-field-row {
    display: grid;
    grid-template-columns: auto minmax(110px, 1fr) minmax(110px, 1.4fr) minmax(100px, auto) auto auto auto;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.85rem;
}
@container (max-width: 640px) {
    /* Narrow card (side-panel column, small screens): badges + tools wrap under the inputs
       instead of squeezing them out of the card. */
    .form-edit-field-row { grid-template-columns: auto minmax(90px, 1fr) minmax(90px, 1.4fr) minmax(90px, auto) auto; }
    .form-edit-field-row .fc-badges { grid-column: 2; justify-self: start; }
    .form-edit-field-row .form-edit-field-tools { grid-column: 3 / -1; justify-self: start; }
}
.form-edit-field-tools { display: flex; gap: 0.25rem; }
/* Row tools as compact circles — one visual family with the round status badges beside them. */
.form-edit-field-tools .lp-btn.sm {
    width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; line-height: 1;
}
.form-edit-field-advanced { margin-top: 0.45rem; }
.form-edit-field-advanced > summary { font-size: 0.78rem; cursor: pointer; }
.form-edit-field-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 0.45rem;
    margin-top: 0.5rem;
}
.form-edit-field-advanced-grid label { display: flex; flex-direction: column; gap: 0.18rem; font-size: 0.8rem; }
.form-edit-field-advanced-grid label > span { color: var(--muted); }

.form-edit-options { margin-top: 0.55rem; padding: 0.45rem 0.55rem; border: 1px dashed rgba(255,255,255,0.1); border-radius: 0.4rem; }
.form-edit-option-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(140px, 1.6fr) auto; gap: 0.4rem; margin-bottom: 0.3rem; }

.form-edit-json-advanced { margin-top: 0.75rem; }
.form-edit-json-advanced > summary { font-size: 0.85rem; cursor: pointer; padding: 0.35rem 0; }

@media (max-width: 980px) {
    .form-edit-layout { gap: 0.85rem; }
    .form-edit-preview-panel { padding: 0.85rem 1rem; }
}

/* =============================================================================
   Floating AI assistant launcher + slide-out panel
   ========================================================================== */

/* Animatable CSS custom property — the only way to animate a conic-gradient
   angle (transform: rotate would also spin the icon inside). */
@property --ai-spin {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Launcher wrapper — fixed-positioned just below the topbar, right-aligned
   with the page-content gutter (.shell padding is 2rem). The orb sits in
   the page frame, not the chrome, and visually caps the right end of the
   journey strip on Quote/Application pages. */
.ai-asst-launcher {
    position: fixed;
    /* Sits just below the topbar on the right edge. `--banner-offset` (0 normally,
       the impersonation bar's height while operating-as) pushes it further down so it
       never overlaps the Sign-out button when a banner shifts the topbar down. */
    top: calc(var(--banner-offset, 0rem) + 3rem + 10px);
    right: calc(2rem - 20px);
    z-index: 80;
    display: inline-flex;
    align-items: center;
}
/* When the drawer is open, hide the orb — the drawer's own header carries
   close. Leaving it visible double-stacks the affordance. */
.ai-asst-launcher.open { display: none; }

/* The orb itself. The 2px spinning conic-gradient ring (StarBorder pattern)
   reads as "AI is alive" — replaces the previous shadow-pulse. */
.ai-bubble {
    position: relative;
    isolation: isolate;
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease;
}
.ai-bubble:hover { transform: scale(1.1); }

/* Rotating conic-gradient ring — sits BEHIND the bubble, poking 2px out on
   every side. The ::after inner face covers the centre of this gradient,
   leaving only the 2px ring visible. */
.ai-bubble::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(from var(--ai-spin),
        #6ea8ff, #7fd8d4, #c79bff, #ff8a4c, #6ea8ff);
    animation: ai-bubble-spin 4s linear infinite;
    z-index: -2;
    filter: drop-shadow(0 0 6px rgba(199, 155, 255, 0.45));
}

/* Inner dark face — opaque enough to fully cover the spinning ring's centre. */
.ai-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(199, 155, 255, 0.35), rgba(35, 22, 60, 0.95) 70%),
        rgba(18, 22, 35, 0.95);
    z-index: -1;
}

@keyframes ai-bubble-spin {
    to { --ai-spin: 360deg; }
}

/* ===== Right-side docked drawer ===== */
.ai-asst-drawer {
    position: fixed;
    /* Drop below any stacked top banner (the impersonation bar publishes --banner-offset on
       .app-shell--impersonating) so the drawer's header + pin button aren't hidden under it. */
    top: var(--banner-offset, 0);
    right: 0;
    bottom: 0;
    /* Width driven by --ai-drawer-w (set by aeon.initAiResize / restoreAiDrawerWidth).
       Defaults to 440px. max-width keeps it sane on narrow viewports. */
    width: var(--ai-drawer-w, 440px);
    max-width: 92vw;
    /* Translucent dark glass — matches the orb's treatment so the two surfaces
       feel like one connected control. */
    background: rgba(20, 24, 35, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* Only the dark directional shadow lives on the drawer itself (floats its left edge over
       the page). The blue glow is drawn by ::after (below) so it reads equally on all four
       edges — an inset shadow placed here was painted over by the child surfaces (header /
       stream / input), which is why it only ever showed on the left. */
    box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.8);
    /* Off-screen by default; slides in on .open. */
    transform: translateX(106%);
    transition: transform 240ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
    z-index: 90;
    display: flex;
    flex-direction: column;
    color: var(--fg);
    /* Rounded ONLY on the left: the right edge is docked flush to the viewport, so a right-side
       radius would curve away from the screen edge and read as clipped corners. overflow:hidden
       makes the children (header gradient, scroll surfaces) follow the left rounding instead of
       poking square corners past it. */
    border-radius: 14px 0 0 14px;
    overflow: hidden;
}
.ai-asst-drawer.open { transform: translateX(0); }

/* Blue glow overlay — an absolutely-positioned layer painted ON TOP of the drawer's content
   (it's the last-painted child), so the border + inset halo frame the panel evenly on top,
   right AND bottom, not just the left. pointer-events:none keeps it inert so the chat stays
   clickable. The docked edges sit on the viewport boundary, so an OUTWARD halo can't show —
   this inset-on-overlay approach is what makes all four sides read the same. */
.ai-asst-drawer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    border-radius: inherit;   /* follow the drawer's left rounding so the frame hugs the corners */
    border: 1px solid rgba(91, 162, 255, 1);
    box-shadow: inset 0 0 0 1px rgba(91, 162, 255, 0.29),
                inset 0 0 16px 0 rgba(91, 162, 255, 0.36),
                inset 0 0 44px 4px rgba(91, 162, 255, 0.21);
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

/* AI working — the blue frame brightens + pulses. Respects reduced-motion (steady strong halo). */
.ai-asst-drawer.ai-busy::after {
    border-color: rgba(130, 188, 255, 1);
    animation: ai-drawer-glow 1.6s ease-in-out infinite;
}
@keyframes ai-drawer-glow {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(91, 162, 255, 0.29), inset 0 0 22px 0 rgba(91, 162, 255, 0.29); }
    50%      { box-shadow: inset 0 0 0 1px rgba(91, 162, 255, 0.46), inset 0 0 52px 6px rgba(91, 162, 255, 0.46); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-asst-drawer.ai-busy::after {
        animation: none;
        box-shadow: inset 0 0 0 1px rgba(91, 162, 255, 0.43), inset 0 0 40px 2px rgba(91, 162, 255, 0.38);
    }
}

/* ===== Screenshot paste/drop zone in the AI panel (form-builder vision flow) ===== */
.ai-paste {
    /* Match the 1rem horizontal padding of .ai-stream / .ai-input-row so the zone + caution
       align with the input box and clear the drawer's edge border + inset glow (otherwise the
       caption sits flush-left under the glow and its first characters look clipped). */
    padding: 0 1rem;
    margin: 0 0 0.6rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.ai-paste-zone {
    border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    padding: 0.75rem 0.85rem;
    text-align: center;
    font-size: 0.82rem; color: var(--muted);
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
    outline: none;
}
.ai-paste-zone:focus-visible { border-color: var(--accent-2); }
.ai-paste-zone.attachments-zone-hover {
    border-color: var(--accent-2);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--fg);
}
.ai-paste-zone strong { color: var(--fg); }
.ai-paste-caution { font-size: 0.72rem; color: var(--muted); margin: 0; }
.ai-paste-thumbs { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ai-paste-thumb {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border);
    background: #0c0f18;
}
.ai-paste-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-paste-thumb-x {
    position: absolute; top: 1px; right: 1px;
    width: 16px; height: 16px; line-height: 14px;
    border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.65); color: #fff;
    font-size: 0.7rem; cursor: pointer; padding: 0;
}
.ai-paste-status { font-size: 0.78rem; margin: 0; }

/* Monospace + vertical-resize for structured/markdown text areas (AI guidance, YAML). */
.mono { font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; }
textarea.auth-input { resize: vertical; }
.aig-edit-row > td { padding-top: 0.5rem; }

/* AI guidance — phase accordion × perspective grid. */
.aig-scopebar { display: flex; align-items: flex-end; gap: 1rem; margin: 1.25rem 0 1rem; flex-wrap: wrap; }
.aig-scopebar .fld { min-width: 320px; }
.aig-phase { padding: 0; margin-top: 0.6rem; overflow: hidden; }
.aig-phase-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; cursor: pointer; user-select: none; }
.aig-phase-head:hover { background: rgba(140, 150, 170, 0.06); }
.aig-phase-head .spacer { flex: 1; }
.aig-phase-sub { font-size: 0.85rem; }
.aig-count { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 4px;
    background: rgba(140, 150, 170, 0.16); color: var(--muted, #8a93a6); }
.aig-count.aig-count-on { background: rgba(91, 162, 255, 0.18); color: #5ba2ff; }
.aig-phase-body { padding: 0.2rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.9rem;
    border-top: 1px solid rgba(140, 150, 170, 0.14); }
.aig-persp { display: flex; flex-direction: column; gap: 0.35rem; }
.aig-persp-label { font-size: 0.82rem; font-weight: 600; }

/* Merged-prompt preview panel */
.aig-preview-panel { margin: 0.8rem 0 1rem; padding: 0; }
.aig-preview-summary {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; width: 100%;
    cursor: pointer; user-select: none; border-radius: 8px; text-align: left;
    background: rgba(110, 168, 255, 0.06); border: 1px solid rgba(110, 168, 255, 0.18);
    font-family: inherit; font-size: inherit; color: inherit;
}
.aig-preview-summary:hover { background: rgba(110, 168, 255, 0.11); }
.aig-preview-panel.aig-preview-open .aig-preview-summary { border-radius: 8px 8px 0 0; border-bottom: none; }
.aig-preview-summary .spacer { flex: 1; }
.aig-preview-sub { font-size: 0.82rem; }
.aig-preview-body {
    padding: 1rem; border: 1px solid rgba(110, 168, 255, 0.18);
    border-top: none; border-radius: 0 0 8px 8px;
}
.aig-preview-help { font-size: 0.82rem; margin: 0 0 0.75rem; }
.aig-preview-pre {
    white-space: pre-wrap; word-break: break-word; font-size: 0.78rem;
    max-height: 60vh; overflow-y: auto;
    background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 0.75rem 1rem; margin: 0;
}

/* Market journey definition — architecture foundation + interface library. */
.mj-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.4fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .mj-grid { grid-template-columns: 1fr; } }
.mj-diagram { max-width: 100%; border: 1px solid rgba(140, 150, 170, 0.25); border-radius: 8px; margin-bottom: 0.5rem; }
.mj-iface-table input.auth-input.sm, .mj-iface-table select.auth-input.sm,
.mj-sys-table input.auth-input.sm { padding: 0.25rem 0.45rem; font-size: 0.82rem; width: 100%; }
.mj-iface-table td, .mj-sys-table td { vertical-align: middle; }
/* The interface library is full-width below the grid so each interface has room. */
.mj-iface-panel { margin-top: 1rem; }
.mj-iface-table th:nth-child(2), .mj-iface-table th:nth-child(3) { min-width: 11rem; }
/* Unmatched source/target system → red, prompting the user to fix / alias / add it. */
.mj-unmatched { border-color: #e0533a !important; background: rgba(224, 83, 58, 0.10); }
.mj-unmatched-key { color: #e0805a; font-weight: 600; }
.mj-sys-inherited td { opacity: 0.72; }
.mj-sys-cell { display: flex; align-items: center; gap: 0.25rem; }
.mj-addsys {
    flex: none; width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 5px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 0.9rem;
    border: 1px solid rgba(91, 162, 255, 0.6); background: rgba(91, 162, 255, 0.15); color: #cfe0ff; font-weight: 600;
}
.mj-addsys:hover { background: rgba(91, 162, 255, 0.28); }
.mj-xlink { margin: -0.4rem 0 1rem; font-size: 0.85rem; max-width: 90ch; }
.mj-paste {
    border: 1px dashed rgba(140, 150, 170, 0.35); border-radius: 10px; padding: 0.9rem;
    margin-bottom: 0.6rem; cursor: text; transition: border-color 0.15s, background 0.15s;
    display: flex; flex-direction: column; gap: 0.4rem; min-height: 90px;
    align-items: center; justify-content: center; text-align: center;
}
.mj-paste:focus, .mj-paste:focus-within { outline: none; border-color: rgba(91, 162, 255, 0.8); }
.mj-paste.attachments-zone-hover { border-color: rgba(91, 162, 255, 1); background: rgba(91, 162, 255, 0.08); }
.mj-paste-hint { margin: 0; }
.mj-archived { margin: 0.5rem 0; }
.mj-archived summary { cursor: pointer; font-size: 0.82rem; color: var(--muted, #8a93a6); }
.mj-archived .mj-diagram { margin-top: 0.5rem; }
.mj-build { margin-top: 0.85rem; }
.mj-vision-model { font-size: 0.8rem; margin: 0.45rem 0 0; }
.mj-vision-model code { font-size: 0.78rem; }
.mj-vision-none { color: #e0805a; }
/* Brief highlight when a build drops fresh rows into the library below. */
@keyframes mj-flash { from { box-shadow: 0 0 0 3px rgba(91, 162, 255, 0.55); } to { box-shadow: 0 0 0 0 rgba(91, 162, 255, 0); } }
.mj-flash { animation: mj-flash 1.6s ease-out 1; }

/* Feature-sets active-recording banner */
.fs-active { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; margin: 0.6rem 0 1rem;
    border-left: 3px solid rgba(91, 162, 255, 0.8); }
.fs-active .spacer { flex: 1; }
.fs-active-none { border-left-color: #e0a83a; background: rgba(240, 179, 82, 0.06); }
.mj-import { margin-top: 1rem; }
.mj-import summary { cursor: pointer; font-size: 0.85rem; color: var(--muted, #8a93a6); }

/* Catalogue count tiles (market-journey right panel) */
.mj-catalogue-counts { display: flex; gap: 0.75rem; margin: 0.6rem 0; }
.mj-count-tile {
    flex: 1; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 1rem;
    border: 1px solid var(--border); border-radius: 10px; background: #141823; text-decoration: none;
}
.mj-count-tile:hover { border-color: rgba(91, 162, 255, 0.6); }
.mj-count-n { font-size: 1.6rem; font-weight: 700; color: var(--fg, #e6e9f0); }
.mj-count-l { font-size: 0.85rem; color: #8aa0c6; }

/* Rendered architecture diagram + detail panel */
.mj-render-panel { margin-top: 1rem; }
.mj-render-row { display: flex; gap: 1rem; align-items: stretch; }
@media (max-width: 1000px) { .mj-render-row { flex-direction: column; } }
.mj-diagram-wrap { flex: 1 1 auto; min-width: 0; position: relative; }
.mj-diagram-host {
    height: 62vh; overflow: hidden; border: 1px solid var(--border); border-radius: 10px;
    background: #0f1320; touch-action: none;
    /* Must be the containing block for the absolutely-positioned .er-pan wrapper, or
       overflow:hidden won't clip it and the diagram spills out the sides. */
    position: relative;
}
.mj-zoom { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; display: flex; gap: 0.3rem; }
.mj-zoom .lp-btn { min-width: 2.2rem; }
.mj-detail {
    flex: 0 0 22rem; max-width: 22rem; background: #141823; border: 1px solid var(--border);
    border-radius: 10px; padding: 0.9rem 1rem; overflow: auto; max-height: 70vh;
}
@media (max-width: 1000px) { .mj-detail { flex-basis: auto; max-width: none; } }
.mj-detail-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.mj-detail-head strong { flex: 1; }
.mj-detail-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #8aa0c6; margin: 0.7rem 0 0.2rem; }
.mj-detail-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; margin: 0.3rem 0; font-size: 0.85rem; }
.mj-detail-dl dt { color: #8aa0c6; }
.mj-detail-dl dd { margin: 0; }
.mj-detail-list { margin: 0.2rem 0; padding-left: 1.1rem; font-size: 0.84rem; }
.mj-detail-list li { margin: 0.15rem 0; }
.mj-detail .lp-btn { margin-top: 0.7rem; }

/* Interfaces editor: meta grid + YAML label */
/* Full-width editor: fields flow to fill the row (≈3–4 cols wide, 1 on a phone). */
.mj-iface-editor { width: 100%; }
.mj-iface-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem 1rem; }
.mj-iface-meta-wide { grid-column: 1 / -1; }
/* Stack each field's caption above its control. */
.mj-iface-meta > label:not(.customer-create-check) { display: flex; flex-direction: column; gap: 0.25rem; }
.mj-iface-meta > label > span { font-size: 0.8rem; color: #8aa0c6; }
/* Save / Publish / Close / Delete pinned to the right of the editor header. */
.mj-iface-head-actions { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.mj-rev-view { margin: 0.4rem 0 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.mj-yaml-label { display: block; font-size: 0.85rem; color: #8aa0c6; margin: 0.6rem 0 0.2rem; }
.mj-iface-selected { outline: 2px solid rgba(91, 162, 255, 0.5); }
/* "inherited from the Aeon host blueprint" marker on a Market's lists */
.mj-inherited-badge {
    display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.4rem;
    border-radius: 4px; background: rgba(122, 167, 255, 0.14); color: #9db8ef;
    border: 1px solid rgba(122, 167, 255, 0.35); white-space: nowrap;
}
.mj-ws-badge { display: inline-block; margin-left: 0.4rem; font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 4px; white-space: nowrap; background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--border); }
.mj-inherited-note { font-size: 0.82rem; color: #8aa0c6; margin: 0.2rem 0 0.6rem; }
/* "defined for this market only" tag, paired with .mj-inherited-badge in the Source column */
.mj-src-market {
    display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.4rem;
    border-radius: 4px; background: rgba(122, 222, 167, 0.13); color: #84d6a4;
    border: 1px solid rgba(122, 222, 167, 0.32); white-space: nowrap;
}
/* Systems table gained hosting/tenancy/tech-stack columns — let it scroll sideways rather than squash. */
.mj-sys-scroll { overflow-x: auto; }
.mj-sys-scroll .mj-sys-table { min-width: 1000px; }

/* Form ↔ API mapping page: interfaces (drag sources) | read-only form (drop targets) */
.fm-pane { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
@media (max-width: 1000px) { .fm-pane { flex-direction: column; } }
/* Each pane scrolls independently so a long form (right) doesn't drag the API list (left) with it. */
.fm-apis, .fm-form { max-height: calc(100vh - 13rem); overflow-y: auto; }
.fm-apis { flex: 0 0 340px; max-width: 340px; border: 1px solid var(--border); border-radius: 12px; background: #141823; padding: 0.8rem 0.9rem; }
@media (max-width: 1000px) { .fm-apis { flex-basis: auto; max-width: none; width: 100%; max-height: 42vh; } }
.fm-apis-head, .fm-form-head { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.6rem; }
.fm-api-select { width: 100%; margin-bottom: 0.5rem; }
.fm-chip.used { opacity: 0.5; }
.fm-trigger { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.4rem; }
.fm-trigger-head { font-weight: 600; font-size: 0.85rem; }
.fm-trigger-fields { display: flex; flex-direction: column; gap: 0.2rem; max-height: 11rem; overflow-y: auto; }
.fm-trigger-opt { font-size: 0.85rem; }
.fm-note { font-size: 0.8rem; margin: 0.2rem 0; }
.fm-api-card { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; margin-bottom: 0.6rem; background: rgba(255,255,255,0.015); }

/* Code snippets JavaScript sandbox */
.cs-bar { display: flex; align-items: flex-end; gap: 0.75rem; margin: 0.6rem 0 1rem; flex-wrap: wrap; }
.cs-elapsed { font-size: 0.82rem; align-self: center; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-col { display: flex; flex-direction: column; gap: 0.3rem; }
.cs-label { font-size: 0.78rem; color: #8aa0c6; margin-top: 0.4rem; }
.cs-code { min-height: 22rem; white-space: pre; overflow: auto; font-size: 0.82rem; line-height: 1.5; }
.cs-ctx { min-height: 8rem; white-space: pre; overflow: auto; font-size: 0.82rem; line-height: 1.5; }
.cs-out {
    background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.6rem 0.8rem; font-family: ui-monospace, monospace; font-size: 0.8rem; line-height: 1.45;
    white-space: pre-wrap; overflow: auto; max-height: 22rem; margin: 0;
}
.cs-err { color: #f0997b; }

/* Computed fields admin (/admin/computed-fields) */
.cf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .cf-grid { grid-template-columns: 1fr; } }
.cf-list-head { display: flex; justify-content: space-between; align-items: center; }
.cf-table { width: 100%; }
.cf-table code { font-size: 0.82rem; }
.cf-row-active { outline: 1px solid var(--accent, #5b8def); }
.cf-row-actions { white-space: nowrap; text-align: right; }
.cf-form { display: flex; flex-direction: column; gap: 0.7rem; }
.cf-form-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.cf-form-row .fld { flex: 1; min-width: 7rem; }
.fld.chk { flex-direction: row; align-items: center; gap: 0.4rem; align-self: end; }
.cf-formula { min-height: 9rem; white-space: pre; overflow: auto; font-size: 0.82rem; line-height: 1.5; }
.cf-actions { display: flex; gap: 0.6rem; align-items: center; }
.cf-preview { margin-top: 1.4rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
.cf-label { display: block; font-size: 0.78rem; color: #8aa0c6; margin-top: 0.6rem; }
.cf-out {
    background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.6rem 0.8rem; font-family: ui-monospace, monospace; font-size: 0.8rem; line-height: 1.45;
    white-space: pre-wrap; overflow: auto; max-height: 16rem; margin: 0.2rem 0 0;
}
.cf-err { color: #f0997b; }

/* Interface "Test call" result line */
.mj-test-status { font-size: 0.82rem; margin: 0.5rem 0 0.3rem; font-weight: 600; }
.mj-test-status.ok { color: #7bd88f; }
.mj-test-status.bad { color: #f0997b; }

/* Form action button (FieldKind.Button) + interface-trigger status line */
.form-field-button { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.form-trigger-status { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.6rem; }
.form-trigger-status.ok { color: #7bd88f; }
.form-trigger-status.bad { color: #f0997b; }
.fm-api-card-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.fm-api-name { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fm-chip {
    font-size: 0.76rem; padding: 0.15rem 0.5rem; border-radius: 4px; cursor: grab; user-select: none;
    border: 1px solid rgba(122,167,255,0.4); background: rgba(122,167,255,0.12); color: #cfe0ff;
}
.fm-chip:hover { border-color: rgba(122,167,255,0.8); }
.fm-chip.on { background: rgba(91,162,255,0.3); border-color: rgba(91,162,255,0.95); }
.fm-form { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: #141823; padding: 0.8rem 1rem; }
.fm-section { margin-bottom: 0.8rem; }
.fm-section-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #8aa0c6; margin: 0.4rem 0 0.3rem; }
.fm-field {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
    border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.6rem; margin: 0.3rem 0; cursor: pointer;
}
.fm-field.droppable { border-style: dashed; border-color: rgba(91,162,255,0.6); }
.fm-field.droppable:hover { background: rgba(91,162,255,0.10); }
.fm-field.mapped { border-color: rgba(91,162,255,0.45); background: rgba(91,162,255,0.06); }
.fm-field-main { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.fm-field-label { font-size: 0.88rem; }
.fm-field-key { font-size: 0.74rem; }
.fm-field-src {
    display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem;
    background: rgba(91,162,255,0.16); color: #cfe0ff; border: 1px solid rgba(91,162,255,0.4);
    border-radius: 4px; padding: 0.1rem 0.5rem;
}
.fm-unmap { border: 0; background: none; color: #cfe0ff; cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0; }
.fm-unmap:hover { color: #fff; }

/* Interface versioning: badge, publish row, history list */
.mj-ver-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.4rem;
    border-radius: 4px; background: rgba(91, 162, 255, 0.16); color: #cfe0ff; border: 1px solid rgba(91, 162, 255, 0.4);
}
.mj-ver-dirty { font-size: 0.78rem; color: #e0a83a; }
.mj-iface-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.85rem; }
.mj-note-input { width: 18rem; max-width: 100%; }
.mj-history { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.7rem; }
.mj-history-h { margin: 0 0 0.5rem; font-size: 0.85rem; color: #8aa0c6; }
.mj-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mj-history-list li { padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.015); }
.mj-history-list li.on { border-color: rgba(91, 162, 255, 0.6); background: rgba(91, 162, 255, 0.08); }
.mj-history-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.82rem; }
.mj-history-actions { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.mj-history-note { font-size: 0.8rem; color: var(--fg); margin-top: 0.25rem; }

/* Generate-from-samples block in the interface editor */
.mj-gen { margin: 0.8rem 0; border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem; background: rgba(255,255,255,0.015); }
.mj-gen summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; padding: 0.15rem 0; }
.mj-gen[open] summary { margin-bottom: 0.5rem; }
.mj-gen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 0.5rem 0; }
@media (max-width: 700px) { .mj-gen-grid { grid-template-columns: 1fr; } }
.mj-gen-ta { min-height: 8rem; font-size: 0.78rem; line-height: 1.45; white-space: pre; overflow: auto; width: 100%; }
/* scripted mock scenario */
.mj-script-ta { min-height: 16rem; resize: vertical; font-size: 0.8rem; line-height: 1.5; white-space: pre; overflow: auto; width: 100%; tab-size: 2; }
/* script studio — full-screen split editor */
.mj-studio-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 70; }
.mj-studio { position: fixed; inset: 3vh 3vw; z-index: 71; display: flex; flex-direction: column; background: var(--panel, #15171c); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; }
.mj-studio-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); }
.mj-studio-head .spacer { flex: 1; }
.mj-studio-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; padding: 0.8rem 0.9rem; min-height: 0; }
.mj-studio-pane { display: flex; flex-direction: column; gap: 0.35rem; min-height: 0; }
.mj-studio-pane label { font-size: 0.72rem; }
.mj-studio-ta { flex: 1; resize: none; font-size: 0.82rem; line-height: 1.5; white-space: pre; overflow: auto; width: 100%; tab-size: 2; min-height: 0; }
.mj-studio-out { flex: 1; margin: 0; padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); font-size: 0.8rem; overflow: auto; white-space: pre-wrap; min-height: 0; }
.mj-studio-out.err { border-color: rgba(248,113,113,0.5); color: #f8a4a4; }
.mj-studio-yaml { margin: 0; padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); color: var(--muted); font-size: 0.74rem; max-height: 40%; overflow: auto; white-space: pre; }
.mj-studio-foot { padding: 0.4rem 0.9rem 0.7rem; margin: 0; font-size: 0.7rem; border-top: 1px solid var(--border); }
.mj-studio-pane { overflow: auto; }
.mj-studio-palettes { display: flex; flex-direction: column; gap: 0.4rem; }
.mj-pal { border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.5rem; }
.mj-pal-h { font-size: 0.72rem; color: var(--muted); cursor: default; }
details.mj-pal > summary.mj-pal-h { cursor: pointer; }
.mj-pal-row { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.mj-pal-grp { margin-top: 0.35rem; }
.mj-studio-ai { border: 1px solid rgba(91,162,255,0.3); border-radius: 8px; padding: 0.5rem 0.6rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; background: rgba(91,162,255,0.05); }
.mj-ai-instruction { min-height: 2.6rem; resize: vertical; font-size: 0.8rem; width: 100%; }
.mj-ai-prompt { min-height: 7rem; resize: vertical; font-size: 0.74rem; line-height: 1.45; white-space: pre-wrap; width: 100%; }
.mj-studio-yaml-wrap { margin-top: 0.5rem; }
.mj-studio-yaml-wrap > summary { cursor: pointer; }
.mj-script-toggle { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.mj-script-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.mj-script-out { margin-top: 0.4rem; padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); font-size: 0.74rem; max-height: 14rem; overflow: auto; white-space: pre-wrap; }
.mj-script-out.err { border-color: rgba(248,113,113,0.5); color: #f8a4a4; }
/* Test-call request header: caption left, "Sample request" button right */
.mj-test-reqhead { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0.3rem; }
.mj-field-label { font-size: 0.8rem; color: #8aa0c6; }
.mj-iface-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }

/* ---- Interface Parameters view (per-field documentation notes) ---- */
.mj-param-scroll { overflow-x: auto; border: 1px solid var(--border, #2c3242); border-radius: 8px; }
.mj-param-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.mj-param-table th {
    text-align: left; font-weight: 600; color: var(--muted, #8a93a6);
    padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border, #2c3242);
    position: sticky; top: 0; background: var(--panel, #171b26); z-index: 1; white-space: nowrap;
}
.mj-param-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: top; }
.mj-param-blockrow td {
    font-weight: 700; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: #7aa2ff; background: rgba(120,150,255,0.06); padding-top: 0.5rem; padding-bottom: 0.35rem;
}
.mj-param-branch .mj-param-key { color: var(--muted, #8a93a6); font-weight: 600; }
.mj-param-key { font-family: var(--mono, ui-monospace, monospace); font-size: 0.8rem; }
.mj-param-arr { color: #e0a83a; font-size: 0.7rem; margin-left: 0.25rem; }
.mj-param-type { font-family: var(--mono, ui-monospace, monospace); color: #5dd39e; white-space: nowrap; }
.mj-param-reqcell { text-align: center; }
.mj-param-req { color: #e0663a; font-size: 0.7rem; }
.mj-param-sdm code { font-size: 0.72rem; color: #c792ea; }
.mj-sdm-tag { font-size: 0.72rem; margin-left: 0.25rem; }
.mj-sdm-explicit { color: #7aa2ff; }
.mj-sdm-conv { color: #8a93a6; }
.mj-sdm-formula { font-size: 0.72rem; color: #5dd39e; font-family: var(--mono, ui-monospace, monospace); }
.mj-param-notecell { width: 40%; min-width: 16rem; }
.mj-param-note {
    width: 100%; min-height: 1.9rem; resize: vertical; font-size: 0.78rem; line-height: 1.35;
    padding: 0.3rem 0.45rem; border: 1px solid var(--border, #2c3242); border-radius: 6px;
    background: rgba(255,255,255,0.02); color: inherit; font-family: inherit;
}
.mj-param-note:focus { outline: none; border-color: #7aa2ff; background: rgba(120,150,255,0.05); }
.mj-param-audit { font-size: 0.68rem; color: var(--muted, #8a93a6); margin-top: 0.2rem; }
.mj-param-fromyaml { font-size: 0.7rem; color: #8a93a6; margin-top: 0.2rem; font-style: italic; }
.mj-param-orphans {
    margin-top: 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid #6b531a;
    border-radius: 8px; background: rgba(240, 179, 82, 0.06);
}
.mj-param-orphans ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; }
.mj-param-orphans li { margin: 0.2rem 0; }
.mj-param-orphans code { color: #e0a83a; }
.lp-btn.xs { padding: 0.05rem 0.35rem; font-size: 0.7rem; }
.xs { font-size: 0.72rem; }

/* ---- Forms journey view (/admin/forms, 🧭 Journey) ----
   One column per journey step in canonical order; the miniatures (shared FormMiniature,
   bb-* styles below) stack vertically when several forms resolve for the same step. */
.fj-toggle { display: flex; gap: 0.35rem; }
.fj-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 1.1rem;
    align-items: start; margin-top: 0.75rem; padding-bottom: 0.75rem; overflow-x: auto;
    text-align: left;
}
.fj-col { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.fj-col-head {
    display: flex; align-items: baseline; gap: 0.45rem; font-weight: 700; font-size: 0.92rem;
    padding-bottom: 0.4rem; border-bottom: 2px solid var(--ph, var(--border));
}
.fj-col-head .fj-dot {
    width: 10px; height: 10px; border-radius: 50%; background: var(--ph, #888);
    align-self: center; flex: none;
}
.fj-col-head .fj-sub { font-weight: 400; color: var(--muted); font-size: 0.74rem; }
.fj-col-head .fj-count { margin-left: auto; font-weight: 400; font-size: 0.78rem; }
.fj-empty {
    border: 1px dashed var(--border); border-radius: 12px; padding: 1.1rem 0.9rem;
    color: var(--muted); font-size: 0.8rem; text-align: center;
}
.fj-off { opacity: 0.5; }

/* ---- Blueprint board (/admin/blueprint/board) ---- */
.bb-host {
    position: relative; display: grid; grid-template-columns: 1.25fr 0.95fr 1.05fr; gap: 3.4rem;
    align-items: start; margin-top: 1rem;
}
@media (max-width: 1100px) { .bb-host { grid-template-columns: 1fr; gap: 1rem; } .bb-svg { display: none; } }
.bb-svg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bb-svg path { pointer-events: stroke; transition: opacity 0.15s; }
.bb-host.bb-focus .bb-svg path.bb-agg { opacity: 0.06 !important; }
.bb-lane { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.bb-lane-title { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em; }
.bb-lane-forms .bb-lane-title { color: #3fd99b; }
.bb-lane-sdm .bb-lane-title { color: #a779ff; }
.bb-lane-ifaces .bb-lane-title { color: #7aa7ff; }

.bb-card {
    border: 1px solid var(--border, #2c3242); border-radius: 12px; padding: 0.9rem 1rem;
    background: rgba(255,255,255,0.015); transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bb-form   { border-color: #234436; background: rgba(63,217,155,0.03); }
.bb-entity { border-color: #3a2c55; background: rgba(167,121,255,0.03); }
.bb-iface  { border-color: #24344f; background: rgba(122,167,255,0.03); }
.bb-owned  { border-style: dashed; border-width: 1.5px; }
.bb-dim    { opacity: 0.55; }
.bb-host.bb-focus .bb-card:not(.bb-card-hl) { opacity: 0.25; }
.bb-card-hl { opacity: 1 !important; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.25); }

.bb-card-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; cursor: default; }
.bb-title { font-weight: 700; font-size: 0.95rem; color: inherit; text-decoration: none; min-width: 0; }
.bb-title:hover { text-decoration: underline; }
.bb-code { font-family: var(--mono, ui-monospace, monospace); color: #7aa7ff; }
.bb-badges { margin-left: auto; display: flex; gap: 0.3rem; flex: none; }
.bb-badge { font-size: 0.7rem; padding: 0.06rem 0.34rem; border: 1px solid var(--border, #2c3242); border-radius: 99px; color: var(--muted, #8a93a6); white-space: nowrap; }
.bb-owned-badge { color: #f6c453; border-color: #6b531a; }
.bb-card-foot { font-size: 0.74rem; margin-top: 0.55rem; }

/* journey strip */
.bb-journey { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.bb-ws { font-size: 0.66rem; font-weight: 700; color: #9adbbb; text-transform: uppercase; letter-spacing: 0.05em; }
.bb-phases { display: inline-flex; gap: 2px; }
.bb-phase {
    font-size: 0.64rem; padding: 0.14rem 0.4rem; border-radius: 3px; color: #566074;
    background: rgba(255,255,255,0.04); white-space: nowrap;
}
.bb-phase.on  { background: var(--ph); color: #0b0e14; font-weight: 700; }
.bb-phase.any { background: color-mix(in srgb, var(--ph) 28%, transparent); color: #c7d0e0; }
.bb-anyphase, .bb-pin { font-size: 0.62rem; color: var(--muted, #8a93a6); border: 1px dashed var(--border, #2c3242); border-radius: 99px; padding: 0.04rem 0.34rem; }

/* mini form */
.bb-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border, #2c3242); padding-bottom: 0.3rem; }
.bb-tab { font-size: 0.62rem; padding: 0.12rem 0.5rem; border: 1px solid var(--border, #2c3242); border-bottom: none; border-radius: 6px 6px 0 0; color: #9adbbb; background: rgba(63,217,155,0.06); }
.bb-form-body.with-panel { display: grid; grid-template-columns: 1fr 34%; gap: 0.5rem; }
.bb-form-panel { border-left: 1px dashed #234436; padding-left: 0.5rem; }
.bb-sect { margin-bottom: 0.8rem; }
.bb-sect-title { font-size: 0.76rem; font-weight: 700; color: #cdf6e6; margin-bottom: 0.35rem; }
.bb-sect-tab { font-size: 0.58rem; color: var(--muted, #8a93a6); font-weight: 400; margin-left: 0.3rem; }
.bb-fields { display: flex; flex-wrap: wrap; gap: 0.45rem 2%; }
.bb-fld { display: flex; flex-direction: column; gap: 0.12rem; border-radius: 5px; padding: 0.12rem 0.2rem; margin: -0.12rem -0.2rem; }
.bb-w-full { width: 100%; } .bb-w-half { width: 48%; } .bb-w-third { width: 31%; }
.bb-fld.bb-bound { cursor: crosshair; }
.bb-fld.bb-hl, .bb-sdm-row.bb-hl, .bb-chip.bb-hl { background: rgba(255,255,255,0.09); outline: 1px solid rgba(255,255,255,0.28); }
.bb-fld-label { font-size: 0.68rem; color: #8a93a6; display: inline-flex; align-items: center; gap: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-dot { width: 6px; height: 6px; border-radius: 50%; background: #a779ff; flex: none; }
.bb-dot-bad { background: #e0533a; }
.bb-scratch { color: #f6c453; }
.bb-input {
    display: block; height: 1.15rem; border: 1px solid #37405480; border-radius: 4px;
    background: rgba(255,255,255,0.03); font-size: 0.62rem; line-height: 1.1rem; padding: 0 0.3rem; color: #566074;
}
.bb-select i { float: right; font-style: normal; }
.bb-area { height: 2rem; }
.bb-img { height: 1.6rem; text-align: center; line-height: 1.55rem; }
.bb-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: #8a93a6; }
.bb-box { width: 0.7rem; height: 0.7rem; border: 1px solid #374054; border-radius: 3px; flex: none; background: rgba(255,255,255,0.03); }
.bb-radio { display: inline-flex; gap: 0.35rem; }
.bb-radio > span { width: 0.65rem; height: 0.65rem; border: 1px solid #374054; border-radius: 50%; background: rgba(255,255,255,0.03); }
.bb-multi { display: inline-flex; gap: 0.3rem; }
.bb-slider { display: block; height: 3px; border-radius: 2px; background: #374054; position: relative; margin: 0.45rem 0.2rem 0.3rem; }
.bb-knob { position: absolute; left: 38%; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #7aa7ff; }
.bb-output { display: block; font-size: 0.7rem; padding: 0.22rem 0.35rem; border-radius: 5px; background: #10131c; border: 1px solid #374054; color: #7fd8d4; text-align: center; }
.bb-btn { display: inline-block; font-size: 0.68rem; padding: 0.16rem 0.55rem; border-radius: 99px; background: #274b8a; color: #cfe0ff; }
.bb-table { display: flex; flex-direction: column; gap: 2px; }
.bb-table > span { height: 5px; border-radius: 2px; background: rgba(255,255,255,0.06); }
.bb-table > span:first-child { background: rgba(122,167,255,0.25); }
.bb-repeater { display: flex; flex-direction: column; gap: 0.25rem; border: 1px dashed #37405480; border-radius: 6px; padding: 0.3rem; }
.bb-add { font-size: 0.56rem; color: #9adbbb; }
.bb-more { font-size: 0.7rem; color: var(--muted, #8a93a6); background: none; border: none; cursor: pointer; padding: 0.15rem 0; text-align: left; }
.bb-more:hover { color: #e8ecf4; }

/* SDM lane */
.bb-sdm-rows { display: flex; flex-direction: column; }
.bb-sdm-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.26rem 0.35rem; border-radius: 5px; cursor: crosshair; font-size: 0.76rem; }
.bb-sdm-path { color: #ecdcff; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-sdm-meta { display: inline-flex; gap: 0.25rem; align-items: center; flex: none; }
.bb-type { font-size: 0.66rem; color: #566074; }
.bb-use { margin-left: auto; display: inline-flex; gap: 0.35rem; font-size: 0.68rem; flex: none; }
.bb-use-f { color: #3fd99b; } .bb-use-feed { color: #7aa7ff; } .bb-use-fill { color: #ff8a4c; }
.bb-unused { opacity: 0.42; }

/* interfaces lane */
.bb-iface-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.72rem; margin-bottom: 0.4rem; align-items: center; }
.bb-endpoint { font-family: var(--mono, ui-monospace, monospace); font-size: 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bb-chip { font-size: 0.7rem; padding: 0.14rem 0.5rem; border-radius: 99px; border: 1px solid var(--border, #2c3242); color: #a9c4f0; white-space: nowrap; }
.bb-trigger { color: #f6c453; border-color: #6b531a; }
.bb-wires { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; align-items: center; }
.bb-wires-label { font-size: 0.66rem; color: var(--muted, #8a93a6); flex: none; min-width: 4.6rem; }
.bb-wire { font-family: var(--mono, ui-monospace, monospace); cursor: crosshair; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bb-k-explicit { color: #cfe0ff; }
.bb-k-convention { color: #9adbbb; }
.bb-k-formula { color: #7fd8d4; }
.bb-chip-bad { border-color: #6b2a1a; color: #ffd9cf; }
.bb-unglued summary { font-size: 0.72rem; color: var(--muted, #8a93a6); cursor: pointer; margin: 0.3rem 0; }
.bb-unglued .bb-card { margin-top: 0.6rem; }

/* pin lock: clicked paths stay lit until released (Esc / ✕) */
.bb-pinned { outline: 2px solid rgba(246, 196, 83, 0.7) !important; background: rgba(246, 196, 83, 0.10) !important; }
.bb-pinbar {
    position: fixed; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; max-width: min(92vw, 60rem);
    padding: 0.5rem 0.8rem; border-radius: 4px; z-index: 60;
    background: rgba(18, 22, 32, 0.96); border: 1px solid #f6c45366;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.bb-pinbar-icon { font-size: 0.85rem; }
.bb-pinbar-chip {
    font-family: var(--mono, ui-monospace, monospace); font-size: 0.72rem; cursor: pointer;
    padding: 0.18rem 0.55rem; border-radius: 4px; border: 1px solid #6b531a;
    background: rgba(246, 196, 83, 0.12); color: #f6c453;
}
.bb-pinbar-chip:hover { background: rgba(246, 196, 83, 0.24); }
.bb-pinbar-follow, .bb-pinbar-clear {
    font-size: 0.74rem; cursor: pointer; padding: 0.2rem 0.7rem; border-radius: 4px;
    border: 1px solid var(--border, #2c3242); background: rgba(255,255,255,0.05); color: #e8ecf4;
}
.bb-pinbar-follow { border-color: #2f6b50; color: #9adbbb; }
.bb-pinbar-follow:hover { background: rgba(63, 217, 155, 0.15); }
.bb-pinbar-clear:hover { background: rgba(224, 83, 58, 0.15); border-color: #6b2a1a; }

/* follow-the-data: the travelling value + the manipulation flag */
.bb-dot-travel { filter: drop-shadow(0 0 4px rgba(255,255,255,0.8)); pointer-events: none; }
.bb-flag {
    font-size: 13px; fill: #f6c453; font-weight: 700; pointer-events: auto; cursor: help;
    paint-order: stroke; stroke: #0b0e14; stroke-width: 3px;
}

.bp-deeplink { margin: 0.4rem 0 0.6rem; }

/* ---- Runtime field inspector (right-click a control in a live form) ---- */
/* Discoverability hint: a subtle corner mark on any inspectable field, only on hover, so the
   affordance never distracts dealer-facing eyes (the class itself is only rendered for
   Admin/Developer/SolutionArchitect via FormRenderer's EnableFieldInspector). */
.field-inspectable { position: relative; cursor: context-menu; }
.field-inspectable::after {
    content: "⋯"; position: absolute; top: -0.15rem; right: -0.1rem; font-size: 0.7rem;
    color: var(--muted, #8a93a6); opacity: 0; transition: opacity 0.12s; pointer-events: none;
}
.field-inspectable:hover::after { opacity: 0.85; }

.field-inspector-scrim { position: fixed; inset: 0; z-index: 69; background: transparent; }
.field-inspector-pop {
    position: fixed; z-index: 70; width: 19rem; max-width: calc(100vw - 1.5rem);
    border-radius: 12px; padding: 0.75rem 0.85rem; background: rgba(18, 22, 32, 0.98);
    border: 1px solid var(--border, #2c3242); box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    transform: translate(0.6rem, 0.6rem);
}
.field-inspector-head { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.4rem; }
.field-inspector-head strong { font-size: 0.88rem; }
.field-inspector-kind { font-size: 0.68rem; color: var(--muted, #8a93a6); }
.field-inspector-close {
    margin-left: auto; background: none; border: none; color: var(--muted, #8a93a6);
    cursor: pointer; font-size: 0.85rem; padding: 0 0.1rem; line-height: 1;
}
.field-inspector-close:hover { color: #e8ecf4; }
.field-inspector-path {
    display: block; font-size: 0.76rem; color: #ecdcff; word-break: break-all;
    margin-bottom: 0.4rem;
}
.field-inspector-note { font-size: 0.74rem; margin: 0.3rem 0; }
.field-inspector-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.35rem; }
.field-inspector-chip {
    font-size: 0.68rem; padding: 0.14rem 0.5rem; border-radius: 99px;
    border: 1px solid var(--border, #2c3242); color: #a9c4f0; white-space: nowrap;
    background: rgba(255,255,255,0.03); text-decoration: none;
}
.field-inspector-pii { border-color: #6b531a; color: #f6c453; }
.field-inspector-ifaces { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
.field-inspector-iface { color: #7aa7ff; }
.field-inspector-iface:hover { background: rgba(122,167,255,0.12); }
.field-inspector-actions { margin-top: 0.55rem; display: flex; justify-content: flex-end; }

/* ---- Site map (/admin/sitemap) ---- */
.sitemap .lead { max-width: 60ch; }
.sm-stats { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.2rem 0 0.8rem; }
.sm-stat {
    display: flex; flex-direction: column; align-items: center; min-width: 5.5rem;
    padding: 0.55rem 0.9rem; border: 1px solid var(--border, #2c3242); border-radius: 10px;
    background: rgba(120, 150, 255, 0.05);
}
.sm-stat-n { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.sm-stat-l { font-size: 0.72rem; color: var(--muted, #8a93a6); margin-top: 0.25rem; text-align: center; }
.sm-stat-warn { border-color: #6b531a; background: rgba(240, 179, 82, 0.08); }
.sm-stat-ok { border-color: #2f6b50; background: rgba(93, 211, 158, 0.07); }

.sm-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: var(--muted, #8a93a6); margin-bottom: 0.5rem; }
.sm-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.sm-dot-public { background: #7aa2ff; }
.sm-dot-user { background: #5dd39e; }
.sm-dot-admin { background: #c792ea; }
.sm-dot-dep { background: #8a8a8a; }
.sm-edge-key { width: 20px; height: 0; border-top: 2px solid #475073; display: inline-block; }
.sm-edge-key-cross { border-top: 2px dashed #e0a83a; }
.sm-sub { font-size: 0.82rem; margin: 0.1rem 0 0.7rem; max-width: 75ch; }

.sm-diagram {
    overflow-x: auto; margin-bottom: 2rem; padding: 0.4rem 0.2rem 0.8rem;
    border: 1px solid var(--border, #2c3242); border-radius: 12px;
    background: radial-gradient(circle at 30% 20%, rgba(120,150,255,0.05), transparent 60%);
}
.sm-svg { max-width: 100%; height: auto; display: block; }
.sm-edge { stroke: #475073; stroke-width: 1.6; }
.sm-edge-cross { stroke: #e0a83a; stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0.85; }
.sm-nodelink { cursor: pointer; }
.sm-rect { fill: #161b2b; stroke-width: 1.4; transition: fill 0.12s; }
.sm-nodelink:hover .sm-rect { fill: #1f2740; }
.sm-rect-public { stroke: #6f8fe0; }
.sm-rect-user { stroke: #4cae86; }
.sm-rect-admin { stroke: #b07fd8; }
.sm-rect-dep { stroke: #7b7b7b; }
.sm-tab-public { fill: #7aa2ff; }
.sm-tab-user { fill: #5dd39e; }
.sm-tab-admin { fill: #c792ea; }
.sm-tab-dep { fill: #8a8a8a; }
.sm-label { fill: #dbe1f2; font-size: 12px; font-weight: 600; font-family: inherit; pointer-events: none; }

.sm-dups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.8rem; margin-bottom: 1.5rem; }
.sm-dup { border: 1px solid #6b531a; border-radius: 10px; padding: 0.7rem 0.85rem; background: rgba(240, 179, 82, 0.05); }
.sm-ctx { border-color: #2f6b50; background: rgba(93, 211, 158, 0.05); }
.sm-dup-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.sm-dup-count { font-size: 0.74rem; color: var(--muted, #8a93a6); }
.sm-dup-pages { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sm-chip {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem;
    border: 1px solid var(--border, #2c3242); border-radius: 4px; font-size: 0.76rem;
    text-decoration: none; color: var(--fg, #e6e9f0); background: rgba(0,0,0,0.15);
}
.sm-chip:hover { border-color: var(--accent, #5ba2ff); }

.sm-feat {
    display: inline-block; padding: 0.1rem 0.45rem; border-radius: 6px; font-size: 0.72rem;
    background: rgba(120, 150, 255, 0.1); color: #aebde8; border: 1px solid transparent;
}
.sm-feat-dup { background: rgba(240, 179, 82, 0.14); color: #f0c46a; border-color: #6b531a; font-weight: 600; }
.sm-feat-ctx { background: rgba(93, 211, 158, 0.13); color: #8fe3bd; border-color: #2f6b50; font-weight: 600; }
.sm-feat-ctx-label { font-size: 0.72rem; align-self: center; }
.sm-card-feats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }

/* Application-service tags + shared-service section */
.sm-feat-svc { background: rgba(150, 130, 220, 0.12); color: #c3b6ef; border-color: transparent; font-family: var(--mono, monospace); }
.sm-feat-svc-shared { background: rgba(150, 130, 220, 0.2); color: #d6c9ff; border-color: #4a3d75; font-weight: 600; }
.sm-svc { border-color: #4a3d75; background: rgba(150, 130, 220, 0.05); }
.sm-feat-svc.sm-feat { font-weight: 600; }
.sm-svc .sm-feat-svc { font-family: var(--mono, monospace); }

/* AI overlap analysis */
.sm-ai { border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem; background: var(--panel-2, rgba(255,255,255,0.02)); margin-bottom: 1.5rem; }
.sm-ai-row { display: flex; gap: 0.5rem; align-items: center; }
.sm-ai-row > .auth-input { flex: 1 1 auto; min-width: 0; }
.sm-ai-row > .lp-btn { flex: 0 0 auto; white-space: nowrap; }
.sm-ai-suggest { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.sm-chip-btn { cursor: pointer; background: none; }
.sm-ai-err { color: #ffb3b3; font-size: 0.82rem; margin-top: 0.6rem; }
.sm-ai-answer { margin-top: 0.8rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel, #11151c); font-size: 0.9rem; line-height: 1.55; }
.sm-ai-answer :first-child { margin-top: 0; }
.sm-ai-answer :last-child { margin-bottom: 0; }
.sm-ai-answer code { font-family: var(--mono, monospace); background: rgba(255,255,255,0.06); padding: 0.05rem 0.3rem; border-radius: 4px; }
.sm-ai-answer ul { padding-left: 1.2rem; }

.sm-section-h { margin: 1.8rem 0 0.7rem; font-size: 1.15rem; }
.sm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.sm-card {
    border: 1px solid var(--border, #2c3242); border-radius: 12px; padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.015); scroll-margin-top: 1rem;
}
.sm-card-dep { opacity: 0.78; border-style: dashed; }
.sm-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.sm-card-title { font-size: 0.96rem; }
.sm-card-route { font-size: 0.72rem; color: var(--muted, #8a93a6); background: rgba(0,0,0,0.2); padding: 0.05rem 0.4rem; border-radius: 5px; }
.sm-card-open { font-size: 0.72rem; margin-left: auto; color: var(--accent, #5ba2ff); text-decoration: none; }
.sm-card-open:hover { text-decoration: underline; }
.sm-card-summary { font-size: 0.85rem; line-height: 1.5; margin: 0.5rem 0 0.4rem; }
.sm-card-cando { margin: 0; padding-left: 1.1rem; font-size: 0.8rem; color: var(--muted, #8a93a6); line-height: 1.5; }
.sm-card-cando li { margin: 0.1rem 0; }
.sm-card-note { font-size: 0.78rem; color: #e0a83a; margin: 0.5rem 0 0; }
.sitemap-foot { margin-top: 2rem; font-size: 0.78rem; }
.ai-paste-files { display: flex; flex-direction: column; gap: 0.35rem; }
.ai-paste-file {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border); border-radius: 8px;
    background: #0c0f18; font-size: 0.82rem;
}
.ai-paste-file-icon { line-height: 1; }
.ai-paste-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-paste-file .ai-paste-thumb-x { position: static; width: 16px; height: 16px; flex: 0 0 auto; }

/* Drawer is non-blocking: no backdrop, no blur on the page underneath.
   The user can scroll + click anywhere outside the drawer while it's open
   (and ask the AI about what they're looking at). Close via × in the
   header.

   When pinned + open, the .app-shell column shrinks its right edge to make
   room for the drawer so the topbar items and main content don't sit behind
   the drawer. The drawer itself is position:fixed (anchored to the
   viewport's right edge), so this padding creates the visual "side-by-side"
   layout without moving the drawer. Page content + the drawer scroll
   independently — .shell has its own overflow:auto. Falls back to overlay
   on small screens where there isn't room for both. */
.app-shell .shell { transition: padding-right 240ms ease; }
@media (min-width: 900px) {
    /* Reserve room on the MAIN content only (.shell), not the whole .app-shell — so the topbar header
       stays full width and isn't "pushed in" when a right-docked panel opens. The panels are
       position:fixed below the topbar, so the header spans the full width above them. */
    .app-shell:has(.ai-asst-drawer.pinned.open) .shell {
        padding-right: min(var(--ai-drawer-w, 440px), 60vw);
    }
    /* Shared docked RIGHT SidePanel (calculation / property inspector) shrinks the content the same way
       a pinned AI drawer does, so its fixed surface doesn't cover it. :not(.side-panel-left) so a
       LEFT panel (the APIs panel) doesn't wrongly reserve right-side space too; :not(.floating) so a
       floating window (drag-positioned, may not even be near the right edge) never reserves page space. */
    .app-shell:has(.side-panel.open:not(.side-panel-left):not(.inline):not(.floating)) .shell {
        padding-right: min(var(--side-panel-w, 420px), 60vw);
    }
    /* When the AI drawer is ALSO pinned open, dock the right side panel to its LEFT (instead of both
       stacking on the right edge, where the higher-z AI drawer would hide it) and shrink the content
       by the sum so nothing slips under either. (Inline + floating panels are excluded — floating is
       drag-positioned, not edge-docked, so it must never have its `right` overridden here.) */
    .app-shell:has(.ai-asst-drawer.pinned.open) .side-panel.open:not(.side-panel-left):not(.inline):not(.floating) {
        right: min(var(--ai-drawer-w, 440px), 60vw);
    }
    .app-shell:has(.ai-asst-drawer.pinned.open):has(.side-panel.open:not(.side-panel-left):not(.inline):not(.floating)) .shell {
        padding-right: calc(min(var(--ai-drawer-w, 440px), 60vw) + min(var(--side-panel-w, 420px), 60vw));
    }
    /* The interface editor slide-over docks to the LEFT of a pinned AI drawer (instead of both
       anchoring to right:0, where the higher-z AI drawer overlaps it) so the two sit side by side. */
    .app-shell:has(.ai-asst-drawer.pinned.open) .iface-drawer {
        right: min(var(--ai-drawer-w, 440px), 60vw);
    }
}

/* Editor: body sections (left) + the side-panel section config (right column), mirroring where the
   end-user sees the panel. Collapses to one column on narrower screens. */
.form-edit-sections-split { display: flex; gap: 1rem; align-items: flex-start; }
.form-edit-sections-body { flex: 1 1 auto; min-width: 0; }
.form-edit-sections-panel {
    flex: 0 0 var(--fe-panel-w, 570px); max-width: var(--fe-panel-w, 570px); align-self: flex-start;
    position: sticky; top: 2.6rem;
    border: 1px solid rgba(91, 162, 255, 0.5); border-radius: 8px;
    background: rgba(91, 162, 255, 0.06);
    padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.6rem;
}
/* Drag the left edge to resize the side-panel config column (width persisted via --fe-panel-w). */
.fe-panel-resize {
    position: absolute; left: -4px; top: 0; bottom: 0; width: 8px;
    cursor: col-resize; z-index: 3; border-radius: 4px;
}
.fe-panel-resize:hover, .fe-panel-resize:active { background: rgba(91, 162, 255, 0.4); }
.fe-panel-config-head { font-weight: 600; font-size: 0.95rem; }
@media (max-width: 1180px) {
    .form-edit-sections-split { flex-direction: column; }
    .form-edit-sections-panel { flex-basis: auto; max-width: none; width: 100%; position: static; }
}

/* Editor live preview: form (left) + side panel (right), so the preview matches the runtime layout. */
/* flex-direction:row is REQUIRED here — the base .form-renderer is flex-direction:column (sections
   stack), so without this the body + inline panel stack vertically and the body stays full-width
   (spreading .form-fields' auto-fit grid into one long row). */
.form-renderer.has-inline-panel { display: flex; flex-direction: row; gap: 1rem; align-items: flex-start; }
.form-renderer.has-inline-panel .form-renderer-body { flex: 1 1 auto; min-width: 0; }
.form-renderer.has-inline-panel .form-inline-panel { flex: 0 0 320px; align-self: flex-start; position: sticky; top: 0; margin-top: 0; }
@media (max-width: 899px) {
    .form-renderer.has-inline-panel { flex-direction: column; }
    .form-renderer.has-inline-panel .form-inline-panel { flex-basis: auto; }
}

/* Side-panel sections rendered INLINE (editor preview) — a bordered box so the admin sees what the
   docked panel will hold, in context. The docked case uses .side-panel (below). */
.form-inline-panel {
    border: 1px solid rgba(91, 162, 255, 0.5);
    border-radius: 8px;
    background: rgba(91, 162, 255, 0.06);
    padding: 0.4rem 0.7rem 0.7rem;
    margin-top: 0.8rem;
}
.form-inline-panel-head { font-weight: 600; font-size: 0.9rem; margin: 0.3rem 0 0.5rem; }
/* Floating pill to reopen the docked panel after it's been closed (runtime form). */
.form-panel-reopen {
    position: fixed; right: 0.9rem; bottom: 5.5rem; z-index: 69;
    background: var(--panel-bg, rgba(22,26,36,0.97)); color: var(--fg);
    border: 1px solid rgba(91,162,255,0.6); border-radius: 4px;
    padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.85rem;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.6);
}
.form-panel-reopen:hover { filter: brightness(1.12); }
/* Editor: the 📌 Side panel section badge + the form-level panel-title field. */
.fe-section-panel { background: rgba(91,162,255,0.18); color: #aac4ff; border-color: rgba(91,162,255,0.45); }
.form-edit-panel-title { display: flex; flex-direction: column; gap: 0.25rem; max-width: 22rem; margin-bottom: 0.6rem; }
.form-edit-panel-title > span { font-size: 0.8rem; color: var(--muted); }

/* ===== APIs panel (left) + form-field mapping chips/badges (AdminFormEdit) ===== */
.fc-api-iface { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; margin-bottom: 0.6rem; }
.fc-api-iface-head { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lp-btn.xs { font-size: 0.7rem; padding: 0.12rem 0.45rem; font-weight: 500; white-space: nowrap; }
.fc-api-iface-head-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
/* Interfaces panel "Expand" — pop the in-flow left panel out as a large centered window for
   complex mapping. Overrides the inline-column positioning; a dim backdrop sits behind it. */
.side-panel.iface-panel-expanded {
    position: fixed; inset: 0; margin: auto; z-index: 1200;
    width: min(1100px, 92vw); height: min(86vh, 920px); max-width: 92vw;
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 30px 90px -24px rgba(0, 0, 0, 0.75);
    /* Always centred — beat .side-panel-left's left-slide transform so it never slides off-screen
       (it was sliding to -1166px on close), and no transition jank. */
    transform: none; transition: none;
}
/* Clickable dim backdrop (a real element, so click-outside collapses — a ::before can't take a click). */
.iface-expand-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.55); z-index: 1190; }
.side-panel.iface-panel-expanded .side-panel-resize { display: none; }
.side-panel.iface-panel-expanded .side-panel-body { padding-bottom: 1.5rem; }
.fc-api-ord { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem;
    padding: 0 0.2rem; border-radius: 4px; background: rgba(110, 168, 255, 0.16); color: #6ea8ff;
    font-size: 0.66rem; font-weight: 600; margin-right: 0.25rem; }
.fc-api-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.25rem 0; }
.fc-api-dir { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 4px; margin: 0.45rem 0 0.2rem; }
.fc-api-dir.in  { color: #9fe09f; background: rgba(124,196,124,0.16); }
.fc-api-dir.out { color: #ffcf8f; background: rgba(255,176,80,0.16); }

/* Param tables (request/response) — a row per field, draggable onto a form field. */
.fc-api-tbl { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.fc-api-tbl thead th {
    text-align: left; font-weight: 600; color: var(--muted);
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem; border-bottom: 1px solid var(--border);
}
.fc-api-row { cursor: grab; border-bottom: 1px solid rgba(255,255,255,0.05); }
.fc-api-row:hover { background: rgba(91,162,255,0.10); }
.fc-api-row td { padding: 0.2rem 0.4rem; vertical-align: top; }
.fc-api-fname { font-weight: 500; word-break: break-word; }
.fc-api-type { color: var(--muted); font-family: var(--mono, monospace); white-space: nowrap; }
.fc-api-mapped { color: var(--muted); }
/* SDM-property picker in the Mapped column — a compact select listing every canonical key. */
.fc-api-target { font-size: 0.72rem; padding: 0.1rem 0.2rem; width: 100%; max-width: 11rem; }
.fc-api-automap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.2rem 0 0.6rem; }
/* Mapped row: left accent + tint so you can see at a glance which params are wired. */
.fc-api-row.mapped { background: rgba(124,196,124,0.10); box-shadow: inset 3px 0 0 rgba(124,196,124,0.7); }
.fc-api-row.mapped.out { background: rgba(255,176,80,0.10); box-shadow: inset 3px 0 0 rgba(255,176,80,0.7); }
.fc-api-row.mapped .fc-api-mapped { color: var(--text); }
.fc-api-row.picked { outline: 2px solid rgba(91,162,255,0.8); outline-offset: -2px; }

/* Per-interface trigger (when/how it fires). */
.fc-api-trigger { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.fc-api-trigger select.sm, .fc-api-trigger input.sm { font-size: 0.74rem; padding: 0.15rem 0.35rem; width: auto; flex: 1 1 8rem; min-width: 7rem; }
.fc-api-trig-opt { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--muted); }

/* Per-interface transformations (Jint). */
.fc-api-tx { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px dashed var(--border); }
.fc-api-tx-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.fc-api-tx-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
.fc-api-tx-stage { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 4px; }
.fc-api-tx-stage.out { color: #ffcf8f; background: rgba(255,176,80,0.16); }
.fc-api-tx-stage.in  { color: #9fe09f; background: rgba(124,196,124,0.16); }
.fc-api-tx-name { flex: 1; text-align: left; background: none; border: 0; color: var(--link, #7fb0ff); cursor: pointer; font-size: 0.76rem; padding: 0; text-decoration: underline; }
/* Above the docked side panels (z70) + AI drawer (z90) so the editor opens on top, not behind them. */
.fc-tx-backdrop { z-index: 120; }
.fc-tx-modal { max-width: 640px; width: 92vw; z-index: 121; }
.fc-tx-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.25rem 0; }
.fc-tx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.fc-tx-script { font-family: var(--mono, monospace); font-size: 0.8rem; width: 100%; }
.fc-tx-test { display: flex; flex-direction: column; gap: 0.4rem; }
.fc-tx-result { font-family: var(--mono, monospace); font-size: 0.75rem; background: rgba(124,196,124,0.10); border: 1px solid rgba(124,196,124,0.4); border-radius: 6px; padding: 0.5rem; max-height: 11rem; overflow: auto; white-space: pre-wrap; }
.fc-tx-result.err { background: rgba(255,110,110,0.10); border-color: rgba(255,110,110,0.5); color: #ffb3b3; }
.fc-expr-open { align-self: flex-start; margin-top: 0.35rem; }
.fc-expr-save { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.fc-expr-msg { color: #e0a458; }
.fc-expr-ai { display: flex; gap: 0.4rem; align-items: center; margin: 0.5rem 0 0.3rem; }
.fc-expr-ai > .auth-input { flex: 1 1 auto; min-width: 0; }
.fc-expr-ai > .lp-btn { white-space: nowrap; flex: 0 0 auto; }
.fc-api-chip {
    font-size: 0.78rem; padding: 0.15rem 0.5rem; border-radius: 6px; cursor: grab;
    border: 1px solid var(--border); background: rgba(255,255,255,0.04); user-select: none;
}
.fc-api-chip.in:hover  { border-color: rgba(124,196,124,0.6); }
.fc-api-chip.out:hover { border-color: rgba(255,176,80,0.6); }
.fc-api-chip.on { outline: 2px solid rgba(91,162,255,0.8); }
/* Form field as a drop target while a chip is picked. */
.form-edit-field.fc-droppable { outline: 1px dashed rgba(91,162,255,0.7); outline-offset: 2px; cursor: copy; }
/* Mapping badges under a field. */
.fc-api-maps { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.fc-api-map {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; padding: 0.08rem 0.45rem; border-radius: 4px;
}
.fc-api-map.in  { color: #9fe09f; background: rgba(124,196,124,0.14); }
.fc-api-map.out { color: #ffcf8f; background: rgba(255,176,80,0.14); }
/* Inherited-from-Host mapping shown while editing a market scope: muted + dashed, read-only (no ✕). */
.fc-api-map.inherited { opacity: 0.6; border: 1px dashed currentColor; background: transparent; }
.fc-api-unmap { background: none; border: 0; color: inherit; opacity: 0.6; cursor: pointer; font-size: 0.7rem; line-height: 1; }
.fc-api-unmap:hover { opacity: 1; }

/* APIs-panel wiring-scope selector (Host vs a market) + the "editing market X" note. */
.fc-api-scope { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; }
.fc-api-scope select { width: 100%; }
.fc-api-scope-note {
    font-size: 0.74rem; line-height: 1.3; margin: 0 0 0.6rem;
    padding: 0.35rem 0.5rem; border-radius: 6px;
    color: #cfe0ff; background: rgba(91,162,255,0.12); border: 1px solid rgba(91,162,255,0.35);
}

/* ===== Shared docked side panel (Components/Shared/SidePanel.razor) ===== */
.side-panel {
    position: fixed;
    /* Start BELOW the app topbar so the page header stays visible above the panel (it's not a
       full-viewport overlay). The editor's inline variant overrides this back to a sticky column. */
    top: calc(var(--banner-offset, 0rem) + var(--topbar-h, 3rem));
    right: 0;
    bottom: 0;
    width: var(--side-panel-w, 420px);
    max-width: 92vw;
    background: var(--panel-bg, rgba(22, 26, 36, 0.97));
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px -34px rgba(0, 0, 0, 0.7);
    transform: translateX(106%);
    transition: transform 220ms cubic-bezier(0.18, 0.89, 0.32, 1.28), right 240ms ease;
    z-index: 70;   /* below the AI drawer (90); when the AI is open it docks to the AI's left (above) */
    display: flex;
    flex-direction: column;
    color: var(--fg);
}
/* `none` (not translateX(0)) once open: a zero translate still establishes a containing block that traps
   position:fixed descendants (e.g. the property picker's modal) inside the panel; `none` lets them
   anchor to the viewport. The slide still animates (translateX(106%) → identity). */
.side-panel.open { transform: none; }
/* When impersonating, the published --banner-offset is a hair shorter than the impersonation bar's
   true rendered height, so a fixed panel's header can tuck under it. Nudge fixed (non-inline) side
   panels down to clear it — same fix the iface-drawer uses. Keeps the panel header (with its Save
   button) fully visible below the topbar + impersonation bar. */
.app-shell--impersonating .side-panel:not(.inline):not(.floating) {
    top: calc(var(--banner-offset, 0px) + var(--topbar-h, 3rem) + 0.4rem);
}

/* Floating variant — a draggable window instead of an edge-docked panel (SidePanel Side="Floating").
   Position is (x, y) via --float-panel-x/y, dragged by the header (aeon.initPanelDrag), NOT the edge-
   docking slide/transform/width-var machinery above — deliberately opts out of .inline too (a floating
   window never joins the sticky-column flex row). Only one floating panel exists today (the form
   editor's Properties), so — like --side-panel-w — the position vars are shared globally without a
   collision (see the enum doc comment on SidePanel.PanelSide.Floating). */
.side-panel.floating {
    position: fixed;
    left: var(--float-panel-x, 120px);
    top: var(--float-panel-y, 120px);
    right: auto; bottom: auto;
    width: var(--side-panel-w, 420px);
    max-width: 92vw;
    height: auto; max-height: 80vh;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
    transform: none; transition: none;
    z-index: 75;   /* above docked panels (70), below the AI drawer (90) */
}
.side-panel.floating:not(.open) { display: none; }
.side-panel-head.draggable { cursor: move; }
.side-panel-resize {
    position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
    cursor: col-resize; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    border-left: 1px solid var(--border);
}
/* always-visible grip so the drag-to-resize is discoverable (a "slider" handle) */
.side-panel-resize::before {
    content: ""; width: 4px; height: 34px; border-radius: 3px;
    background: var(--border);
}
.side-panel-resize:hover { background: rgba(91, 162, 255, 0.12); }
.side-panel-resize:hover::before, .side-panel-resize:active::before { background: var(--accent); }
.side-panel-left .side-panel-resize { border-left: none; border-right: 1px solid var(--border); }

/* Left-docked variant (e.g. the APIs panel) — own width var so it coexists with a right panel. */
.side-panel-left {
    right: auto; left: 0;
    width: var(--side-panel-left-w, 420px);
    border-left: 0; border-right: 1px solid var(--border);
    box-shadow: 24px 0 60px -34px rgba(0, 0, 0, 0.7);
    transform: translateX(-106%);
    transition: transform 220ms cubic-bezier(0.18, 0.89, 0.32, 1.28), left 240ms ease;
}
.side-panel-left.open { transform: none; }
.side-panel-left .side-panel-resize { left: auto; right: 0; }
@media (min-width: 900px) {
    .app-shell:has(.side-panel-left.open:not(.inline)) { padding-left: min(var(--side-panel-left-w, 420px), 60vw); }
}

/* ---- In-flow (inline) COLUMN mode — ONLY on a genuinely wide monitor (two ~420px panels + a usable
   editor + gaps need ≈1620px). There the form editor's APIs + Properties panels become sticky columns
   inside a flex workspace (toolbar + page span full width). On anything narrower the `.inline` class is
   inert: the panels fall back to the base fixed docked overlays (which shrink the page) — that's far more
   workable than crushing 3 columns onto a laptop. ---- */
@media (min-width: 1621px) {
    .form-edit-workspace { display: flex; align-items: flex-start; gap: 1rem; }
    .form-edit-main { order: 0; flex: 1 1 auto; min-width: 0; }
    .side-panel.inline {
        /* top clears the sticky editor toolbar (which sticks at -2rem, effective bottom ~1.8rem) so a
           stuck panel locks just BELOW it, not under it. */
        /* No editor toolbar above the workspace any more (actions moved to the bottom bar), so the
           panel sticks near the top. It must end ABOVE the sticky bottom action bar (both float at
           once), so the max-height leaves room for the topbar + the ~4.5rem action bar + footer —
           its body scrolls internally instead of slipping under the bar. */
        position: sticky; top: 1rem; right: auto; left: auto; bottom: auto;
        align-self: flex-start;
        max-height: calc(100vh - 10.5rem);
        width: auto; max-width: none;
        transform: none; transition: none;
        box-shadow: none; border: 1px solid var(--border); border-radius: 10px;
        z-index: 1;
        flex: 0 0 var(--side-panel-w, 420px);
        order: 2;   /* right column, after main */
    }
    .side-panel.inline.side-panel-left {
        flex-basis: var(--side-panel-left-w, 420px);
        border-right: 1px solid var(--border);
        order: -1;  /* left column, before main */
        transform: none;
    }
    .side-panel.inline:not(.open) { display: none; }   /* closed → takes no column space */
    /* A buffer at the foot of the scroll body so the last property clears the sticky bottom action
       bar even at the scroll positions where the panel box's tail dips behind it. */
    .side-panel.inline .side-panel-body { padding-bottom: 3rem; }
}
/* Below the wide breakpoint the editor panels are fixed overlays — shrink the page for them like any
   docked panel (the base :not(.inline) shrink rules skip them, so add them back here). */
@media (min-width: 900px) and (max-width: 1620px) {
    .app-shell:has(.side-panel.inline.open:not(.side-panel-left):not(.side-panel-flow)) { padding-right: min(var(--side-panel-w, 420px), 60vw); }
    .app-shell:has(.side-panel-left.inline.open) { padding-left: min(var(--side-panel-left-w, 420px), 60vw); }
}

/* ---- Runtime calc panel: a sticky in-flow column to the RIGHT of the form body (a flex sibling),
   NOT a viewport overlay — so the page header / journey stepper / summary cards span the FULL page
   width above it instead of being squeezed by a page-shrink. It never shrinks .app-shell (excluded
   from the rules above via :not(.side-panel-flow); and it's .inline so the base overlay shrink skips
   it too). Below 1024px it stacks full-width under the form. ---- */
.side-panel.side-panel-flow {
    position: static; transform: none; transition: none;
    width: auto; max-width: none; box-shadow: none; max-height: none;
    border: 1px solid var(--border); border-radius: 10px;
}
.side-panel.side-panel-flow:not(.open) { display: none; }
@media (min-width: 1024px) {
    .form-flow-layout:has(> .side-panel-flow) { display: flex; align-items: flex-start; gap: 1.25rem; }
    .form-flow-layout:has(> .side-panel-flow) > .form-renderer { flex: 1 1 auto; min-width: 0; }
    .form-flow-layout:has(> .side-panel-flow) > .side-panel.side-panel-flow {
        position: sticky; top: 3.5rem; align-self: flex-start;
        max-height: calc(100vh - 4.25rem); overflow: auto;
        flex: 0 0 var(--side-panel-w, 420px); order: 2;
    }
}
.side-panel-head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.side-panel-head strong { font-size: 0.95rem; }
.side-panel-head .spacer { flex: 1; }
.side-panel-sub { font-size: 0.8rem; }
.side-panel-close {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0.15rem 0.3rem; border-radius: 4px;
}
.side-panel-close:hover { color: var(--fg); background: rgba(255, 255, 255, 0.08); }

/* 3-way dock-position switch in a panel's HeaderActions (form editor's Properties panel: left /
   right / floating). Small segmented control, one button "on" at a time. */
.fe-props-dock-switch { display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: 6px; padding: 2px; }
.fe-props-dock-switch button {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 0.85rem; line-height: 1; padding: 0.2rem 0.4rem; border-radius: 4px;
}
.fe-props-dock-switch button:hover { color: var(--fg); background: rgba(255, 255, 255, 0.08); }
.fe-props-dock-switch button.on { color: var(--fg); background: var(--accent, #5ba2ff); }
/* min-height:0 is load-bearing: a flex item defaults to min-height:auto (= its content height), which
   would refuse to shrink below the property list and so never scroll — the tall Properties panel then
   ran off the bottom of the page. min-height:0 lets it shrink to the panel's bounded height so
   overflow:auto actually scrolls. */
.side-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.9rem; }
/* A docked panel with multiple form sections (e.g. Finance calculator + Live quote) — give the
   sections a touch more breathing room than the default flex gap so they don't read as one block. */
.side-panel-body > .form-section + .form-section { margin-top: 0.5rem; }
@media (max-width: 899px) {
    .side-panel { width: 100vw; }
}

.ai-asst-drawer-head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(110, 168, 255, 0.08), transparent);
    flex: 0 0 auto;
}
.ai-asst-drawer-head .spacer { flex: 1; }
.ai-asst-drawer-head strong { font-size: 0.95rem; }
.ai-asst-close {
    background: transparent; border: 0; color: var(--muted);
    font-size: 1.5rem; cursor: pointer; line-height: 1;
    padding: 0 0.3rem;
}
.ai-asst-close:hover { color: var(--fg); }

/* Pin toggle — keeps the drawer open and suppresses the backdrop so the user
   can use the AI panel side-by-side with the page underneath. State persists
   in localStorage (aeon.ai.pinned). */
.ai-asst-pin {
    background: transparent; border: 0; color: var(--muted);
    cursor: pointer; line-height: 1;
    padding: 0.15rem 0.4rem;
    margin-right: 0.1rem;
    transition: transform 120ms ease, color 120ms ease;
    display: inline-flex; align-items: center;
}
.ai-asst-pin svg { display: block; }
.ai-asst-pin:hover { color: var(--fg); transform: scale(1.15); }
.ai-asst-pin.pinned { color: var(--accent); }

/* Clear-chat button in the drawer header (admin-only). Same affordance as the
   pin/close — small, no chrome, color-only hover. */
.ai-asst-clear {
    background: transparent; border: 0; color: var(--muted);
    cursor: pointer; line-height: 1;
    padding: 0.15rem 0.4rem;
    margin-right: 0.1rem;
    transition: transform 120ms ease, color 120ms ease;
    display: inline-flex; align-items: center;
}
.ai-asst-clear svg { display: block; }
.ai-asst-clear:hover { color: #ef4444; transform: scale(1.15); }

/* Multi-select answer mode: buttons read as checkboxes (☐/☑ prefix) with a
   primary Send-selected button. .on lights up the toggled state. */
.ai-answer-multi { gap: 0.35rem; }
.ai-answer-multi .ai-answer-box { font-size: 0.95rem; opacity: 0.7; }
.ai-answer-multi.on { background: rgba(96, 165, 250, 0.18); border-color: rgba(96, 165, 250, 0.5); }
.ai-answer-multi.on .ai-answer-box { opacity: 1; }
.ai-answer-submit { margin-left: auto; }
/* The pin state deliberately adds NO extra edge decoration: the drawer's left edge is drawn by
   exactly ONE thing — the ::after frame — so it never reads as a double line. (A purple inset
   stripe used to stack here on top of the frame + resize bar; that was the "double edge".) */
.ai-asst-drawer.pinned {
    box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.8);
}

/* Drag-to-resize handle — an 8px invisible hit area hugging the left edge. At rest it draws
   NOTHING (the ::after frame is the panel's only left border); the blue divider fades in on
   hover/drag so the affordance appears exactly when the cursor reaches for it.
   JS in App.razor binds the mousedown/move/up handlers and writes --ai-drawer-w on <html>. */
.ai-asst-resize {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 100;
    background: transparent;
    transition: background 120ms ease, box-shadow 120ms ease;
}
.ai-asst-resize:hover,
.ai-asst-resize:active {
    /* 2px blue divider + glow while interacting. */
    background: linear-gradient(to right, rgba(91, 162, 255, 1) 0, rgba(91, 162, 255, 1) 2px, transparent 2px);
    box-shadow: 0 0 12px 1px rgba(91, 162, 255, 0.7);
}

/* Admin AI default — global single-choice card on /admin/ai */
/* Provider cards — all providers configured side by side, no picklist. */
.ai-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.ai-provider-card { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ai-provider-card > label { display: flex; flex-direction: column; gap: 0.25rem; }
.ai-provider-card > label > span:first-child { font-size: 0.85rem; }
.ai-provider-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ai-provider-head h3 { margin: 0; font-size: 1.05rem; }
.ai-provider-card .form-actions { margin-top: 0.25rem; }
.ai-provider-hint { margin: 0; }

.ai-admin-default-card { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ai-admin-default-now {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
    font-size: 0.92rem;
}
.ai-admin-default-now code { font-size: 0.78rem; padding: 0.1rem 0.4rem; background: rgba(255,255,255,0.04); border-radius: 4px; }
.ai-admin-default-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Capability tag chips ("🧠 Reasoning", "👁 Vision", ...). Small + soft so a
   row can wear two or three without dominating. Per-key tint differentiates
   capabilities at a glance. */
.ai-cap-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    margin: 0.1rem 0.2rem 0.1rem 0;
    border-radius: 4px;
    font-size: 0.7rem;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    white-space: nowrap;
}
.ai-cap-reasoning { color: #c79bff; border-color: rgba(199, 155, 255, 0.45); background: rgba(199, 155, 255, 0.08); }
.ai-cap-vision    { color: #7fd8d4; border-color: rgba(127, 216, 212, 0.45); background: rgba(127, 216, 212, 0.08); }
.ai-cap-tools     { color: #ffb868; border-color: rgba(255, 184, 104, 0.45); background: rgba(255, 184, 104, 0.08); }
.ai-cap-free      { color: #5dd39e; border-color: rgba(93, 211, 158, 0.45); background: rgba(93, 211, 158, 0.08); }

/* Inline "Saved ✓" indicator next to the markup input — fades out via CSS so
   the JS-side Task.Delay only needs to clear the flag, not animate. */
.ai-mkt-saved {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.72rem;
    color: #5dd39e;
    animation: ai-mkt-saved-fade 2.2s ease-in forwards;
    pointer-events: none;
}
@keyframes ai-mkt-saved-fade {
    0%   { opacity: 0; transform: translateY(-2px); }
    15%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Catalog modal — wider than the default modal-wide so the table breathes
   with capability + price + action columns; max-height keeps the page
   scrollable inside the modal when there are many rows. */
.ai-catalog-modal { width: min(1100px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
.ai-catalog-controls {
    display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
    padding: 0 0.1rem;
}
.ai-catalog-search { flex: 1 1 280px; min-width: 220px; }
.ai-catalog-filters { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ai-catalog-filter-chip {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ai-catalog-filter-chip:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
.ai-catalog-filter-chip.on {
    background: rgba(199, 155, 255, 0.18);
    color: #c79bff;
    border-color: rgba(199, 155, 255, 0.55);
}
.ai-catalog-filter-chip.ai-catalog-clear { color: #ff8a8a; border-color: rgba(255, 100, 100, 0.35); }
/* Match the site-standard DataGrid (.dg-scroll) shell so the catalog table reads the same
   as every other table on the site — just kept scrollable for the modal's sticky header. */
.ai-catalog-list {
    flex: 1 1 auto;
    overflow-y: auto;
    margin-top: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #141823;
}
.ai-catalog-list table { margin: 0; }
.ai-catalog-desc { font-size: 0.74rem; margin-top: 0.25rem; max-width: 380px; }
.ai-catalog-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.3rem;
    font-size: 0.82rem;
}

/* Top block: context + model + admin transparency. Doesn't scroll with the
   chat stream — the user wants this info always visible. */
.ai-asst-drawer-top {
    /* Allow this header region to shrink and scroll internally rather than growing unbounded and
       shoving the chat stream + input off the bottom of the drawer. Without the cap, expanding the
       admin transparency peek (many long <pre> blocks) made the whole panel un-scrollable. */
    flex: 0 1 auto;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ai-asst-drawer-top .ai-controls {
    padding: 0.55rem 1rem;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.ai-controls-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Admin "What the AI sees" expander. Collapsed by default; expanded shows
   the actual system prompt + redacted aggregate + UI culture + tools. */
.ai-asst-admin-peek {
    margin: 0;
    padding: 0;
    border-top: 1px dashed rgba(199, 155, 255, 0.25);
    background: rgba(199, 155, 255, 0.05);
}
.ai-asst-admin-peek > summary {
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    color: #c79bff;
    cursor: pointer;
    list-style: none;
}
.ai-asst-admin-peek > summary::before {
    content: "▸ ";
    margin-right: 0.25rem;
}
.ai-asst-admin-peek[open] > summary::before { content: "▾ "; }
.ai-asst-admin-peek-body {
    padding: 0 1rem 0.85rem;
    font-size: 0.78rem;
    /* The peek can be very tall (system prompt + aggregate + form JSON + …); scroll it internally
       so it never overruns the drawer even on short viewports. */
    max-height: 45vh;
    overflow-y: auto;
}
.ai-asst-admin-peek-help {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
}
.ai-asst-admin-peek-body h4 {
    margin: 0.6rem 0 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #c79bff;
    letter-spacing: 0.05em;
}
.ai-asst-admin-peek-body pre {
    margin: 0;
    padding: 0.45rem 0.6rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    font-size: 0.72rem;
    line-height: 1.5;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: #d8e1f5;
}

/* Per-turn admin "Show prompt sent" expander — same look, smaller scale. */
.ai-asst-turn-peek {
    margin-top: 0.4rem;
    border-top: 1px dashed rgba(199, 155, 255, 0.2);
    padding-top: 0.3rem;
}
.ai-asst-turn-peek > summary {
    font-size: 0.7rem;
    color: #c79bff;
    cursor: pointer;
    list-style: none;
}
.ai-asst-turn-peek > summary::before {
    content: "▸ ";
}
.ai-asst-turn-peek[open] > summary::before { content: "▾ "; }
.ai-asst-turn-peek h5 {
    margin: 0.4rem 0 0.2rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    color: #c79bff;
    letter-spacing: 0.05em;
}
.ai-asst-turn-peek pre {
    margin: 0;
    padding: 0.4rem 0.55rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    font-size: 0.7rem;
    line-height: 1.45;
    max-height: 10rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-close {
    background: transparent; border: 0; color: var(--muted);
    font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.ai-close:hover { color: var(--fg); }

.ai-consent { padding: 0.9rem 1rem; }
.ai-consent h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.ai-consent-body { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.ai-empty { padding: 1rem; font-size: 0.85rem; }

.ai-controls { padding: 0.6rem 1rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ai-controls select { width: 100%; }

.ai-stream {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.6rem 1rem;
    display: flex; flex-direction: column; gap: 0.55rem;
    min-height: 6rem;
}
.ai-turn { display: flex; flex-direction: column; gap: 0.15rem; }
.ai-turn p { margin: 0; font-size: 0.88rem; line-height: 1.45; white-space: pre-wrap; }
.ai-role { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* User messages align right (their own bubble), AI responses align left.
   The bubble itself takes the role colour; max-width keeps long messages
   from spanning the drawer's full width so the "who said what" stays clear. */
.ai-turn-user { align-items: flex-end; text-align: right; }
.ai-turn-user p {
    color: var(--fg);
    background: rgba(110, 168, 255, 0.18);
    border: 1px solid rgba(110, 168, 255, 0.35);
    padding: 0.5rem 0.7rem;
    border-radius: 12px 12px 4px 12px;
    max-width: 85%;
    display: inline-block;
}
.ai-turn-assistant { align-items: flex-start; text-align: left; }
.ai-turn-assistant p {
    color: var(--fg);
    padding: 0.5rem 0.7rem;
    background: #1a1f2b;
    border-radius: 12px 12px 12px 4px;
    max-width: 85%;
    display: inline-block;
}

/* Markdown content inside the AI bubble. Headings, lists, code, tables — kept
   compact so the chat doesn't sprawl. The bubble's max-width still caps the
   horizontal real estate. */
.ai-md {
    color: var(--fg);
    padding: 0.5rem 0.7rem;
    background: #1a1f2b;
    border-radius: 12px 12px 12px 4px;
    max-width: 85%;
    display: inline-block;
    font-size: 0.88rem;
    line-height: 1.5;
}
.ai-md > :first-child { margin-top: 0; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md p { margin: 0 0 0.5rem; }
.ai-md h1, .ai-md h2, .ai-md h3, .ai-md h4 { margin: 0.6rem 0 0.35rem; font-size: 1rem; }
.ai-md h1 { font-size: 1.1rem; }
.ai-md ul, .ai-md ol { margin: 0 0 0.5rem 0; padding-left: 1.2rem; }
.ai-md li { margin: 0.1rem 0; }
.ai-md code {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.82em;
    font-family: var(--mono);
}
.ai-md pre {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    overflow-x: auto;
    margin: 0.45rem 0;
}
.ai-md pre code { background: transparent; padding: 0; font-size: 0.78rem; line-height: 1.45; }
.ai-md a { color: var(--accent); }
.ai-md strong { color: var(--fg); }
.ai-md table { border-collapse: collapse; margin: 0.45rem 0; font-size: 0.82rem; }
.ai-md th, .ai-md td { border: 1px solid var(--border); padding: 0.2rem 0.45rem; }

/* Copy-JSON button next to the AI's ```json``` blocks. */
.ai-json-actions { margin: 0.2rem 0 0.4rem; display: flex; gap: 0.4rem; }

/* Clickable answer suggestions — buttons rendered from [ANSWER:X] markers. */
.ai-answer-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.ai-answer-btn {
    background: rgba(199, 155, 255, 0.12);
    color: #c79bff;
    border-color: rgba(199, 155, 255, 0.45);
    font-size: 0.8rem;
}
.ai-answer-btn:hover {
    background: rgba(199, 155, 255, 0.22);
    color: #fff;
}

/* Three-dot "thinking" indicator while the AI is processing the request.
   Replaces the static "…" placeholder so it's obvious the panel hasn't hung. */
.ai-thinking {
    display: inline-flex;
    gap: 5px;
    padding: 0.7rem 0.9rem;
    background: #1a1f2b;
    border-radius: 12px 12px 12px 4px;
    align-self: flex-start;
}
.ai-thinking span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--muted);
    animation: ai-thinking-bounce 1.3s infinite ease-in-out both;
}
.ai-thinking span:nth-child(2) { animation-delay: 0.15s; }
.ai-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-thinking-bounce {
    0%, 80%, 100% { transform: scale(0.45); opacity: 0.45; }
    40%           { transform: scale(1); opacity: 1; }
}

.ai-stars { margin-top: 0.3rem; display: flex; gap: 0.2rem; align-items: center; }
.ai-star {
    background: transparent; border: 0; cursor: pointer;
    color: #3d4250; font-size: 1.1rem; line-height: 1;
    padding: 0 0.1rem;
}
.ai-star:disabled { cursor: default; opacity: 0.4; }
.ai-star.on, .ai-star:hover { color: #ffc857; }

.ai-input-row {
    padding: 0.6rem 1rem 0.5rem;
    border-top: 1px solid var(--border);
    display: flex; gap: 0.4rem;
}
.ai-input-row input { flex: 1; }

/* 🎤 voice dictation toggle — pulses while listening; greyed when the browser has no SpeechRecognition. */
.ai-mic { flex: none; padding-left: 0.55rem; padding-right: 0.55rem; }
.ai-mic-listening {
    background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.5);
    animation: ai-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes ai-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.12); }
}
.ai-mic-unsupported { opacity: 0.35; cursor: not-allowed; }

.ai-foot { padding: 0.4rem 1rem 0.75rem; font-size: 0.75rem; }
.ai-foot a { color: var(--accent); }

@media (max-width: 520px) {
    /* Full-width on phones: both edges are flush against the viewport, so no rounding at all
       (a left radius here would clip against the screen edge the same way right rounding would). */
    .ai-asst-drawer { width: 100vw; border-radius: 0; }
}

/* =============================================================================
   AI: hero header on /admin/ai + bubble/panel icon centering
   ========================================================================== */

.ai-hero {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0.6rem 0 1.25rem;
}
.ai-hero .ai-icon { flex: 0 0 auto; filter: drop-shadow(0 6px 20px rgba(110, 168, 255, 0.25)); }
.ai-hero-title { margin: 0 0 0.25rem; }
.ai-hero .lead { margin: 0; }

@media (max-width: 640px) {
    .ai-hero { flex-direction: column; align-items: flex-start; }
}

.ai-bubble .ai-icon {
    /* Inline-flex parents shrink intrinsic-size SVGs to 0 — pin the width
       explicitly so the mark actually renders inside the orb. Matches the
       Size="20" passed by AiAssistant.razor's launcher. */
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
}

/* Context pill: shown at the very top of the panel body so the user knows
   what data the AI has on this page ("Application · 2f0e5e", "Quote builder",
   "Dashboard", etc). Updates on navigation. */
.ai-asst-context {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(110, 168, 255, 0.05);
}
/* "What the assistant can see for this screen" — a small context block by the chat. */
.ai-ctx-block {
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(110, 168, 255, 0.05);
}
.ai-ctx-head {
    display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: #8aa0c6; margin-bottom: 0.4rem;
}
.ai-ctx-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ai-ctx-chip {
    display: inline-flex; align-items: center; gap: 0.28rem;
    font-size: 0.72rem; color: #d8e1f5;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px; padding: 0.14rem 0.52rem; cursor: default;
}
/* Guidance toggle button — same pill shape, interactive */
.ai-ctx-chip-btn {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    font-family: inherit;
}
.ai-ctx-chip-btn:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.18); }
.ai-ctx-chip-btn.on  { background: rgba(110,168,255,0.18); border-color: rgba(110,168,255,0.45); color: #b8d4ff; }
.ai-ctx-chip-btn.off { opacity: 0.45; }
.ai-asst-context-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ai-asst-context-value {
    font-size: 0.82rem;
    color: #d8e1f5;
    font-weight: 500;
}

/* The 💡 "Help me with this page" one-click — always available; the AI grounds itself
   in the page briefing + live page context and answers with option buttons. */
.ai-help-row { padding: 0.5rem 0.85rem 0; }
.ai-help-btn {
    width: 100%; text-align: left; cursor: pointer;
    padding: 0.45rem 0.7rem; font-size: 0.82rem;
    border: 1px dashed rgba(122, 167, 255, 0.45); border-radius: 8px;
    background: rgba(122, 167, 255, 0.07); color: #cfe0ff;
    transition: background 0.15s, border-color 0.15s;
}
.ai-help-btn:hover:not(:disabled) { background: rgba(122, 167, 255, 0.14); border-color: #7aa7ff; }
.ai-help-btn:disabled { opacity: 0.5; cursor: default; }

/* Suggested-question chips. Shown above the input row when the panel is open
   on a Quote / Application page and the resolver returned matching templates. */
.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* Autofill-this-page controls */
.ai-autofill { padding: 0.55rem 0.85rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ai-autofill-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.15rem; }
.ai-autofill-msg { margin: 0.35rem 0 0; }
.ai-suggestions-head {
    width: 100%;
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Proactive opening line a page can show before any chat (e.g. the form↔API mapper). */
.ai-stream-greeting {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: rgba(110, 168, 255, 0.10);
    border: 1px solid rgba(110, 168, 255, 0.22);
    color: #d8e1f5;
    font-size: 0.86rem;
    line-height: 1.4;
}
.ai-chip {
    background: rgba(110, 168, 255, 0.12);
    color: #d8e1f5;
    border: 1px solid rgba(110, 168, 255, 0.22);
    border-radius: 14px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 100ms ease, transform 100ms ease;
    line-height: 1.2;
}
.ai-chip:hover {
    background: rgba(110, 168, 255, 0.22);
    transform: translateY(-1px);
}
.ai-chip:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}
.ai-suggestions-loading {
    font-size: 0.78rem;
    padding: 0.5rem 0.85rem;
    margin: 0;
}

/* Tool-call turn — sits between the user turn and the AI's final answer. Small,
   monospace, distinct from the regular assistant bubble so the user reads it as
   "AI did something" rather than "AI said this". */
.ai-turn-tool {
    background: rgba(199, 155, 255, 0.08);
    border-left: 2px solid rgba(199, 155, 255, 0.45);
    padding: 0.4rem 0.85rem;
    margin: 0.2rem 0;
    font-size: 0.78rem;
}
.ai-turn-tool .ai-role {
    color: #c79bff;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.ai-tool-result {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.72rem;
    color: #c0c8d8;
    margin: 0.2rem 0 0;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Small mark in the floating panel header next to the title. */
.ai-asst-panel-mark { display: inline-flex; align-items: center; margin-right: 0.4rem; }
.ai-asst-panel-head { gap: 0.1rem; }

/* Login version line — matches the chrome footer style so users can read which
   build they're hitting before signing in. */
.auth-ver { margin-top: 1.4rem; font-size: 0.78rem; display: flex; gap: 0.5rem; align-items: center; }
.auth-ver code { background: #1a1e27; padding: 0 0.4rem; border-radius: 3px; color: var(--fg); }

/* Journey blockers banner on /applications/{id}/form */
.case-blockers {
    background: color-mix(in srgb, #f87171 14%, #141823);
    border: 1px solid color-mix(in srgb, #f87171 40%, var(--border));
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin: 0.6rem 0 1rem;
}
.case-blockers strong { color: #fbbcbc; }
.case-blockers ul { margin: 0.4rem 0 0.4rem 1.1rem; padding: 0; font-size: 0.9rem; }
.case-blockers ul li { margin: 0.15rem 0; }
.case-blockers p { margin: 0.3rem 0 0; font-size: 0.82rem; }

/* =============================================================================
   /admin/document-templates — split editor + live preview
   ========================================================================== */
.doctmpl-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-top: 0.6rem;
    min-height: 70vh;
}
@media (max-width: 1100px) { .doctmpl-pane { grid-template-columns: 1fr; } }
.doctmpl-edit, .doctmpl-preview {
    background: #141823;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex; flex-direction: column;
    padding: 0.9rem 1rem;
}
.doctmpl-pane-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.6rem; margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.doctmpl-pane-head strong { font-size: 0.95rem; }
.doctmpl-meta {
    display: grid; gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 0.7rem;
}
.doctmpl-textarea {
    flex: 1 1 auto;
    min-height: 28rem;
    font-family: ui-monospace, 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre;
    word-wrap: normal;
    overflow: auto;
}
.doctmpl-ai { margin-top: 0.7rem; }
.doctmpl-ai summary { cursor: pointer; padding: 0.3rem 0; font-weight: 600; }
.doctmpl-ai-result {
    background: rgba(0,0,0,0.35);
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    max-height: 24rem;
    overflow: auto;
    white-space: pre-wrap;
    color: var(--fg);
}
.doctmpl-preview-controls { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.doctmpl-preview-controls input { min-width: 18rem; }
.doctmpl-preview-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 28rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;       /* white so the rendered HTML reads naturally */
}
.doctmpl-preview-empty {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
}

/* /admin/settings — read-only settings table */
.cfg-note {
    background: color-mix(in srgb, #ffc857 14%, #141823);
    border: 1px solid color-mix(in srgb, #ffc857 35%, var(--border));
    border-radius: 10px;
    padding: 0.7rem 1rem;
    margin: 0.6rem 0 1rem;
    font-size: 0.88rem;
}
.cfg-table td, .cfg-table th { padding: 0.5rem 0.75rem; vertical-align: top; }
.cfg-table td:nth-child(2) { font-family: ui-monospace, monospace; font-size: 0.85rem; word-break: break-all; }
.cfg-unset { color: var(--muted); }
.cfg-src { color: var(--muted); font-size: 0.82rem; }

/* Landing page footer version line + impersonation offset */
.lp-foot { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.lp-foot .spacer { flex: 1; }
.lp-foot-ver { font-size: 0.8rem; color: var(--muted); display: inline-flex; gap: 0.5rem; align-items: center; }
.lp-foot-ver code { background: #1a1e27; padding: 0 0.4rem; border-radius: 3px; color: var(--fg); }
.lp--impersonating { padding-top: 0; }   /* impersonation bar already pushes the page down */

/* ===== /search page ===================================================== */
.search-page .search-bar { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0 0.5rem; }
.search-page .search-input { flex: 1; min-width: 0; padding: 0.6rem 0.8rem; font-size: 1rem; }
.search-page .search-hint { padding: 1rem 0; }

.search-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 1rem; border-bottom: 1px solid #2a2f3b; }
.search-tab {
    background: transparent; border: 0; color: var(--fg);
    padding: 0.55rem 0.9rem; cursor: pointer; font-size: 0.92rem;
    border-radius: 6px 6px 0 0;
}
.search-tab:hover { background: #1e2230; }
.search-tab.active { background: #2a2f3b; border-bottom: 2px solid var(--accent); }
.search-tab-count {
    display: inline-block; margin-left: 0.4rem; font-size: 0.72rem;
    padding: 0.05rem 0.4rem; border-radius: 4px;
    background: #1a1e27; color: var(--muted); font-variant-numeric: tabular-nums;
}
.search-tab.active .search-tab-count { background: var(--accent); color: #000; }

.search-summary { display: grid; gap: 1rem; }
.search-group { background: #15181f; border-radius: 8px; padding: 0.85rem 1rem; }
.search-group h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.search-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.search-group li { font-size: 0.92rem; }
.search-group .lp-btn { margin-top: 0.5rem; }

/* ===== /applications structured filter strip ============================ */
.apps-filters {
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end;
    margin: 0.25rem 0 0.75rem; padding: 0.6rem 0.8rem;
    background: #15181f; border-radius: 8px;
}
.apps-filter-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; }
.apps-filter-field .auth-input.sm { padding: 0.35rem 0.5rem; min-width: 11rem; }
.apps-filter-clear { margin-left: auto; }

/* Search-page filter strip — same chrome as /applications, with the contextual
   "pick a tab" note vertically centred next to the date dropdown. */
.search-filters { align-items: center; }
.search-filter-note { font-size: 0.82rem; }

/* ===== Dashboard quick-search bar ======================================= */
.dash-search {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0 0 1.5rem; padding: 0.5rem 0.65rem;
    background: #15181f; border: 1px solid #232833; border-radius: 10px;
}
.dash-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.dash-search-ico { opacity: 0.7; font-size: 1rem; padding-left: 0.2rem; }
.dash-search-input { flex: 1; border: none; background: transparent; }
.dash-search-input:focus { outline: none; box-shadow: none; }
.dash-search-btn { flex-shrink: 0; }

/* ===== AdminFormEdit preview head + locale picker ======================= */
.form-edit-preview-head {
    display: flex; align-items: end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.form-edit-preview-locale {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem;
    flex-shrink: 0;          /* keep the picker intact; let the header wrap it as a unit */
}
.form-edit-preview-locale > span { white-space: nowrap; }   /* "🌍 Preview locale" stays one line */
/* The global .auth-input rule is width:100%; left unchecked, the select demands the full
   label width AND refuses to shrink, so it overflows the page's right edge. Size it to its
   content (short locale codes), cap at the container, and let it shrink. */
.form-edit-preview-locale select { width: auto; min-width: 9rem; max-width: 100%; flex-shrink: 1; }

/* QA test-data upload form — let the content box span the grid + be genuinely large. */
.qa-wide { grid-column: 1 / -1; }

/* QA bulk generator (/qa/generator) */
/* Recent applications quick-access on the FS workspace home */
.dash-recent-apps { padding: 0.4rem 0.6rem; }
.dash-recent-apps td, .dash-recent-apps th { color: var(--fg); }
.dash-recent-row { cursor: pointer; }
.dash-recent-row:hover td { background: color-mix(in srgb, currentColor 6%, transparent); }

/* Document & data check panel (PMS proposal / application at later placements) */
.ddc-panel { padding: 1rem 1.25rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ddc-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ddc-head h3 { margin: 0; }
/* The two clearly-separated stages: ① Document check, ② Data check. */
/* Decision-gate PRECONDITION note (PMS): amber requirement callout, not a red error — nothing
   failed, the decision is just locked until the doc & data check completes. */
.pms-gate-note {
    display: flex; align-items: flex-start; gap: 0.55rem;
    margin: 0.75rem 0 1rem; padding: 0.6rem 0.85rem; font-size: 0.87rem; line-height: 1.45;
    border: 1px solid color-mix(in srgb, #f0b65a 45%, transparent); border-left-width: 3px;
    border-radius: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px;
    background: color-mix(in srgb, #f0b65a 8%, transparent); color: var(--fg);
}
.pms-gate-ico { line-height: 1.45; }

/* Side-by-side document review (doc & data check): the preview scrolls in ITS OWN box (the PDF
   iframe additionally scrolls internally), independent of both the panel body and the page.
   flex: none is LOAD-BEARING — .side-panel-body is a column flex container, and without it the
   default flex-shrink squeezes this box to its 2px borders the moment the facts/match table below
   grows (the height rule alone loses to flex shrinking). */
.ddc-review-preview {
    flex: none; height: 52vh; overflow: auto; margin-bottom: 0.7rem;
    border: 1px solid var(--border, #2c3242); border-radius: 10px; background: #0d1017;
}
.ddc-review-frame { width: 100%; height: 100%; border: 0; display: block; }
.ddc-review-img { max-width: 100%; display: block; }
.ddc-review-nopreview { padding: 0.8rem; }
.ddc-review-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ddc-review-tally { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.2rem 0 0.5rem; }

.ddc-section { border: 1px solid var(--border, #2c3242); border-radius: 10px; padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ddc-section-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ddc-section-h { margin: 0; font-size: 0.95rem; }
.ddc-evidence { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.ddc-upload { display: flex; align-items: center; gap: 0.4rem; }
.ddc-table { color: var(--fg); }
.ddc-table td, .ddc-table th { color: var(--fg); }
.ddc-row-mismatch td { background: color-mix(in srgb, #ff6b6b 9%, transparent); }
.ddc-summary { margin: 0.2rem 0 0; }
.ddc-waive-reason { max-width: 300px; }

.qa-gen-ai { padding: 1rem 1.25rem; margin-top: 1rem; }
.qa-gen-ai-row { display: flex; gap: 0.6rem; align-items: flex-start; }
.qa-gen-ai-prompt { flex: 1; resize: vertical; min-height: 3.2rem; }
.qa-gen-ai-notes { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.qa-gen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; align-items: start; margin-top: 1rem; }
.qa-gen-panel { padding: 1rem 1.25rem; }
.qa-gen-weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.qa-gen-weight { display: flex; flex-direction: column; gap: 0.2rem; }
.qa-gen-weight > span { font-size: 0.8rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-gen-weight input { width: 100%; }
.qa-gen-preview { color: var(--fg); }
.qa-gen-preview td { padding: 0.2rem 0.5rem; color: var(--fg); }
.qa-gen-preview th { text-align: left; padding: 0.45rem 0.5rem 0.2rem; opacity: 0.7; font-size: 0.8rem; color: var(--fg); }
.qa-gen-n { text-align: right; font-variant-numeric: tabular-nums; }
.qa-gen-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden; }
.qa-gen-bar-fill { height: 100%; background: var(--accent, #6ea8ff); transition: width 400ms ease; }
.qa-gen-actions { white-space: nowrap; }
.qa-gen-erase:hover { color: #ff8f8f; border-color: #ff8f8f; }
.qa-gen-summary { max-width: 260px; }
.qa-content {
    width: 100%;
    min-height: 360px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre;
    overflow: auto;
}

/* ===== AdminFormEdit Test modal ========================================= */
.form-test-modal { width: min(960px, 96vw); max-height: 90vh; overflow: auto; }
.form-test-body { display: grid; gap: 0.75rem; padding-top: 0.5rem; }
.form-test-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-test-summary { background: #1a1e27; padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.9rem; }
.form-test-results { display: grid; gap: 0.5rem; }
.form-test-errors { background: #2a1418; padding: 0.6rem 0.8rem; border-radius: 6px; }
.form-test-warnings { background: #2a230f; padding: 0.6rem 0.8rem; border-radius: 6px; }
.form-test-errors ul, .form-test-warnings ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.form-test-render { margin-top: 0.5rem; }

/* ===== AiAssistant Apply-to-form status ================================= */
.ai-apply-status { font-size: 0.8rem; }

/* ===== AdminFormEdit: AI Apply flash =====================================
   Section / field / rule cards that the AI's last Apply touched briefly
   pulse a green border + soft fill so the admin sees exactly what changed.
   The .fc-flash class is added by AdminFormEdit for the duration of
   FlashDurationMs and removed on a delayed StateHasChanged, after which
   the animation has already faded — both layers cooperate. */
.form-edit-section.fc-flash,
.form-edit-field.fc-flash,
.form-edit-rule.fc-flash {
    animation: fc-flash-pulse 2.4s ease-out;
    position: relative;
}
.form-edit-section.fc-flash { outline: 2px solid #4ade80; outline-offset: 2px; border-radius: 6px; }
.form-edit-field.fc-flash   { outline: 2px solid #4ade80; outline-offset: 2px; border-radius: 6px; }
.form-edit-rule.fc-flash    { outline: 2px solid #4ade80; outline-offset: 2px; border-radius: 6px; }

@keyframes fc-flash-pulse {
    0%   { background-color: rgba(74, 222, 128, 0.30); }
    20%  { background-color: rgba(74, 222, 128, 0.30); }
    100% { background-color: transparent; }
}


/* Feature-sets: "show archived" toggle in the toolbar */
.fs-archived-toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem; font-size: 0.85rem; }
.fs-archived-toggle input { width: auto; }

/* ============================================================================
   SignalR reconnection overlay
   Blazor drops the circuit when the connection is lost and toggles one of
   .components-reconnect-{show,failed,rejected} on #components-reconnect-modal.
   Base rule keys off the id alone so the overlay stays hidden even if Blazor
   rewrites the class list; the state overrides (id + class) win when present.
   ============================================================================ */
#components-reconnect-modal {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    align-items: center; justify-content: center; padding: 1.5rem;
    background: rgba(4, 6, 12, 0.72);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    font-family: var(--font-sans);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-timedout { display: flex; }

.reconnect-card {
    width: min(420px, 100%);
    background: #12141c; color: var(--fg);
    border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.85);
    padding: 1.9rem 1.7rem; text-align: center;
    animation: reconnect-pop var(--dur, 200ms) var(--ease-emphasized, ease-out);
}
@keyframes reconnect-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* one state block shown at a time, driven by the class Blazor sets on the modal */
.reconnect-state { display: none; flex-direction: column; align-items: center; gap: 0.5rem; }
#components-reconnect-modal.components-reconnect-show     .reconnect-state-show     { display: flex; }
#components-reconnect-modal.components-reconnect-failed   .reconnect-state-failed   { display: flex; }
#components-reconnect-modal.components-reconnect-rejected .reconnect-state-rejected { display: flex; }
#components-reconnect-modal.components-reconnect-timedout .reconnect-state-timedout { display: flex; }

.reconnect-title { margin: 0.2rem 0 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.reconnect-msg { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); max-width: 32ch; }
.reconnect-attempt { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#components-reconnect-current-attempt, #components-reconnect-max-retries { color: var(--fg); font-weight: 600; }

.reconnect-spinner {
    width: 38px; height: 38px; border-radius: 50%; margin-bottom: 0.4rem;
    border: 3px solid color-mix(in srgb, var(--accent) 26%, transparent);
    border-top-color: var(--accent);
    animation: dp-spin 0.8s linear infinite;
}
.reconnect-icon {
    width: 44px; height: 44px; border-radius: 50%; margin-bottom: 0.4rem;
    display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; line-height: 1;
}
.reconnect-icon-warn { background: color-mix(in srgb, #f87171 20%, transparent); color: #fca5a5; }

.reconnect-btn {
    margin-top: 0.9rem; appearance: none; cursor: pointer; font: inherit;
    font-size: 0.9rem; font-weight: 600; color: #fff;
    background: var(--accent); border: 1px solid var(--accent); border-radius: 10px;
    padding: 0.55rem 1.15rem; transition: background var(--dur, 200ms) var(--ease-standard, ease), transform var(--dur, 200ms);
}
.reconnect-btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.reconnect-btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    .reconnect-spinner { animation-duration: 1.6s; }
    .reconnect-card { animation: none; }
}

/* ============================================================================
   Interface editor — right-docked slide-over drawer
   Replaces the old inline "div below the list" editor. Keeps the interface list
   visible for context while editing (metadata · AI draft · mock · test · YAML ·
   versions). Mirrors the .schema-overlay slide-over pattern.
   ============================================================================ */
/* The interface editor is its OWN full-width page view (it replaces the list, which is hidden while
   editing) — a right-side drawer then a modal both felt cramped for an editor that keeps growing.
   The page's .page.wide container is already full width, so the editor's auto-fit field grid flows
   into as many columns as fit. */
.iface-page-back { display: inline-block; margin-bottom: 0.5rem; cursor: pointer; }
.iface-page.doctmpl-edit { padding: 0; background: transparent; border: 0; border-radius: 0; }
/* sticky action header so Save / Publish / Close stay reachable while scrolling the long editor */
.iface-page .doctmpl-pane-head {
    position: sticky; top: var(--banner-offset, 0); z-index: 5;
    margin: 0 0 0.9rem; padding: 0.8rem 1rem;
    background: rgba(14, 17, 26, 0.96);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border); border-radius: 12px;
    align-items: center;
}
.app-shell--impersonating .iface-page .doctmpl-pane-head { top: calc(var(--banner-offset, 0px) + 0.4rem); }

/* ============================================================================
   PMS — credit assessment (/admin/pms)
   ============================================================================ */
.pms-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pms-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem;
    border-radius: 4px; border: 1px solid transparent; white-space: nowrap;
}
.pms-pending  { background: color-mix(in srgb, #9aa3b8 22%, transparent); color: #cbd3e6; }
.pms-inreview { background: color-mix(in srgb, #60a5fa 22%, transparent); color: #bfdbfe; }
.pms-approved { background: color-mix(in srgb, #4ade80 20%, transparent); color: #bbf7d0; }
.pms-referred { background: color-mix(in srgb, #fbbf24 22%, transparent); color: #fde68a; }
.pms-declined { background: color-mix(in srgb, #f87171 22%, transparent); color: #fecaca; }
.pms-processing { background: color-mix(in srgb, #a78bfa 22%, transparent); color: #ddd6fe; }
.pms-auto {
    margin-left: 0.35rem; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 0 0.25rem;
}

.pms-detail { max-width: 760px; }
.pms-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem 1.4rem;
    padding: 0.6rem 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem;
}
.pms-summary > div { display: flex; flex-direction: column; gap: 0.1rem; }
.pms-k { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pms-v { font-size: 0.95rem; color: var(--fg); font-weight: 600; }

.pms-assess { display: flex; flex-direction: column; gap: 0.6rem; }
.pms-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pms-assess label { display: flex; flex-direction: column; gap: 0.25rem; }
.pms-assess label > span { font-size: 0.8rem; color: #8aa0c6; }
.pms-w { max-width: 100%; }
.pms-check { flex-direction: row !important; align-items: flex-start; gap: 0.5rem !important; cursor: pointer; }
.pms-check input[type="checkbox"] { width: 1rem; height: 1rem; margin-top: 0.15rem; flex: none; }
.pms-check span { color: var(--fg); }
.pms-field-label { font-size: 0.8rem; color: #8aa0c6; margin-top: 0.3rem; }
.pms-decisions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pms-dec {
    appearance: none; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600;
    color: var(--fg); background: #181b23; border: 1px solid var(--border);
    border-radius: 9px; padding: 0.45rem 0.85rem; transition: border-color var(--dur, 200ms), background var(--dur, 200ms);
}
.pms-dec:hover { border-color: var(--accent); }
/* the picked decision wears its outcome colour — green approve, red decline, blue review/info,
   amber refer — so the choice reads at a glance before Record is pressed */
.pms-dec.on.pms-approved { background: color-mix(in srgb, #4ade80 16%, transparent); color: #bbf7d0; border-color: #4ade80; }
.pms-dec.on.pms-declined { background: color-mix(in srgb, #f87171 16%, transparent); color: #fecaca; border-color: #f87171; }
.pms-dec.on.pms-inreview { background: color-mix(in srgb, #60a5fa 16%, transparent); color: #bfdbfe; border-color: #60a5fa; }
.pms-dec.on.pms-referred { background: color-mix(in srgb, #fbbf24 16%, transparent); color: #fde68a; border-color: #fbbf24; }
.pms-dec.on.pms-pending  { background: color-mix(in srgb, #9aa3b8 16%, transparent); color: #cbd3e6; border-color: #9aa3b8; }

/* decision-bar left summary: label/value rows under the score hero */
.pms-sum { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.7rem 0 0; padding-top: 0.6rem; border-top: 1px solid rgba(140,150,170,0.14); }
.pms-sum > div { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.pms-sum dt { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.pms-sum dd { font-size: 0.85rem; font-weight: 600; margin: 0; text-align: right; overflow-wrap: anywhere; }

/* decided state: the recorded outcome as a read-only card (re-deciding is explicit) */
.pms-db-decided { display: flex; flex-direction: column; gap: 0.45rem; }
.pms-decided-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.pms-badge-lg { font-size: 0.95rem; padding: 0.3rem 0.9rem; }
.pms-decided-line { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.pms-decided-line strong { display: block; font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* score/band inputs folded away — secondary to the decision itself */
.pms-inputs-detail summary { cursor: pointer; font-size: 0.8rem; color: #8aa0c6; margin-top: 0.2rem; }
.pms-inputs-detail[open] summary { margin-bottom: 0.4rem; }

/* AI assessment card: empty state + inline re-run */
.pms-ai-empty p { margin: 0.3rem 0 0.6rem; }
.pms-ai-rerun { margin-left: auto; }

/* advance-refusal message rendered AT the Move-forward strip (the same _message also shows by Save) */
.phase-actions-error { margin: 0.5rem 0 0; }

/* ============================================================================
   Workspaces — role-based landing (chooser, topbar switcher, foundation homes)
   ============================================================================ */
.ws-chooser { max-width: 1000px; margin: 0 auto; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.ws-card {
    display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none;
    background: #141823; border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem;
    color: var(--fg); transition: transform var(--dur, 200ms) var(--ease-standard, ease), border-color var(--dur, 200ms), box-shadow var(--dur, 200ms);
}
.ws-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 34px rgba(0,0,0,0.32); text-decoration: none; }
.ws-card-ico { font-size: 1.8rem; color: var(--accent); }
.ws-card-ico svg { display: block; }
.ws-card-label { font-size: 1.1rem; font-weight: 700; }
.ws-card-tag { font-size: 0.85rem; color: var(--muted); line-height: 1.4; flex: 1; }
.ws-card-enter { font-size: 0.85rem; font-weight: 600; color: var(--accent-2); margin-top: 0.4rem; }

/* topbar switcher — pure <details> dropdown */
.ws-switcher { position: relative; }
.ws-switcher > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.ws-switcher > summary::-webkit-details-marker { display: none; }
.ws-switcher .ws-caret { font-size: 0.7rem; opacity: 0.8; }
.ws-menu {
    position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 60;
    width: 320px; background: #12151d; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.5); padding: 0.4rem;
}
.ws-menu-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.3rem 0.5rem; }
.ws-menu-item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem; border-radius: 9px; text-decoration: none; color: var(--fg); }
.ws-menu-item-form { margin: 0; }
.ws-menu-item-btn { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }
.ws-menu-item:hover { background: rgba(255,255,255,0.05); text-decoration: none; }
.ws-menu-item.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-menu-ico { font-size: 1.2rem; line-height: 1.4; color: var(--accent); display: inline-flex; align-items: center; }
.ws-menu-ico svg { display: block; }
.roles-ws-ico { color: var(--accent); margin-right: .25rem; }
.ws-menu-text { display: flex; flex-direction: column; }
.ws-menu-text small { color: var(--muted); font-size: 0.76rem; line-height: 1.35; }

/* foundation-home KPIs + placeholder action cards */
/* Per-workspace journey strip (workspace home pages) — each workspace's OWN stages, numbered,
   connected by a rail. Read-only overview; colours come per-stage via --wj-accent. */
.wj-strip { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 0.2rem 0 1.4rem; }
.wj-stage {
    position: relative; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0.75rem; flex: 1 1 0; min-width: 130px;
    background: #141823; border: 1px solid var(--border); border-left: 3px solid var(--wj-accent, #60a5fa);
}
.wj-stage:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.wj-stage:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.wj-stage + .wj-stage { border-left-width: 3px; }
.wj-num {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.35rem; height: 1.35rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: #0b0e14;
    background: var(--wj-accent, #60a5fa);
}
.wj-label { font-size: 0.85rem; font-weight: 500; }

.ws-kpis { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.8rem 0 1.4rem; }
.ws-kpi { background: #141823; border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.3rem; min-width: 130px; }
.ws-kpi-n { display: block; font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-kpi-l { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ws-h2 { font-size: 1.25rem; margin: 0 0 0.7rem; }

/* Dynamic dashboard charts (Dealer Performance + BI) — dependency-free inline SVG,
   styled to match the .ws-kpi / .panel card language rather than a bolted-on library look. */
.mini-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 0.75rem; }
.mini-chart { background: #141823; border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.1rem 1rem; }
.mini-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.mini-chart-title { font-size: 0.85rem; font-weight: 600; }
.mini-chart-sub { font-size: 0.72rem; color: var(--muted); }
.mini-chart-empty { font-size: 0.82rem; margin: 0.5rem 0; }
.mini-chart-svg-wrap { width: 100%; }
.mini-chart-svg { width: 100%; height: 90px; display: block; overflow: visible; }
.mc-axis { stroke: var(--border); stroke-width: 0.4; }
.mc-target { stroke: #fbbf24; stroke-width: 0.6; stroke-dasharray: 2 1.5; }
.mc-bar { fill: var(--accent); transition: fill 0.15s; }
.mc-bar:hover { fill: var(--accent-2); }
.mc-line { fill: none; stroke: var(--accent-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mc-dot { fill: var(--accent-2); }
.mini-chart-donut-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mini-chart-donut { width: 96px; height: 96px; flex: none; }
.mc-donut-seg { stroke: #141823; stroke-width: 0.5; }
.mc-donut-hole { fill: #141823; }
.mini-chart-legend { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; max-height: 130px; overflow-y: auto; }
.mini-chart-legend li { display: flex; align-items: center; gap: 0.4rem; }
.mc-legend-label { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-legend-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.mc-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }

.ws-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.ws-action {
    display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem;
    background: #11141c; border: 1px dashed var(--border); border-radius: 12px; opacity: 0.85;
}
.ws-action-ico { font-size: 1.4rem; }
.ws-action small { color: var(--muted); font-size: 0.82rem; line-height: 1.4; }

/* Vehicle Sales — new-sale form grid */
.vs-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem 1rem; }
.vs-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.vs-form label > span { font-size: 0.8rem; color: #8aa0c6; }

/* "Integration at this step" banner on the application form (per journey phase) */
.integration-banner {
    display: flex; gap: 0.7rem; align-items: flex-start;
    margin: 0.6rem 0 0.4rem; padding: 0.7rem 0.9rem;
    background: color-mix(in srgb, var(--accent) 10%, #12141c);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 12px;
}
.integration-ico { font-size: 1.2rem; line-height: 1.3; }
.integration-body { display: flex; flex-direction: column; gap: 0.35rem; }
.integration-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.integration-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; font-weight: 600; color: var(--fg);
    background: #181b23; border: 1px solid var(--border); border-radius: 4px;
    padding: 0.18rem 0.6rem 0.18rem 0.4rem; cursor: help;
}
.integration-chip .ic-code {
    font-family: var(--mono); font-size: 0.7rem;
    background: var(--accent); color: #fff; border-radius: 4px; padding: 0.05rem 0.4rem;
}
/* Occurred: this interface has actually run for the open application. */
.integration-chip.done {
    border-color: color-mix(in srgb, #34d399 55%, var(--border));
    background: color-mix(in srgb, #34d399 12%, #181b23);
    color: #a7f3d0;
}
.integration-chip.done .ic-code { background: #059669; }
.integration-chip .ic-done { color: #34d399; font-weight: 700; }
/* Untracked: the call happened in this phase but the step's blueprint doesn't list the interface. */
.integration-chip.untracked {
    border-color: color-mix(in srgb, #f59e0b 60%, var(--border));
    background: color-mix(in srgb, #f59e0b 12%, #181b23);
    color: #fcd34d;
}
.integration-chip.untracked .ic-code { background: #b45309; }
.integration-chip .ic-warn { color: #f59e0b; }
.integration-untracked-note { font-size: 0.78rem; color: #fcd34d; }
.integration-untracked-note a { color: inherit; text-decoration: underline; }

.vs-form .vs-form-wide { grid-column: 1 / -1; }

/* Vehicle Sales — selected vehicle image + financing tile (revealed after a vehicle is chosen) */
.vs-selected { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 1rem; margin-top: 1rem; }
.vs-veh-tile { background: #141823; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.vs-car { width: 100%; max-width: 220px; color: #6ea8ff; }
.vs-veh-meta { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; }
.vs-veh-meta strong { font-size: 0.95rem; }
.vs-veh-price { font-size: 1.1rem; font-weight: 600; margin-top: 0.2rem; }
.vs-fin-tile { background: #141823; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; }
.vs-fin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.8rem; }
.vs-iface-tag { font-size: 0.7rem; color: #6ea8ff; background: rgba(110, 168, 255, 0.12); padding: 0.1rem 0.5rem; border-radius: 6px; }
.vs-fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem 1rem; }
.vs-fin-grid label { display: flex; flex-direction: column; gap: 0.25rem; }
.vs-fin-grid label > span { font-size: 0.8rem; color: #8aa0c6; }
.vs-deeplink { display: inline-block; margin-top: 0.2rem; font-size: 0.74rem; color: #9cc4ff; text-decoration: none; white-space: nowrap; }
.vs-deeplink:hover { text-decoration: underline; }
.vs-quote { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border); transition: opacity 0.15s; }
.vs-quote.busy { opacity: 0.5; }
.vs-quote-main { font-size: 1.5rem; font-weight: 600; }
.vs-quote-sub { font-size: 0.82rem; }
.vs-fcs { font-size: 0.7rem; color: #8aa0c6; font-family: ui-monospace, monospace; margin-top: 0.3rem; }
@media (max-width: 720px) { .vs-selected { grid-template-columns: 1fr; } }

/* Vehicle Sales — convenience pickers above the configured capture form */
.vs-pickers { display: grid; grid-template-columns: 2fr 1fr; gap: 0.6rem; margin-bottom: 0.8rem; }
.vs-pickers label { display: flex; flex-direction: column; gap: 0.25rem; }
.vs-pickers label > span { font-size: 0.78rem; color: var(--muted, #8aa0c6); }
@media (max-width: 720px) { .vs-pickers { grid-template-columns: 1fr; } }

.vs-modeld-badge { display: inline-block; vertical-align: middle; margin-left: 0.6rem; padding: 0.15rem 0.55rem;
    border-radius: 999px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
    background: rgba(63,217,155,0.14); color: #3fd99b; border: 1px solid rgba(63,217,155,0.35); }
.vs-h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.vs-dealer-options { margin-bottom: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--border, #2c3242); border-radius: 8px; }
.vs-option-picker { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; flex-wrap: wrap; }
.vs-option-picker select { flex: 2 1 12rem; }
.vs-option-picker input { flex: 1 1 6rem; }
.vs-option-list { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.vs-option-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.5rem; border: 1px solid var(--border, #2c3242); border-radius: 6px; }
.vs-option-name { flex: 1 1 auto; }
.vs-option-price { font-variant-numeric: tabular-nums; color: var(--muted, #8aa0c6); }
.vs-option-total { margin: 0.4rem 0 0; font-size: 0.85rem; }

/* Vehicle Sales — interface simulation (Interfaces side panel) */
.vs-sim { margin-top: 0.6rem; border-top: 1px dashed var(--border, #2a3550); padding-top: 0.5rem; }
.vs-sim-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.vs-sim-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.vs-sim-pre { margin: 0.2rem 0 0; padding: 0.5rem 0.6rem; background: rgba(0,0,0,0.25); border-radius: 6px;
  font-size: 0.72rem; font-family: var(--mono); line-height: 1.35;
  white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
@media (max-width: 720px) { .vs-sim-cols { grid-template-columns: 1fr; } }

/* Roles & permissions config (/admin/roles) */
.roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.5rem 1rem; }
.roles-check { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 10px; background: #12141c; cursor: pointer; }
.roles-check input { margin-top: 0.2rem; }
.roles-check span { display: flex; flex-direction: column; }
.roles-check small { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.roles-permgroup { margin-bottom: 1rem; }
.roles-permgroup-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.4rem; }

/* ===== /admin/data-model — Standard Data Model ===== */
.dm-msg { font-size: 0.85rem; color: var(--accent, #5ba2ff); margin: 0.25rem 0 0.75rem; }
/* The data-model toolbar's action buttons: a horizontal row pushed to the right of the scope select
   (they were wrongly wrapped in .fld — a vertical label/field column — so they stacked + looked centred). */
.dm-actions-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-left: auto; }
.auth-input.sm { padding: 0.2rem 0.4rem; font-size: 0.82rem; }
.dm-entity { font-size: 1rem; margin: 1.2rem 0 0.4rem; text-transform: capitalize; }
.dm-workspace { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--brand, #0a7); margin: 2rem 0 0.2rem; padding-bottom: 0.3rem;
  border-bottom: 2px solid color-mix(in srgb, var(--brand, #0a7) 30%, transparent); }
.dm-workspace:first-of-type { margin-top: 0.6rem; }
.dm-workspace .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Proposal Management admin hub */
.pma-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; margin: 1.2rem 0 1.6rem; }
.pma-link { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.15rem; border: 1px solid var(--border);
  border-radius: 14px; background: #141823; text-decoration: none; transition: border-color .12s, background .12s; }
.pma-link:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: #171c28; }
.pma-link-t { font-weight: 700; color: var(--fg); }
.pma-link-d { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.pma-ai h2 { margin: 0 0 0.3rem; }
.pma-check { display: flex; align-items: center; gap: 0.55rem; margin: 0.6rem 0; cursor: pointer; }
.pma-check.sm { font-size: 0.86rem; margin: 0.3rem 0; }
.pma-check input { width: 1rem; height: 1rem; }
.pma-field { margin: 1rem 0; display: flex; flex-direction: column; gap: 0.35rem; max-width: 640px; }
.pma-field textarea { resize: vertical; font-family: inherit; }
.pma-context { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.1rem 1.2rem; }
.pma-dim { opacity: 0.5; }
.dm-table td code, .dm-proposals td code { font-size: 0.82rem; }
/* Fixed layout so every entity table lines its columns up identically. 6 columns: the description
   stacks UNDER the label (same cell) so it doesn't steal a column + crush Type/Req/PII/actions when
   the AI drawer is pinned. min-width + a scroll wrapper guarantees nothing clips on a squeezed page. */
.dm-table-wrap { overflow-x: auto; }
.dm-table { table-layout: fixed; width: 100%; min-width: 760px; }
.dm-table th:nth-child(1), .dm-table td:nth-child(1) { width: 22%; }
.dm-table th:nth-child(2), .dm-table td:nth-child(2) { width: 36%; }
.dm-table th:nth-child(3), .dm-table td:nth-child(3) { width: 14%; }
.dm-table th:nth-child(4), .dm-table td:nth-child(4) { width: 6%; text-align: center; }
.dm-table th:nth-child(5), .dm-table td:nth-child(5) { width: 6%; text-align: center; }
/* The actions column is a FIXED pixel width (not a %): a % column squeezes when the AI drawer pins
   or the optional Value column appears, wrapping/clipping the buttons. Class-based (not nth-child)
   because the Value column, when shown, shifts every later column index. */
.dm-table th.dm-val-col, .dm-table td.dm-val-col { width: 12%; }
.dm-table th.dm-actions-col, .dm-table td.dm-actions-col { width: 182px; }
.dm-table td code { overflow-wrap: anywhere; }
.dm-table td { vertical-align: top; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.dm-path-line { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.dm-labelcell .dm-label { font-size: 0.88rem; margin-bottom: 0.25rem; }
.dm-desc, .dm-desc-text { width: 100%; }
.dm-desc { min-height: 1.9rem; }
.dm-desc-text { font-style: italic; }
/* Right-aligned, never wraps; every icon action (and the 🔒 placeholder) occupies an IDENTICAL
   30px slot so the Edit button's left edge lines up across rows regardless of which icons follow. */
.dm-row-actions { display: flex; gap: 0.3rem; justify-content: flex-end; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.dm-row-actions > * { flex: none; }
.dm-row-actions .dm-act-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; padding-left: 0; padding-right: 0;
}
.dm-locked { font-size: 0.8rem; opacity: 0.55; cursor: help; }
/* storage badges */
.dm-store { display: inline-block; font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 4px; margin-top: 0.25rem;
    border: 1px solid var(--border); white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.dm-store-column { background: rgba(54, 179, 126, 0.16); color: #4ed99a; border-color: rgba(54,179,126,0.4); }
.dm-store-bag { background: rgba(255, 184, 77, 0.14); color: #f0b65a; border-color: rgba(255,184,77,0.35); }
.dm-store-computed { background: rgba(91, 162, 255, 0.14); color: #7db4ff; border-color: rgba(91,162,255,0.35); }
.dm-store-transient { background: rgba(255,255,255,0.06); color: var(--muted); }
/* per-workspace journey editor — rules are scoped under .wj-flow because the read-only
   WorkspaceJourneyStrip uses the same .wj-stage/.wj-label class names; unscoped they clobbered
   the strip's row layout (numbers drifting away from their labels on PM/CM). */
.aj-journey-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wj-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin: 1rem 0; }
.wj-flow .wj-stage { border: 1px solid var(--border); border-left: 4px solid var(--accent-2); border-radius: 8px; padding: 0.5rem 0.6rem; min-width: 12rem; display: flex; flex-direction: column; gap: 0.25rem; }
.wj-flow .wj-stage-row { display: flex; align-items: center; gap: 0.3rem; }
.wj-flow .wj-label { flex: 1; min-width: 6rem; }
.wj-color { width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; }
.wj-key { font-size: 0.66rem; font-family: var(--mono, monospace); }
.wj-arrow { align-self: center; color: var(--muted); }
/* journey state-machine editor */
.jm-diagram-wrap { border: 1px solid var(--border); border-radius: 10px; margin: 0.8rem 0 1.2rem; overflow: hidden; }
.jm-diagram-tools { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.jm-diagram-tools .spacer, .jm-diagram-tools .muted { margin-right: auto; }
/* position:relative + overflow:hidden required — the abs-positioned .er-pan escapes otherwise
   (and never contributed height, so overflow:auto had nothing to scroll anyway). */
.jm-diagram-host { height: 56vh; padding: 0.8rem; overflow: hidden; position: relative; touch-action: none; }
.jm-table .jm-from { white-space: nowrap; }
.jm-terminal { margin-left: 0.4rem; font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--muted); }
.jm-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.jm-chip { font-size: 0.72rem; padding: 0.12rem 0.5rem; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.jm-chip.on { background: rgba(91,162,255,0.18); color: #9cc4ff; border-color: rgba(91,162,255,0.4); }
.jm-chip.ro { cursor: default; opacity: 0.6; }
.jm-chip:not(.ro):hover { border-color: rgba(91,162,255,0.5); }
.jm-rowact { white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; }
/* "mapped to" — which interface(s) + param consume this field */
.dm-mapped { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.dm-mapped-chip { font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 4px; white-space: nowrap;
    background: rgba(91,162,255,0.12); color: #9cc4ff; border: 1px solid rgba(91,162,255,0.3); text-decoration: none; }
.dm-mapped-chip:hover { background: rgba(91,162,255,0.22); }
/* payload generator */
.dm-payload-panel { padding: 0.85rem 1rem; margin: 0.75rem 0; }
.dm-hint { margin: 0.5rem 0 0.2rem; max-width: 90ch; line-height: 1.5; }
.dm-history { max-width: 680px; }
.dm-history table { width: 100%; margin-top: 0.5rem; }
.dm-audit-created { color: #4caf50; font-weight: 600; }
.dm-audit-updated { color: #ffb74d; font-weight: 600; }
.dm-audit-deleted { color: #ef5350; font-weight: 600; }
.dm-payload-controls { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin: 0.4rem 0; }
.dm-payload-tabs { display: flex; gap: 0.3rem; margin: 0.5rem 0 0.3rem; }
.dm-payload-json { background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.8rem 1rem; font-size: 0.8rem; max-height: 480px; overflow: auto; white-space: pre; }
.dm-proposals { padding: 0.85rem 1rem; margin: 0.75rem 0; }
.dm-proposals-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.dm-proposals-head .spacer { flex: 1; }
.dm-edit-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.55); z-index: 1190; }
.dm-edit { position: fixed; inset: 0; margin: auto; z-index: 1200; width: min(620px, 94vw); height: max-content; max-height: 88vh; overflow: auto; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 30px 90px -24px rgba(0,0,0,0.75); }
.dm-edit-head { display: flex; align-items: center; margin-bottom: 0.8rem; }
.dm-edit-head .spacer { flex: 1; }
.dm-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.9rem; }
.dm-edit-grid .dm-wide { grid-column: 1 / -1; }
.dm-edit-grid .dm-check { flex-direction: row; align-items: center; gap: 0.4rem; grid-column: 1 / -1; }
.dm-edit-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

/* ---- SDM Explorer (three-pane /admin/data-model) ---- */
.sdmx-search { max-width: 340px; }
.sdmx-body { display: grid; grid-template-columns: 232px minmax(0, 1fr) 320px; margin-top: 1rem; padding: 0; overflow: hidden; }
@media (max-width: 1100px) { .sdmx-body { grid-template-columns: 200px minmax(0, 1fr); } .sdmx-rail { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--border); max-height: none; } }
@media (max-width: 760px) { .sdmx-body { grid-template-columns: 1fr; } .sdmx-tree { border-right: none; border-bottom: 1px solid var(--border); max-height: 260px; } }
.sdmx-tree { border-right: 1px solid var(--border); padding: 0.6rem 0.45rem; overflow-y: auto; max-height: 72vh; }
.sdmx-tree-group { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); padding: 0.6rem 0.6rem 0.25rem; }
.sdmx-tree-item {
    display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; color: var(--fg); padding: 0.3rem 0.6rem; border-radius: 7px; font-size: 0.83rem;
}
.sdmx-tree-item:hover { background: rgba(140,150,170,0.1); }
.sdmx-tree-item.on { background: rgba(59,130,246,0.16); color: var(--accent-2); font-weight: 600; }
.sdmx-tree-item code { font-size: 0.8rem; }
.sdmx-coll { color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.72rem; }
.sdmx-ext { width: 7px; height: 7px; border-radius: 50%; background: #7dd3a8; flex: none; }
.sdmx-count { margin-left: auto; font-size: 0.66rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sdmx-mid { padding: 0.9rem 1rem; overflow-x: auto; min-width: 0; }
.sdmx-mid .dm-entity:first-of-type { margin-top: 0; }
/* entity names are code-cased paths — don't let .dm-entity's capitalize mangle them or the counts */
.sdmx-mid .dm-entity { text-transform: none; }
.sdmx-enthead .dm-entity { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.sdmx-table .dm-path-line code { white-space: nowrap; }
.sdmx-ws-chip, .sdmx-it-chip {
    font-size: 0.64rem; border-radius: 4px; padding: 0.08rem 0.55rem; font-weight: 600; letter-spacing: 0.02em;
    border: 1px solid var(--border); color: var(--muted); background: rgba(140,150,170,0.08);
}
.sdmx-it-chip { border-color: rgba(125,211,168,0.5); color: #7dd3a8; background: rgba(125,211,168,0.08); }
.sdmx-usedby { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 0.15rem 0 0.7rem; }
.sdmx-usedby-note { font-size: 0.72rem; }
.sdmx-table tbody tr { cursor: pointer; }
.sdmx-table tbody tr.sdmx-sel td { background: rgba(59,130,246,0.10); }
.sdmx-table tbody tr.sdmx-mkt td { background: rgba(125,211,168,0.05); }
.sdmx-table tbody tr.sdmx-sel.sdmx-mkt td { background: rgba(59,130,246,0.12); }
.sdmx-reflink { background: none; border: none; color: var(--accent-2); cursor: pointer; font: inherit; padding: 0; }
.sdmx-reflink:hover { text-decoration: underline; }
.sdmx-val { font-family: ui-monospace, monospace; font-size: 0.76rem; color: #34d399; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdmx-val-empty { color: var(--muted); opacity: 0.55; }
.sdmx-rail { border-left: 1px solid var(--border); display: flex; flex-direction: column; max-height: 72vh; min-width: 0; }
.sdmx-rtabs { display: flex; border-bottom: 1px solid var(--border); }
.sdmx-rtab {
    flex: 1; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 0.78rem; padding: 0.55rem 0.2rem;
}
.sdmx-rtab:hover { color: var(--fg); }
.sdmx-rtab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.sdmx-rbody { padding: 0.8rem 0.9rem; overflow-y: auto; font-size: 0.83rem; flex: 1; }
.sdmx-loadbar { display: flex; gap: 0.45rem; align-items: center; margin: 0.5rem 0; }
.sdmx-loadbar input { flex: 1; min-width: 0; }
.sdmx-data-ok { color: #34d399; display: flex; align-items: center; gap: 0.5rem; }
.sdmx-rrow { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(140,150,170,0.12); }
.sdmx-wu-note { margin-top: 0.6rem; }
.sdmx-payload-controls { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.4rem 0; }
.sdmx-pre { max-height: 320px; font-size: 0.72rem; }

/* ===== /admin/data-model/mappings — interface ↔ SDM ===== */
.sdmmap-card { padding: 0.85rem 1rem; margin: 0.8rem 0; }
.sdmmap-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.sdmmap-dir { font-size: 0.72rem; padding: 0.1rem 0.55rem; border-radius: 4px; border: 1px solid var(--border); white-space: nowrap; }
.sdmmap-dir.dir-out { background: rgba(91, 162, 255, 0.14); color: #7db4ff; }
.sdmmap-dir.dir-in { background: rgba(54, 179, 126, 0.16); color: #4ed99a; }
.sdmmap-picker .sdmmap-pick-row { cursor: pointer; }
.sdmmap-picker .sdmmap-pick-row:hover { background: rgba(91, 162, 255, 0.08); }
.sdmmap-detail { margin-top: 0.4rem; }
.sdmmap-compose { margin: 0.6rem 0; padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.02); }
.sdmmap-compose-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sdmmap-compose-bar .auth-input { max-width: 320px; }
.sdmmap-compose-out { margin: 0.6rem 0 0; max-height: 360px; overflow: auto; font-size: 0.78rem; line-height: 1.4;
    background: var(--code-bg, rgba(0,0,0,0.25)); border-radius: 6px; padding: 0.6rem; }
.sdmmap-custom-badge { font-size: 0.68rem; padding: 0.05rem 0.45rem; border-radius: 4px; white-space: nowrap;
    background: rgba(54,179,126,0.16); color: #4ed99a; border: 1px solid rgba(54,179,126,0.4); }
.sdmmap-readonly { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; opacity: 0.92; }
.sdmmap-ro-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem;
    padding: 0.25rem 0; border-bottom: 1px solid var(--border); }
.sdmmap-ro-row code { font-size: 0.8rem; }
/* ---- Mapping row (redesigned): the mapping reads in the data-flow direction on one line, with the
   SDM selector centred; ƒ/open/comment drop to a quiet line below. ---- */
.sdmmap-row2 { padding: 0.65rem 0; border-bottom: 1px solid rgba(140, 150, 170, 0.10); }
.sdmmap-row2.is-mapped { background: linear-gradient(90deg, rgba(91,162,255,0.05), transparent 60%); }
.sdmmap-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.7rem; }
.sdmmap-wire { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0; }
.sdmmap-wire code { font-size: 0.92rem; overflow-wrap: anywhere; }
/* long enum/type hints truncate instead of overrunning; full value on hover. */
.sdmmap-hint { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; color: var(--muted); }
.sdmmap-flow { color: #7aa7ff; font-weight: 700; text-align: center; }
.sdmmap-sdm { min-width: 0; }
.sdmmap-formula { width: 100%; font-family: ui-monospace, monospace; font-size: 0.9rem; resize: vertical;
    line-height: 1.5; min-height: 3.4rem; padding: 0.5rem 0.6rem; }
/* meta row mirrors the mapping line's 3-column grid so the ƒ/open/comment controls sit exactly
   under the SDM cell: column 1 for a request (SDM on the left), column 3 for a response (SDM on
   the right). They never bleed across the interface column. */
.sdmmap-meta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.7rem; margin-top: 0.3rem; }
.sdmmap-meta.on-left .sdmmap-meta-inner { grid-column: 1; }
.sdmmap-meta.on-right .sdmmap-meta-inner { grid-column: 3; }
.sdmmap-meta-inner { display: flex; align-items: flex-start; gap: 0.4rem; min-width: 0; }
.sdmmap-comment { flex: 1; font-size: 0.86rem; min-width: 0; min-height: 2.6rem; line-height: 1.4;
    resize: vertical; font-family: inherit; }
.lp-btn.xs { padding: 0.15rem 0.5rem; font-size: 0.74rem; }
.auth-input.xs { min-height: 1.9rem; padding: 0.25rem 0.5rem; font-size: 0.78rem; }

/* the nesting-aware SDM path picker (replaces the flat <select>) */
.sdmmap-picker { position: relative; }
.sdmmap-pickbtn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    padding: 0.4rem 0.6rem; border-radius: 7px; border: 1px solid var(--border); background: #141823;
    color: var(--fg, #e6e9f0); font-family: ui-monospace, monospace; font-size: 0.9rem; cursor: pointer; text-align: left; }
.sdmmap-pickbtn { padding: 0.55rem 0.7rem; }
.sdmmap-pickbtn:hover { border-color: rgba(91, 162, 255, 0.6); }
.sdmmap-pickbtn.empty { color: var(--muted); font-family: inherit; font-style: italic; }
.sdmmap-picker.open .sdmmap-pickbtn { border-color: rgba(91, 162, 255, 0.9); }
.sdmmap-pickval { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdmmap-caret { color: var(--muted); flex: none; }
.sdmmap-tree-pop { position: absolute; z-index: 40; top: calc(100% + 3px); left: 0; right: 0; min-width: 26rem;
    background: #10141f; border: 1px solid rgba(91, 162, 255, 0.5); border-radius: 9px; padding: 0.4rem;
    box-shadow: 0 12px 34px rgba(0,0,0,0.5); }
.sdmmap-tree-search { width: 100%; margin-bottom: 0.35rem; }
.sdmmap-tree { max-height: 24rem; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.sdmmap-branch { font-size: 0.82rem; color: #8aa0c6; font-weight: 600; padding: 0.25rem 0.4rem; letter-spacing: 0.02em; }
.sdmmap-leaf { display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left; border: none;
    background: transparent; color: var(--fg, #e6e9f0); font-size: 0.88rem; padding: 0.35rem 0.5rem; border-radius: 5px; cursor: pointer; }
.sdmmap-leaf:hover { background: rgba(91, 162, 255, 0.15); }
.sdmmap-leaf.sel { background: rgba(91, 162, 255, 0.28); }
.sdmmap-leaf.clear { color: var(--muted); font-style: italic; }
.sdmmap-seg { font-family: ui-monospace, monospace; }
.sdmmap-leaf-type { flex: none; margin-left: auto; }
.sdmmap-pii { flex: none; }
/* formula edit/test side panel */
.fx-panel { display: flex; flex-direction: column; gap: 0.9rem; }
.fx-code { font-family: ui-monospace, monospace; font-size: 0.9rem; line-height: 1.5; resize: vertical; }
.fx-ai { background: rgba(91,162,255,0.08); border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.7rem; }
.fx-ai-row { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.fx-ai-row input { flex: 1; }
.fx-run { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.fx-result { font-family: ui-monospace, monospace; font-size: 0.85rem; color: #4ed99a; }
.fx-mode { display: flex; gap: 0.3rem; }
/* version history panel */
.hist { display: flex; flex-direction: column; gap: 0.6rem; }
.hist-rev { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; }
.hist-rev-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.hist-rev-body { display: flex; flex-direction: column; gap: 0.15rem; }
.hist-row { font-size: 0.8rem; }
.hist-row code { font-size: 0.76rem; }
.fx-snips { display: flex; flex-direction: column; gap: 0.3rem; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.3rem; }
.fx-chip { text-align: left; padding: 0.2rem 0.5rem; border: 1px solid var(--border); border-radius: 6px;
    background: rgba(255,255,255,0.03); cursor: pointer; max-width: 100%; overflow: hidden; }
.fx-chip:hover { background: rgba(91,162,255,0.14); border-color: rgba(91,162,255,0.4); }
.fx-chip code { font-family: ui-monospace, monospace; font-size: 0.74rem; white-space: nowrap; }
/* AI mapping wizard */
.wiz { display: flex; flex-direction: column; gap: 0.55rem; }
.wiz-prop { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; }
.wiz-prop.wiz-skip { opacity: 0.5; }
.wiz-prop-head { display: flex; align-items: center; gap: 0.5rem; }
.wiz-prop-head code { font-size: 0.82rem; }
.wiz-acc { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--muted); }
.wiz-q { font-size: 0.82rem; margin: 0.35rem 0 0.3rem; }
.wiz-opts { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.wiz-val { font-size: 0.85rem; margin-top: 0.3rem; }
.wiz-val code { font-size: 0.82rem; }
.wiz-trig { font-size: 0.82rem; padding: 0.4rem 0.6rem; background: rgba(91,162,255,0.08); border: 1px solid var(--border); border-radius: 8px; }
.lp-btn.on { background: rgba(91, 162, 255, 0.22); color: #cfe0ff; }
.sdmmap-block { margin: 0.7rem 0 0.2rem; }
.sdmmap-block-title { display: flex; align-items: baseline; gap: 0.6rem; margin: 1.15rem 0 0.55rem;
    padding-bottom: 0.35rem; border-bottom: 1px solid rgba(125, 180, 255, 0.22); }
.sdmmap-block-name { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--accent, #7db4ff); }
.sdmmap-block-dir { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--muted); }
.sdmmap-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.4rem 0.8rem; align-items: center; }
.sdmmap-colhead { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
    padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); }
.sdmmap-arrow { color: var(--muted); text-align: center; }
.sdmmap-param code { font-size: 0.82rem; overflow-wrap: anywhere; }
.sdmmap-sel { width: 100%; }
.sdmmap-fires { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.7rem;
    padding: 0.5rem 0.7rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; }
.sdmmap-fires-lbl { display: flex; align-items: center; gap: 0.4rem; }
.sdmmap-fires-lbl > span { font-size: 0.8rem; white-space: nowrap; }
.sdmmap-fires-paths { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sdmmap-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; }
.sdmmap-chip code { font-size: 0.78rem; }

/* calculation-panel glyph (inline SVG replacing the abacus emoji) */
.form-calc-ico { width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 0.15em; color: #7db4ff; }

/* form editor: full-height raw-JSON panel ({ } JSON toolbar toggle) */
.fc-jsonpanel { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; min-height: 0; }
.fc-jsonpanel-bar { display: flex; align-items: center; gap: 0.4rem; }
.fc-jsonpanel-code { flex: 1; min-height: 60vh; width: 100%; font-size: 0.85rem; line-height: 1.5;
    resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* form editor: tab management (per-section select + tab-bar rename/dissolve + count chips) */
.fe-tab-new { display: inline-flex; align-items: center; gap: 0.3rem; }
.fe-tab-count { font-size: 0.66rem; font-weight: 600; padding: 0.02rem 0.35rem; margin-left: 0.25rem;
    border-radius: 4px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); }

/* form editor: configurable customer card inputs on the summary designer */
.fc-cust-label { max-width: 130px; font-size: 0.72rem; padding: 0.2rem 0.4rem; min-height: 1.7rem; }

/* form editor: "＋ from SDM" picker + portable JSON import panel */
.fc-sdmpick { margin: 0.5rem 0 0.3rem; padding: 0.6rem 0.7rem; border: 1px solid rgba(125,180,255,0.35);
    border-radius: 9px; background: rgba(91,162,255,0.06); }
.fc-sdmpick-h { display: flex; align-items: center; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.4rem; }
.fc-sdmpick-list { max-height: 18rem; overflow: auto; display: flex; flex-direction: column; gap: 1px; margin-bottom: 0.5rem; }
.fc-sdmpick-grp { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #8aa0c6;
    font-weight: 700; padding: 0.4rem 0.2rem 0.15rem; }
.fc-sdmpick-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; padding: 0.2rem 0.3rem;
    border-radius: 5px; cursor: pointer; }
.fc-sdmpick-row:hover { background: rgba(91,162,255,0.10); }
.fc-sdmpick-row.bound { opacity: 0.55; cursor: default; }
.fc-sdmpick-row code { font-size: 0.82rem; }
.fc-import { margin: 0.6rem 0; padding: 0.7rem 0.8rem; border: 1px solid rgba(125,180,255,0.4);
    border-radius: 9px; background: rgba(91,162,255,0.06); }
.fc-export-opts { display: flex; flex-direction: column; gap: 0.35rem; }
.fc-export-h { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fc-export-chip { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.86rem; cursor: pointer; }
.fc-export-chip code { font-size: 0.82rem; }
.fc-import-staged { margin: 0.4rem 0 0.6rem; padding: 0.45rem 0.7rem; font-size: 0.84rem;
    border: 1px dashed rgba(240,182,90,0.5); border-radius: 8px; background: rgba(255,184,77,0.08); color: #f0b65a; }
.fc-import-h { font-size: 0.84rem; margin-bottom: 0.45rem; }
.fc-import textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 0.82rem; }

/* mapping-by-convention hint: the param auto-binds by name at runtime */
.sdmmap-auto { flex: none; font-size: 0.76rem; color: #8fd6ae; white-space: nowrap; padding: 0.15rem 0.5rem;
    border: 1px dashed rgba(54,179,126,0.45); border-radius: 4px; background: rgba(54,179,126,0.08); }
.sdmmap-auto code { font-size: 0.74rem; color: #4ed99a; }

/* "Where it's used →" quick-links on the interface editor */
.iface-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem;
    padding: 0.45rem 0.6rem; background: rgba(91,162,255,0.06); border: 1px solid var(--border); border-radius: 8px; }
.iface-links-lbl { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-right: 0.15rem; }

/* ---- rich "Find an SDM path" finder panel ---- */
.find { display: flex; flex-direction: column; gap: 0.8rem; }
.find-lead { font-size: 0.86rem; color: var(--muted); margin: 0; line-height: 1.5; }
.find-lead code { font-size: 0.84rem; color: var(--fg, #e6e9f0); }
.find-tool { background: rgba(91,162,255,0.07); border: 1px solid var(--border); border-radius: 9px; padding: 0.6rem 0.7rem; }
.find-tool-h { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.45rem; }
.find-row-input { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.find-row-input input { flex: 1; min-width: 12rem; }
.find-app-on { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; padding: 0.15rem 0.5rem;
    border-radius: 4px; background: rgba(54,179,126,0.16); color: #4ed99a; border: 1px solid rgba(54,179,126,0.4); }
.find-app-x { border: none; background: none; color: inherit; cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0; }
.find-hits { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; }
.find-hit { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(125,180,255,0.35); border-radius: 7px; padding: 0.4rem 0.55rem; }
.find-hit:hover { background: rgba(91,162,255,0.16); border-color: rgba(91,162,255,0.6); }
.find-hit-star { color: #f0c56a; flex: none; }
.find-hit code { font-size: 0.88rem; }
.find-search { width: 100%; }
.find-list { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow: auto;
    border: 1px solid var(--border); border-radius: 9px; padding: 0.35rem; }
.find-grp { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: #8aa0c6; font-weight: 700;
    padding: 0.5rem 0.4rem 0.25rem; }
.find-r { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; text-align: left; border: 1px solid transparent;
    background: transparent; color: var(--fg, #e6e9f0); border-radius: 7px; padding: 0.45rem 0.55rem; cursor: pointer; }
.find-r:hover { background: rgba(91,162,255,0.12); }
.find-r.sel { background: rgba(91,162,255,0.24); border-color: rgba(91,162,255,0.5); }
.find-r.clear { color: var(--muted); font-style: italic; font-size: 0.85rem; }
.find-r-main { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.find-r-main code { font-size: 0.9rem; font-weight: 600; }
.find-type { font-size: 0.72rem; color: var(--muted); padding: 0.05rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; }
.find-pii { font-size: 0.7rem; color: #f0b65a; }
.find-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.find-enum { font-size: 0.76rem; color: var(--muted); }
.find-enum code { font-size: 0.74rem; }
.find-r-val { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.8rem; }
.find-r-val code { font-size: 0.82rem; color: #9db4d8; }
.find-r-val.is-live code { color: #4ed99a; }
.find-val-lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.find-r-val.is-live .find-val-lbl { color: #4ed99a; }
.find-val.live { font-size: 0.8rem; color: #4ed99a; margin-left: auto; font-family: ui-monospace, monospace; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

/* ── Interface call inspector (live debug console for the form→API firing seam) ─────────── */
.ic-fab {
    position: fixed; left: 1rem; bottom: 1rem; z-index: 1200;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.7rem; border-radius: 4px; cursor: pointer;
    background: #12141c; border: 1px solid var(--border); color: var(--fg);
    font-size: 0.82rem; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.8);
}
.ic-fab:hover { border-color: var(--accent); }
.ic-fab.on { border-color: var(--accent); background: #161a26; }
.ic-fab-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem;
    height: 1.25rem; padding: 0 0.35rem; border-radius: 4px; font-size: 0.72rem;
    background: var(--accent); color: #fff;
}
.ic-panel {
    position: fixed; left: 1rem; bottom: 3.4rem; z-index: 1200;
    width: min(560px, calc(100vw - 2rem)); max-height: min(72vh, 720px);
    display: flex; flex-direction: column;
    background: #0e1119; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); overflow: hidden;
}
.ic-head {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border); background: #0c0f18;
}
.ic-head-sub { color: var(--muted); font-size: 0.76rem; }
.ic-head-actions { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.ic-body { overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ic-empty, .ic-none { color: var(--muted); font-size: 0.82rem; margin: 0.4rem; }
.ic-none { margin: 0.2rem 0; }
.ic-call { border: 1px solid var(--border); border-radius: 10px; background: #12141c; overflow: hidden; }
.ic-call.err { border-color: #7f1d1d; }
.ic-call > summary {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; cursor: pointer;
    list-style: none; font-size: 0.82rem;
}
.ic-call > summary::-webkit-details-marker { display: none; }
.ic-pill {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem;
    padding: 0.05rem 0.35rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600;
    background: #14331f; color: #6ee7a8;
}
.ic-pill.err { background: #3a1414; color: #fca5a5; }
.ic-verb { font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--accent-2); }
.ic-code { font-weight: 600; }
.ic-name { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-meta { margin-left: auto; color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.ic-detail { padding: 0.4rem 0.6rem 0.6rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.ic-line { display: flex; gap: 0.5rem; font-size: 0.78rem; align-items: baseline; }
.ic-line > span { color: var(--muted); min-width: 3.4rem; }
.ic-line code { font-size: 0.76rem; word-break: break-all; }
.ic-block-h { font-size: 0.74rem; color: var(--muted); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ic-pre {
    margin: 0; padding: 0.5rem; border-radius: 8px; background: #0a0c12; border: 1px solid var(--border);
    font-family: ui-monospace, monospace; font-size: 0.75rem; line-height: 1.4;
    max-height: 15rem; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.ic-pre.err { color: #fca5a5; border-color: #7f1d1d; }
.ic-updates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ic-updates li { font-size: 0.78rem; display: flex; align-items: baseline; gap: 0.35rem; }
.ic-updates code { font-size: 0.76rem; }
.ic-arrow { color: var(--muted); }
.ic-val { color: #6ee7a8; font-family: ui-monospace, monospace; font-size: 0.76rem; word-break: break-all; }

/* Interface inspector: picked-path bar + clickable JSON tree */
.ic-picked {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem;
    border-bottom: 1px solid var(--border); background: #0a0c12;
}
.ic-picked-lbl { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ic-picked code {
    font-family: ui-monospace, monospace; font-size: 0.8rem; color: var(--accent-2);
    background: #12141c; border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.4rem;
    word-break: break-all;
}
.ic-picked-hint { color: var(--muted); font-size: 0.72rem; margin-left: auto; white-space: nowrap; }
.ic-block-hint { color: var(--muted); font-size: 0.7rem; text-transform: none; letter-spacing: 0; }
.ic-block-hint code { font-size: 0.7rem; }
.ic-json { line-height: 1.45; }
.jt-children { padding-left: 1.05rem; border-left: 1px solid #1c2233; margin-left: 0.15rem; }
.jt-row { white-space: nowrap; }
.jt-key {
    color: var(--accent-2); cursor: pointer; border-radius: 4px; padding: 0 0.1rem;
}
.jt-key:hover { background: rgba(96, 165, 250, 0.18); text-decoration: underline; }
.jt-idx {
    color: var(--muted); cursor: pointer; border-radius: 4px; padding: 0 0.25rem;
    font-size: 0.72rem; background: #12141c; border: 1px solid var(--border);
}
.jt-idx:hover { border-color: var(--accent); color: var(--fg); }
.jt-punc, .jt-brace { color: var(--muted); }
.jt-val { cursor: pointer; border-radius: 4px; padding: 0 0.15rem; }
.jt-val:hover { background: rgba(110, 231, 168, 0.16); text-decoration: underline; }
.jt-val.str { color: #6ee7a8; }
.jt-val.num { color: #fbbf24; }
.jt-val.bool { color: #c084fc; }
.jt-val.null { color: var(--muted); font-style: italic; }

/* Inline "add a field to the SDM" quick-add (mappings page + form editor) */
.sdmmap-quickadd-wrap { margin: 0.5rem 0 0.2rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border);
    border-radius: 12px; background: #0e1119; }
.sdmmap-quickadd-h { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.5rem; }
.fc-sdm-add { margin-top: 0.35rem; }
.sdm-quickadd { display: flex; flex-direction: column; gap: 0.5rem; }
.sdm-quickadd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.sdm-quickadd-grid .fld { margin: 0; min-width: 0; }
.sdm-quickadd-grid .fld > span { font-size: 0.72rem; color: var(--muted); }
.sdm-quickadd-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.sdm-quickadd-path { font-size: 0.78rem; color: var(--accent-2); background: #12141c; border: 1px solid var(--border);
    border-radius: 6px; padding: 0.15rem 0.45rem; min-height: 1.2rem; min-width: 6rem; }
.sdm-quickadd-chk { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 760px) { .sdm-quickadd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sdm-quickadd-storage { display: flex; flex-direction: column; gap: 0.35rem; }
.sdm-quickadd-storage > span { font-size: 0.72rem; color: var(--muted); }
.sdm-quickadd-note { font-size: 0.75rem; color: var(--muted); margin: 0; line-height: 1.4; }

/* SDM storage chips — the typed-column vs JSON-bag tell (SdmStorageChip) */
.sdm-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.68rem; font-weight: 600;
    border-radius: 4px; padding: 0.08rem 0.5rem; white-space: nowrap; border: 1px solid transparent; }
.sdm-chip-col { color: #7ee2a8; background: rgba(80, 200, 130, 0.12); border-color: rgba(80, 200, 130, 0.35); }
.sdm-chip-bag { color: #e8c47a; background: rgba(226, 178, 90, 0.12); border-color: rgba(226, 178, 90, 0.35); }
.sdm-chip-comp { color: #9db8ff; background: rgba(110, 168, 255, 0.12); border-color: rgba(110, 168, 255, 0.35); }
.sdm-chip-trans { color: var(--muted); background: rgba(140, 150, 170, 0.12); border-color: rgba(140, 150, 170, 0.35); }
.sdm-chip-unknown { color: #ff9d9d; background: rgba(224, 83, 58, 0.12); border-color: rgba(224, 83, 58, 0.4); }

/* SDM path picker (SdmPathPicker) — searchable binding combobox */
.sdmp { position: relative; }
.sdmp-closed { display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left; cursor: pointer;
    background: #12141c; border: 1px solid var(--border); border-radius: 8px; padding: 0.42rem 0.6rem;
    color: var(--fg); font-size: 0.82rem; }
.sdmp-closed:hover { border-color: var(--accent-2); }
.sdmp-closed .spacer { flex: 1; }
.sdmp-caret { color: var(--muted); font-size: 0.65rem; }
.sdmp-path { color: var(--accent-2); font-size: 0.8rem; }
.sdmp-backdrop { position: fixed; inset: 0; z-index: 60; }
.sdmp-panel { position: absolute; z-index: 61; top: calc(100% + 4px); left: 0; right: 0;
    background: #12141c; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.sdmp-search { width: 100%; }
.sdmp-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; }
.sdmp-group { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted); padding: 0.45rem 0.45rem 0.15rem; }
.sdmp-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; cursor: pointer;
    background: none; border: 0; border-radius: 6px; padding: 0.32rem 0.45rem; color: var(--fg); font-size: 0.8rem; }
.sdmp-row:hover { background: rgba(110, 168, 255, 0.1); }
.sdmp-row.on { background: rgba(110, 168, 255, 0.16); }
.sdmp-row .spacer { flex: 1; }
.sdmp-label { font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38%; }
.sdmp-type { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.sdmp-empty { padding: 0.5rem 0.45rem; margin: 0; }

/* Inspector: collapsible property groups */
.fc-group { border: 1px solid var(--border); border-radius: 10px; background: #0e1119;
    padding: 0 0.6rem; margin-bottom: 0.55rem; }
.fc-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 700; color: var(--muted); padding: 0.5rem 0.05rem; user-select: none; }
.fc-group > summary::-webkit-details-marker { display: none; }
.fc-group > summary::after { content: "▸"; margin-left: auto; font-size: 0.65rem; transition: transform 0.12s; }
.fc-group[open] > summary::after { transform: rotate(90deg); }
.fc-group[open] > summary { color: var(--fg); }
.fc-group > .fc-props-grid { padding: 0.1rem 0.05rem 0.65rem; }

/* Inspector: live SDM lint under the binding control */
.fc-sdm-lint { margin: 0.3rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.fc-sdm-lint li { font-size: 0.75rem; line-height: 1.4; padding: 0.3rem 0.5rem; border-radius: 6px; }
.fc-sdm-lint li.warn { color: #ffb4a3; background: rgba(224, 83, 58, 0.1); border: 1px solid rgba(224, 83, 58, 0.3); }
.fc-sdm-lint li.info { color: var(--muted); background: rgba(140, 150, 170, 0.08); border: 1px solid var(--border); }

/* Section headers open the section inspector on click */
.form-edit-section-head { cursor: pointer; }
.form-edit-section-head .form-edit-section-title { cursor: text; }

/* Right-click context menu (form editor) — above every editor overlay (dm-edit family is ~1200) */
.fe-ctx-backdrop { position: fixed; inset: 0; z-index: 1210; }
.fe-ctx-menu {
    position: fixed; z-index: 1211; min-width: 200px;
    background: #12141c; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); padding: 0.3rem; display: flex; flex-direction: column;
}
.fe-ctx-menu button {
    background: none; border: 0; border-radius: 6px; padding: 0.45rem 0.6rem;
    color: var(--fg); font-size: 0.85rem; text-align: left; cursor: pointer;
}
.fe-ctx-menu button:hover { background: rgba(110, 168, 255, 0.12); }

/* ✨ Field wizard modal. Its backdrop MUST sit BELOW the panel: the wizard first reused
   .dm-edit-backdrop (z 1190) while the panel was z 80 — the dimmer covered the wizard itself and
   swallowed every click, closing it. Pair the layers like the dm-edit family: backdrop 1190 / panel 1200.
   Docked RIGHT (not centered) and the backdrop kept LIGHT on purpose: the canvas stays readable on
   the left so the .fe-wiz-ghost placement block shows where the field will land. */
.fe-wiz-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.3); z-index: 1190; }
.fe-wiz {
    position: fixed; z-index: 1200; top: 50%; right: 1.25rem; transform: translateY(-50%);
    width: min(880px, calc(100vw - 2.5rem)); height: min(90vh, 960px);
    display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1.1rem;
}
.fe-wiz-head { display: flex; align-items: center; gap: 0.5rem; }
.fe-wiz-head .spacer { flex: 1; }
.fe-wiz-body { overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.fe-wiz-body .fld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.fe-wiz-body .fld > span { color: var(--muted); font-size: 0.8rem; }
.fe-wiz-airow { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.fe-wiz-ifaces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.fe-wiz-ifaces li { font-size: 0.84rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: #12141c; }
.fe-wiz-radio { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; margin: 0.15rem 0; }
.fe-wiz-deploy-ok { font-size: 0.88rem; padding: 0.5rem 0.65rem; border: 1px solid rgba(80, 200, 130, 0.35);
    border-radius: 8px; background: rgba(80, 200, 130, 0.08); }
.fe-wiz-foot { display: flex; align-items: center; gap: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.fe-wiz-foot .spacer { flex: 1; }

/* Placement ghost — the "your field lands HERE" block shown in the canvas while the right-click
   menu or the field wizard is open. Bright on purpose: it must read through the light wizard backdrop. */
.fe-wiz-ghost {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.65rem; margin: 0.15rem 0;
    border: 2px dashed var(--accent, #6ea8ff); border-radius: 10px;
    background: rgba(110, 168, 255, 0.14);
    color: var(--fg); font-size: 0.85rem;
    box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.12), 0 0 18px rgba(110, 168, 255, 0.25);
    animation: fe-wiz-ghost-pulse 1.6s ease-in-out infinite;
}
.fe-wiz-ghost code { color: var(--accent-2); }
@keyframes fe-wiz-ghost-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.10), 0 0 14px rgba(110, 168, 255, 0.18); }
    50%      { box-shadow: 0 0 0 4px rgba(110, 168, 255, 0.22), 0 0 26px rgba(110, 168, 255, 0.40); }
}

/* The field currently loaded into the wizard's REWORK mode — same glow family as the ghost,
   solid outline (it's the real row, not a placeholder). */
.form-edit-field.fe-wiz-rework {
    outline: 2px dashed var(--accent, #6ea8ff);
    outline-offset: 2px;
    animation: fe-wiz-ghost-pulse 1.6s ease-in-out infinite;
    border-radius: 10px;
}

/* Step-6 in-wizard mapping + step-7 AI rule suggestions */
.fe-wiz-map { display: flex; flex-direction: column; gap: 0.45rem; border: 1px solid var(--border);
    border-radius: 10px; padding: 0.6rem 0.7rem; background: #12141c; }
.fe-wiz-map-row { display: flex; align-items: flex-end; gap: 0.55rem; flex-wrap: wrap; }
.fe-wiz-map-row .fld { flex: 1; min-width: 180px; }
.fe-wiz-suggestion { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.84rem;
    padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: #12141c; }
.fe-wiz-suggestion code { color: var(--accent-2); word-break: break-all; }
.fe-wiz-suggestion .muted { display: block; margin-top: 0.15rem; }
.fe-wiz-suggestion-body { flex: 1; }

/* ⚡ Auto-bind staged-review panel (bottom action bar neighbour, like Export/Import) */
.fc-autobind-rows { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.5rem 0; max-height: 300px; overflow-y: auto; }
.fc-autobind-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.82rem;
    padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 8px; background: #12141c; }
.fc-autobind-row code { color: var(--accent-2); }
.fc-autobind-row .muted { font-size: 0.75rem; }
.fc-autobind-row .spacer { flex: 1; }
.fc-autobind-actions { display: flex; align-items: center; gap: 0.6rem; }

/* Form editor: per-field persistence choice (Saved / Screen-only) */
.fc-persist { display: flex; flex-direction: column; gap: 0.3rem; }
.fc-persist-note { font-size: 0.75rem; margin: 0.1rem 0 0; line-height: 1.45; }
.fc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: fit-content; }
.fc-seg > button { background: transparent; border: none; color: var(--muted); padding: 0.35rem 0.7rem;
    font-size: 0.82rem; cursor: pointer; border-right: 1px solid var(--border); }
.fc-seg > button:last-child { border-right: none; }
.fc-seg > button:hover { background: rgba(127,127,127,0.1); color: var(--fg); }
.fc-seg > button.on { background: rgba(91,162,255,0.16); color: var(--fg); }
.fc-local-note { font-size: 0.82rem; color: var(--muted); background: #0e1119; border: 1px solid var(--border);
    border-radius: 8px; padding: 0.5rem 0.65rem; margin: 0.2rem 0 0; }

/* Form editor: editable direct interface-wiring panel */
.fc-wire-scope { margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; border-left: 3px solid rgba(91, 162, 255, 0.55);
    background: rgba(91, 162, 255, 0.06); border-radius: 0 6px 6px 0; }
.fc-wire-add { display: flex; gap: 0.4rem; margin: 0.5rem 0; }
.fc-wire-add select { flex: 1; }
.fc-wire-call { border: 1px solid var(--border); border-radius: 10px; background: #0e1119; padding: 0.55rem 0.65rem; margin-bottom: 0.5rem; }
.fc-wire-call-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.fc-wire-fires { display: flex; align-items: center; gap: 0.4rem; margin: 0.25rem 0; }
.fc-wire-fires > span { font-size: 0.76rem; color: var(--muted); min-width: 3.2rem; }
.fc-wire-fires select { flex: 1; }
.fc-wire-trigfields { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.2rem 0 0.4rem; }
.fc-wire-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.76rem; color: var(--muted);
    border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.45rem; }
.fc-wire-block { margin-top: 0.45rem; }
.fc-wire-block-h { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.fc-wire-row { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.25rem; }
.fc-wire-row > code { font-size: 0.76rem; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-wire-arrow { color: var(--muted); }
.fc-wire-fieldsel { flex: 1; min-width: 0; }
.fc-wire-actions { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0; }
.fc-wire-sdm { margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.fc-wire-sdm > summary { cursor: pointer; font-size: 0.82rem; color: var(--muted); }

/* Form editor: the form Name field under the title */
.form-edit-name { display: block; margin: 0.1rem 0 0.6rem; max-width: 640px; }
.form-edit-name > span { display: block; font-size: 0.78rem; margin-bottom: 0.2rem; }
.form-edit-name input { width: 100%; font-size: 1rem; }

/* ===== Contract Management (console + /contracts/{id} detail) ===== */
.contract-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
/* Contract payment schedule — behind a reveal so the page leads with the summary, not 60 rows */
.cm-schedule-head { display: flex; align-items: center; gap: 0.9rem; margin-top: 1rem; flex-wrap: wrap; }
.cm-schedule-scroll { margin-top: 0.9rem; max-height: 440px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.cm-schedule thead th { position: sticky; top: 0; z-index: 1; }
.contract-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.8rem; }
.contract-chip {
    display: inline-block; padding: 0.15rem 0.6rem; border-radius: 4px;
    border: 1px solid var(--border); background: #141823; color: var(--fg);
    font-size: 0.78rem; font-weight: 600;
}
.contract-chip.ok { background: color-mix(in srgb, #4ade80 16%, transparent); color: #bbf7d0; border-color: color-mix(in srgb, #4ade80 35%, transparent); }
.contract-chip.warn { background: color-mix(in srgb, #f87171 14%, transparent); color: #fecaca; border-color: color-mix(in srgb, #f87171 35%, transparent); }

/* ===== Collections workbench (/collections + /collections/{id}) ===== */
.coll-row-highlight td { background: color-mix(in srgb, #4ade80 10%, transparent); }
.term-progress-wrap { margin-top: 0.75rem; }
.term-progress-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.term-progress-track { height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.term-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.contract-row-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ---- Credit "more info" bounce-back banner (FS application page) ---- */
.info-request-banner { display: flex; gap: 0.75rem; align-items: flex-start; border-left: 3px solid #6ea8fe;
  background: rgba(110, 168, 254, 0.08); margin: 0 0 1rem; }
.info-request-icon { font-size: 1.2rem; line-height: 1.4; }
.info-request-text { margin: 0.25rem 0; font-size: 0.95rem; }

/* ---- Credit "running checks" processing banner (FS application page) ---- */
.processing-banner { display: flex; gap: 0.75rem; align-items: flex-start; border-left: 3px solid #a78bfa;
  background: rgba(167, 139, 250, 0.08); margin: 0 0 1rem; }
.processing-banner .phase-spinner { margin-top: 0.2rem; flex: 0 0 auto; }

/* ---- Auto-approval rule builder (/admin/auto-approval-rules) ---- */
.aar-head h1 { margin: 0.2rem 0 0.3rem; }
.aar-scope { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.8rem 0 1rem; }
.aar-scope select { max-width: 320px; }
.aar-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .aar-grid { grid-template-columns: 1fr; } }
.aar-rules-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.aar-rules-head h2 { margin: 0; font-size: 1.05rem; }
.aar-empty { padding: 1rem; border: 1px dashed var(--border); border-radius: 10px; }
.aar-card { display: flex; gap: 0.6rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border);
  border-radius: 12px; background: rgba(255,255,255,0.02); margin-bottom: 0.6rem; }
.aar-card.aar-off { opacity: 0.55; }
.aar-card.aar-editing { border-color: #6ea8fe; box-shadow: 0 0 0 1px #6ea8fe33; }
.aar-card-ord { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.aar-ord-btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted);
  cursor: pointer; width: 22px; height: 20px; line-height: 1; font-size: 0.65rem; }
.aar-ord-btn:disabled { opacity: 0.3; cursor: default; }
.aar-ord-n { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.aar-card-body { flex: 1; min-width: 0; }
.aar-card-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.aar-card-cond { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.aar-chip { font-size: 0.78rem; padding: 0.1rem 0.45rem; border-radius: 6px; background: rgba(255,255,255,0.06);
  border: 1px solid var(--border); white-space: nowrap; }
.aar-comb { font-size: 0.68rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.aar-detail { margin-top: 0.3rem; }
.aar-card-actions { display: flex; flex-direction: column; gap: 0.3rem; }
.aar-del { color: #ff8a8a; }
.aar-outcome { font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.aar-badge-off { font-size: 0.68rem; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.4rem; }
.aar-ok   { background: rgba(70, 200, 120, 0.16); color: #7ee2a8; }
.aar-bad  { background: rgba(255, 110, 110, 0.16); color: #ff9a9a; }
.aar-info { background: rgba(110, 168, 254, 0.18); color: #9cc4ff; }
.aar-warn { background: rgba(240, 190, 90, 0.18); color: #f2cd82; }
.aar-editor, .aar-test { padding: 1rem; }
.aar-editor h3, .aar-test h3 { margin: 0 0 0.6rem; }
.aar-f { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; }
.aar-f > span, .aar-f-label { font-size: 0.78rem; color: var(--muted); }
.aar-f-label { display: block; margin: 0.4rem 0 0.3rem; }
.aar-f-top { margin-top: 0.4rem; }
.aar-comb-toggle { display: flex; gap: 0.4rem; }
.aar-cond-row { display: grid; grid-template-columns: minmax(0,1.3fr) auto minmax(0,1fr) auto; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
.aar-cond-row .aar-op { min-width: 68px; }
.aar-cond-del { background: none; border: none; color: #ff8a8a; cursor: pointer; font-size: 0.9rem; }
.aar-editor-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; }
.aar-test-result { padding: 0.7rem 0.9rem; border-radius: 10px; margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.15rem; }
.aar-test-none { background: rgba(255,255,255,0.05); }
.aar-test-ctx { margin-top: 0.4rem; }
.aar-ctx-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
.aar-ctx-table td { padding: 0.15rem 0.3rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.aar-ctx-table td:first-child { width: 60%; }

/* ---- PMS proposal timeline (reuses the FS tl-* strip classes) ---- */
.pms-tl-wrap { margin: 0.6rem 0 1rem; }
.pms-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pms-callpop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pms-callpop-card { background: #12151d; border: 1px solid var(--border); border-radius: 14px;
  padding: 1rem 1.1rem; width: min(680px, 96vw); max-height: 86vh; overflow-y: auto; }
.pms-callpop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
.pms-callpop-card h4 { margin: 0.7rem 0 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pms-callpre { margin: 0; padding: 0.5rem 0.65rem; background: rgba(0,0,0,0.35); border-radius: 8px;
  font-size: 0.74rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 30vh; overflow-y: auto; }

/* ---- "with Proposal Management" banner (FS, while awaiting the credit decision) ---- */
.awaiting-credit-banner { display: flex; gap: 0.75rem; align-items: flex-start; border-left: 3px solid #f2cd82;
  background: rgba(240, 205, 130, 0.08); margin: 0.4rem 0 1rem; }
.awaiting-credit-icon { font-size: 1.2rem; line-height: 1.4; }
.awaiting-credit-banner p { margin: 0.25rem 0 0.5rem; }

/* ============ PMS proposal detail (full-width redesign) ============ */
.pms-detail-full { width: 100%; text-align: left; }
.pms-dh { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.pms-dh-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pms-dh-title strong { font-size: 1.15rem; }
.pms-dh-timers { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pms-timer { font-size: 0.78rem; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0.15rem 0.6rem; }
.pms-timer.warn { color: #f2cd82; border-color: rgba(240,205,130,0.4); }

/* decision bar */
.pms-decision-bar { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 1.2rem; padding: 1rem 1.2rem; margin-bottom: 1rem; }
@media (max-width: 780px) { .pms-decision-bar { grid-template-columns: 1fr; } }
.pms-db-score { display: flex; flex-direction: column; gap: 0.2rem; border-right: 1px solid var(--border); padding-right: 1rem; }
@media (max-width: 780px) { .pms-db-score { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 0.6rem; } }
.pms-db-scoreval { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.pms-db-overall { font-size: 0.85rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 6px; align-self: flex-start; margin-top: 0.2rem; }
.pms-db-form .pms-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pms-db-form .pms-field-label { display: block; margin: 0.5rem 0 0.3rem; font-size: 0.78rem; color: var(--muted); }

/* the two-column body */
.pms-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .pms-detail-grid { grid-template-columns: 1fr; } }
.pms-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pms-side { min-width: 0; }
.pms-side-sticky { position: sticky; top: 1rem; }

.pms-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; }
.pms-card > h3 { margin: 0 0 0.7rem; font-size: 1rem; display: flex; align-items: baseline; gap: 0.5rem; }
.pms-card-hint { font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.pms-subh { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0.8rem 0 0.35rem; }

/* key-value grid */
.pms-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem 1.2rem; }
.pms-kv > div { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.88rem; }
.pms-kv .muted { font-size: 0.72rem; }

/* tables */
.pms-tbl { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.pms-tbl th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); }
.pms-tbl td { padding: 0.3rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pms-tbl th.num, .pms-tbl td.num { text-align: right; }

/* Applicant Overview grid (application detail) — the primary applicant plus co-applicants /
   guarantors as real Parties, mirroring the downstream "Applicants (N)" table. */
.applicant-overview { margin-bottom: 1rem; padding: 1rem 1.1rem; }
.ao-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.55rem; }
.ao-head h3 { margin: 0; font-size: 0.95rem; }
.ao-count { font-size: 0.74rem; color: var(--muted); }
.ao-scroll { overflow-x: auto; }
.ao-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; white-space: nowrap; }
.ao-tbl th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border); }
.ao-tbl td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ao-tbl tr.ao-primary td { font-weight: 500; }
.ao-check.ok { color: #7ee2a8; font-weight: 700; }
.ao-check.bad { color: #ff9a9a; font-weight: 700; }
.ao-role { font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 4px; }
.ao-role.main { background: rgba(120,160,255,0.16); color: #a8c4ff; }
.ao-role.co { background: rgba(160,140,255,0.16); color: #c3b3ff; }
.ao-role.guar { background: rgba(240,190,90,0.16); color: #f2cd82; }
.ao-guarantor-note {
    margin: 0 0 0.6rem; padding: 0.45rem 0.7rem; border-radius: 6px;
    background: rgba(240,190,90,0.1); border: 1px solid rgba(240,190,90,0.28);
    color: #f2cd82; font-size: 0.8rem;
}

/* 5 Cs scorecard */
.pms-5c { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; }
/* AI credit assessment card on the proposal detail */
.pms-ai-card { border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.pms-ai-body { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.pms-ai-score { flex: 0 0 auto; min-width: 130px; text-align: center; padding: 0.4rem 0.9rem 0.5rem; border-right: 1px solid var(--border); }
.pms-ai-score-n { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pms-ai-score-n small { font-size: 0.95rem; font-weight: 400; color: var(--muted); }
.pms-ai-conf { margin-top: 0.35rem; font-size: 0.76rem; color: var(--muted); }
.pms-ai-main { flex: 1 1 340px; min-width: 300px; }
.pms-ai-rationale { margin: 0 0 0.7rem; line-height: 1.5; }
.pms-ai-factors { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.pms-ai-factor { display: grid; grid-template-columns: 64px minmax(120px, 200px) 1fr; gap: 0.6rem; align-items: baseline; font-size: 0.86rem; }
.pms-ai-fw { text-transform: uppercase; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.12rem 0.35rem;
  border-radius: 6px; text-align: center; align-self: start; }
.pms-ai-fw-high { background: color-mix(in srgb, #f87171 22%, transparent); color: #fecaca; }
.pms-ai-fw-medium { background: color-mix(in srgb, #fbbf24 22%, transparent); color: #fde68a; }
.pms-ai-fw-low { background: color-mix(in srgb, #9aa3b8 22%, transparent); color: #cbd3e6; }
.pms-ai-fn { font-weight: 600; }
.pms-ai-fa { line-height: 1.4; }
.pms-ai-meta { margin-top: 0.5rem; font-family: ui-monospace, monospace; font-size: 0.72rem; }
.pms-5c-card { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.8rem; background: rgba(0,0,0,0.15); }
.pms-5c-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.pms-5c-label { font-weight: 600; font-size: 0.82rem; }
.pms-5c-grade { font-size: 0.68rem; font-weight: 700; padding: 0.08rem 0.4rem; border-radius: 4px; }
.pms-5c-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); margin: 0.45rem 0 0.4rem; overflow: hidden; }
.pms-5c-bar > span { display: block; height: 100%; border-radius: 3px; }
.pms-5c-val { font-size: 1.05rem; font-weight: 700; }
.pms-5c-expl { margin: 0.25rem 0 0.4rem; line-height: 1.4; }
.pms-5c-metrics { display: flex; flex-direction: column; gap: 0.15rem; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 0.4rem; }
.pms-5c-metrics > div { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.76rem; }

/* grade colours (bar fill, grade pill, overall) */
.g-strong { background: rgba(70,200,120,0.9); color: #072; }
.g-good   { background: rgba(150,200,110,0.9); color: #363; }
.g-fair   { background: rgba(240,190,90,0.9); color: #630; }
.g-weak   { background: rgba(255,110,110,0.9); color: #600; }
.pms-5c-grade.g-strong, .pms-db-overall.g-strong { background: rgba(70,200,120,0.18); color: #7ee2a8; }
.pms-5c-grade.g-good, .pms-db-overall.g-good { background: rgba(150,200,110,0.18); color: #bfe29a; }
.pms-5c-grade.g-fair, .pms-db-overall.g-fair { background: rgba(240,190,90,0.18); color: #f2cd82; }
.pms-5c-grade.g-weak, .pms-db-overall.g-weak { background: rgba(255,110,110,0.18); color: #ff9a9a; }

/* screening */
.pms-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
@media (max-width: 560px) { .pms-screen { grid-template-columns: 1fr; } }
.pms-screen-item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; }
.pms-screen-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.pms-screen-item.ok { border-color: rgba(70,200,120,0.4); } .pms-screen-item.ok .pms-screen-icon { background: rgba(70,200,120,0.2); color: #7ee2a8; }
.pms-screen-item.bad { border-color: rgba(255,110,110,0.4); } .pms-screen-item.bad .pms-screen-icon { background: rgba(255,110,110,0.2); color: #ff9a9a; }
.pms-screen-item.warn { border-color: rgba(240,190,90,0.4); } .pms-screen-item.warn .pms-screen-icon { background: rgba(240,190,90,0.2); color: #f2cd82; }
.pms-screen-item.none .pms-screen-icon { background: rgba(255,255,255,0.08); color: var(--muted); }

/* finance side panel */
.pms-fin { display: flex; flex-direction: column; gap: 0.3rem; }
.pms-fin-row { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.88rem; }
.pms-fin-row.strong { font-weight: 700; }
.pms-fin-row.big { font-size: 1.15rem; font-weight: 700; }
.pms-fin-row.big > span:last-child { color: #8ab4f8; }
.pms-fin-sep { height: 1px; background: var(--border); margin: 0.35rem 0; }

/* ============ PMS detail v2: top row (scorecard + finance), full-width below ============ */
.pms-top-row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
@media (max-width: 1000px) { .pms-top-row { grid-template-columns: 1fr; } }
.pms-scorecard-card { min-width: 0; }
.pms-fin-aside { min-width: 0; }
.pms-fin-card { height: 100%; box-sizing: border-box; }
.pms-below { display: flex; flex-direction: column; gap: 1rem; }
.pms-below .pms-card { width: 100%; box-sizing: border-box; }

/* horizontal timeline: give the nodes breathing room so it scrolls instead of squashing,
   with an always-visible horizontal scrollbar when the track overflows */
/* Spacing now comes from the labelled tl-gap chips between nodes (like the FS activity timeline),
   not a uniform track gap. */
.pms-tl-wrap .tl-track { gap: 0; padding-bottom: 0.5rem; }
/* Keep the Details button inside the fixed-width card: let the pill shrink and the row wrap. */
.pms-tl-wrap .tl-row { flex-wrap: wrap; }
.pms-tl-wrap .tl-pill { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pms-tl-wrap .tl-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-color: var(--muted) transparent; }
.pms-tl-wrap .tl-scroll::-webkit-scrollbar { height: 10px; }
.pms-tl-wrap .tl-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 6px; }
.pms-tl-wrap .tl-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 6px; }

/* existing-customer & exposure */
.pms-expo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; margin-bottom: 0.6rem; }
.pms-expo-fig { display: flex; flex-direction: column; gap: 0.1rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.7rem; background: rgba(0,0,0,0.15); }
.pms-expo-n { font-size: 1.3rem; font-weight: 700; }
.pms-active-row td { background: rgba(110,168,254,0.05); }

/* payment / contact / area status pills */
.pms-pay { font-size: 0.74rem; padding: 0.1rem 0.45rem; border-radius: 4px; white-space: nowrap; }
.pms-pay.ok { background: rgba(70,200,120,0.16); color: #7ee2a8; }
.pms-pay.warn { background: rgba(240,190,90,0.16); color: #f2cd82; }
.pms-pay.bad { background: rgba(255,110,110,0.16); color: #ff9a9a; }
.pms-area { font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 4px; margin-left: 0.4rem; white-space: nowrap; }
.pms-area.ok { color: #7ee2a8; } .pms-area.warn { color: #f2cd82; } .pms-area.bad { color: #ff9a9a; }
.pms-contact-note { margin-top: 0.6rem; }
.pms-contact-note span { font-size: 0.72rem; color: var(--muted); }
.pms-upload { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.35rem; }

.pms-hidden { display: none !important; }

/* ── Knowledge base (/admin/knowledge) ─────────────────────────────────────── */
.kb-add { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; margin: 0.4rem 0 1rem; background: rgba(0,0,0,0.12); display: flex; flex-direction: column; gap: 0.8rem; }
.kb-add-modes { display: flex; align-items: center; gap: 0.5rem; }
.kb-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem 0.9rem; }
.kb-add-grid .kb-span2 { grid-column: span 2; }
.kb-paste { min-height: 8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; resize: vertical; }
.kb-title-btn { background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.kb-title-btn:hover { text-decoration: underline; }

.kb-detail { display: flex; flex-direction: column; gap: 0.7rem; }
.kb-detail-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.kb-chip { font-size: 0.72rem; padding: 0.12rem 0.5rem; border-radius: 4px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.kb-detail-file { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.kb-detail-img { max-width: 100%; border: 1px solid var(--border); border-radius: 10px; }
.kb-detail-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.kb-tag { font-size: 0.72rem; padding: 0.08rem 0.45rem; border-radius: 6px; background: rgba(110,168,254,0.14); color: #9ec3ff; }
.kb-detail-h { margin: 0.4rem 0 0; font-size: 0.9rem; }
.kb-detail-text { white-space: pre-wrap; word-break: break-word; max-height: 26rem; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; line-height: 1.5; border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.8rem; background: rgba(0,0,0,0.18); margin: 0; }

/* knowledge base — "Draft into…" previews */
.kb-draft-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.6rem; }
/* build/integrate: scope picker + AI plan */
.kb-build-scope { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 0.5rem; }
.kb-build-steps { margin: 0.4rem 0 0.2rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.kb-build-steps li { line-height: 1.45; }
.kb-build-steps .lp-btn { margin-left: 0.5rem; }
.kb-build-target {
    display: inline-block; margin-right: 0.4rem; font-size: 0.68rem; font-weight: 600;
    border: 1px solid var(--border); border-radius: 4px; padding: 0.06rem 0.5rem; color: var(--muted);
}
.kb-build-oos { margin: 0.15rem 0 0.3rem; padding-left: 1.3rem; }
.kb-draft-preview { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.8rem; background: rgba(110,168,254,0.05); display: flex; flex-direction: column; gap: 0.45rem; }
.kb-draft-tree { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; }
.kb-draft-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.kb-draft-table th, .kb-draft-table td { text-align: left; padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.kb-draft-table .sm { font-size: 0.78rem; }
.kb-draft-stages { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.kb-draft-stage { border: 1px solid var(--border); border-left: 3px solid #6ea8ff; border-radius: 8px; padding: 0.25rem 0.55rem; font-size: 0.82rem; }
.kb-draft-stage .muted { font-size: 0.7rem; margin-left: 0.3rem; }

/* ── Complex forms: explicit grid, group boxes, wizard presentation ─────────── */
.form-fields-grid { display: grid; gap: 0.9rem 1rem; }
.form-fields-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-fields-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-fields-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-fields-grid .fr-span-2 { grid-column: span 2; }
.form-fields-grid .fr-span-3 { grid-column: span 3; }
.form-fields-grid .fr-span-4 { grid-column: span 4; }
@media (max-width: 860px) {
  .form-fields-grid-3, .form-fields-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-fields-grid .fr-span-3, .form-fields-grid .fr-span-4 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .form-fields-grid-2, .form-fields-grid-3, .form-fields-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-fields-grid .fr-span-2, .form-fields-grid .fr-span-3, .form-fields-grid .fr-span-4 { grid-column: span 1; }
}

.form-group-box { border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 0.9rem 0.9rem; margin: 0 0 0.9rem; min-width: 0; }
.form-group-legend { padding: 0 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; }

.form-wizard-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.1rem; }
.form-wizard-step { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--fg); padding: 0.3rem 0.8rem 0.3rem 0.35rem; font: inherit; font-size: 0.86rem; cursor: pointer; }
.form-wizard-step:disabled { opacity: 0.45; cursor: default; }
.form-wizard-step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 4px; background: rgba(255,255,255,0.08); font-size: 0.78rem; font-weight: 700; }
.form-wizard-step.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.form-wizard-step.current .form-wizard-step-n { background: var(--accent); color: #fff; }
.form-wizard-step.done .form-wizard-step-n { background: rgba(70,200,120,0.2); color: #7ee2a8; }
.form-wizard-step-sep { width: 1.1rem; height: 1px; background: var(--border); flex: none; }
.form-wizard-nav { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.form-wizard-spacer { flex: 1; }
.form-wizard-error { font-size: 0.85rem; }
.form-wizard-final { font-size: 0.85rem; }

/* form editor: drag grips, drop affordance, presentation picker */
.fe-grip { cursor: grab; user-select: none; color: var(--muted); font-size: 0.95rem; padding: 0.1rem 0.25rem; border-radius: 6px; flex: none; align-self: center; }
.fe-grip:hover { color: var(--fg); background: rgba(255,255,255,0.07); }
.fe-grip:active { cursor: grabbing; }
.form-edit-field.fe-drop-ok { outline: 1px dashed rgba(110,168,254,0.55); outline-offset: 2px; }
.form-edit-presentation { display: flex; align-items: center; gap: 0.7rem; margin: 0.3rem 0 0.6rem; }

/* ── Display field kinds: stat tiles, progress, badges, notes, widget slots ── */
.form-field-viz { display: block; }
.form-stat { display: flex; gap: 0.7rem; align-items: flex-start; border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem 0.95rem; background: rgba(0,0,0,0.14); height: 100%; }
.form-stat-icon { font-size: 1.5rem; line-height: 1.2; }
.form-stat-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.form-stat-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.form-stat-value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.form-stat-sub { font-size: 0.78rem; }

.form-progress { display: flex; flex-direction: column; gap: 0.3rem; }
.form-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.form-progress-readout { font-weight: 700; font-size: 0.95rem; }
.form-progress-track { height: 0.55rem; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.form-progress-bar { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.35s ease; }

.form-badge-wrap { display: flex; flex-direction: column; gap: 0.25rem; }
.form-badge { --badge-color: #8ab4f8; display: inline-flex; align-self: flex-start; align-items: center; padding: 0.18rem 0.65rem; border-radius: 4px; font-size: 0.82rem; font-weight: 600; color: var(--badge-color); background: color-mix(in srgb, var(--badge-color) 16%, transparent); border: 1px solid color-mix(in srgb, var(--badge-color) 40%, transparent); }

.form-note { display: flex; gap: 0.6rem; border-left: 3px solid var(--border); padding: 0.35rem 0 0.35rem 0.75rem; }
.form-note-icon { font-size: 1.2rem; }
.form-note-title { display: block; font-size: 0.88rem; margin-bottom: 0.15rem; }
.form-note-body { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }

.form-widget-slot { min-width: 0; }
.form-widget-placeholder { border: 1px dashed var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.85rem; }

/* built-in widgets */
.fw-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.fw-tl-row { display: flex; align-items: baseline; gap: 0.55rem; }
.fw-tl-icon { flex: none; width: 1.2rem; text-align: center; }
.fw-tl-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fw-tl-title { font-size: 0.86rem; font-weight: 600; }
.fw-tl-detail { font-size: 0.76rem; }
.fw-tl-time { flex: none; font-size: 0.74rem; white-space: nowrap; }
.fw-tl-empty { font-size: 0.85rem; }
.fw-docs { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fw-doc-row { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.86rem; }
.fw-doc-row .muted { font-size: 0.76rem; }
.fw-docs-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; font: inherit;
    color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid var(--border);
    border-radius: 8px; padding: 0.35rem 0.7rem; cursor: pointer; }
.fw-docs-toggle:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent); }
.fw-docs-caret { color: var(--muted); font-size: 0.75rem; }
.fe-opt-color { width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: transparent; flex: none; }

/* knowledge base — quick-capture paste zone + classify-later */
.kb-quick-zone { display: flex; align-items: center; gap: 0.6rem; border: 1.5px dashed var(--border); border-radius: 12px; padding: 0.75rem 1rem; margin: 0.2rem 0 0.7rem; font-size: 0.9rem; color: var(--muted); cursor: text; outline: none; }
.kb-quick-zone:focus, .kb-quick-zone.attachments-zone-hover { border-color: var(--accent); color: var(--fg); box-shadow: 0 0 0 1px var(--accent); }
.kb-quick-icon { font-size: 1.2rem; }
.kb-quick-busy { margin-left: auto; font-size: 0.82rem; color: var(--accent); white-space: nowrap; }
.kb-chip-warn { border-color: rgba(240,190,90,0.5); color: #f2cd82; }
.kb-classify { border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.8rem; }
.kb-classify summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; }
.kb-classify .kb-add-grid { margin-top: 0.6rem; }

/* form editor — "Where used" placement panel */
.form-edit-whereused { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.85rem; margin: 0.5rem 0 0.2rem; background: rgba(110,168,254,0.05); }
.form-edit-whereused-off { background: rgba(240,190,90,0.06); border-color: rgba(240,190,90,0.4); }
.form-edit-whereused-h { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; }
.form-edit-whereused-warn { display: block; color: #f2cd82; font-size: 0.84rem; margin-top: 0.2rem; }
.form-edit-whereused-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; font-size: 0.86rem; }
.form-edit-whereused-list li { white-space: normal; }

/* document templates — draft-from-example step flow */
.doctmpl-fromexample .doctmpl-steps { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.doctmpl-steps > li { display: flex; gap: 0.7rem; align-items: flex-start; opacity: 0.55; }
.doctmpl-steps > li.current, .doctmpl-steps > li.done { opacity: 1; }
.doctmpl-step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 4px; background: rgba(255,255,255,0.08); font-size: 0.82rem; font-weight: 700; }
.doctmpl-steps > li.current .doctmpl-step-n { background: var(--accent); color: #fff; }
.doctmpl-steps > li.done .doctmpl-step-n { background: rgba(70,200,120,0.2); color: #7ee2a8; }
.doctmpl-steps > li.done .doctmpl-step-n::after { content: "✓"; }
.doctmpl-steps > li.done .doctmpl-step-n { font-size: 0; }
.doctmpl-steps > li.done .doctmpl-step-n::after { font-size: 0.9rem; }
.doctmpl-upload-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; flex-wrap: wrap; }

/* document templates — signing panel editor, refine compare, binding scan, email row */
.doctmpl-signer-row { display: flex; gap: 0.6rem; align-items: flex-end; margin: 0.45rem 0; flex-wrap: wrap; }
.doctmpl-signer-row label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--muted); }
.doctmpl-original { width: 100%; max-height: 420px; border: 1px solid var(--border); border-radius: 8px; margin: 0.5rem 0; object-fit: contain; background: #fff; }
.doctmpl-original-pdf { height: 420px; }
.doctmpl-refine-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.5rem 0; }
.doctmpl-map-table { margin-top: 0.6rem; }
.doctmpl-map-table code { word-break: break-all; }
.doctmpl-email-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.doctmpl-email-row input { max-width: 260px; }

/* shared "Edit this form" deep-link row above a rendered form */

/* ── Sticky page actions ─────────────────────────────────────────────────────
   Long workspace pages put their primary actions (Save / Record decision / …) in a row that
   rides the bottom of the scroll viewport while the page extends past it, and settles inline
   once you reach its natural position — Save is always in reach, no hunting at the page end.
   Sticky is relative to the app's scroll container (.shell, overflow:auto), so it coexists
   with the pinned AI drawer (which pads .shell, not the viewport). */
.page-actions-sticky {
    position: sticky; bottom: 0; z-index: 8;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    padding: 0.65rem 0.2rem;
    margin-top: 0.6rem;
}
.form-banner-inline { font-size: 0.85rem; margin-left: 0.4rem; }
.form-banner-inline.form-banner-error, .form-banner-inline.form-banner-warn { color: #ff9a9a; }
.form-banner-inline.form-banner-ok { color: #7ee2a8; }
.form-banner-inline.form-banner-info { color: #8ab4f8; }

/* ── Page action bar ─────────────────────────────────────────────────────────────
   A single primary-action row locked across the full width of the page bottom (Save / Record /
   …). Place it as the LAST child of a .page section: being last means nothing ever renders
   beneath it (the earlier in-panel sticky let the Documents/Timeline below bleed through). It
   full-bleeds across the content column by canceling .page's 1.5rem side padding, and eats
   .page's 2rem bottom padding so — with .shell's bottom padding zeroed — it locks flush to the
   scroll-area bottom. Sticky (not fixed) so it stays inside .shell and shrinks with the pinned
   AI drawer / side panel instead of overlapping them. */
.page-actionbar {
    position: sticky; bottom: 0; z-index: 8;
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin: 1.2rem -1.5rem -2rem;
    padding: 0.8rem 1.5rem;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -12px 28px -22px rgba(0, 0, 0, 0.85);
}
.page-actionbar-msg { font-size: 0.85rem; margin-left: 0.3rem; }
.page-actionbar-msg.form-banner-error, .page-actionbar-msg.form-banner-warn { color: #ff9a9a; }
.page-actionbar-msg.form-banner-ok { color: #7ee2a8; }
.page-actionbar-msg.form-banner-info { color: #8ab4f8; }
/* On a narrow viewport the message wraps to its own full-width line under the buttons. */
@media (max-width: 560px) { .page-actionbar-msg { flex-basis: 100%; margin-left: 0; } }

/* ── Perceived responsiveness ──────────────────────────────────────────────────
   Blazor Server round-trips every event, so the click itself must acknowledge
   INSTANTLY on the client: a pressed state costs nothing and removes the
   "did I even click?" doubt while the server round-trip is in flight. */
.lp-btn:active:not(:disabled),
.reconnect-btn:active,
.form-tab:active,
.fe-tab:active,
.form-wizard-step:active:not(:disabled),
.ws-menu-item:active,
.dash-quick-tile:active,
.kb-title-btn:active {
    transform: translateY(1px) scale(0.985);
    filter: brightness(0.88);
    transition: transform 0.03s linear, filter 0.03s linear;
}
.lp-btn:disabled { opacity: 0.55; cursor: progress; }

/* Until the interactive circuit is up, clicks go nowhere — make that state visible
   instead of silent: a slim animated bar across the top + progress cursor on
   interactive elements. html.blazor-ready is stamped by the Blazor.start() hook. */
html:not(.blazor-ready) body::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 3000;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: aeon-connecting 1s linear infinite;
}
@keyframes aeon-connecting {
    from { background-position: -40% 0; }
    to   { background-position: 140% 0; }
}
html:not(.blazor-ready) .lp-btn,
html:not(.blazor-ready) button,
html:not(.blazor-ready) select,
html:not(.blazor-ready) input[type="checkbox"] {
    cursor: progress;
}

/* =============================================================================
   Config-change nudge — "link these edits to a feature set" (bottom-left toast)
   ========================================================================== */
.cfg-nudge {
    position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 1200;
    width: min(360px, calc(100vw - 2.2rem));
    background: #12151d; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 18px 46px -18px rgba(0, 0, 0, 0.8);
    padding: 0.85rem 0.95rem 0.9rem; color: var(--fg);
    animation: cfg-nudge-in 240ms var(--ease-emphasized, ease-out);
}
@keyframes cfg-nudge-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cfg-nudge-x {
    position: absolute; top: 0.45rem; right: 0.5rem; background: none; border: none;
    color: var(--muted); font-size: 0.9rem; cursor: pointer; line-height: 1; padding: 0.2rem;
}
.cfg-nudge-x:hover { color: var(--fg); }
.cfg-nudge-head { display: flex; align-items: center; gap: 0.5rem; padding-right: 1.2rem; font-size: 0.94rem; }
.cfg-nudge-icon { font-size: 1.05rem; }
.cfg-nudge-body { margin: 0.4rem 0 0.6rem; font-size: 0.85rem; line-height: 1.45; color: var(--fg); }
.cfg-nudge-body.muted { color: var(--muted); }
.cfg-nudge-actions { display: flex; gap: 0.4rem; align-items: center; }
.cfg-nudge-actions .auth-input { flex: 1 1 auto; min-width: 0; }
.cfg-nudge-actions .lp-btn { flex: none; }
.cfg-nudge-alt { margin-top: 0.45rem; padding-left: 0; }
.cfg-nudge-note { margin: 0.5rem 0 0; font-size: 0.76rem; }
.cfg-nudge-err { margin: 0.5rem 0 0; font-size: 0.8rem; }
.cfg-nudge-done { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; line-height: 1.4; padding-right: 1rem; }
.cfg-nudge-dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 25%, transparent); }

/* "What was detected" expander inside the nudge */
.cfg-nudge-toggle { background: none; border: none; padding: 0; margin: 0 0 0.5rem; cursor: pointer;
    color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.cfg-nudge-toggle:hover { color: var(--fg); }
.cfg-nudge-detail { margin: 0 0 0.65rem; max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem;
    border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem; background: rgba(255,255,255,0.02); }
.cfg-nudge-chg { border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.4rem; }
.cfg-nudge-chg:last-child { border-bottom: none; padding-bottom: 0; }
.cfg-nudge-chg-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; }
.cfg-nudge-chg-type { font-weight: 600; }
.cfg-nudge-op { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.05rem 0.35rem; border-radius: 4px; }
.cfg-nudge-op.op-added { background: rgba(52,211,153,0.16); color: #6ee7b7; }
.cfg-nudge-op.op-modified { background: rgba(110,168,255,0.16); color: #a8c4ff; }
.cfg-nudge-op.op-deleted { background: rgba(248,113,113,0.16); color: #fca5a5; }
.cfg-nudge-warn { font-size: 0.68rem; font-weight: 600; color: #fbbf24; }
.cfg-nudge-peek { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted);
    font-size: 0.72rem; text-decoration: underline; padding: 0; }
.cfg-nudge-peek:hover { color: var(--fg); }
.cfg-nudge-chg-sub { font-size: 0.72rem; color: var(--muted); margin-top: 0.12rem; }
.cfg-nudge-chg-sub code { font-size: 0.7rem; }
.cfg-nudge-json { margin: 0.35rem 0 0; max-height: 30vh; overflow: auto; background: #0b0e14; border: 1px solid var(--border);
    border-radius: 6px; padding: 0.5rem; font-size: 0.68rem; line-height: 1.4; white-space: pre; color: #c7d0dd; }

/* Feature-set recorded-change payload viewer (/admin/feature-sets detail) */
.fs-nochange { color: #fbbf24; font-weight: 700; cursor: help; }
/* Row-level lifecycle buttons on the feature-set list — compact, no wrap-per-button. */
td.fs-rowactions { white-space: nowrap; text-align: right; }
td.fs-rowactions .lp-btn { padding: 0.2rem 0.55rem; font-size: 0.74rem; margin-left: 0.3rem; }
.fs-payload-row > td { padding: 0 !important; background: rgba(255,255,255,0.02); }
.fs-payload { margin: 0; max-height: 46vh; overflow: auto; background: #0b0e14; border: 0; border-radius: 0;
    padding: 0.7rem 0.9rem; font-size: 0.72rem; line-height: 1.45; white-space: pre; color: #c7d0dd; }

/* ===== Dev mailbox (/admin/mailbox) — a real-inbox two-pane layout ===== */
.mbx-unread-badge {
    display: inline-block; vertical-align: middle; margin-left: 0.6rem; padding: 0.12rem 0.6rem;
    border-radius: 4px; background: rgba(110,168,255,0.16); color: #a8c4ff;
    font-size: 0.72rem; font-weight: 600;
}
.mbx { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 0; margin-top: 1rem;
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden; min-height: 560px; background: #10141d; }
.mbx-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; max-height: 78vh; }
.mbx-list-head { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border); font-size: 0.78rem; color: var(--muted); position: sticky; top: 0; background: #10141d; z-index: 1; }
.mbx-item { display: flex; gap: 0.5rem; width: 100%; text-align: left; padding: 0.7rem 0.9rem;
    background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; color: inherit; }
.mbx-item:hover { background: rgba(255,255,255,0.03); }
.mbx-item.on { background: rgba(110,168,255,0.1); }
.mbx-item.unread .mbx-subject, .mbx-item.unread .mbx-from { font-weight: 700; color: #fff; }
.mbx-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #6ea8ff; margin-top: 0.45rem; }
.mbx-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.mbx-item-top { display: flex; justify-content: space-between; gap: 0.5rem; }
.mbx-from { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-date { font-size: 0.72rem; color: var(--muted); flex: none; }
.mbx-subject { font-size: 0.83rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-to { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-reading { display: flex; flex-direction: column; min-width: 0; }
.mbx-read-head { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.mbx-read-subject { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
.mbx-read-meta { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.mbx-meta-k { display: inline-block; width: 3rem; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.mbx-read-actions { margin-top: 0.7rem; }
.lp-btn.danger { color: #ff9a9a; border-color: rgba(255,110,110,0.35); }
.mbx-attachments { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--border); }
.mbx-att-label { font-size: 0.78rem; color: var(--muted); }
.mbx-att { font-size: 0.8rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: #141823; text-decoration: none; color: #a8c4ff; }
.mbx-att:hover { border-color: color-mix(in srgb, #6ea8ff 45%, var(--border)); }
.mbx-body { flex: 1; width: 100%; border: none; background: #fff; min-height: 72vh; }
.mbx-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 3rem 1rem; color: var(--muted); text-align: center; }
.mbx-empty-ico { font-size: 2rem; opacity: 0.7; }
@media (max-width: 820px) { .mbx { grid-template-columns: 1fr; } .mbx-list { max-height: 40vh; } }

/* ---- Interface Workbench (/admin/interface-hub) ---- */
.ifhub-shell { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: start; margin-top: 0.8rem; }
.ifhub-rail { display: flex; flex-direction: column; gap: 0.55rem; position: sticky; top: calc(var(--topbar-h) + 0.8rem); }
.ifhub-chiprow { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ifhub-chip { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 4px; padding: 0.16rem 0.6rem; font-size: 0.74rem; cursor: pointer; }
.ifhub-chip.on { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ifhub-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: calc(100vh - var(--topbar-h) - 12rem); overflow-y: auto; padding-right: 0.15rem; }
.ifhub-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 10px; padding: 0.45rem 0.6rem; cursor: pointer; transition: border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard); }
.ifhub-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ifhub-item:active { transform: translateY(1px); }
.ifhub-item.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ifhub-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ifhub-item-code { font-weight: 700; font-size: 0.83rem; display: flex; align-items: center; gap: 0.3rem; }
.ifhub-item-name { color: var(--muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifhub-item-side { flex: 0 0 auto; }
.ifhub-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--muted); }
.ifhub-dot.live { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.6); }
.ifhub-dot.mock { background: #fbbf24; }
.ifhub-dot.loopback { background: #818cf8; }
.ifhub-dot.design { background: #4b5563; }
.ifhub-errbadge { color: #f87171; font-size: 0.72rem; font-weight: 700; }
.ifhub-okbadge { color: #34d399; font-size: 0.72rem; }
.ifhub-main { min-width: 0; }
.ifhub-empty { padding: 2rem; }
.ifhub-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 0.9rem; flex-wrap: wrap; }
.ifhub-head-id { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; min-width: 0; }
.ifhub-code { font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.95rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.2rem 0.55rem; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ifhub-head-name { display: flex; flex-direction: column; line-height: 1.25; }
.ifhub-head-name .muted { font-size: 0.75rem; }
.ifhub-head-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.ifhub-pill { font-size: 0.7rem; font-weight: 700; border-radius: 4px; padding: 0.14rem 0.55rem; border: 1px solid var(--border); color: var(--muted); }
.ifhub-pill.live { color: #34d399; border-color: color-mix(in srgb, #34d399 45%, var(--border)); }
.ifhub-pill.mock { color: #fbbf24; border-color: color-mix(in srgb, #fbbf24 45%, var(--border)); }
.ifhub-pill.loopback { color: #818cf8; border-color: color-mix(in srgb, #818cf8 45%, var(--border)); }
.ifhub-tabs { display: flex; gap: 0.25rem; margin: 0.7rem 0; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.ifhub-tab { border: none; background: transparent; color: var(--muted); padding: 0.45rem 0.8rem; font-size: 0.85rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ifhub-tab:hover { color: var(--fg); }
.ifhub-tab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.ifhub-tabcount { background: color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 4px; padding: 0 0.4rem; font-size: 0.7rem; margin-left: 0.3rem; }
.ifhub-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.ifhub-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.8rem; align-items: end; }
.ifhub-span2 { grid-column: span 2; }
.ifhub-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.83rem; color: var(--fg); }
.ifhub-btnrow { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.ifhub-urlline { margin: 0.5rem 0 0; }
.ifhub-policy { border: 1px dashed var(--border); border-radius: 10px; padding: 0.55rem 0.75rem; margin-top: 0.7rem; font-size: 0.86rem; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ifhub-yaml { width: 100%; }
.ifhub-details { margin-top: 0.7rem; }
.ifhub-details > summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.ifhub-h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0.8rem 0 0.3rem; }
.ifhub-params td { font-size: 0.8rem; }
.ifhub-bind { font-size: 0.74rem; border-radius: 6px; padding: 0.1rem 0.4rem; border: 1px solid var(--border); white-space: nowrap; }
.ifhub-bind.explicit { color: #60a5fa; border-color: color-mix(in srgb, #60a5fa 45%, var(--border)); }
.ifhub-bind.conv { color: #c084fc; border-color: color-mix(in srgb, #c084fc 45%, var(--border)); }
.ifhub-bind.formula { color: #fbbf24; border-color: color-mix(in srgb, #fbbf24 45%, var(--border)); }
.ifhub-bind.none { color: var(--muted); border-style: dashed; }
.ifhub-out { background: #0d1017; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.76rem; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.ifhub-out.bad { border-color: color-mix(in srgb, #f87171 55%, var(--border)); }
.ifhub-scenario { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem; margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ifhub-scenario.active { border-color: color-mix(in srgb, #fbbf24 55%, var(--border)); }
.ifhub-scenario-head { display: flex; gap: 0.45rem; align-items: center; }
.ifhub-scenario-head .auth-input.sm { padding: 0.25rem 0.5rem; font-size: 0.82rem; }
.ifhub-status { width: 5.2rem; flex: 0 0 auto; }
.ifhub-statrow { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ifhub-stat { border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.9rem; text-align: center; min-width: 5rem; }
.ifhub-stat b { display: block; font-size: 1.15rem; }
.ifhub-stat span { color: var(--muted); font-size: 0.72rem; }
.ifhub-stat.bad b { color: #f87171; }
.ifhub-wiredigest { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.86rem; }
.ifhub-revs { list-style: none; margin: 0.3rem 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; }
.ifhub-subrow { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; margin-top: 0.5rem; }
.ifhub-subrow.off { opacity: 0.55; }
.ifhub-subrow-main { display: flex; flex-direction: column; gap: 0.12rem; font-size: 0.84rem; min-width: 0; }
.ifhub-result { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.7rem; padding: 0.45rem 0.7rem; border: 1px solid color-mix(in srgb, #34d399 45%, var(--border)); border-radius: 8px; }
.ifhub-result.bad { border-color: color-mix(in srgb, #f87171 55%, var(--border)); }
.ifhub-runlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ifhub-runrow { display: flex; justify-content: space-between; gap: 0.6rem; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 8px; padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.82rem; }
.ifhub-runrow:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ifhub-runrow.bad { border-color: color-mix(in srgb, #f87171 40%, var(--border)); }
.ifhub-actbar { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ifhub-acttable td { font-size: 0.82rem; }
.ifhub-actbad td:first-child { border-left: 2px solid #f87171; }
.ifhub-actdetail td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.lp-btn.danger { color: #f87171; }
@media (max-width: 1000px) { .ifhub-shell { grid-template-columns: 1fr; } .ifhub-rail { position: static; } .ifhub-grid2 { grid-template-columns: 1fr; } .ifhub-form { grid-template-columns: 1fr; } .ifhub-span2 { grid-column: span 1; } }

/* ---- Mapping Studio (/admin/mapping-studio) ---- */
.ms-hint { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0; min-height: 1.4rem; }
.ms-canvas { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 3.2rem; align-items: start; padding: 0.4rem 0 1rem; }
.ms-wires { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ms-wire { fill: none; stroke-width: 1.6; opacity: 0.75; }
.ms-wire.form { stroke: #4b5563; stroke-dasharray: 4 3; opacity: 0.5; }
.ms-wire.form.hl { stroke: #e9edf6; opacity: 0.95; }
.ms-wire.req { stroke: #60a5fa; }
.ms-wire.resp { stroke: #34d399; }
.ms-wire.sel { stroke-width: 2.6; opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
.ms-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ms-colhead { font-size: 0.95rem; margin: 0 0 0.4rem; }
.ms-colhead .muted { font-size: 0.75rem; font-weight: 400; }
.ms-blockhead { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.7rem 0 0.2rem; padding-left: 0.2rem; }
.ms-blockhead.req { color: #60a5fa; }
.ms-blockhead.resp { color: #34d399; }
.ms-blockhead .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ms-group { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.35rem; }
.ms-grouphead { display: flex; align-items: center; gap: 0.4rem; border: none; background: transparent; color: var(--muted); font-size: 0.8rem; font-weight: 700; cursor: pointer; padding: 0.2rem 0.1rem; text-align: left; }
.ms-grouphead:hover { color: var(--fg); }
.ms-node { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; width: 100%; text-align: left; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--fg); border-radius: 8px; padding: 0.32rem 0.55rem; cursor: pointer; transition: border-color var(--dur) var(--ease-standard); }
.ms-node:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ms-node:active { transform: translateY(1px); }
.ms-node-label { font-size: 0.79rem; font-weight: 600; word-break: break-all; }
.ms-node-sub { font-size: 0.68rem; color: var(--muted); }
.ms-node-val { font-size: 0.68rem; color: #fbbf24; font-family: ui-monospace, monospace; }
.ms-formfield { border-style: dashed; }
.ms-sdm.linked { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.ms-wirenode.linked.req { border-color: color-mix(in srgb, #60a5fa 55%, var(--border)); }
.ms-wirenode.linked.resp { border-color: color-mix(in srgb, #34d399 55%, var(--border)); }
.ms-node.armed { border-color: #fbbf24; box-shadow: 0 0 0 2px color-mix(in srgb, #fbbf24 35%, transparent); }
.ms-node.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ms-node.hl { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg) 30%, transparent); }
.ms-inspector { margin-top: 0.6rem; }
.ms-insp-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ms-insp-head h2 { margin: 0; font-size: 0.95rem; }
.ms-insp-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.2rem; align-items: start; margin-top: 0.6rem; }
.ms-arrow { font-weight: 700; padding: 0 0.25rem; }
.ms-arrow.req { color: #60a5fa; }
.ms-arrow.resp { color: #34d399; }
.ms-step { border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.65rem; margin-bottom: 0.45rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ms-step-head { display: flex; justify-content: space-between; align-items: center; }
.ms-step-kind { font-size: 0.8rem; font-weight: 700; }
.ms-vmap { display: flex; flex-direction: column; gap: 0.3rem; }
.ms-vmap-row { display: flex; align-items: center; gap: 0.4rem; }
.ms-vmap-row .auth-input.sm { padding: 0.22rem 0.5rem; font-size: 0.8rem; }
.ms-preview { margin-top: 0.7rem; border-top: 1px dashed var(--border); padding-top: 0.5rem; }
.ms-preview-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ms-preview-in, .ms-preview-out { background: #0d1017; border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.55rem; font-size: 0.78rem; }
.ms-preview-out { border-color: color-mix(in srgb, #34d399 45%, var(--border)); }
.ms-golden { margin-top: 0.8rem; }
.ms-golden-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.5rem; }
.ms-verify td { font-size: 0.8rem; }
.ms-vbad td { color: #f87171; }
.ms-empty { padding: 1.6rem; }
@media (max-width: 1100px) { .ms-canvas { grid-template-columns: 1fr; gap: 0.8rem; } .ms-wires { display: none; } .ms-insp-grid, .ms-golden-grid { grid-template-columns: 1fr; } }
.ms-grouphead-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.ms-showall { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 4px; font-size: 0.68rem; padding: 0.08rem 0.5rem; cursor: pointer; flex: 0 0 auto; }
.ms-showall:hover { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ms-proposals td { vertical-align: top; }
.ms-stepchips { display: inline-block; margin-left: 0.4rem; font-size: 0.7rem; color: #fbbf24; border: 1px solid color-mix(in srgb, #fbbf24 40%, var(--border)); border-radius: 4px; padding: 0.05rem 0.45rem; }

/* ---- Field lineage (/admin/lineage) ---- */
.lin-shell { display: grid; grid-template-columns: 320px 1fr; gap: 1.1rem; align-items: start; margin-top: 0.8rem; }
.lin-rail { display: flex; flex-direction: column; gap: 0.5rem; position: sticky; top: calc(var(--topbar-h) + 0.8rem); max-height: calc(100vh - var(--topbar-h) - 2rem); overflow-y: auto; padding-right: 0.2rem; }
.lin-railnote { margin: 0.1rem 0 0; }
.lin-railgroup { display: flex; flex-direction: column; gap: 0.2rem; }
.lin-railentity { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.4rem; }
.lin-railpath { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 8px; padding: 0.34rem 0.55rem; cursor: pointer; font-size: 0.79rem; }
.lin-railpath:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.lin-railpath.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lin-railpath-name { word-break: break-all; }
.lin-railpath-badges { display: flex; gap: 0.35rem; font-size: 0.7rem; color: var(--muted); flex: 0 0 auto; }
.lin-railpath-badges .feed { color: #60a5fa; }
.lin-railpath-badges .fill { color: #34d399; }
.lin-hits { display: flex; flex-direction: column; gap: 0.25rem; }
.lin-hit { display: flex; gap: 0.5rem; align-items: center; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 8px; padding: 0.4rem 0.55rem; cursor: pointer; }
.lin-hit:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.lin-hit-main { display: flex; flex-direction: column; font-size: 0.79rem; min-width: 0; }
.lin-hit-main .muted { font-size: 0.71rem; word-break: break-all; }
.lin-main { min-width: 0; }
.lin-empty { padding: 1.6rem; }
.lin-insights { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; min-height: 1.2rem; }
.lin-insight { font-size: 0.78rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.7rem; }
.lin-insight.warn { color: #fbbf24; border-color: color-mix(in srgb, #fbbf24 45%, var(--border)); }
.lin-insight.info { color: var(--muted); }
.lin-chain { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 0; align-items: start; }
.lin-colhead { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding-bottom: 0.5rem; }
.lin-colhead.wires { text-align: left; padding-left: 2.4rem; }
.lin-col { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.lin-forms { align-items: stretch; }
.lin-hub { display: flex; align-items: center; padding: 0 2.4rem; position: relative; align-self: stretch; }
.lin-node { border: 2px solid var(--accent); border-radius: 12px; padding: 0.7rem 1rem; background: color-mix(in srgb, var(--accent) 10%, transparent); display: flex; flex-direction: column; gap: 0.15rem; max-width: 20rem; position: sticky; top: calc(var(--topbar-h) + 4rem); }
.lin-node-path { font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.92rem; word-break: break-all; }
.lin-node-sub { color: var(--muted); font-size: 0.74rem; }
.lin-node-val { color: #fbbf24; font-family: ui-monospace, monospace; font-size: 0.8rem; margin-top: 0.2rem; }
.lin-card { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.12rem; background: color-mix(in srgb, var(--bg) 60%, transparent); }
.lin-card-title { font-size: 0.83rem; font-weight: 600; word-break: break-all; }
.lin-card-title code { font-size: 0.78rem; }
.lin-card-sub { color: var(--muted); font-size: 0.72rem; }
.lin-card-kind { font-size: 0.74rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.lin-card-val { color: #fbbf24; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.lin-card-link { font-size: 0.72rem; align-self: flex-end; }
.lin-card.form { border-style: dashed; }
.lin-card.form::after { content: ""; position: absolute; right: -2.4rem; top: 50%; width: 2.4rem; border-top: 1.6px dashed #4b5563; }
.lin-card.feed { border-color: color-mix(in srgb, #60a5fa 45%, var(--border)); }
.lin-card.feed::before { content: ""; position: absolute; left: -2.4rem; top: 50%; width: 2.4rem; border-top: 1.6px solid #60a5fa; }
.lin-card.fill { border-color: color-mix(in srgb, #34d399 45%, var(--border)); }
.lin-card.fill::before { content: ""; position: absolute; left: -2.4rem; top: 50%; width: 2.4rem; border-top: 1.6px solid #34d399; }
@media (max-width: 1100px) { .lin-shell { grid-template-columns: 1fr; } .lin-rail { position: static; max-height: none; } .lin-chain { grid-template-columns: 1fr; } .lin-hub { padding: 0.8rem 0; } .lin-card.form::after, .lin-card.feed::before, .lin-card.fill::before { display: none; } .lin-colhead.wires { padding-left: 0; } }

/* ---- retired Form ↔ API mapping page ---- */
.fm-retired-pill { font-size: 0.7rem; font-weight: 700; vertical-align: middle; border: 1px solid color-mix(in srgb, #fbbf24 55%, var(--border)); color: #fbbf24; border-radius: 4px; padding: 0.15rem 0.6rem; margin-left: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; }
.fm-retired-banner { border: 1px solid color-mix(in srgb, #fbbf24 40%, var(--border)); border-radius: 12px; padding: 0.9rem 1.1rem; margin: 0.6rem 0 1rem; background: color-mix(in srgb, #fbbf24 6%, transparent); display: flex; flex-direction: column; gap: 0.5rem; }
.fm-retired-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---- Application chat dock (dealer ↔ underwriter) ---- */
.appchat { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; }
.appchat-fab { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 88%, var(--accent)); color: var(--fg); border-radius: 4px; padding: 0.55rem 1rem; font-size: 0.86rem; font-weight: 600; cursor: pointer; box-shadow: var(--elev-2); }
.appchat-fab:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.appchat-fab:active { transform: translateY(1px); }
.appchat-unread { background: #f87171; color: #fff; border-radius: 4px; font-size: 0.7rem; padding: 0.05rem 0.45rem; font-weight: 700; }
.appchat-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.appchat-dot.available { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.6); }
.appchat-dot.viewing { background: #34d399; box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 30%, transparent); animation: appchat-pulse 2s infinite; }
.appchat-dot.away { background: #fbbf24; }
.appchat-dot.off { background: #4b5563; }
.appchat-dot.pulse { animation: appchat-pulse 2s infinite; }
@keyframes appchat-pulse { 0%,100% { box-shadow: 0 0 0 2px color-mix(in srgb, #34d399 35%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, #34d399 15%, transparent); } }

/* Closed-dock nudge: "the other side is reachable right now" — sits above the FAB */
.appchat-callout { display: flex; align-items: center; gap: 0.55rem; max-width: 340px; margin-bottom: 0.55rem; border: 1px solid color-mix(in srgb, #34d399 45%, var(--border)); background: color-mix(in srgb, var(--bg) 92%, #34d399); border-radius: 12px; padding: 0.55rem 0.7rem; box-shadow: var(--elev-2); animation: appchat-callout-in 0.25s ease-out; }
.appchat-callout-text { font-size: 0.82rem; line-height: 1.3; }
@keyframes appchat-callout-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Machine-written context line at the top of a conversation */
.appchat-sysmsg { align-self: center; text-align: center; font-size: 0.76rem; color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; padding: 0.3rem 0.7rem; margin: 0.25rem auto 0.45rem; max-width: 95%; }
.appchat-panel { width: 380px; max-width: calc(100vw - 2rem); height: 520px; max-height: calc(100vh - 6rem); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); box-shadow: var(--elev-3); overflow: hidden; }
.appchat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.appchat-head-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.appchat-presenceline { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.76rem; }
.appchat-person { display: flex; align-items: center; gap: 0.35rem; }
.appchat-head-actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.appchat-avail { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.appchat-avail.standalone { font-size: 0.84rem; color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem 0.8rem; width: fit-content; }
.pms-chat-availability { margin: 0.35rem 0 0.6rem; }
.appchat-x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.95rem; }
.appchat-x:hover { color: var(--fg); }
.appchat-body { flex: 1; overflow-y: auto; padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.45rem; }
.appchat-empty { margin: auto; text-align: center; font-size: 0.84rem; padding: 0 1.4rem; }
.appchat-threadinfo { text-align: center; color: var(--muted); font-size: 0.7rem; margin-bottom: 0.2rem; }
.appchat-msg { display: flex; flex-direction: column; gap: 0.1rem; max-width: 85%; }
.appchat-msg.mine { align-self: flex-end; align-items: flex-end; }
.appchat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.appchat-msg-meta { font-size: 0.68rem; color: var(--muted); }
.appchat-msg-body { border-radius: 12px; padding: 0.45rem 0.7rem; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; }
.appchat-msg.mine .appchat-msg-body { background: color-mix(in srgb, var(--accent) 30%, transparent); border-bottom-right-radius: 4px; }
.appchat-msg.theirs .appchat-msg-body { background: color-mix(in srgb, var(--fg) 8%, transparent); border-bottom-left-radius: 4px; }
.appchat-translated { display: inline-block; margin-top: 0.15rem; background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 0.68rem; color: var(--muted); }
.appchat-translated:hover { color: var(--accent-2); text-decoration: underline; }
.appchat-history { margin-top: 0.5rem; }
.appchat-history > summary { color: var(--muted); font-size: 0.75rem; cursor: pointer; }
.appchat-histrow { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 8px; padding: 0.3rem 0.55rem; margin-top: 0.3rem; font-size: 0.73rem; cursor: pointer; }
.appchat-histrow:hover, .appchat-histrow.sel { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.appchat-foot { border-top: 1px solid var(--border); padding: 0.55rem 0.85rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.appchat-input { width: 100%; resize: none; font-size: 0.85rem; }
.appchat-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
@media (max-width: 700px) { .appchat-panel { width: calc(100vw - 2rem); height: 60vh; } }

/* ---- chat round 2: prominent on-duty switch, assignee chip, composer footer ---- */
.uwavail { display: inline-flex; align-items: center; gap: 0.7rem; border-radius: 4px; padding: 0.45rem 1rem 0.45rem 0.55rem; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--fg); transition: border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard); text-align: left; }
.uwavail.on { border-color: color-mix(in srgb, #34d399 55%, var(--border)); background: color-mix(in srgb, #34d399 8%, transparent); }
.uwavail.off { opacity: 0.85; }
.uwavail:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.uwavail-track { width: 40px; height: 22px; border-radius: 999px; background: #4b5563; position: relative; flex: 0 0 auto; transition: background var(--dur) var(--ease-standard); }
.uwavail.on .uwavail-track { background: #34d399; }
.uwavail-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left var(--dur) var(--ease-emphasized); }
.uwavail.on .uwavail-knob { left: 20px; }
.uwavail-text { display: flex; flex-direction: column; line-height: 1.2; }
.uwavail-text strong { font-size: 0.86rem; }
.uwavail-text span { font-size: 0.7rem; color: var(--muted); }
.pms-assignee { font-size: 0.75rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 4px; padding: 0.12rem 0.6rem; color: var(--fg); }
.appchat-foot-left { display: flex; align-items: center; gap: 0.4rem; }

/* ---- PMS-wide chat inbox ---- */
.pms-chat-availability { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.pmsinbox { position: relative; }
.pmsinbox-btn { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 4px; padding: 0.5rem 1rem; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.pmsinbox-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.pmsinbox-btn.hot { border-color: color-mix(in srgb, #f87171 55%, var(--border)); animation: appchat-pulse 2s infinite; }
.pmsinbox-panel { position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 55; width: 380px; max-width: 90vw; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); box-shadow: var(--elev-3); overflow: hidden; }
.pmsinbox-head { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pmsinbox-empty { padding: 0.9rem; margin: 0; }
.pmsinbox-row { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--fg); padding: 0.55rem 0.8rem; cursor: pointer; }
.pmsinbox-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pmsinbox-row:last-child { border-bottom: none; }
.pmsinbox-row.unread { border-left: 3px solid #f87171; }
.pmsinbox-row-top { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.pmsinbox-row-top .muted { margin-left: auto; font-size: 0.72rem; }
.pmsinbox-preview { color: var(--muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pmsinbox-rowchip { font-size: 0.72rem; font-weight: 700; color: #f87171; border: 1px solid color-mix(in srgb, #f87171 45%, var(--border)); border-radius: 4px; padding: 0.05rem 0.45rem; margin-left: 0.4rem; white-space: nowrap; }

/* ---- PMS right-side chat panel (shared <SidePanel> shell + embedded dock) ---- */
/* Title left, chat controls right — the controls sit at the edge the panel opens from.
   The bottom margin keeps the on-duty switch + Chats button clear of the lead text below. */
.pms-headrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pms-headrow h1 { margin: 0; }
.pms-headrow .pms-chat-availability { margin: 0; justify-content: flex-end; }
.side-panel.pmschat-side .side-panel-body { padding: 0; gap: 0; overflow: hidden; }
/* UNPINNED = floating overlay: cancel the shared SidePanel content-shift (the page stays put and
   the panel floats over it); the 📌 pin docks it — side by side, page shifts — and remembers it
   open. Mirrors the AI drawer's pinned/unpinned convention. */
@media (min-width: 900px) {
    .app-shell:has(.side-panel.pmschat-unpinned.open:not(.side-panel-left):not(.inline)) .shell {
        padding-right: 0;
    }
    /* …but an unpinned chat panel must not cancel a pinned AI drawer's own reserved space. */
    .app-shell:has(.ai-asst-drawer.pinned.open):has(.side-panel.pmschat-unpinned.open:not(.side-panel-left):not(.inline)) .shell {
        padding-right: min(var(--ai-drawer-w, 440px), 60vw);
    }
    .side-panel.pmschat-unpinned { box-shadow: -30px 0 70px -30px rgba(0, 0, 0, 0.85); }
}
.pmschat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.pmschat-list .pmsinbox-row { flex: 0 0 auto; }
.pmschat-current .pmsinbox-preview { color: var(--fg); }
.pmschat-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.pmschat-bar-label { font-size: 0.85rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmschat-bar .spacer { flex: 1; }
.pmschat-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pmschat-pin { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.95rem; padding: 0 0.2rem; }
.pmschat-pin:hover { color: var(--fg); }
.pmschat-pin.on { color: var(--accent-2); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)); }
/* Embedded dock: no fixed positioning — fill the panel column edge-to-edge. */
.appchat.embedded { position: static; display: flex; flex-direction: column; align-items: stretch; flex: 1; min-height: 0; }
.appchat.embedded .appchat-panel { width: 100%; max-width: none; height: 100%; max-height: none; flex: 1; min-height: 0; border: none; border-radius: 0; box-shadow: none; background: transparent; }

/* ---- chat typing indicator ---- */
.appchat-typing { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.9rem 0.35rem; color: var(--muted); font-size: 0.76rem; }
.appchat-typing-dots { display: inline-flex; gap: 3px; }
.appchat-typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: appchat-typing-bounce 1.2s infinite; }
.appchat-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.appchat-typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes appchat-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ---- ⚑ Cases panel on the FS application page ---- */
.app-cases { border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.9rem; margin: 0 0 1rem; }
.app-cases > summary { cursor: pointer; display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.9rem; }
.app-cases-count { background: color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 4px; padding: 0.05rem 0.5rem; font-size: 0.75rem; font-weight: 700; }
.app-cases-none { font-size: 0.78rem; font-weight: 400; }
.app-cases-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0 0.3rem; }
.app-cases-body .app-cases-list, .app-cases-body .app-case-new { align-self: stretch; }
.app-cases-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.app-cases-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; flex-wrap: wrap; }
.app-cases-list li.closed a { color: var(--muted); }
.app-case-chip { border-radius: 4px; padding: 0.02rem 0.45rem; font-size: 0.7rem; font-weight: 700; }
.app-case-chip.open { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.app-case-chip.warn { background: color-mix(in srgb, #fbbf24 25%, transparent); }
.app-case-chip.ok { background: color-mix(in srgb, #34d399 22%, transparent); }
.app-case-chip.off { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--muted); }
.app-case-chip.prio { background: color-mix(in srgb, #f87171 28%, transparent); }
.app-case-new { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px dashed var(--border); padding-top: 0.6rem; }
.app-case-new-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.app-case-new-row label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; }
.app-case-new-actions { display: flex; gap: 0.5rem; }

/* ---- applicant prefill notice ---- */
.prefill-note { display: flex; align-items: center; gap: 0.6rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; padding: 0.5rem 0.9rem; margin-bottom: 0.8rem; font-size: 0.85rem; }
.prefill-note .appchat-x { margin-left: auto; }

/* ---- MultiSelect (Shared/MultiSelect.razor) — global because the app doesn't load scoped CSS ---- */
.ms { position: relative; }
.ms-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-height: 2.3rem;
    padding: 0.3rem 1.8rem 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 8px;
    background: #0e121b; cursor: pointer; position: relative; box-sizing: border-box; width: 100%; }
.ms.open .ms-control { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent); }
.ms-ph { color: var(--muted); font-size: 0.9rem; }
.ms-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.2rem 0.1rem 0.5rem;
    border-radius: 6px; font-size: 0.8rem; color: var(--fg); max-width: 100%;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.ms-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-pill-x { border: 0; background: none; cursor: pointer; color: inherit; opacity: 0.6; font-size: 0.7rem;
    line-height: 1; padding: 0.05rem 0.2rem; border-radius: 4px; }
.ms-pill-x:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.ms-caret { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); opacity: 0.5; font-size: 0.7rem; pointer-events: none; }
.ms-backdrop { position: fixed; inset: 0; z-index: 2000; background: transparent; }
.ms-menu { position: absolute; z-index: 2001; top: calc(100% + 4px); left: 0; right: 0;
    background: #12151f; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.5); padding: 0.4rem; max-height: 16rem;
    display: flex; flex-direction: column; gap: 0.35rem; }
.ms-menu .ms-search { width: 100%; box-sizing: border-box; }
.ms-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ms-opt, .ms-add { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
    padding: 0.4rem 0.5rem; border: 0; background: transparent; cursor: pointer; border-radius: 6px;
    font: inherit; color: var(--fg); }
.ms-opt:hover, .ms-add:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.ms-opt.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ms-tick { width: 1rem; flex: none; color: var(--accent); font-size: 0.85rem; }
.ms-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-add { color: var(--accent-2); }
.ms-empty { padding: 0.5rem; font-size: 0.85rem; color: var(--muted); }

/* ---- Form editor: floating interface field-mapping panel ---- */
.ifmap { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.5rem; }
.ifmap-h { font-size: 0.8rem; font-weight: 600; margin-top: 0.5rem; }
.ifmap-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
    border: 1px solid var(--border); border-radius: 6px; background: transparent; color: inherit;
    font: inherit; padding: 0.35rem 0.5rem; cursor: pointer; }
.ifmap-row:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ifmap-row code { background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 0.05rem 0.35rem; border-radius: 4px; }
.ifmap-arrow { color: var(--accent); }
.ifmap-field { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifmap-hint { margin-top: 0.5rem; }

/* ---- Form editor: AI rule/regex helper in the property inspector ---- */
.fc-ai-rules { margin-top: 0.5rem; }
.fc-ai-pop { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 6%, transparent); padding: 0.5rem 0.6rem; }
.fc-ai-pop .auth-input.sm { width: 100%; box-sizing: border-box; }
.fc-ai-result { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem;
    border-top: 1px solid var(--border); padding-top: 0.4rem; }
.fc-ai-result code { background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 0.05rem 0.3rem; border-radius: 4px; }
.fc-ai-actions { display: flex; gap: 0.4rem; margin-top: 0.25rem; }

/* ---- Form editor: AI fix on SDM binding-check findings ---- */
.lint-fix-btn { margin-left: 0.5rem; padding: 0.1rem 0.5rem; }
.lint-fix { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem;
    padding: 0.35rem 0.5rem; border-radius: 6px; font-size: 0.83rem;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.lint-fix code { background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 0.05rem 0.3rem; border-radius: 4px; }

/* ---- Form editor: live-preview highlight of the selected control ---- */
.form-field-selected { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); scroll-margin: 6rem;
    transition: outline-color .15s, box-shadow .15s; }

/* ---- Production Test run banner ---- */
.testrun-banner { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    background: repeating-linear-gradient(45deg, rgba(224,164,88,0.16), rgba(224,164,88,0.16) 12px, rgba(224,164,88,0.24) 12px, rgba(224,164,88,0.24) 24px);
    border-bottom: 1px solid rgba(224,164,88,0.5); color: var(--fg); padding: 0.4rem 1rem; font-size: 0.85rem; }
.testrun-banner strong { letter-spacing: 0.04em; }
.testrun-banner a { margin-left: auto; color: var(--accent-2); white-space: nowrap; }
.testrun-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #22c55e; animation: testrun-pulse 1.6s infinite; }
@keyframes testrun-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }

/* ---- Ticket-suggestion banner — shared across the 4 target editor pages a ticket's "🚀 Propose
   change" hands off to (AdminFormEdit, AdminInterfaces, AdminDataModel, AdminWorkspaceJourneys). One
   rule set so "↗ Open to review" lands on a visually consistent hand-off regardless of which page. ---- */
.ticket-suggestion-banner { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 0.9rem;
    padding: 0.6rem 0.8rem; border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ticket-suggestion-hd { display: flex; align-items: center; gap: 0.5rem; }
.ticket-suggestion-badge { font-size: 0.85rem; font-weight: 700; color: color-mix(in srgb, var(--accent) 85%, var(--fg)); }
.ticket-suggestion-sum { margin: 0; font-size: 0.92rem; }
.ticket-suggestion-msg { margin: 0; font-size: 0.85rem; color: var(--muted); }
.ticket-suggestion-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Persists after the banner above it clears (once applied+saved) — a target page opened via "↗ Open
   to review" always has a way back to the ticket, not just while a suggestion is still pending. */
.ticket-suggestion-backlink { margin: 0 0 0.5rem; font-size: 0.85rem; }

/* ---- Domain board (/admin/domain/board) — modern sibling of the classic ER diagram ---- */
.dbv-host { position: relative; margin-top: 1rem; }
.dbv-svg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dbv-svg path { pointer-events: stroke; transition: opacity 0.15s; }
.dbv-search { min-width: 18rem; }

.dbv-group { position: relative; z-index: 1; margin-bottom: 1.6rem; }
.dbv-group-title {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--muted, #8a93a6); margin-bottom: 0.55rem;
}
.dbv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem 1.4rem; align-items: start; }

.dbv-card {
    border: 1px solid var(--border, #2c3242); border-radius: 12px; padding: 0.65rem 0.8rem;
    background: rgba(255,255,255,0.015); transition: opacity 0.15s, box-shadow 0.15s;
    cursor: crosshair; min-width: 0;
}
.dbv-card.dbv-tenant { border-color: #3c3a2a; }
.dbv-card.dbv-hidden { display: none; }
.dbv-host.dbv-focus .dbv-card:not(.dbv-card-hl) { opacity: 0.18; }
.dbv-card-hl { opacity: 1 !important; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.22); }
.dbv-card-src { box-shadow: 0 0 0 2px #7aa7ff; }

.dbv-card-head { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.dbv-name { font-weight: 700; font-size: 0.9rem; }
.dbv-inh { font-size: 0.68rem; color: #a779ff; white-space: nowrap; }
.dbv-badges { margin-left: auto; display: inline-flex; gap: 0.3rem; flex: none; align-items: baseline; }
.dbv-rows { font-size: 0.66rem; color: var(--muted, #8a93a6); border: 1px solid var(--border, #2c3242); border-radius: 99px; padding: 0.02rem 0.32rem; white-space: nowrap; }
.dbv-badge-t { font-size: 0.7rem; }
.dbv-table { display: block; font-family: var(--mono, ui-monospace, monospace); font-size: 0.64rem; color: var(--muted, #8a93a6); text-decoration: none; margin: 0.1rem 0 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbv-table:hover { color: #7aa7ff; text-decoration: underline; }

.dbv-cols { display: flex; flex-direction: column; gap: 0.14rem; }
.dbv-cols-other { margin-top: 0.25rem; opacity: 0.75; }
.dbv-col { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.7rem; min-width: 0; }
.dbv-col code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbv-tag { font-size: 0.56rem; font-weight: 700; border-radius: 3px; padding: 0.02rem 0.26rem; flex: none; }
.dbv-tag-pk { background: rgba(63,217,155,0.16); color: #3fd99b; }
.dbv-tag-fk { background: rgba(122,167,255,0.16); color: #7aa7ff; }
.dbv-tag-tenant { background: rgba(246,196,83,0.14); color: #f6c453; }
.dbv-fk-target { font-size: 0.62rem; color: #7aa7ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbv-type { font-size: 0.62rem; color: var(--muted, #8a93a6); margin-left: auto; flex: none; }

.dbv-k { white-space: nowrap; }
.dbv-k-fk { color: #7aa7ff; }
.dbv-k-tenant { color: #f6c453; }
.dbv-k-inh { color: #a779ff; }

.dbv-pinbar {
    /* Lock FLUSH under the topbar. The scroll container (.shell) carries 2rem top padding and
       sticky pins to the scrollport's PADDING edge — a plain top:0 stuck the bar 2rem down with
       cards scrolling through the gap above it. top:-2rem cancels the padding exactly (same
       recipe as the old sticky form-editor action bar — see the .page-actionbar comment). Solid
       background: content passes directly beneath, translucency read as clutter. */
    position: sticky; top: -2rem; z-index: 6; display: flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap; padding: 0.5rem 0.7rem; margin-bottom: 0.8rem;
    border: 1px solid var(--border, #2c3242); border-top: none; border-radius: 0 0 10px 10px;
    background: var(--bg, #0b0d14);
}
.dbv-pinbar-chip, .dbv-pinbar-clear {
    font-size: 0.72rem; border: 1px solid var(--border, #2c3242); border-radius: 99px;
    background: rgba(122,167,255,0.1); color: inherit; padding: 0.1rem 0.5rem; cursor: pointer;
}
.dbv-pinbar-clear { background: none; color: var(--muted, #8a93a6); }
@media (max-width: 900px) { .dbv-svg { display: none; } .dbv-search { min-width: 10rem; } }

/* ---- Application labels (Jira-style tags: detail header + list chips/filter) ---- */
/* Title row: h1 left, the label chips tucked quietly on the right. The picker's chrome only
   appears on hover — idle, it reads as a faint chip row, not a form control. */
.app-title-row { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.app-title-row h1 { flex: 1 1 auto; min-width: 0; margin-bottom: 0.6rem; }
.app-labels { flex: 0 1 auto; max-width: 380px; margin-left: auto; }
.app-labels .ms-control {
    min-height: 0; padding: 0.15rem 0.4rem; gap: 0.25rem; justify-content: flex-end;
    border: 1px dashed transparent; border-radius: 8px; background: none; cursor: pointer;
}
.app-labels .ms-control:hover, .app-labels .ms.open .ms-control { border-color: var(--border, #2c3242); }
.app-labels .ms-ph { font-size: 0.72rem; opacity: 0.55; white-space: nowrap; }
.app-labels .ms-caret { display: none; }
/* Always-present "add" target. Without it, once a pill exists the shrink-wrapped control is
   nothing BUT pills — whose clicks are deliberately swallowed — so the dropdown could never be
   reopened to add a second label. A ::after is part of the control's hit area, so clicking the
   ＋ opens the menu. */
.app-labels .ms-control::after { content: '＋'; font-size: 0.85rem; line-height: 1; opacity: 0.4; padding: 0 0.1rem; }
.app-labels .ms-control:hover::after { opacity: 0.9; }
.app-labels .ms:has(.ms-ph) .ms-control::after { content: none; }   /* placeholder already invites the click */
.app-labels .ms-pill {
    font-size: 0.66rem; padding: 0.05rem 0.15rem 0.05rem 0.45rem; border-radius: 99px;
    border: 1px solid var(--border, #2c3242); background: rgba(122,167,255,0.07); color: #a9c4f0;
}
.app-labels .ms-pill-x { font-size: 0.6rem; opacity: 0; transition: opacity 0.12s; }
.app-labels .ms-pill:hover .ms-pill-x { opacity: 0.8; }
.app-labels .ms-menu { left: auto; right: 0; min-width: 240px; }
.app-label-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.app-label-chip {
    font-size: 0.68rem; padding: 0.1rem 0.5rem; border-radius: 99px;
    border: 1px solid var(--border, #2c3242); color: #a9c4f0; text-decoration: none;
    background: rgba(122,167,255,0.07); white-space: nowrap;
}
.app-label-chip:hover { border-color: #7aa7ff; }
.app-label-chip.active { background: #274b8a; border-color: #7aa7ff; color: #cfe0ff; }
.apps-filter-labels { display: flex; flex-direction: column; gap: 0.25rem; min-width: 14rem; }
.apps-filter-labels .ms-control { min-height: 2rem; }

/* ---- Market brand: topbar flag + Admin→Markets theme panel ---- */
.mkt-tint-input { width: 4.5rem; height: 2rem; padding: 0.15rem; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.mkt-tint-preview {
    margin-top: 0.5rem; border: 1px solid var(--border); border-radius: 8px;
    padding: 1.4rem 1rem; display: flex; align-items: flex-end; min-height: 5.5rem;
}
.mkt-tint-preview span { font-size: 0.74rem; color: var(--muted); }

/* ==== ✨ Enhance with AI (Domain board) — panel + ghost-delta preview =========================
   The panel reuses the ticket editor's AI-analysis visual language; those tk-* rules live inline
   on AdminTickets.razor, so the ones this panel needs are (re)declared here SCOPED UNDER .dbe —
   no bleed into the tickets page, which keeps its own copies. */
.dbe { display: flex; flex-direction: column; gap: 0.7rem; }
.dbe-banner.warn { background: color-mix(in srgb, #d97706 12%, transparent);
    border: 1px solid color-mix(in srgb, #d97706 45%, transparent); border-radius: 8px;
    padding: 0.5rem 0.8rem; font-size: 0.9rem; margin: 0; }
.dbe-toolbar { display: flex; gap: 0.5rem; align-items: center; }
.dbe-toolbar select { flex: 1; max-width: none; }

.dbe-scope { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 8px;
    padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.45rem; }
.dbe-scope-lbl { font-size: 0.85rem; font-weight: 600; }
.dbe-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dbe-chip { font-size: 0.76rem; font-family: ui-monospace, monospace; padding: 0.1rem 0.5rem;
    border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent); white-space: nowrap; }
.dbe-chip.dim { opacity: 0.55; border-style: dashed; }
.dbe-chip.ghost { border-color: color-mix(in srgb, #34d399 55%, transparent);
    background: color-mix(in srgb, #34d399 12%, transparent); }
.dbe-whole { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; cursor: pointer; }
.dbe-scope .lp-btn { align-self: flex-start; }

.dbe-blast { border: 1px dashed var(--border); border-radius: 8px; padding: 0.45rem 0.7rem; }
.dbe-blast > summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; }
.dbe-blast-body { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.5rem; }
.dbe-blast-row { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.dbe-mono { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--muted); }

.dbe-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; }
.dbe-field > span { color: var(--muted); font-size: 0.85rem; }
.dbe-request { min-height: 7.5rem; resize: vertical; font: inherit; }
.dbe .ms-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; }
.dbe .ms-field > span { color: var(--muted); font-size: 0.85rem; }

.dbe-attach-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.3rem; }
.dbe-paste { border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 8px;
    padding: 0.45rem 0.9rem; font-size: 0.85rem; color: var(--muted); cursor: text; user-select: none; }
.dbe-paste:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--fg); }

.dbe-delta { margin: 0.5rem 0; border-top: 1px dashed color-mix(in srgb, #34d399 40%, transparent);
    padding-top: 0.45rem; }
.dbe-delta-hd { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.dbe-bp-hd { background: none; padding: 0; }
.dbe-bp { max-height: 24rem; }

/* -- the tk-* visual language, scoped to the panel -- */
.dbe .tk-field { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem 0.8rem; margin: 0.2rem 0; }
.dbe .tk-field > legend { font-size: 0.82rem; font-weight: 600; padding: 0 0.35rem; }
.dbe .tk-attach-list { list-style: none; padding: 0; margin: 0.2rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.dbe .tk-attach-list li { display: flex; align-items: center; gap: 0.5rem; }
.dbe .tk-attach-x { border: 0; background: none; color: var(--muted); cursor: pointer; margin-left: auto; }
.dbe .tk-attach-x:hover { color: #ef4444; }
.dbe .tk-ai-actions { display: flex; align-items: flex-end; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
.dbe .tk-ai-mod { display: flex; flex-direction: column; gap: 0.15rem; }
.dbe .tk-consensus-actions { align-items: center; }
.dbe .tk-consensus-actions .tk-ai-mod { flex: 1 1 auto; min-width: 12rem; }
.dbe .tk-consensus-actions .tk-ai-mod select.auth-input.slim { width: 100%; max-width: none; }
.dbe .tk-consensus-btn { font-size: 1rem; font-weight: 700; padding: 0.6rem 1.2rem; }
.dbe .tk-ai-stale { font-size: 0.82rem; color: #d97706; background: color-mix(in srgb, #d97706 12%, transparent);
    border: 1px solid color-mix(in srgb, #d97706 40%, transparent); border-radius: 6px; padding: 0.35rem 0.5rem; margin: 0.4rem 0; }
.dbe .tk-kind { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--border); color: var(--fg); }
.dbe .tk-kind-vibecode { background: color-mix(in srgb, #6366f1 18%, transparent); border-color: color-mix(in srgb, #6366f1 45%, transparent); }
.dbe .tk-kind-inapp { background: color-mix(in srgb, #10b981 16%, transparent); border-color: color-mix(in srgb, #10b981 45%, transparent); }
.dbe .tk-kind-config { background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.dbe .tk-kind-investigate { background: color-mix(in srgb, #64748b 20%, transparent); }
.dbe .tk-ai-sum { font-weight: 600; margin: 0.2rem 0; }
.dbe .tk-ai-block { margin: 0.4rem 0; }
.dbe .tk-ai-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.dbe .tk-ai-block ul { margin: 0.15rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }
.dbe .tk-ai-block p { margin: 0.15rem 0 0; }
.dbe .tk-ai-consensus { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 8px; padding: 0.6rem 0.7rem; margin: 0.5rem 0; }
.dbe .dbe-final { border-color: color-mix(in srgb, #10b981 55%, transparent);
    background: color-mix(in srgb, #10b981 8%, transparent); }
.dbe .tk-final-hd { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dbe .tk-final-badge { font-size: 0.98rem; font-weight: 700; color: color-mix(in srgb, #10b981 72%, var(--fg)); }
.dbe .tk-final-mod { margin-left: auto; }
.dbe .tk-ai-phd { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.dbe .tk-ai-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.5rem; margin-top: 0.6rem; align-items: start; }
.dbe .tk-ai-prop { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; }
.dbe .tk-ai-prop.err { border-color: color-mix(in srgb, #ef4444 45%, transparent); }
.dbe .tk-ai-conf { margin-left: auto; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums;
    cursor: help; border-bottom: 1px dotted currentColor; }
.dbe .tk-ai-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.3rem 0; }
.dbe .tk-ai-tag { font-size: 0.72rem; font-family: ui-monospace, monospace; background: color-mix(in srgb, var(--fg) 8%, transparent);
    border-radius: 4px; padding: 0.05rem 0.35rem; }
.dbe .tk-ai-foot { font-size: 0.75rem; margin-top: 0.5rem; }
.dbe .tk-sa { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.dbe .tk-sa-hd { margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dbe .tk-sa-badge { font-size: 0.82rem; font-weight: 700; color: color-mix(in srgb, var(--accent) 80%, var(--fg)); }
.dbe .tk-sa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.2rem; align-items: start; }
.dbe .tk-sa-steps { margin: 0.2rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }
.dbe .tk-sa-script { margin: 0.35rem 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.dbe .tk-sa-script-hd { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; background: color-mix(in srgb, var(--fg) 5%, transparent); }
.dbe .tk-sa-lang { font-family: ui-monospace, monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--accent) 75%, var(--fg)); }
.dbe .tk-sa-script-hd .lp-btn { margin-left: auto; }
.dbe .tk-sa-code { margin: 0; padding: 0.5rem 0.6rem; font-family: ui-monospace, monospace; font-size: 0.78rem; line-height: 1.4;
    white-space: pre-wrap; word-break: break-word; background: var(--bg); color: var(--fg); max-height: 18rem; overflow: auto; }
.dbe .tk-sa-diagram { margin: 0.3rem 0; overflow-x: auto; text-align: center; }
.dbe .tk-sa-diagram svg { max-width: 100%; height: auto; }
.dbe .tk-sa-src { margin-top: 0.2rem; }
.dbe .tk-sa-src summary { cursor: pointer; }
.dbe .tk-apply-all-btn { margin-left: auto; font-size: 0.8rem; font-weight: 700; border-radius: 999px;
    padding: 0.3rem 0.85rem; border: 1px solid color-mix(in srgb, #f59e0b 55%, transparent);
    background: color-mix(in srgb, #f59e0b 14%, transparent); color: color-mix(in srgb, #f59e0b 85%, var(--fg));
    cursor: pointer; }
.dbe .tk-apply-all-btn:hover:not(:disabled) { background: color-mix(in srgb, #f59e0b 24%, transparent); }
.dbe .tk-apply-all-btn:disabled { opacity: 0.7; cursor: default; }
.dbe .tk-apply-all-done { margin-left: auto; font-size: 0.78rem; color: color-mix(in srgb, #10b981 75%, var(--fg)); }
.dbe .tk-apply-all-result { margin: 0.3rem 0 0.6rem; padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.85rem;
    background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid var(--border); }
.dbe .tk-apply-all-result p { margin: 0 0 0.3rem; }
.dbe .tk-apply-all-list { margin: 0 0 0.4rem; padding-left: 1.2rem; font-size: 0.8rem; color: var(--muted); }

/* -- ghost cards + group on the board itself -- */
.dbv-ghost-group { border: 1px dashed color-mix(in srgb, #34d399 55%, transparent); border-radius: 10px;
    padding: 0.5rem 0.7rem 0.7rem; background: color-mix(in srgb, #34d399 5%, transparent); }
.dbv-ghost-group .dbv-group-title { color: color-mix(in srgb, #34d399 75%, var(--fg)); display: flex;
    align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dbv-ghost-group .dbv-group-title .lp-btn { margin-left: auto; }
.dbv-card.dbv-ghost { border: 1.5px dashed color-mix(in srgb, #34d399 65%, transparent);
    background: color-mix(in srgb, #34d399 7%, var(--panel-bg, var(--bg))); }
.dbv-card.dbv-ghost .dbv-name { color: color-mix(in srgb, #34d399 70%, var(--fg)); }
.dbv-ghost-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.05rem 0.4rem;
    border-radius: 999px; border: 1px solid color-mix(in srgb, #34d399 60%, transparent);
    background: color-mix(in srgb, #34d399 16%, transparent); color: color-mix(in srgb, #34d399 80%, var(--fg)); }
.dbv-ghost-note { font-size: 0.74rem; color: var(--muted); margin: 0.15rem 0 0.25rem; }

/* -- Enhance-with-AI ghost group in the Blueprint board's SDM lane -- */
.bb-ghost-group { border: 1px dashed color-mix(in srgb, #34d399 55%, transparent); border-radius: 10px;
    padding: 0.45rem 0.55rem 0.55rem; margin-bottom: 0.6rem;
    background: color-mix(in srgb, #34d399 5%, transparent); display: flex; flex-direction: column; gap: 0.5rem; }
.bb-ghost-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
    color: color-mix(in srgb, #34d399 75%, var(--fg)); display: flex; align-items: center; gap: 0.5rem; }
.bb-ghost-title .lp-btn { margin-left: auto; }
.bb-card.dbv-ghost { border: 1.5px dashed color-mix(in srgb, #34d399 65%, transparent);
    background: color-mix(in srgb, #34d399 7%, var(--panel-bg, var(--bg))); }
.bb-card.dbv-ghost .bb-title { color: color-mix(in srgb, #34d399 70%, var(--fg)); }

/* -- "＋ mark as context" toggles on Blueprint-board cards (whole form / entity / interface) -- */
.bb-ctx-wrap { position: relative; }
.bb-ctx-wrap > .bb-ctx-btn { position: absolute; top: 0.45rem; right: 0.45rem; z-index: 3; }
.bb-ctx-btn { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--muted); cursor: pointer;
    width: 1.35rem; height: 1.35rem; line-height: 1; font-size: 0.8rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; }
.bb-ctx-btn.inline { width: 1.15rem; height: 1.15rem; font-size: 0.72rem; }
.bb-ctx-btn:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.bb-ctx-btn.on { background: color-mix(in srgb, #34d399 22%, transparent);
    border-color: color-mix(in srgb, #34d399 60%, transparent); color: color-mix(in srgb, #34d399 85%, var(--fg)); }
.bb-ctx-on > .bb-card, .bb-card.bb-ctx-on { outline: 1.5px solid color-mix(in srgb, #34d399 55%, transparent);
    outline-offset: 2px; border-radius: 10px; }

/* typed scope chips in the Enhance panel */
.dbe-chip-form { border-color: color-mix(in srgb, #7aa7ff 50%, transparent); background: color-mix(in srgb, #7aa7ff 12%, transparent); }
.dbe-chip-iface { border-color: color-mix(in srgb, #f6c453 50%, transparent); background: color-mix(in srgb, #f6c453 12%, transparent); }
.dbe-chip-path { opacity: 0.85; border-style: dotted; }

/* Privilege-ceiling: a role/permission the operator can't grant is shown locked (see RoleAccessStore). */
.mkt-check-locked, .roles-check.mkt-check-locked { opacity: 0.5; cursor: not-allowed; }
.mkt-check-locked input { cursor: not-allowed; }

/* ==== Doc & data check v2 — the required-documents checklist ==== */
.ddc-doclist td { vertical-align: middle; }
.ddc-row-blocking td:first-child { border-left: 3px solid color-mix(in srgb, #ef4444 65%, transparent); }
.ddc-row-upload { font-size: 0.78rem; max-width: 15rem; }
.ddc-inline-reason { display: inline-flex; gap: 0.3rem; align-items: center; margin-left: 0.35rem; }
.ddc-inline-reason .auth-input.sm { width: 13rem; }
.ddc-doclist .lp-btn.xs { margin-left: 0.25rem; }
.pma-doclist input.auth-input.sm { width: 100%; box-sizing: border-box; }
.pma-doclist td { vertical-align: middle; }

/* ==== 🧭 Self-service ceiling (/admin/solution-mix) ==== */
.sm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0; }
.sm-candidates { margin-top: 0.5rem; }
.sm-of { font-size: 1.1rem; color: var(--muted); font-weight: 500; }
.sm-foot { margin-top: 0.8rem; }
/* the solution-kind + label chips, page-scoped (their canonical copies live inline on AdminTickets / .dbe) */
.sm-page .tk-kind { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--border); color: var(--fg); }
.sm-page .tk-kind-vibecode { background: color-mix(in srgb, #6366f1 18%, transparent); border-color: color-mix(in srgb, #6366f1 45%, transparent); }
.sm-page .tk-kind-inapp { background: color-mix(in srgb, #10b981 16%, transparent); border-color: color-mix(in srgb, #10b981 45%, transparent); }
.sm-page .tk-kind-config { background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.sm-page .tk-kind-investigate { background: color-mix(in srgb, #64748b 20%, transparent); }
.sm-page .tk-label { display: inline-block; padding: 0.05rem 0.4rem; margin-right: 0.2rem; border-radius: 4px; font-size: 0.72rem;
    background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }

/* ==== 🔬 Debug trail (flight recorder) — diagnostics.view only ==== */
.dbt-panel { margin-top: 1rem; }
.dbt-summary { cursor: pointer; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    font-weight: 700; font-size: 0.95rem; }
.dbt-summary .lp-btn { margin-left: auto; }
.dbt-filter { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.7rem 0 0.4rem; }
.dbt-chip { border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--fg);
    font: inherit; font-size: 0.78rem; padding: 0.15rem 0.6rem; cursor: pointer; }
.dbt-chip.on { background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 600; }
.dbt-chip-label { font-size: 0.78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.dbt-table td { vertical-align: top; }
.dbt-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dbt-kind { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px;
    border: 1px solid var(--border); white-space: nowrap; }
.dbt-kind-0 { background: color-mix(in srgb, #f6c453 16%, transparent); border-color: color-mix(in srgb, #f6c453 45%, transparent); }
.dbt-kind-1 { background: color-mix(in srgb, #10b981 16%, transparent); border-color: color-mix(in srgb, #10b981 45%, transparent); }
.dbt-kind-2 { background: color-mix(in srgb, #a779ff 16%, transparent); border-color: color-mix(in srgb, #a779ff 45%, transparent); }
.dbt-kind-3 { background: color-mix(in srgb, #7aa7ff 16%, transparent); border-color: color-mix(in srgb, #7aa7ff 45%, transparent); }
.dbt-title { font-size: 0.88rem; }
.dbt-row-failed td:first-child { border-left: 3px solid color-mix(in srgb, #ef4444 65%, transparent); }
.dbt-detail-row td { padding: 0; }
.dbt-detail { margin: 0; padding: 0.6rem 0.8rem; font-family: ui-monospace, monospace; font-size: 0.76rem;
    line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: color-mix(in srgb, var(--fg) 4%, transparent);
    max-height: 22rem; overflow: auto; }