/* ============================================================================
   CFP FP&A 2.0 — stylesheet
   ----------------------------------------------------------------------------
   Lifted out of index.html. The blocks below are in their original document
   order, because that order IS the cascade — moving one changes what wins.
   ========================================================================== */

/* ── block 1 of 7 — @font-face ── */
        @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/jost-300.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jost-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/jost-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cormorant-garamond-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/cormorant-garamond-700.woff2') format('woff2'); }
/* ── block 2 of 7 — :root ── */
        :root {
            /* CFP 2.0 — dark, sandbox aesthetic: gold accent on slate surfaces */
            --navy-dark: #0b1017;
            --navy-main: #34495E;
            --blue-primary: #6fa8e0;      /* logo blue, lightened to read on dark */
            --blue-light: #1c2732;        /* hover surface (was pale blue) */
            --gold: #d6a94b;              /* accent, brighter on dark */
            --gold-deep: #C4973B;
            --white: #FFFFFF;             /* true white — reserved for on-accent text */
            --light-gray: #1c2732;
            --off-white: #0f151c;         /* page background */
            --medium-gray: #93a4b4;       /* muted / secondary text */
            --dark-gray: #e7eef5;         /* primary text */
            --border-light: #2a3644;
            --border-blue: rgba(111, 168, 224, 0.28);
            --shadow: 0 1px 2px rgba(0,0,0,.35);
            --shadow-lg: 0 8px 24px rgba(0,0,0,.55);
            --shadow-blue: 0 2px 12px rgba(0,0,0,.45);
            /* new surface tokens (flat, bordered cards like the sandbox) */
            --surface: #161f28;           /* cards / panels / header / sidebar */
            --surface-2: #1c2732;         /* raised / hover */
            --ink: #e7eef5;
            --muted: #93a4b4;
            --line: #2a3644;
            --thead: #223a54;             /* table header band — deep blue-slate (brand blue) */
            --border: #2a3644;            /* alias so var(--border, <light fallback>) reads dark */

            /* Typography */
            --font-primary: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
        }
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
body {
            font-family: var(--font-primary);
            background: var(--off-white);
            color: var(--dark-gray);
            line-height: 1.6;
        }
/* Header */
        .header {
            background: var(--surface);
            border-bottom: 1px solid var(--border-light);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow);
        }
.header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
/* Customer model switcher */
        .model-switch-wrap { position: relative; margin-right: 0.75rem; }
.model-switch-btn {
            display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
            background: var(--surface-2, #1c2732); border: 1px solid var(--line, #2a3644);
            border-radius: 8px; padding: 5px 10px; cursor: pointer; font-family: inherit;
            min-width: 150px; max-width: 220px; position: relative;
        }
.model-switch-btn:hover { border-color: var(--gold, #d6a94b); }
.model-switch-btn svg { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--muted, #93a4b4); }
.model-switch-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #93a4b4); font-weight: 600; }
.model-switch-name { font-size: 0.86rem; font-weight: 600; color: var(--ink, #e7eef5);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; padding-right: 14px; }
.model-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 5000;
            width: 300px; background: var(--surface, #161f28); border: 1px solid var(--line, #2a3644);
            border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.45); padding: 10px; }
.model-menu.active { display: block; }
.model-menu-head { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
            color: var(--muted, #93a4b4); font-weight: 700; margin-bottom: 6px; }
.model-list { max-height: 240px; overflow-y: auto; margin-bottom: 10px; }
.model-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
            width: 100%; text-align: left; background: transparent; border: 1px solid transparent;
            border-radius: 7px; padding: 7px 9px; cursor: pointer; font-family: inherit;
            font-size: 0.86rem; color: var(--ink, #e7eef5); }
.model-item:hover { background: var(--surface-2, #1c2732); }
.model-item.on { border-color: var(--gold, #d6a94b); background: var(--surface-2, #1c2732); }
.model-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-item-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
            font-weight: 700; color: var(--gold, #d6a94b); }
.model-empty { font-size: 0.82rem; color: var(--muted, #93a4b4); padding: 8px 4px; }
.model-menu-sec { border-top: 1px solid var(--line, #2a3644); padding-top: 9px; margin-top: 4px; }
.model-menu-sec label { display: block; font-size: 10px; text-transform: uppercase;
            letter-spacing: .05em; color: var(--muted, #93a4b4); font-weight: 600; margin-bottom: 5px; }
.model-row { display: flex; gap: 6px; }
.model-row input { flex: 1; min-width: 0; background: var(--surface-2, #1c2732);
            border: 1px solid var(--line, #2a3644); border-radius: 6px; padding: 6px 8px;
            font-family: inherit; font-size: 0.84rem; color: var(--ink, #e7eef5); }
.model-row input:focus { outline: 2px solid var(--gold, #d6a94b); outline-offset: -1px; }
.model-row .btn { padding: 6px 12px; font-size: 0.82rem; white-space: nowrap; }
.model-hint { font-size: 0.74rem; color: var(--muted, #93a4b4); margin: 5px 0 0; }

/* Working-capital rows: the way back to the DSO/DPO formula after overriding. */
.bs-wc-btn { background: transparent; border: 1px solid var(--line, #2a3644); border-radius: 4px;
            padding: 1px 7px; margin-left: 6px; font-family: inherit; font-size: 0.68rem;
            color: var(--muted, #93a4b4); cursor: pointer; vertical-align: middle; }
.bs-wc-btn:hover { color: var(--gold, #d6a94b); border-color: var(--gold, #d6a94b); }

/* Opt-in KPI bands: a slim line of chips instead of two always-open card rows. */
.dash-kpi-toggle { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.dash-kpi-toggle-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
            font-weight: 600; color: var(--muted, #93a4b4); }
.dash-kpi-toggle-chip { background: transparent; border: 1px solid var(--line, #2a3644);
            border-radius: 999px; padding: 3px 12px; font-family: inherit; font-size: 0.78rem;
            color: var(--muted, #93a4b4); cursor: pointer; }
.dash-kpi-toggle-chip:hover { color: var(--ink, #e7eef5); border-color: var(--muted, #93a4b4); }
.dash-kpi-toggle-chip.on { color: var(--gold, #d6a94b); border-color: var(--gold, #d6a94b);
            background: color-mix(in srgb, var(--gold, #d6a94b) 12%, transparent); }

/* What period the YTD band covers, and how to change it. */
.dash-ytd-period { margin-left: 10px; font-size: 0.76rem; font-weight: 400;
            text-transform: none; letter-spacing: 0; color: var(--muted, #93a4b4); }
.dash-ytd-link { background: none; border: none; padding: 0; font: inherit;
            color: var(--blue-primary, #5dade2); text-decoration: underline; cursor: pointer; }
.dash-ytd-link:hover { color: var(--gold, #d6a94b); }

/* ── Frozen versions ─────────────────────────────────────────────────────── */
.version-list { display: flex; flex-direction: column; gap: 3px; max-height: 190px;
            overflow-y: auto; margin-bottom: 8px; }
.version-item { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; width: 100%;
            text-align: left; background: transparent; border: 1px solid transparent;
            border-radius: 7px; padding: 7px 9px; cursor: pointer; font-family: inherit;
            color: var(--ink, #e7eef5); }
.version-item:hover { background: var(--surface-2, #1c2732); }
.version-item.on { border-color: var(--gold, #d6a94b); background: var(--surface-2, #1c2732); }
.version-item-name { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version-item-date { font-size: 0.72rem; color: var(--muted, #93a4b4);
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.version-item-note { grid-column: 1 / -1; font-size: 0.74rem; color: var(--muted, #93a4b4);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#versionSection .btn { width: 100%; }

/* The bar that says nothing here can be edited. */
.frozen-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 8px 20px; background: color-mix(in srgb, var(--gold, #d6a94b) 14%, transparent);
            border-bottom: 1px solid var(--gold, #d6a94b); font-size: 0.84rem;
            color: var(--ink, #e7eef5); }
.frozen-bar-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
            font-weight: 700; color: #231a08; background: var(--gold, #d6a94b);
            border-radius: 4px; padding: 2px 7px; }
.frozen-bar-name { font-weight: 600; }
.frozen-bar-meta { color: var(--muted, #93a4b4); font-size: 0.78rem; }
.frozen-bar-exit { margin-left: auto; background: transparent; border: 1px solid var(--gold, #d6a94b);
            border-radius: 6px; padding: 5px 12px; font-family: inherit; font-size: 0.8rem;
            color: var(--gold, #d6a94b); cursor: pointer; }
.frozen-bar-exit:hover { background: var(--gold, #d6a94b); color: #231a08; }
/* Same bar, red: the server holds a newer copy than this tab. */
.stale-bar { background: color-mix(in srgb, #ef4444 14%, transparent); border-bottom-color: #ef4444; }
.stale-bar .frozen-bar-tag { background: #ef4444; color: #fff; }
.stale-bar .frozen-bar-meta { color: var(--ink, #e7eef5); }
.stale-bar .frozen-bar-exit { border-color: #ef4444; color: #fca5a5; }
.stale-bar .frozen-bar-exit:hover { background: #ef4444; color: #fff; }

/* Belt and braces alongside the save gate: an editor that cannot be typed into
   cannot mislead you into thinking an edit took. The bar's own button stays live. */
body.model-frozen .main-container input,
body.model-frozen .main-container select,
body.model-frozen .main-container textarea,
body.model-frozen .main-container [contenteditable="true"] {
            pointer-events: none; opacity: .75; }
body.model-frozen .main-container input[readonly] { opacity: 1; }

/* Two-field prompt (appPrompt). */
.app-prompt-msg { margin: 0 0 12px; }
.app-prompt-lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
            color: var(--muted, #93a4b4); font-weight: 600; margin: 10px 0 4px; }
.app-prompt-in { width: 100%; background: var(--surface-2, #1c2732);
            border: 1px solid var(--line, #2a3644); border-radius: 6px; padding: 7px 9px;
            font-family: inherit; font-size: 0.88rem; color: var(--ink, #e7eef5); }
.app-prompt-in:focus { outline: 2px solid var(--gold, #d6a94b); outline-offset: -1px; }
.model-delete { width: 100%; margin-top: 9px; background: transparent; border: 1px solid var(--line, #2a3644);
            border-radius: 6px; padding: 6px; font-family: inherit; font-size: 0.8rem;
            color: #e08067; cursor: pointer; }
.model-delete:hover { border-color: #e08067; }
.logo-section {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
.logo {
            width: 60px;
            height: 40px;
            background: #0b1017;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 4px 6px;
        }
.logo-svg {
            width: 40px;
            height: 30px;
            display: block;
        }
.brand-text h1 {
            font-family: var(--font-serif);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark-gray);
            margin: 0;
        }
.brand-text p {
            font-size: 0.875rem;
            color: var(--blue-primary);
            margin: 0;
        }
.header-nav {
            display: flex;
            gap: 2rem;
            align-items: center;
        }
.nav-link {
            color: var(--dark-gray);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s ease;
            position: relative;
        }
.nav-link:hover {
            color: var(--blue-primary);
        }
.nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background: var(--blue-primary);
            transition: width 0.2s ease;
        }
.nav-link:hover::after {
            width: 100%;
        }
.cta-button {
            background: var(--blue-primary);
            color: var(--white);
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 0.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
        }
.cta-button:hover {
            background: #4A90C2;
            transform: translateY(-1px);
            box-shadow: var(--shadow-blue);
        }
/* Save indicator */
        .save-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.5rem 0.85rem;
            background: rgba(16, 185, 129, 0.08);
            color: #4bbd8a;
            border-radius: 0.5rem;
            font-size: 0.78rem;
            font-weight: 500;
            cursor: default;
            user-select: none;
            transition: all 0.2s ease;
        }
.save-indicator.saving {
            background: rgba(93, 173, 226, 0.1);
            color: var(--blue-primary);
        }
.save-indicator.error {
            background: rgba(239, 68, 68, 0.1);
            color: #e08067;
        }
.save-indicator.idle {
            background: rgba(255,255,255,0.04);
            color: var(--medium-gray);
        }
.save-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10B981;
            flex-shrink: 0;
        }
.save-indicator.saving .save-dot {
            background: var(--blue-primary);
            animation: save-pulse 1s ease-in-out infinite;
        }
.save-indicator.error .save-dot {
            background: #EF4444;
        }
.save-indicator.idle .save-dot {
            background: var(--medium-gray);
        }
@keyframes save-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
50%      { opacity: 0.5; transform: scale(0.7); }
}
/* Data menu */
        .data-menu-wrap {
            position: relative;
        }
.data-menu-btn {
            background: var(--surface);
            border: 1px solid var(--border-light);
            color: var(--dark-gray);
            height: 38px;
            padding: 0 0.7rem;
            border-radius: 0.5rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.82rem;
            font-weight: 600;
            font-family: inherit;
            transition: all 0.2s ease;
        }
.data-menu-btn:hover {
            background: var(--off-white);
            border-color: var(--blue-primary);
            color: var(--blue-primary);
        }
.data-menu {
            display: none;
            position: absolute;
            top: calc(100% + 0.5rem);
            right: 0;
            min-width: 280px;
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            z-index: 1000;
            padding: 0.4rem;
            overflow: hidden;
        }
.data-menu.active {
            display: block;
            animation: data-menu-fade 0.15s ease-out;
        }
@keyframes data-menu-fade {
            from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: translateY(0); }
}
.data-menu-item {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            width: 100%;
            padding: 0.7rem 0.85rem;
            background: transparent;
            border: none;
            border-radius: 0.35rem;
            cursor: pointer;
            text-align: left;
            transition: background 0.15s ease;
            font-family: var(--font-primary);
        }
.data-menu-item:hover {
            background: var(--off-white);
        }
.data-menu-item.data-menu-danger:hover {
            background: rgba(239, 68, 68, 0.08);
        }
.data-menu-item.data-menu-danger .data-menu-title {
            color: #e08067;
        }
.data-menu-icon {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(93, 173, 226, 0.12);
            color: var(--blue-primary);
            border-radius: 0.35rem;
            font-size: 1rem;
            font-weight: 700;
        }
.data-menu-danger .data-menu-icon {
            background: rgba(239, 68, 68, 0.12);
            color: #e08067;
        }
.data-menu-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--dark-gray);
            margin-bottom: 0.1rem;
        }
.data-menu-desc {
            font-size: 0.72rem;
            color: var(--medium-gray);
        }
.data-menu-divider {
            border: none;
            border-top: 1px solid var(--border-light);
            margin: 0.3rem 0;
        }
/* Main Layout - Optimized for space efficiency */
        .main-container {
            max-width: 100%;
            margin: 0 auto;
            padding: 1rem;
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 1rem;
            min-height: calc(100vh - 80px);
            transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
.main-container.sidebar-collapsed {
            grid-template-columns: 60px 1fr;
        }
/* Sidebar - Optimized for space efficiency */
        .sidebar {
            background: var(--surface);
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            padding: 1.5rem 1rem;
            height: fit-content;
            position: sticky;
            top: 100px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            will-change: transform, opacity;
        }
.sidebar.collapsed {
            padding: 1rem 0.5rem;
            transform: translateX(0);
        }
/* When collapsed, force everything inside to clip — bulletproofs against any rogue text node */
        .sidebar.collapsed .nav-menu,
        .sidebar.collapsed .nav-item {
            overflow: hidden;
            white-space: nowrap;
        }
.sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
.sidebar.collapsed .sidebar-header {
            justify-content: center;
            margin-bottom: 0.5rem;
        }
.sidebar-title {
            font-family: var(--font-serif);
            font-size: 1.1rem;
            color: var(--dark-gray);
            margin: 0;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--blue-primary);
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            flex: 1;
            white-space: nowrap;
        }
.sidebar-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 30px;
            height: 2px;
            background: var(--gold);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
.sidebar.collapsed .sidebar-title {
            opacity: 0;
            visibility: hidden;
            width: 0;
            border: none;
            padding: 0;
            transform: translateX(-10px);
        }
.sidebar.collapsed .sidebar-title::after {
            opacity: 0;
            width: 0;
        }
.sidebar-collapse-btn {
            background: none;
            border: none;
            padding: 0.5rem;
            cursor: pointer;
            color: var(--medium-gray);
            border-radius: 0.375rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 0.75rem;
            will-change: transform;
        }
.sidebar.collapsed .sidebar-collapse-btn {
            margin-left: 0;
            transform: rotate(180deg);
        }
.sidebar-collapse-btn:hover {
            background: var(--off-white);
            color: var(--blue-primary);
            transform: scale(1.1);
            box-shadow: 0 2px 8px rgba(93, 173, 226, 0.2);
        }
.sidebar.collapsed .sidebar-collapse-btn:hover {
            transform: rotate(180deg) scale(1.1);
        }
.collapse-icon {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
.nav-menu {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }
.nav-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 0.75rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--dark-gray);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            border: 1px solid transparent;
            white-space: nowrap;
            will-change: transform, background-color;
        }
.nav-item:hover {
            background: var(--blue-light);
            color: var(--blue-primary);
            transform: translateX(4px);
            border-color: var(--border-blue);
            box-shadow: 0 2px 8px rgba(93, 173, 226, 0.15);
        }
.nav-item.active {
            background: var(--blue-primary);
            color: var(--white);
            box-shadow: var(--shadow-blue);
            transform: translateX(2px);
        }
.nav-item.active::before {
            content: '';
            position: absolute;
            left: -0.75rem;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 24px;
            background: var(--gold);
            border-radius: 0 2px 2px 0;
        }
.nav-icon {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            flex-shrink: 0;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
/* Sub-nav items (P&L Statement, Customer Budget, Headcount Planning) */
        .nav-item.nav-sub {
            margin-left: 1.75rem;
            font-size: 0.875rem;
            opacity: 0.85;
        }
.nav-item.nav-sub:hover {
            opacity: 1;
        }
/* Deeper sub-nav items (Customer Budget, Headcount Planning — nested under P&L) */
        .nav-item.nav-sub-deep {
            margin-left: 3rem;
            font-size: 0.825rem;
            opacity: 0.75;
        }
.nav-item.nav-sub-deep:hover {
            opacity: 1;
        }
.nav-item.nav-sub-deep .nav-icon {
            opacity: 0.7;
        }
/* Collapsible nav groups */
        .nav-item.nav-parent {
            position: relative;
            cursor: pointer;
            user-select: none;
        }
.nav-chevron {
            width: 14px;
            height: 14px;
            margin-left: auto;
            color: var(--medium-gray);
            transition: transform 0.25s ease;
            flex-shrink: 0;
        }
.nav-group.collapsed .nav-chevron {
            transform: rotate(-90deg);
        }
.nav-children {
            max-height: 1000px;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
.nav-group.collapsed .nav-children {
            max-height: 0;
        }
/* Hide chevron in collapsed sidebar */
        .sidebar.collapsed .nav-chevron {
            display: none;
        }
.sidebar.collapsed .nav-children {
            max-height: 1000px !important;  /* Always expanded when sidebar collapsed */
        }
/* Collapsed Sidebar Navigation - Improved animations */
        .sidebar.collapsed .nav-item {
            padding: 0.75rem 0.5rem;
            justify-content: center;
            margin-right: 0;
            margin-left: 0; /* CRITICAL: override sub-item indent when collapsed */
            font-size: inherit;
            opacity: 1;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
.sidebar.collapsed .nav-item.nav-sub,
        .sidebar.collapsed .nav-item.nav-sub-deep {
            margin-left: 0;
            font-size: inherit;
            opacity: 1;
        }
.sidebar.collapsed .nav-icon {
            margin-right: 0;
            transform: scale(1.1);
        }
.sidebar.collapsed .nav-item span {
            opacity: 0;
            visibility: hidden;
            width: 0;
            overflow: hidden;
            transform: translateX(-10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
/* Collapsed Navigation Tooltips - Improved positioning */
        .sidebar.collapsed .nav-item {
            position: relative;
        }
.sidebar.collapsed .nav-item::after {
            content: attr(data-tooltip);
            position: absolute;
            left: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%);
            background: var(--thead);
            color: var(--white);
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.85rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
.sidebar.collapsed .nav-item:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) translateX(5px);
        }
.sidebar.collapsed .nav-item:hover {
            transform: scale(1.1);
            background: var(--blue-light);
        }
.sidebar.collapsed .nav-item.active:hover {
            background: var(--blue-primary);
        }
/* Responsive behavior for smaller screens */
        @media (max-width: 1024px) {
            .main-container {
                padding: 0.75rem;
                gap: 0.75rem;
            }
.sidebar {
                padding: 1rem 0.75rem;
                top: 80px;
            }
.customer-dashboard {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
.customer-sidebar {
                order: 2;
                padding: 1rem;
            }
.customer-main {
                order: 1;
                padding: 1.25rem;
            }
}
@media (max-width: 768px) {
            .main-container {
                grid-template-columns: 1fr;
                padding: 0.5rem;
            }
.sidebar {
                position: relative;
                top: auto;
                margin-bottom: 1rem;
            }
.budget-summary-card .value {
                font-size: 1.4rem;
            }
.customer-budget-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
}
/* Performance optimizations */
        .nav-item,
        .customer-item,
        .budget-summary-card,
        .sidebar-collapse-btn {
            backface-visibility: hidden;
            perspective: 1000px;
        }
/* Headcount Planning Module */
        .hc-identity-section {
            background: var(--off-white);
            border-radius: 0.75rem;
            padding: 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid var(--border-light);
        }
.hc-prorate-note {
            margin-top: 0.85rem;
            padding: 0.6rem 0.85rem;
            border-radius: 0.4rem;
            font-size: 0.85rem;
            display: none;
        }
.hc-prorate-note.active {
            display: block;
        }
.hc-prorate-note.partial {
            background: rgba(196, 151, 59, 0.16);
            color: #d6a94b;
            border-left: 3px solid var(--gold);
        }
.hc-prorate-note.inactive {
            background: rgba(239, 68, 68, 0.08);
            color: #e08067;
            border-left: 3px solid #EF4444;
        }
.hc-prorate-note.full {
            background: rgba(34, 197, 94, 0.08);
            color: #15803D;
            border-left: 3px solid #22C55E;
        }
.hc-input {
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border-light);
            border-radius: 0.375rem;
            font-size: 0.9rem;
            font-family: var(--font-primary);
            background: var(--surface);
            transition: all 0.2s ease;
        }
.hc-input:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
@media (max-width: 1100px) {
        }
@media (max-width: 768px) {
        }
/* Compensation table — clean professional layout */
        .compensation-table .hc-cell-hint {
            display: block;
            font-size: 0.75rem;
            color: var(--medium-gray);
            font-weight: 400;
            margin-top: 0.15rem;
            letter-spacing: 0.01em;
        }
.compensation-table td {
            padding: 0.85rem 1rem;
            vertical-align: middle;
        }
.compensation-table .hc-input-cell {
            text-align: right;
        }
.hc-input-wrap {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: 0.375rem;
            padding: 0.1rem 0.5rem;
            transition: all 0.2s ease;
            min-width: 140px;
            justify-content: flex-end;
        }
.hc-input-wrap:focus-within {
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.hc-amount-input {
            border: none;
            outline: none;
            background: transparent;
            font-family: 'Courier New', monospace;
            font-size: 0.95rem;
            text-align: right;
            padding: 0.4rem 0;
            width: 100%;
            min-width: 0;
            color: var(--dark-gray);
        }
.hc-amount-input.hc-pct-input {
            max-width: 80px;
        }
.hc-amount-input::-webkit-outer-spin-button,
        .hc-amount-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
.hc-amount-input[type=number] {
            -moz-appearance: textfield;
        }
/* Generic amount cell — right-aligned, monospace. Used by capex, driver, and compensation tables. */
        .hc-amount-cell {
            text-align: right;
            font-family: 'Courier New', monospace;
            font-weight: 500;
            color: var(--dark-gray);
        }
.compensation-table .hc-amount-cell {
            text-align: right;
            font-family: 'Courier New', monospace;
            font-weight: 500;
            color: var(--dark-gray);
        }
.compensation-table .hc-pct-cell {
            text-align: right;
            color: var(--medium-gray);
            font-style: italic;
            font-size: 0.9rem;
        }
.compensation-table .hc-total-row {
            background: rgba(93, 173, 226, 0.08);
            border-top: 2px solid var(--blue-primary);
        }
.compensation-table .hc-total-row td {
            font-weight: 700;
            color: var(--dark-gray);
            font-style: normal;
        }
.compensation-table .hc-total-row .hc-amount-cell {
            font-size: 1rem;
            color: var(--blue-primary);
        }
/* P&L Account mapping */
        .hc-mapping-note {
            background: rgba(93, 173, 226, 0.08);
            border-left: 3px solid var(--blue-primary);
            padding: 0.6rem 0.85rem;
            margin: 0 0 0.85rem 0;
            border-radius: 0.4rem;
            font-size: 0.82rem;
            color: var(--medium-gray);
            line-height: 1.5;
        }
.hc-mapping-note strong {
            color: var(--dark-gray);
        }
.compensation-table .hc-account-cell {
            text-align: center;
        }
.hc-account-input {
            width: 95px;
            padding: 0.4rem 0.5rem;
            border: 1px solid var(--border-light);
            border-radius: 0.375rem;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            text-align: center;
            background: var(--surface);
            color: var(--dark-gray);
            transition: all 0.2s ease;
        }
.hc-account-input:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.year-propagation-hint {
            color: var(--blue-primary);
            font-size: 0.85rem;
            margin-left: 0.5rem;
            cursor: help;
            opacity: 0.6;
            transition: opacity 0.2s ease;
        }
.year-propagation-hint:hover {
            opacity: 1;
        }
@media (max-width: 1200px) {
        }
@media (max-width: 768px) {
        }
.cust-discount-wrap {
            display: flex;
            gap: 0.4rem;
            align-items: stretch;
        }
.cust-discount-wrap .hc-input {
            flex: 1;
        }
/* Rate Card */
        .rate-card-section {
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: 0.6rem;
            margin-bottom: 1rem;
            overflow: hidden;
        }
.rate-card-header {
            padding: 0.85rem 1.1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            background: var(--off-white);
            transition: background 0.2s ease;
            user-select: none;
        }
.rate-card-header:hover {
            background: rgba(93, 173, 226, 0.06);
        }
.rate-card-header h4 {
            margin: 0;
            font-size: 0.95rem;
            color: var(--dark-gray);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
.rate-card-toggle {
            display: inline-block;
            transition: transform 0.25s ease;
            color: var(--medium-gray);
            font-size: 0.85rem;
        }
.rate-card-section.collapsed .rate-card-toggle {
            transform: rotate(-90deg);
        }
.rate-card-summary {
            font-size: 0.82rem;
            color: var(--medium-gray);
            font-family: 'Courier New', monospace;
        }
.rate-card-body {
            padding: 1rem 1.1rem 1.1rem;
            border-top: 1px solid var(--border-light);
            transition: max-height 0.3s ease, padding 0.3s ease;
            overflow: hidden;
        }
.rate-card-section.collapsed .rate-card-body {
            max-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            border-top: 0;
        }
.rate-card-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1rem;
        }
@media (max-width: 768px) {
            .rate-card-grid {
                grid-template-columns: 1fr;
            }
}
.rate-card-item {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }
.rate-card-item label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--medium-gray);
            font-weight: 600;
        }
.rate-input-wrap {
            display: inline-flex;
            align-items: center;
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: 0.375rem;
            padding: 0.1rem 0.7rem;
            transition: all 0.2s ease;
            gap: 0.5rem;
        }
.rate-input-wrap:focus-within {
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.rate-input-wrap input {
            border: none;
            outline: none;
            background: transparent;
            font-family: 'Courier New', monospace;
            font-size: 0.95rem;
            padding: 0.4rem 0;
            flex: 1;
            min-width: 0;
            color: var(--dark-gray);
        }
.rate-input-wrap input::-webkit-outer-spin-button,
        .rate-input-wrap input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
.rate-input-wrap input[type=number] {
            -moz-appearance: textfield;
        }
.rate-suffix {
            color: var(--medium-gray);
            font-size: 0.85rem;
            white-space: nowrap;
        }
/* Driver Table */
        .driver-table {
            font-size: 0.88rem;
        }
.driver-table th {
            font-size: 0.72rem;
            white-space: nowrap;
        }
.driver-table td {
            padding: 0.7rem 0.6rem;
            vertical-align: top;
        }
.driver-task-input {
            width: 100%;
            padding: 0.35rem 0.5rem;
            border: 1px solid var(--border-light);
            border-radius: 0.3rem;
            font-size: 0.88rem;
            font-family: var(--font-primary);
            background: var(--surface);
            transition: all 0.2s ease;
            font-weight: 600;
            color: var(--dark-gray);
        }
.driver-task-input:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.driver-assessment-input {
            width: 100%;
            padding: 0.35rem 0.5rem;
            border: 1px solid var(--border-light);
            border-radius: 0.3rem;
            font-size: 0.82rem;
            font-family: var(--font-primary);
            background: var(--surface);
            transition: all 0.2s ease;
            color: var(--medium-gray);
            resize: vertical;
            min-height: 38px;
            line-height: 1.4;
        }
.driver-assessment-input:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
            color: var(--dark-gray);
        }
.driver-hours-input {
            width: 100%;
            padding: 0.35rem 0.4rem;
            border: 1px solid var(--border-light);
            border-radius: 0.3rem;
            font-size: 0.85rem;
            font-family: 'Courier New', monospace;
            background: var(--surface);
            transition: all 0.2s ease;
            text-align: center;
        }
.driver-hours-input:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.driver-cost-cell {
            text-align: right;
            font-family: 'Courier New', monospace;
            color: var(--dark-gray);
            font-weight: 500;
        }
.driver-row-delete {
            background: transparent;
            border: none;
            color: var(--medium-gray);
            cursor: pointer;
            padding: 0.25rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
            opacity: 0.5;
        }
.driver-row-delete:hover {
            background: rgba(239, 68, 68, 0.1);
            color: #e08067;
            opacity: 1;
        }
.driver-listing-row {
            background: rgba(255,255,255,0.02);
            font-weight: 600;
        }
.driver-listing-row td {
            padding: 0.85rem 0.6rem;
            border-top: 2px solid var(--border-light);
        }
.driver-discount-row {
            background: rgba(196, 151, 59, 0.14);
        }
.driver-discount-row td {
            padding: 0.7rem 0.6rem;
            color: #d6a94b;
            font-weight: 600;
        }
.driver-monthly-row {
            background: rgba(93, 173, 226, 0.08);
        }
.driver-monthly-row td {
            padding: 0.85rem 0.6rem;
            color: var(--blue-primary);
            font-weight: 600;
            font-size: 0.95rem;
        }
.driver-table .hc-amount-cell {
            font-size: 0.92rem;
        }
/* Inflation toggle button */
        .pl-inflation-btn {
            background: transparent;
            border: 1px solid transparent;
            cursor: pointer;
            color: var(--medium-gray);
            font-size: 0.75rem;
            padding: 0.1rem 0.3rem;
            margin-left: 0.4rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
            opacity: 0.4;
            vertical-align: middle;
            line-height: 1;
        }
.pl-line-item:hover .pl-inflation-btn {
            opacity: 1;
        }
.pl-inflation-btn:hover {
            background: rgba(196, 151, 59, 0.12);
            color: var(--gold);
            border-color: var(--gold);
        }
.pl-inflation-btn.active {
            background: rgba(196, 151, 59, 0.24);
            color: #d6a94b;
            border-color: var(--gold);
            opacity: 1;
            font-weight: 600;
        }
.pl-inflation-badge {
            display: inline-block;
            font-size: 0.65rem;
            font-weight: 600;
            padding: 0.1rem 0.45rem;
            border-radius: 0.75rem;
            background: rgba(196, 151, 59, 0.15);
            color: #d6a94b;
            margin-left: 0.5rem;
            letter-spacing: 0.02em;
            vertical-align: middle;
            text-transform: uppercase;
        }
/* P&L expandable rows + wired-row styling */
        .pl-expand-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--medium-gray);
            font-size: 0.7rem;
            padding: 0;
            margin-right: 0.5rem;
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, color 0.2s ease;
            vertical-align: middle;
        }
.pl-expand-btn:hover {
            color: var(--blue-primary);
        }
.pl-expand-btn.expanded {
            transform: rotate(90deg);
            color: var(--blue-primary);
        }
.pl-expand-btn.has-details {
            color: var(--blue-primary);
        }
.pl-detail-row {
            background: rgba(93, 173, 226, 0.04);
        }
.pl-detail-row.pl-wired-detail {
            background: rgba(93, 173, 226, 0.06);
        }
.pl-wired-detail .account-number {
            color: var(--blue-primary);
        }
.pl-detail-row td {
            padding: 0.5rem 0.75rem !important;
            font-size: 0.85rem;
            border-bottom: 1px solid rgba(93, 173, 226, 0.08) !important;
        }
.pl-detail-row td:first-child {
            padding-left: 3rem !important;
            color: var(--medium-gray);
        }
/* Description cell of a detail line: the name field flexes, the tag beside it
   ("per FTE", the year, the delete button) keeps its own width. Laid out inline
   the two together overran the cell and covered the first figure column. */
.pl-detail-desc {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            max-width: 320px;
        }
.pl-detail-desc .pl-detail-desc-input {
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
            max-width: none;
        }
.pl-detail-desc > .pl-driven-tag,
.pl-detail-desc > .pl-year-tag,
.pl-detail-desc > .pl-detail-delete-btn {
            flex: 0 0 auto;
            margin-left: 0;
        }
.pl-detail-desc-input {
            background: transparent;
            border: 1px dashed transparent;
            outline: none;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-family: var(--font-primary);
            font-size: 0.85rem;
            color: var(--dark-gray);
            width: 100%;
            max-width: 320px;
            transition: all 0.2s ease;
        }
.pl-detail-desc-input:hover {
            border-color: var(--border-light);
        }
.pl-detail-desc-input:focus {
            border-color: var(--blue-primary);
            border-style: solid;
            background: var(--surface);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.15);
        }
.pl-detail-amount-input {
            background: transparent;
            border: 1px dashed transparent;
            outline: none;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            text-align: right;
            color: var(--dark-gray);
            width: 100%;
            transition: all 0.2s ease;
        }
.pl-detail-amount-input:hover {
            border-color: var(--border-light);
        }
.pl-detail-amount-input:focus {
            border-color: var(--blue-primary);
            border-style: solid;
            background: var(--surface);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.15);
        }
.pl-detail-amount-input::-webkit-outer-spin-button,
        .pl-detail-amount-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
.pl-detail-amount-input[type=number] {
            -moz-appearance: textfield;
        }
.pl-detail-actions-row td {
            padding: 0.4rem 0.75rem !important;
            background: rgba(93, 173, 226, 0.04);
            border-bottom: 1px solid var(--border-light) !important;
        }
.pl-detail-add-btn {
            background: transparent;
            color: var(--blue-primary);
            border: 1px dashed var(--blue-primary);
            border-radius: 0.3rem;
            padding: 0.3rem 0.7rem;
            font-size: 0.78rem;
            cursor: pointer;
            margin-left: 2.5rem;
            transition: all 0.2s ease;
        }
.pl-detail-add-btn:hover {
            background: var(--blue-primary);
            color: white;
        }
.pl-detail-delete-btn {
            background: transparent;
            border: none;
            color: var(--medium-gray);
            cursor: pointer;
            padding: 0.15rem 0.35rem;
            border-radius: 0.25rem;
            font-size: 0.85rem;
            opacity: 0.4;
            transition: all 0.2s ease;
        }
.pl-detail-row:hover .pl-detail-delete-btn {
            opacity: 1;
        }
.pl-detail-delete-btn:hover {
            background: rgba(239, 68, 68, 0.1);
            color: #e08067;
        }
.pl-wired-badge {
            display: inline-block;
            font-size: 0.65rem;
            font-weight: 600;
            padding: 0.1rem 0.45rem;
            border-radius: 0.75rem;
            background: rgba(93, 173, 226, 0.15);
            color: var(--blue-primary);
            margin-left: 0.5rem;
            letter-spacing: 0.02em;
            vertical-align: middle;
            text-transform: uppercase;
        }
.pl-wired-row {
            background: rgba(93, 173, 226, 0.025);
        }
.pl-wired-row .pl-amount {
            color: var(--dark-gray);
            cursor: not-allowed;
            position: relative;
        }
.pl-wired-row .pl-amount::after {
            content: '🔗';
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.6rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
.pl-wired-row:hover .pl-amount::after {
            opacity: 0.4;
        }
.pl-amount-cell-input {
            background: transparent;
            border: 1px dashed transparent;
            outline: none;
            /* Vertical padding only — horizontal padding would push inputs inward
               relative to bare-text totals (which only have td padding), causing
               misalignment between line items and total rows. */
            padding: 0.3rem 0;
            border-radius: 0.25rem;
            font-family: 'Courier New', monospace;
            font-size: inherit;
            text-align: right;
            color: var(--dark-gray);
            width: 100%;
            transition: all 0.2s ease;
            font-weight: inherit;
        }
.pl-amount-cell-input:hover:not(:disabled) {
            border-color: var(--border-light);
        }
.pl-amount-cell-input:focus:not(:disabled) {
            border-color: var(--blue-primary);
            border-style: solid;
            background: var(--surface);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.15);
        }
.pl-amount-cell-input:disabled {
            color: var(--dark-gray);
            font-weight: inherit;
            cursor: not-allowed;
            -webkit-text-fill-color: var(--dark-gray);
            opacity: 1;
        }
.pl-amount-cell-input::-webkit-outer-spin-button,
        .pl-amount-cell-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
.pl-amount-cell-input[type=number] {
            -moz-appearance: textfield;
        }
/* CAPEX & Assumptions table styling */
        .capex-table td, .assumptions-table td {
            padding: 0.7rem 0.6rem;
            vertical-align: middle;
        }
.capex-input, .assumption-input {
            width: 100%;
            padding: 0.4rem 0.5rem;
            border: 1px solid var(--border-light);
            border-radius: 0.3rem;
            font-size: 0.88rem;
            font-family: var(--font-primary);
            background: var(--surface);
            transition: all 0.2s ease;
        }
.capex-input.amount, .assumption-input.amount {
            font-family: 'Courier New', monospace;
            text-align: right;
        }
.capex-input.account {
            font-family: 'Courier New', monospace;
            text-align: center;
        }
.capex-input.life {
            text-align: center;
            font-family: 'Courier New', monospace;
            max-width: 70px;
        }
.capex-input:focus, .assumption-input:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.capex-input::-webkit-outer-spin-button,
        .capex-input::-webkit-inner-spin-button,
        .assumption-input::-webkit-outer-spin-button,
        .assumption-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
.capex-input[type=number], .assumption-input[type=number] {
            -moz-appearance: textfield;
        }
.assumption-meta {
            display: block;
            font-size: 0.75rem;
            color: var(--medium-gray);
            margin-top: 0.15rem;
        }
.capex-row-delete {
            background: transparent;
            border: none;
            color: var(--medium-gray);
            cursor: pointer;
            padding: 0.25rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
            opacity: 0.5;
        }
.capex-row-delete:hover {
            background: rgba(239, 68, 68, 0.1);
            color: #e08067;
            opacity: 1;
        }
/* CF Annual/Monthly view toggle */
        .cf-view-toggle {
            display: inline-flex;
            gap: 0;
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            overflow: hidden;
            margin-bottom: 1.25rem;
            background: rgba(255,255,255,0.02);
        }
.cf-view-btn {
            background: transparent;
            border: none;
            padding: 0.55rem 1.4rem;
            font-size: 0.88rem;
            color: var(--medium-gray);
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: var(--font-primary);
            font-weight: 500;
        }
.cf-view-btn:hover {
            background: rgba(93, 173, 226, 0.08);
            color: var(--blue-primary);
        }
.cf-view-btn.active {
            background: var(--blue-primary);
            color: white;
        }
.cf-view-btn:not(:last-child) {
            border-right: 1px solid var(--border-light);
        }
/* KPI cards — P&L styled with dark navy header strip */
        .dash-kpi-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: 1.75rem;
        }
/* Six-across variant (KPIs + run-rate; YTD strip) */
        .dash-kpi-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.7rem; }
/* The personnel walk needs its opening figure, so this row carries one more. */
        .dash-kpi-row--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6rem; }
.dash-kpi-row--7 .dash-kpi-value { font-size: 1.1rem; }
.dash-kpi-row--7 .dash-kpi-header { font-size: 0.64rem; padding: 0.5rem 0.6rem; }
.dash-kpi-row--7 .dash-kpi-body { padding: 0.7rem 0.6rem 0.75rem; }
@media (max-width: 1400px) { .dash-kpi-row--7 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) { .dash-kpi-row--7 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px)  { .dash-kpi-row--7 { grid-template-columns: repeat(2, 1fr); }
}
.dash-kpi-row--6 .dash-kpi-value { font-size: 1.25rem; }
.dash-kpi-row--6 .dash-kpi-header { font-size: 0.68rem; padding: 0.55rem 0.7rem; }
.dash-kpi-row--6 .dash-kpi-body { padding: 0.8rem 0.75rem 0.85rem; }
@media (max-width: 1100px) { .dash-kpi-row--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px)  { .dash-kpi-row--6 { grid-template-columns: repeat(2, 1fr); }
}
/* ── Dashboard cockpit (title + year selector + export actions) ── */
        .dash-cockpit {
            display: flex; align-items: center; justify-content: space-between;
            gap: 1rem; flex-wrap: wrap;
            margin-bottom: 1.5rem; padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-light);
        }
.dash-cockpit-title h2 { margin: 0; font-size: 1.35rem; }
.dash-cockpit-title p { margin: 0.25rem 0 0; color: var(--medium-gray); font-size: 0.85rem; }
.dash-cockpit-controls { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.dash-year-seg {
            display: inline-flex; align-items: center;
            background: var(--off-white, #f4f5f7); border: 1px solid var(--border-light);
            border-radius: 0.55rem; padding: 0.22rem; margin-right: 0.35rem;
        }
.dash-year-seg-label {
            font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
            color: var(--medium-gray); padding: 0 0.55rem 0 0.45rem;
        }
.year-seg-btn {
            border: none; background: transparent; color: var(--dark-gray); cursor: pointer;
            font-weight: 600; font-size: 0.85rem; padding: 0.35rem 0.85rem; border-radius: 0.4rem;
            transition: all 0.15s ease; font-family: inherit;
        }
.year-seg-btn:hover { background: rgba(255,255,255,0.05); }
.year-seg-btn.active { background: var(--blue-primary); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.dash-action-btn {
            display: inline-flex; align-items: center; gap: 0.35rem;
            border: 1px solid var(--border-light); background: var(--surface); color: var(--dark-gray);
            font-weight: 600; font-size: 0.82rem; font-family: inherit;
            padding: 0.45rem 0.85rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.15s ease;
        }
.dash-action-btn:hover { border-color: var(--blue-primary); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(255,255,255,0.09); }
.dash-action-pdf { border-bottom: 2px solid var(--gold, #C4973B); }
.dash-action-ppt { border-bottom: 2px solid var(--blue-primary); }
/* ── Actual vs Plan tiers ── */
        .dash-tier { border-radius: 0.65rem; padding: 0.85rem 0.9rem; }
.dash-tier .dash-kpi-row { margin-bottom: 0; }
.dash-tier--actual { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.28); }
.dash-tier--plan   { background: rgba(93,173,226,0.14); border: 1px solid rgba(93,173,226,0.38); margin-bottom: 2rem; }
.dash-tier--fte    { background: rgba(167,139,250,0.09); border: 1px solid rgba(167,139,250,0.30); margin-bottom: 2rem; }
.dash-tier-label {
            display: flex; align-items: center; gap: 0.5rem;
            font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
            margin-bottom: 0.7rem;
        }
.dash-tier-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dash-tier--actual .dash-tier-label { color: #4bbd8a; }
.dash-tier--actual .dash-tier-dot { background: #22c55e; }
.dash-tier--plan .dash-tier-label { color: #6fa8e0; }
.dash-tier--plan .dash-tier-dot { background: var(--blue-primary); }
.dash-tier-divider { border: none; border-top: 1px dashed var(--line); margin: 1.25rem 0; }
/* tiles now carry their own top accent — no header strip needed */
        .dash-tier--actual .dash-kpi-header { background: transparent; }
.dash-kpi-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-top: 3px solid var(--muted);
            border-radius: 0.6rem;
            overflow: hidden;
            transition: transform 0.15s ease, border-color 0.15s ease;
            cursor: pointer;
        }
.dash-kpi-card:hover {
            transform: translateY(-2px);
            border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
        }
.dash-kpi-header {
            background: transparent;
            color: var(--muted);
            padding: 0.8rem 1rem 0.15rem;
            font-size: 0.68rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
/* category accent lives on the card's top edge */
        .dash-kpi-card.kpi-revenue   { border-top-color: var(--blue-primary); }
.dash-kpi-card.kpi-ebitda    { border-top-color: var(--gold); }
.dash-kpi-card.kpi-profit    { border-top-color: #22c55e; }
.dash-kpi-card.kpi-cash      { border-top-color: #a78bfa; }
.dash-kpi-card.kpi-negative  { border-top-color: #e08067; }
.dash-kpi-body {
            padding: 1rem 1.1rem 1.1rem;
            background: var(--surface);
        }
.dash-kpi-value {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--ink);
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.015em;
            line-height: 1.1;
            text-align: right;
        }
.dash-kpi-value.negative {
            color: #e08067;
        }
.dash-kpi-meta {
            margin-top: 0.55rem;
            padding-top: 0.55rem;
            border-top: 1px solid var(--border-light);
            font-size: 0.78rem;
            color: var(--medium-gray);
            text-align: right;
        }
.dash-kpi-meta .delta-up    { color: #4bbd8a; font-weight: 600; }
.dash-kpi-meta .delta-down  { color: #e08067; font-weight: 600; }
/* Cards (sections wrapping P&L-style content) */
        .dash-card {
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
.dash-card-header {
            background: var(--thead);
            color: var(--white);
            padding: 0.85rem 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
.dash-card-header h4 {
            margin: 0;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--white);
        }
.dash-card-header h4 .dash-card-subtitle {
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0;
            color: rgba(255,255,255,0.65);
            font-size: 0.78rem;
            margin-left: 0.5rem;
        }
.dash-card-link {
            font-size: 0.75rem;
            color: rgba(255,255,255,0.85);
            cursor: pointer;
            font-weight: 500;
            transition: color 0.15s ease;
            text-transform: none;
            letter-spacing: 0;
        }
.dash-card-link:hover {
            color: var(--gold);
        }
.dash-card-body {
            padding: 0;
        }
/* Compact Net Profit strip — sits below the Monthly Revenue chart, shows
           the 12 monthly net profit numbers in a single row. */
        .dash-netprofit-compact {
            margin-bottom: 1rem;
        }
.dash-netprofit-compact .dash-netprofit-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem 0.5rem;
        }
.dash-netprofit-compact .dash-netprofit-header h4 {
            margin: 0;
            color: var(--dark-gray);
            font-size: 0.95rem;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
        }
.dash-netprofit-compact .dash-netprofit-header .dash-card-subtitle {
            color: var(--medium-gray);
            font-weight: 400;
        }
.dash-netprofit-compact .dash-card-link {
            color: var(--blue-primary);
        }
.dash-netprofit-compact .dash-card-link:hover {
            color: var(--gold);
        }
.dash-netprofit-compact .dash-netprofit-strip {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 1px;
            background: var(--border-light);
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
        }
.dash-netprofit-compact .dash-netprofit-cell {
            background: var(--surface);
            padding: 0.55rem 0.4rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
        }
.dash-netprofit-compact .dash-netprofit-cell-month {
            font-size: 0.7rem;
            color: var(--medium-gray);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 600;
        }
.dash-netprofit-compact .dash-netprofit-cell-value {
            font-family: 'Courier New', monospace;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--dark-gray);
        }
.dash-netprofit-compact .dash-netprofit-cell-value.is-negative {
            color: #e08067;
        }
.dash-netprofit-compact .dash-netprofit-cell-value.is-positive {
            color: #4bbd8a;
        }
/* Three-year summary tables (P&L style) */
        .dash-summary-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1.75rem;
        }
.dash-mini-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }
.dash-mini-table th {
            background: var(--thead);
            color: var(--white);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
            padding: 0.55rem 0.85rem;
            text-align: right;
            border-bottom: 2px solid var(--blue-primary);
        }
.dash-mini-table th:first-child {
            text-align: left;
        }
.dash-mini-table td {
            padding: 0.5rem 0.85rem;
            border-bottom: 1px solid var(--border-light);
            font-family: 'Courier New', monospace;
            text-align: right;
            font-weight: 500;
        }
.dash-mini-table td:first-child {
            font-family: var(--font-primary);
            text-align: left;
            color: var(--dark-gray);
        }
.dash-mini-table tr:hover td {
            background: var(--off-white);
        }
.dash-mini-table tr.dash-row-strong td {
            font-weight: 700;
            background: var(--surface-2);
            border-top: 1px solid var(--border-light);
        }
.dash-mini-table tr.dash-row-strong td:first-child {
            color: var(--dark-gray);
            font-weight: 700;
        }
.dash-mini-table tr.dash-row-section td {
            background: rgba(111, 168, 224, 0.14);
            color: var(--dark-gray);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
            padding: 0.55rem 0.85rem;
            border-top: 2px solid var(--blue-primary);
        }
.dash-mini-table td.neg {
            color: #e08067;
        }
/* Chart card */
        .dash-chart-container {
            position: relative;
            width: 100%;
            min-height: 280px;
            padding: 1rem 1.25rem;
        }
.dash-chart-container svg {
            width: 100%;
            height: auto;
            display: block;
        }
.dash-ni-cell {
            border-radius: 4px;
            padding: 4px 2px;
            text-align: center;
            font-family: monospace;
            font-size: 0.76rem;
            line-height: 1.3;
            border: 1px solid transparent;
        }
.dash-ni-cell.pos {
            background: rgba(16, 185, 129, 0.16);
            color: #4bbd8a;
            border-color: rgba(16, 185, 129, 0.25);
        }
.dash-ni-cell.neg {
            background: rgba(239, 68, 68, 0.16);
            color: #e08067;
            border-color: rgba(239, 68, 68, 0.25);
        }
.dash-ni-cell.zero {
            background: rgba(255,255,255,0.03);
            color: var(--medium-gray);
        }
.dash-ni-cell-month {
            font-size: 0.68rem;
            opacity: 0.7;
            font-family: var(--font-primary);
        }
.dash-ni-cell-value {
            font-weight: 600;
        }
/* Bottom grid: cost composition + health + assumptions */
        .dash-bottom-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1.2fr;
            gap: 1rem;
        }
.dash-bottom-grid .dash-card {
            margin-bottom: 0;
        }
.dash-supply-demand-grid .dash-card {
            margin-bottom: 0;
        }
/* Cost composition (P&L style row list) */
        .dash-cost-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }
.dash-cost-table th {
            background: var(--thead);
            color: var(--white);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.68rem;
            letter-spacing: 0.05em;
            padding: 0.5rem 0.85rem;
            border-bottom: 2px solid var(--blue-primary);
        }
.dash-cost-table th.col-bar  { text-align: left; }
.dash-cost-table th.col-amt  { text-align: right; }
.dash-cost-table th.col-pct  { text-align: right; }
.dash-cost-table td {
            padding: 0.5rem 0.85rem;
            border-bottom: 1px solid var(--border-light);
            font-size: 0.83rem;
        }
.dash-cost-table td.cost-label {
            color: var(--dark-gray);
            font-weight: 500;
            white-space: nowrap;
        }
.dash-cost-table td.cost-bar-cell {
            width: 100%;
            padding-right: 0.5rem;
        }
.dash-cost-bar {
            height: 14px;
            background: rgba(255,255,255,0.04);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }
.dash-cost-bar-fill {
            height: 100%;
            transition: width 0.3s ease;
        }
.dash-cost-table td.cost-amount {
            font-family: 'Courier New', monospace;
            text-align: right;
            color: var(--dark-gray);
            white-space: nowrap;
        }
.dash-cost-table td.cost-pct {
            font-family: 'Courier New', monospace;
            text-align: right;
            color: var(--medium-gray);
            font-size: 0.78rem;
            white-space: nowrap;
        }
.dash-cost-table tr.cost-total td {
            background: var(--surface-2);
            font-weight: 700;
            border-top: 2px solid var(--blue-primary);
        }
.dash-cost-footnote {
            padding: 0.7rem 0.85rem;
            font-size: 0.78rem;
            color: var(--medium-gray);
            background: var(--off-white);
            border-top: 1px solid var(--border-light);
        }
/* Health checks */
        .dash-health-checks {
            padding: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }
.dash-health-item {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            padding: 0.6rem 0.85rem;
            border-radius: 0.3rem;
            font-size: 0.83rem;
            line-height: 1.4;
            border-left: 3px solid var(--medium-gray);
            background: var(--off-white);
        }
.dash-health-item.ok {
            background: rgba(16, 185, 129, 0.13);
            color: #4bbd8a;
            border-left-color: #10B981;
        }
.dash-health-item.warn {
            background: rgba(245, 158, 11, 0.15);
            color: #fbbf24;
            border-left-color: #F59E0B;
            cursor: pointer;
        }
.dash-health-item.warn:hover {
            background: rgba(245, 158, 11, 0.22);
        }
.dash-health-item.error {
            background: rgba(239, 68, 68, 0.15);
            color: #e08067;
            border-left-color: #EF4444;
            cursor: pointer;
        }
.dash-health-item.error:hover {
            background: rgba(239, 68, 68, 0.22);
        }
.dash-health-icon {
            font-size: 1rem;
            line-height: 1;
            margin-top: 1px;
            flex-shrink: 0;
        }
@media (max-width: 1100px) {
            .dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
.dash-summary-grid { grid-template-columns: 1fr; }
.dash-bottom-grid { grid-template-columns: 1fr; }
}
/* ===================================================== */
        /* SCENARIO ANALYSIS — styled to match P&L visual language */
        /* ===================================================== */
        .scenario-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
.scenario-card {
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            overflow: hidden;
        }
.scenario-card-header {
            background: var(--thead);
            color: var(--white);
            padding: 0.7rem 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 3px solid var(--medium-gray);
        }
.scenario-card.scenario-worst .scenario-card-header { border-bottom-color: #EF4444; }
.scenario-card.scenario-base  .scenario-card-header { border-bottom-color: var(--medium-gray); }
.scenario-card.scenario-best  .scenario-card-header { border-bottom-color: #10B981; }
.scenario-card-title {
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--white);
        }
.scenario-card.scenario-base  .scenario-card-title::before { content: '◆'; color: rgba(255,255,255,0.65); }
.scenario-card.scenario-best  .scenario-card-title::before { content: '▲'; color: #10B981; }
.scenario-card.scenario-worst .scenario-card-title::before { content: '▼'; color: #EF4444; }
.scenario-card-badge {
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.15rem 0.55rem;
            border-radius: 0.75rem;
            background: rgba(255,255,255,0.15);
            color: rgba(255,255,255,0.85);
        }
.scenario-card-subtitle {
            padding: 0.6rem 1rem 0.5rem;
            font-size: 0.78rem;
            color: var(--medium-gray);
            background: var(--off-white);
            border-bottom: 1px solid var(--border-light);
            font-style: italic;
            min-height: 1.5rem;
        }
.scenario-card-body {
            padding: 0.5rem 0;
        }
.scenario-driver-row {
            display: grid;
            grid-template-columns: 1fr 95px;
            gap: 0.7rem;
            align-items: center;
            padding: 0.55rem 1rem;
            border-bottom: 1px solid var(--border-light);
            transition: background 0.15s ease;
        }
.scenario-driver-row:last-child {
            border-bottom: none;
        }
.scenario-driver-row:hover {
            background: var(--off-white);
        }
.scenario-driver-label {
            font-size: 0.83rem;
            color: var(--dark-gray);
        }
.scenario-driver-input-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
.scenario-driver-input {
            width: 100%;
            padding: 0.35rem 1.7rem 0.35rem 0.55rem;
            border: 1px solid var(--border-light);
            border-radius: 0.3rem;
            font-size: 0.85rem;
            font-family: 'Courier New', monospace;
            text-align: right;
            background: var(--surface);
            transition: all 0.2s ease;
        }
.scenario-driver-input:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.18);
        }
.scenario-driver-input:disabled {
            background: var(--off-white);
            color: var(--medium-gray);
            cursor: not-allowed;
            -webkit-text-fill-color: var(--medium-gray);
            opacity: 1;
        }
.scenario-driver-suffix {
            position: absolute;
            right: 0.55rem;
            font-size: 0.78rem;
            color: var(--medium-gray);
            pointer-events: none;
            font-family: var(--font-primary);
        }
.scenario-driver-input::-webkit-outer-spin-button,
        .scenario-driver-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
.scenario-driver-input[type=number] {
            -moz-appearance: textfield;
        }
/* Comparison table — full P&L parity */
        .scenario-comparison-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }
.scenario-comparison-table thead th {
            background: var(--thead);
            color: var(--white);
            padding: 0.6rem 0.75rem;
            text-align: right;
            font-weight: 600;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
.scenario-comparison-table thead th:first-child {
            text-align: left;
        }
.scenario-comparison-table thead th.col-worst {
            background: #B91C1C;
        }
.scenario-comparison-table thead th.col-best {
            background: #047857;
        }
.scenario-comparison-table thead th.col-year-divider {
            border-right: 2px solid rgba(255,255,255,0.25);
        }
.scenario-comparison-table tbody tr.scenario-row-section td {
            background: rgba(93, 173, 226, 0.08);
            font-weight: 700;
            color: var(--dark-gray);
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
            padding: 0.55rem 0.85rem;
            border-top: 2px solid var(--blue-primary);
        }
.scenario-comparison-table tbody td {
            padding: 0.55rem 0.85rem;
            text-align: right;
            font-family: 'Courier New', monospace;
            border-bottom: 1px solid var(--border-light);
            font-weight: 500;
        }
.scenario-comparison-table tbody td:first-child {
            text-align: left;
            font-family: var(--font-primary);
            color: var(--dark-gray);
            font-weight: 500;
        }
.scenario-comparison-table tbody tr:hover td {
            background: var(--off-white);
        }
.scenario-comparison-table tbody td.year-divider {
            border-right: 2px solid var(--border-light);
        }
.scenario-comparison-table tbody td.neg {
            color: #e08067;
        }
/* Delta blocks */
        .scenario-deltas-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            padding: 0;
        }
.scenario-delta-card {
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            overflow: hidden;
            background: var(--surface);
        }
.scenario-delta-header {
            background: var(--thead);
            color: var(--white);
            padding: 0.7rem 1rem;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 3px solid var(--medium-gray);
        }
.scenario-delta-card.delta-best  .scenario-delta-header { border-bottom-color: #10B981; }
.scenario-delta-card.delta-worst .scenario-delta-header { border-bottom-color: #EF4444; }
.scenario-delta-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.83rem;
        }
.scenario-delta-table th {
            background: var(--thead);
            color: var(--white);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.68rem;
            letter-spacing: 0.05em;
            padding: 0.5rem 0.85rem;
            text-align: right;
            border-bottom: 2px solid var(--blue-primary);
        }
.scenario-delta-table th:first-child {
            text-align: left;
        }
.scenario-delta-table td {
            padding: 0.5rem 0.85rem;
            border-bottom: 1px solid var(--border-light);
            font-family: 'Courier New', monospace;
            text-align: right;
        }
.scenario-delta-table td:first-child {
            font-family: var(--font-primary);
            text-align: left;
            color: var(--dark-gray);
            font-weight: 500;
        }
.scenario-delta-table tr:hover td {
            background: var(--off-white);
        }
.scenario-delta-table .delta-pos { color: #10B981; font-weight: 600; }
.scenario-delta-table .delta-neg { color: #e08067; font-weight: 600; }
@media (max-width: 1100px) {
            .scenario-cards-grid { grid-template-columns: 1fr; }
.scenario-deltas-grid { grid-template-columns: 1fr; }
}
/* ===================================================== */
        /* GET STARTED ONBOARDING MODAL                            */
        /* ===================================================== */
        .getstarted-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.55);
            z-index: 9999;
            align-items: flex-start;
            justify-content: center;
            padding: 5vh 1rem;
            overflow-y: auto;
            backdrop-filter: blur(2px);
        }
.getstarted-modal.active {
            display: flex;
        }
.getstarted-content {
            background: var(--surface);
            width: 100%;
            max-width: 780px;
            border-radius: 0.75rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            animation: getstarted-slide-in 0.25s ease-out;
        }
@keyframes getstarted-slide-in {
            from { opacity: 0; transform: translateY(-12px); }
to   { opacity: 1; transform: translateY(0); }
}
.getstarted-header {
            padding: 1.5rem 1.75rem 1.25rem;
            background: linear-gradient(135deg, var(--surface-2) 0%, #1F2937 100%);
            color: var(--white);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
        }
.getstarted-header h3 {
            margin: 0 0 0.35rem 0;
            font-size: 1.35rem;
            color: var(--white);
        }
.getstarted-subtitle {
            margin: 0;
            font-size: 0.86rem;
            color: rgba(255, 255, 255, 0.78);
        }
.getstarted-close {
            background: transparent;
            border: none;
            color: rgba(255,255,255,0.7);
            font-size: 1.6rem;
            cursor: pointer;
            line-height: 1;
            padding: 0.1rem 0.5rem;
            border-radius: 0.3rem;
            transition: all 0.2s ease;
        }
.getstarted-close:hover {
            color: var(--white);
            background: rgba(255,255,255,0.12);
        }
.getstarted-progress {
            padding: 1rem 1.75rem 0.5rem;
            background: var(--off-white);
            border-bottom: 1px solid var(--border-light);
        }
.getstarted-progress-bar {
            height: 8px;
            background: rgba(255,255,255,0.06);
            border-radius: 4px;
            overflow: hidden;
            margin-top: 0.4rem;
        }
.getstarted-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--blue-primary) 0%, var(--gold) 100%);
            transition: width 0.4s ease;
        }
.getstarted-progress-label {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--medium-gray);
            font-weight: 500;
        }
.getstarted-progress-label strong {
            color: var(--dark-gray);
        }
.getstarted-steps {
            padding: 0.5rem 0;
            max-height: 60vh;
            overflow-y: auto;
        }
.getstarted-step {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem 1.75rem;
            border-bottom: 1px solid var(--border-light);
            transition: background 0.15s ease;
        }
.getstarted-step:last-child {
            border-bottom: none;
        }
.getstarted-step:hover {
            background: rgba(93, 173, 226, 0.04);
        }
.getstarted-step-num {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--off-white);
            color: var(--medium-gray);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            border: 2px solid var(--border-light);
            transition: all 0.2s ease;
        }
.getstarted-step.done .getstarted-step-num {
            background: #10B981;
            color: var(--white);
            border-color: #10B981;
        }
.getstarted-step.current .getstarted-step-num {
            background: var(--blue-primary);
            color: var(--white);
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 4px rgba(93, 173, 226, 0.2);
        }
.getstarted-step-body {
            flex: 1;
            min-width: 0;
        }
.getstarted-step-title {
            font-size: 0.98rem;
            font-weight: 600;
            color: var(--dark-gray);
            margin: 0 0 0.25rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
.getstarted-step.done .getstarted-step-title {
            color: var(--medium-gray);
        }
.getstarted-step-status {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 0.15rem 0.55rem;
            border-radius: 0.75rem;
            background: rgba(255,255,255,0.04);
            color: var(--medium-gray);
        }
.getstarted-step.done .getstarted-step-status {
            background: rgba(16, 185, 129, 0.12);
            color: #4bbd8a;
        }
.getstarted-step.current .getstarted-step-status {
            background: rgba(93, 173, 226, 0.15);
            color: var(--blue-primary);
        }
.getstarted-step-desc {
            font-size: 0.85rem;
            color: var(--medium-gray);
            margin: 0;
            line-height: 1.45;
        }
.getstarted-step-meta {
            font-size: 0.78rem;
            color: var(--medium-gray);
            margin-top: 0.35rem;
            font-style: italic;
        }
.getstarted-step-action {
            flex-shrink: 0;
            background: var(--blue-primary);
            color: var(--white);
            border: none;
            border-radius: 0.4rem;
            padding: 0.45rem 0.95rem;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s ease;
            font-family: var(--font-primary);
        }
.getstarted-step-action:hover {
            background: var(--dark-blue);
        }
.getstarted-step.done .getstarted-step-action {
            background: rgba(255,255,255,0.05);
            color: var(--dark-gray);
        }
.getstarted-step.done .getstarted-step-action:hover {
            background: rgba(255,255,255,0.1);
        }
.getstarted-footer {
            padding: 1rem 1.75rem;
            border-top: 1px solid var(--border-light);
            background: var(--off-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }
@media (max-width: 720px) {
            .getstarted-step { flex-wrap: wrap; }
.getstarted-step-action { margin-left: 47px; margin-top: 0.5rem; }
}
/* ===================================================== */
        /* CAPACITY PLANNING — MONTHLY HEATMAP                     */
        /* ===================================================== */
        .capacity-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }
.capacity-table thead th {
            background: var(--thead);
            color: var(--white);
            padding: 0.65rem 0.85rem;
            text-align: right;
            font-weight: 600;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
.capacity-table thead th:first-child {
            text-align: left;
        }
.capacity-table tbody td {
            padding: 0.6rem 0.85rem;
            text-align: right;
            font-family: 'Courier New', monospace;
            border-bottom: 1px solid var(--border-light);
            font-weight: 500;
        }
.capacity-table tbody td:first-child {
            text-align: left;
            font-family: var(--font-primary);
            color: var(--dark-gray);
            font-weight: 600;
        }
.capacity-table tbody tr:hover td {
            background: var(--off-white);
        }
.capacity-table tbody tr.cap-total td {
            background: rgba(93, 173, 226, 0.08);
            font-weight: 700;
            border-top: 2px solid var(--blue-primary);
            border-bottom: 1px solid var(--border-light);
        }
.capacity-heatmap .cap-cell { cursor: help; }
.capacity-heatmap .cap-cell-total     { background: rgba(93, 173, 226, 0.11); font-weight: 600; }
.cap-cell-num.neg     { color: #e08067; }
.cap-cell-num.warn    { color: #fbbf24; }
.cap-cell-num.idle    { color: #4B5563; }
.cap-cell-num.ok      { color: #4bbd8a; }
.cap-row-total        { background: rgba(93, 173, 226, 0.11); font-weight: 700; }
.cap-summary-header {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--dark-gray);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.5rem;
            padding-bottom: 0.35rem;
            border-bottom: 1px solid var(--border-light);
        }
.cap-summary-body {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
.cap-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            font-size: 0.8rem;
        }
@media (max-width: 1100px) {
        }
.variance-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }
.variance-table thead th {
            background: var(--thead);
            color: var(--white);
            padding: 0.65rem 0.85rem;
            text-align: right;
            font-weight: 600;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
.variance-table thead th:first-child {
            text-align: left;
        }
.variance-table tbody tr.variance-row-section td {
            background: rgba(93, 173, 226, 0.08);
            color: var(--dark-gray);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
            padding: 0.55rem 0.85rem;
            border-top: 2px solid var(--blue-primary);
        }
.variance-table tbody tr.variance-total td {
            background: var(--off-white);
            font-weight: 700;
            border-top: 1px solid var(--border-light);
        }
.variance-table tbody td {
            padding: 0.55rem 0.85rem;
            text-align: right;
            font-family: 'Courier New', monospace;
            border-bottom: 1px solid var(--border-light);
            font-weight: 500;
        }
.variance-table tbody td:first-child {
            text-align: left;
            font-family: var(--font-primary);
            color: var(--dark-gray);
            font-weight: 500;
        }
.variance-table tbody tr:hover td {
            background: var(--off-white);
        }
.variance-table tbody td.acct-code {
            font-family: 'Courier New', monospace;
            color: var(--blue-primary);
            font-size: 0.78rem;
            text-align: left;
            width: 60px;
        }
.variance-commentary {
            padding: 1rem 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }
.commentary-item.warning      { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-left-color: #F59E0B; }
.confirmation-header {
            padding: 1.5rem 1.5rem 0 1.5rem;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 1rem;
        }
.confirmation-header h3 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--dark-gray);
            font-family: var(--font-serif);
        }
.confirmation-body {
            padding: 0 1.5rem 1rem 1.5rem;
        }
.confirmation-body p {
            margin: 0 0 1rem 0;
            color: var(--dark-gray);
            line-height: 1.5;
        }
.customer-delete-info {
            background: var(--off-white);
            border-radius: 0.5rem;
            padding: 1rem;
            margin: 1rem 0;
            border-left: 4px solid #F59E0B;
        }
.info-value {
            font-weight: 600;
            color: var(--dark-gray);
            font-size: 0.85rem;
        }
.btn-secondary {
            background: var(--off-white);
            color: var(--dark-gray);
            border: 1px solid var(--border-light);
        }
.btn-secondary:hover {
            background: var(--border-light);
            color: var(--dark-gray);
        }
.btn-danger {
            background: #EF4444;
            color: var(--white);
            border: 1px solid #EF4444;
        }
.btn-danger:hover {
            background: #DC2626;
            border-color: #e08067;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
        }
/* Content Area - Optimized spacing */
        .content-area {
            background: var(--surface);
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            min-height: calc(100vh - 200px);
        }
.content-header {
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border-light);
        }
.content-header h2 {
            font-family: var(--font-serif);
            font-size: 1.75rem;
            color: var(--dark-gray);
            margin-bottom: 0.5rem;
        }
.content-header p {
            color: var(--medium-gray);
            font-size: 1.125rem;
        }
.content-body {
            display: none;
        }
.content-body.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
            to { transform: rotate(360deg); }
}
/* AI Insights — chat panel */
        .ai-chat-card {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 220px);
            min-height: 520px;
        }
.ai-chat-card .dash-card-header {
            flex: 0 0 auto;
        }
.ai-chat-clear-btn {
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.3rem 0.75rem;
            border-radius: 0.35rem;
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s ease, color 0.15s ease;
        }
.ai-chat-clear-btn:hover {
            background: rgba(255, 255, 255, 0.18);
            color: var(--white);
        }
.ai-chat-messages {
            flex: 1 1 auto;
            overflow-y: auto;
            padding: 1.25rem 1.25rem 0.5rem;
            background: var(--off-white);
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }
.ai-chat-empty {
            color: var(--medium-gray);
            font-size: 0.9rem;
            text-align: center;
            margin: auto 1rem;
            max-width: 540px;
            line-height: 1.5;
        }
.ai-chat-message {
            display: flex;
            flex-direction: column;
            max-width: 80%;
            line-height: 1.5;
        }
.ai-chat-message.user {
            align-self: flex-end;
            align-items: flex-end;
        }
.ai-chat-message.assistant {
            align-self: flex-start;
            align-items: flex-start;
        }
.ai-chat-bubble {
            padding: 0.7rem 0.95rem;
            border-radius: 0.85rem;
            font-size: 0.9rem;
            white-space: pre-wrap;
            word-wrap: break-word;
            box-shadow: var(--shadow);
        }
.ai-chat-message.user .ai-chat-bubble {
            background: var(--blue-primary);
            color: var(--white);
            border-bottom-right-radius: 0.25rem;
        }
.ai-chat-message.assistant .ai-chat-bubble {
            background: var(--surface);
            color: var(--dark-gray);
            border: 1px solid var(--border-light);
            border-bottom-left-radius: 0.25rem;
        }
.ai-chat-message.error .ai-chat-bubble {
            background: rgba(239, 68, 68, 0.12);
            color: #e08067;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
.ai-chat-role {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--medium-gray);
            margin-bottom: 0.25rem;
        }
.ai-chat-typing {
            display: inline-flex;
            gap: 0.25rem;
            padding: 0.7rem 0.95rem;
        }
.ai-chat-typing span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--medium-gray);
            opacity: 0.4;
            animation: aiTyping 1s infinite ease-in-out;
        }
.ai-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiTyping {
            0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.ai-chat-input-row {
            flex: 0 0 auto;
            display: flex;
            gap: 0.6rem;
            align-items: flex-end;
            padding: 0.85rem 1.25rem;
            background: var(--surface);
            border-top: 1px solid var(--border-light);
        }
.ai-chat-input {
            flex: 1 1 auto;
            min-height: 42px;
            max-height: 180px;
            resize: none;
            padding: 0.6rem 0.85rem;
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            font-family: inherit;
            font-size: 0.9rem;
            line-height: 1.4;
            color: var(--dark-gray);
            background: var(--off-white);
            transition: border-color 0.15s ease, background 0.15s ease;
        }
.ai-chat-input:focus {
            outline: none;
            border-color: var(--blue-primary);
            background: var(--surface);
        }
.ai-chat-send {
            background: var(--blue-primary);
            color: var(--white);
            border: none;
            padding: 0.6rem 1.2rem;
            border-radius: 0.5rem;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s ease, opacity 0.15s ease;
        }
.ai-chat-send:hover:not(:disabled) {
            background: #4A9BD1;
        }
.ai-chat-send:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
/* Profit & Loss Statement Styles */
        .pl-controls {
            background: var(--surface);
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: var(--shadow);
        }
.pl-filters {
            display: flex;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
        }
.pl-select {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border-light);
            border-radius: 0.375rem;
            background: var(--surface);
            color: var(--dark-gray);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
.pl-select:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.btn {
            padding: 0.5rem 1.5rem;
            border: 1px solid var(--border-light);
            border-radius: 0.375rem;
            background: var(--surface);
            color: var(--dark-gray);
            cursor: pointer;
            transition: all 0.2s ease;
            font-weight: 500;
        }
.btn:hover {
            background: var(--blue-light);
            border-color: var(--blue-primary);
        }
.btn-primary {
            background: var(--blue-primary);
            border-color: var(--blue-primary);
            color: var(--white);
        }
.btn-primary:hover {
            background: #4A90C2;
            box-shadow: var(--shadow-blue);
        }
.pl-statement {
            background: var(--surface);
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 2rem;
        }
.pl-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }
.pl-table th,
        .pl-table td {
            padding: 0.75rem 1rem;
            text-align: left;
            border-bottom: 1px solid var(--border-light);
        }
.pl-table th {
            background: var(--thead);
            color: var(--white);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.05em;
        }
.pl-table {
            table-layout: fixed;
        }
.pl-account {
            width: 40%;
        }
.pl-year {
            text-align: right !important;
            padding-right: 1rem !important;
            /* width auto-distributed by fixed table layout — works for 3 year cols (P&L) or 4 cols (BS) */
        }
.pl-table th.pl-year,
        .pl-table td.pl-amount {
            padding-right: 1rem !important;
        }
.pl-table td.pl-amount,
        td.pl-amount {
            text-align: right;
            font-family: 'Courier New', monospace;
            font-weight: 500;
        }
.pl-table td.pl-percentage,
        td.pl-percentage {
            text-align: right;
            font-style: italic;
            color: var(--medium-gray);
        }
.pl-section-header td {
            background: var(--blue-light);
            color: var(--dark-gray);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.05em;
            padding: 1rem;
            border-top: 2px solid var(--blue-primary);
        }
.pl-line-item:hover {
            background: var(--off-white);
        }
.pl-total td {
            font-weight: 700;
            border-top: 2px solid var(--border-light);
            background: var(--off-white);
        }
/* "+ Add Line" affordance row — keep the table's vertical separator continuous,
           remove only the cell padding noise so the button sits cleanly. */
        .pl-add-line-row td {
            background: transparent !important;
            border-top: none !important;
            border-bottom: 1px solid var(--border-light) !important;
            padding: 0.3rem 0.75rem !important;
        }
.pl-add-line-btn {
            background: transparent;
            border: 1px dashed var(--border, #E5E7EB);
            color: var(--medium-gray, #6B7280);
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 500;
            transition: all 0.15s ease;
        }
/* Inline-editable monthly cell input (used in P&L Monthly view) */
        .pl-monthly-cell-input {
            width: 100%;
            border: none;
            background: transparent;
            text-align: right;
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            padding: 2px 4px;
            border-radius: 3px;
            transition: background 0.12s ease, box-shadow 0.12s ease;
        }
.pl-monthly-cell-input:hover:not(:disabled):not(:focus) {
            background: var(--blue-light, rgba(93, 173, 226, 0.08));
            box-shadow: inset 0 0 0 1px var(--blue-primary, #5DADE2);
        }
.pl-monthly-cell-input:focus,
        .pl-monthly-cell-input--editing {
            outline: none;
            background: var(--surface);
            box-shadow: inset 0 0 0 2px var(--blue-primary, #5DADE2);
            font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
            text-align: left;
        }
/* fx badge for cells with formulas — small, top-left of cell, blue accent */
        .pl-fx-badge {
            position: absolute;
            top: 2px;
            left: 4px;
            font-size: 0.62rem;
            font-style: italic;
            font-weight: 700;
            color: var(--blue-primary, #5DADE2);
            pointer-events: none;
            letter-spacing: 0.02em;
            line-height: 1;
            opacity: 0.85;
        }
/* Formula help button + panel */
        .pl-formula-help-btn {
            background: var(--surface);
            border: 1px solid var(--border, #E5E7EB);
            color: var(--dark-gray, #1F2937);
            padding: 0.35rem 0.75rem;
            border-radius: 0.4rem;
            font-size: 0.82rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: all 0.15s ease;
        }
.pl-formula-help-btn:hover {
            background: var(--blue-light, rgba(93, 173, 226, 0.08));
            border-color: var(--blue-primary, #5DADE2);
            color: var(--blue-primary, #5DADE2);
        }
.pl-formula-help-panel {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 380px;
            max-width: 92vw;
            background: var(--surface);
            border: 1px solid var(--border, #E5E7EB);
            border-radius: 0.5rem;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            z-index: 1000;
            font-size: 0.85rem;
        }
.pl-formula-help-header {
            padding: 0.7rem 1rem;
            border-bottom: 1px solid var(--border, #E5E7EB);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--off-white, #F8F9FA);
            border-radius: 0.5rem 0.5rem 0 0;
        }
.pl-formula-help-body {
            padding: 0.85rem 1rem 1rem 1rem;
            max-height: 380px;
            overflow-y: auto;
        }
.pl-formula-help-body p {
            margin: 0.4rem 0;
            font-size: 0.83rem;
            line-height: 1.45;
        }
.pl-formula-help-body code {
            background: rgba(93, 173, 226, 0.1);
            color: var(--blue-primary, #5DADE2);
            padding: 1px 5px;
            border-radius: 3px;
            font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
            font-size: 0.78rem;
            white-space: nowrap;
        }
.pl-formula-help-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0.4rem 0;
            font-size: 0.78rem;
        }
.pl-formula-help-table td {
            padding: 5px 6px;
            border-bottom: 1px solid var(--border-light, #F3F4F6);
            vertical-align: middle;
        }
.pl-formula-help-table td:first-child {
            white-space: nowrap;
            width: 38%;
        }
.pl-formula-help-table td:last-child {
            color: var(--medium-gray, #6B7280);
        }
/* Inline-editable monthly cell input (legacy duplicate removed above) */

        /* Hide spinner controls on Webkit/Firefox */
        .pl-monthly-cell-input::-webkit-outer-spin-button,
        .pl-monthly-cell-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
/* Monthly-specific detail-row tweaks (override defaults that target annual rendering) */
        .monthly-detail-row td {
            background: rgba(93, 173, 226, 0.04);
            font-size: 0.88rem;
        }
.monthly-detail-row td:first-child {
            color: var(--medium-gray, #6B7280);
            font-style: italic;
        }
/* Compact height for monthly P&L detail rows ------------------- */
        .pl-detail-row.monthly-detail-row td {
            padding: 0.12rem 0.6rem !important;
            line-height: 1.2 !important;
            white-space: nowrap;
            vertical-align: middle;
        }
.pl-detail-row.monthly-detail-row td:first-child {
            white-space: nowrap;
        }
.pl-detail-row.monthly-detail-row .pl-detail-desc-input {
            padding: 0.1rem 0.35rem;
            line-height: 1.2;
            vertical-align: middle;
        }
.pl-detail-row.monthly-detail-row .pl-detail-delete-btn {
            padding: 0 0.2rem;
            line-height: 1.2;
            vertical-align: middle;
        }
.pl-detail-row.monthly-detail-row .pl-monthly-cell-input,
        .pl-detail-row.monthly-detail-row .pl-detail-amount-input {
            padding: 0.1rem 0.3rem;
            line-height: 1.2;
        }
.pl-detail-actions-row td {
            padding: 0.15rem 1rem !important;
            line-height: 1.2 !important;
        }
.pl-add-line-btn:hover {
            background: var(--blue-light, rgba(93, 173, 226, 0.08));
            border-color: var(--blue-primary, #5DADE2);
            color: var(--blue-primary, #5DADE2);
            border-style: solid;
        }
.pl-row-name-input,
        .pl-row-account-input {
            font-family: inherit;
            border-radius: 3px;
            background: var(--surface);
            transition: border-color 0.15s ease;
        }
.pl-row-name-input:focus,
        .pl-row-account-input:focus {
            outline: none;
            border-color: var(--blue-primary, #5DADE2) !important;
            border-style: solid !important;
        }
.pl-delete-line-btn:hover {
            transform: scale(1.15);
        }
.pl-gross-profit td {
            font-weight: 700;
            background: rgba(93, 173, 226, 0.1);
            border-top: 3px solid var(--blue-primary);
            border-bottom: 3px solid var(--blue-primary);
        }
.pl-margin td {
            background: rgba(93, 173, 226, 0.05);
            font-style: italic;
        }
/* Editable Cell System — also boost specificity here */
        .pl-table td.pl-amount,
        td.pl-amount {
            text-align: right;
            font-family: 'Courier New', monospace;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            transition: all 0.2s ease;
        }
.pl-amount:hover:not(.non-editable) {
            background: var(--blue-light);
            border: 1px solid var(--blue-primary);
        }
.pl-amount.editing {
            padding: 0;
        }
.cell-input {
            width: 100%;
            height: 100%;
            border: 2px solid var(--blue-primary);
            background: var(--surface);
            font-family: 'Courier New', monospace;
            font-size: inherit;
            text-align: right;
            padding: 0.5rem;
            margin: 0;
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
            border-radius: 0;
        }
.cell-input:focus {
            outline: none;
            border-color: var(--gold);
            box-shadow: 0 0 0 2px rgba(196, 151, 59, 0.3);
        }
.cell-modified {
            background: rgba(34, 197, 94, 0.1) !important;
            border-left: 3px solid #22C55E !important;
        }
.cell-calculated {
            background: rgba(168, 162, 158, 0.1);
            cursor: not-allowed;
        }
.edit-tooltip {
            position: absolute;
            bottom: -25px;
            right: 0;
            background: var(--thead);
            color: var(--white);
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            z-index: 100;
            white-space: nowrap;
        }
.edit-controls {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            box-shadow: var(--shadow-lg);
            padding: 1rem;
            display: none;
            z-index: 1000;
            gap: 0.5rem;
            align-items: center;
        }
.edit-controls.active {
            display: flex;
        }
.changes-count {
            background: var(--blue-primary);
            color: var(--white);
            padding: 0.25rem 0.5rem;
            border-radius: 1rem;
            font-size: 0.8rem;
            font-weight: 600;
        }
/* Monthly Drill-Down Modal */
        .monthly-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            backdrop-filter: blur(4px);
        }
.monthly-modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
            animation: modalFadeIn 0.3s ease;
        }
@keyframes modalFadeIn {
            from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
            background: var(--surface);
            border-radius: 1rem;
            width: 95%;
            max-width: 1400px;
            max-height: 90%;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            animation: modalSlideIn 0.3s ease;
        }
@keyframes modalSlideIn {
            from { transform: translateY(-50px) scale(0.95); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-header {
            background: var(--thead);
            color: var(--white);
            padding: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
.modal-header h3 {
            font-family: var(--font-serif);
            font-size: 1.5rem;
            margin: 0;
        }
.modal-close {
            background: none;
            border: none;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
        }
.modal-close:hover {
            background: rgba(255, 255, 255, 0.1);
        }
.modal-body {
            padding: 0;
            max-height: calc(90vh - 200px);
            overflow: auto;
        }
.monthly-controls {
            background: var(--off-white);
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
        }
.year-selector {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
.year-btn {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border-light);
            border-radius: 0.375rem;
            background: var(--surface);
            color: var(--dark-gray);
            cursor: pointer;
            transition: all 0.2s ease;
            font-weight: 500;
        }
.year-btn:hover {
            background: var(--blue-light);
            border-color: var(--blue-primary);
        }
.year-btn.active {
            background: var(--blue-primary);
            color: var(--white);
            border-color: var(--blue-primary);
        }
.monthly-table-container {
            padding: 1.5rem;
            overflow: auto;
        }
.monthly-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
            min-width: 1200px;
        }
.monthly-table th,
        .monthly-table td {
            padding: 0.75rem 0.5rem;
            text-align: left;
            border-bottom: 1px solid var(--border-light);
            border-right: 1px solid var(--border-light);
        }
.monthly-table th {
            background: var(--thead);
            color: var(--white);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            position: sticky;
            top: 0;
            z-index: 10;
        }
.monthly-table th:first-child {
            min-width: 200px;
            position: sticky;
            left: 0;
            z-index: 11;
        }
.monthly-table td:first-child {
            background: var(--surface);
            font-weight: 600;
            position: sticky;
            left: 0;
            z-index: 9;
            border-right: 2px solid var(--blue-primary);
        }
/* BS monthly table has an extra narrow CFP column before Account, so the
           sticky/border treatment shifts one column to the right. */
        #bsMonthlyTable th:first-child {
            min-width: 44px;
            width: 44px;
        }
#bsMonthlyTable td:first-child {
            min-width: 44px;
            width: 44px;
            border-right: 1px solid var(--border-light);
        }
#bsMonthlyTable th:nth-child(2) {
            min-width: 180px;
            position: sticky;
            left: 44px;
            z-index: 11;
        }
#bsMonthlyTable td:nth-child(2) {
            background: var(--surface);
            font-weight: 600;
            position: sticky;
            left: 44px;
            z-index: 9;
            border-right: 2px solid var(--blue-primary);
        }
/* Override for spanning rows (section headers, add-line rows, inline forms):
           the first-child rule above misapplies its 2px blue right-border when the
           cell uses colspan to span the whole row — placing the line at the far-right
           edge instead of at the label/data boundary. Keep these consistent with the
           regular thin column dividers. */
        .monthly-table tr.monthly-section-header > td:first-child,
        .monthly-table tr.pl-add-line-row > td:first-child,
        .monthly-table tr.monthly-add-line-form > td:first-child {
            position: static;
            border-right: 1px solid var(--border-light);
        }
.monthly-amount,
        .monthly-table th.monthly-amount,
        .monthly-table td.monthly-amount {
            text-align: right;
            font-family: 'Courier New', monospace;
            font-weight: 500;
            min-width: 80px;
        }
/* Actual months — locked, gray, lock icon */
        .monthly-actual-cell {
            background: rgba(255,255,255,0.04);
            color: var(--medium-gray);
            cursor: not-allowed;
        }
/* Forecast months — editable */
        .monthly-forecast-cell {
            padding: 0.2rem !important;
        }
/* Detail line styling — indented under parent, lighter */
        .monthly-detail-line td {
            background: rgba(93, 173, 226, 0.02);
            font-size: 0.85rem;
        }
.monthly-detail-cell {
            font-size: 0.85rem;
        }
/* ─── FILL HANDLE (copy-fill-down) ──────────────────── */
        .monthly-fill-handle {
            position: absolute;
            bottom: -3px;
            right: -3px;
            width: 8px;
            height: 8px;
            background: var(--blue-primary);
            border: 1px solid white;
            border-radius: 1px;
            cursor: crosshair;
            z-index: 10;
            box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
.monthly-fill-handle:hover {
            transform: scale(1.4);
        }
/* Cell being dragged over during fill */
        .monthly-amount.fill-target {
            background: rgba(93, 173, 226, 0.20) !important;
            outline: 1px dashed var(--blue-primary);
            outline-offset: -2px;
        }
/* Cell briefly flashed when clicked to insert its month into a formula */
        .monthly-amount.formula-ref-highlight {
            background: rgba(196, 151, 59, 0.28) !important;
            outline: 1px solid var(--gold, #C4973B);
            outline-offset: -2px;
        }
.monthly-cell-input {
            background: transparent;
            border: 1px dashed transparent;
            outline: none;
            padding: 0.3rem 0.4rem;
            border-radius: 0.25rem;
            font-family: 'Courier New', monospace;
            font-size: inherit;
            text-align: right;
            color: var(--dark-gray);
            width: 100%;
            box-sizing: border-box;
            transition: all 0.15s ease;
        }
.monthly-cell-input:hover {
            border-color: var(--border-light);
            background: rgba(93, 173, 226, 0.04);
        }
.monthly-cell-input:focus {
            border-color: var(--blue-primary);
            border-style: solid;
            background: var(--surface);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.15);
        }
.monthly-total {
            background: var(--off-white);
            font-weight: 700;
        }
.monthly-section-header {
            background: var(--blue-light) !important;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.05em;
        }
.monthly-section-header td {
            border-top: 2px solid var(--blue-primary);
            color: var(--dark-gray);
        }
/* Monthly Editable Cells */
        .monthly-editable {
            cursor: pointer;
            transition: all 0.2s ease;
        }
.monthly-editable:hover {
            background: var(--blue-light) !important;
            border: 1px solid var(--blue-primary);
        }
.monthly-editable.editing {
            padding: 0;
        }
.monthly-cell-input {
            width: 100%;
            height: 100%;
            border: 2px solid var(--blue-primary);
            background: var(--surface);
            font-family: 'Courier New', monospace;
            font-size: inherit;
            text-align: right;
            padding: 0.3rem;
            margin: 0;
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
            border-radius: 0;
        }
.monthly-cell-input:focus {
            outline: none;
            border-color: var(--gold);
            box-shadow: 0 0 0 2px rgba(196, 151, 59, 0.3);
        }
.monthly-cell-modified {
            background: rgba(34, 197, 94, 0.1) !important;
            border-left: 3px solid #22C55E !important;
        }
/* Chart of Accounts Styles */
        .coa-controls {
            background: var(--surface);
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: var(--shadow);
            display: flex;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
        }
.coa-search {
            flex: 1;
            min-width: 300px;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            font-size: 1rem;
            background: var(--surface);
        }
.coa-search:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.coa-filter {
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            background: var(--surface);
            color: var(--dark-gray);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
.coa-filter:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.coa-table-container {
            background: var(--surface);
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            overflow: hidden;
        }
.coa-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }
.coa-table th,
        .coa-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid var(--border-light);
        }
.coa-table th {
            background: var(--thead);
            color: var(--white);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.05em;
            position: sticky;
            top: 0;
            z-index: 10;
        }
.coa-account-number {
            font-family: 'Courier New', monospace;
            font-weight: 600;
            color: var(--blue-primary);
            width: 120px;
        }
.coa-account-name {
            font-weight: 600;
            color: var(--dark-gray);
        }
.coa-account-type {
            width: 150px;
        }
.coa-account-category {
            width: 150px;
        }
.coa-row-asset {
            border-left: 4px solid #10B981;
        }
.coa-row-liability {
            border-left: 4px solid #EF4444;
        }
.coa-row-equity {
            border-left: 4px solid #8B5CF6;
        }
.coa-row-revenue {
            border-left: 4px solid #3B82F6;
        }
.coa-row-expense {
            border-left: 4px solid #F59E0B;
        }
.coa-row-cogs {
            border-left: 4px solid #EC4899;
        }
.account-type-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
.badge-asset {
            background: rgba(16, 185, 129, 0.15);
            color: #4bbd8a;
        }
.badge-liability {
            background: rgba(239, 68, 68, 0.15);
            color: #e08067;
        }
.badge-equity {
            background: rgba(167, 139, 250, 0.15);
            color: #c4a5f0;
        }
.badge-revenue {
            background: rgba(93, 173, 226, 0.15);
            color: #6fa8e0;
        }
.badge-expense {
            background: rgba(245, 158, 11, 0.15);
            color: #fbbf24;
        }
.badge-cogs {
            background: rgba(236, 72, 153, 0.15);
            color: #ec8ab8;
        }
.coa-summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
.coa-summary-card {
            background: var(--surface);
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: var(--shadow);
            text-align: center;
            border-left: 4px solid var(--blue-primary);
        }
.coa-summary-card h4 {
            margin: 0 0 0.5rem 0;
            color: var(--dark-gray);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
.coa-summary-card .count {
            font-size: 2rem;
            font-weight: 700;
            color: var(--blue-primary);
            margin: 0;
        }
/* Customer Budget Module Styles - Compact Layout */
        .customer-dashboard {
            display: grid;
            grid-template-columns: 1fr 2.8fr;
            gap: 1rem;
            margin-bottom: 1rem;
        }
.customer-sidebar {
            background: var(--surface);
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            padding: 1rem;
            height: fit-content;
        }
.customer-main {
            background: var(--surface);
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            padding: 1.25rem;
        }
.customer-search {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            margin-bottom: 0.75rem;
            font-size: 0.85rem;
        }
.customer-search:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.customer-list {
            max-height: 400px;
            overflow-y: auto;
        }
.customer-item {
            padding: 0.75rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid transparent;
            margin-bottom: 0.4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
.customer-item:hover {
            background: var(--blue-light);
            border-color: var(--blue-primary);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(93, 173, 226, 0.15);
        }
.customer-item.active {
            background: var(--blue-primary);
            color: var(--white);
            border-color: var(--blue-primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(93, 173, 226, 0.25);
        }
.customer-content {
            flex: 1;
            min-width: 0;
        }
.customer-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-left: 0.75rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
.customer-item:hover .customer-actions {
            opacity: 1;
        }
.customer-item.active .customer-actions {
            opacity: 1;
        }
.customer-delete-btn {
            background: none;
            border: none;
            padding: 0.4rem;
            cursor: pointer;
            border-radius: 0.25rem;
            color: var(--medium-gray);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
.customer-delete-btn:hover {
            background: rgba(239, 68, 68, 0.1);
            color: #EF4444;
            transform: scale(1.1);
        }
.customer-item.active .customer-delete-btn {
            color: rgba(255, 255, 255, 0.7);
        }
.customer-item.active .customer-delete-btn:hover {
            background: rgba(239, 68, 68, 0.2);
            color: #FEF2F2;
        }
.customer-name {
            font-weight: 600;
            margin-bottom: 0.2rem;
            font-size: 0.9rem;
        }
.customer-info {
            font-size: 0.75rem;
            opacity: 0.7;
            line-height: 1.3;
        }
.customer-revenue {
            font-size: 0.85rem;
            font-weight: 600;
            margin-top: 0.2rem;
            font-family: 'Courier New', monospace;
        }
.customer-budget-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border-light);
        }
.customer-budget-title h3 {
            font-family: var(--font-serif);
            font-size: 1.25rem;
            color: var(--dark-gray);
            margin: 0;
        }
.customer-budget-title p {
            color: var(--medium-gray);
            margin: 0.15rem 0 0 0;
            font-size: 0.85rem;
        }
.budget-controls {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
.budget-year-selector {
            display: flex;
            gap: 0.2rem;
            background: var(--off-white);
            border-radius: 0.375rem;
            padding: 0.2rem;
        }
.year-btn {
            padding: 0.4rem 0.8rem;
            border: none;
            border-radius: 0.25rem;
            background: transparent;
            color: var(--dark-gray);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 500;
            font-size: 0.85rem;
        }
.year-btn.active {
            background: var(--blue-primary);
            color: var(--white);
            box-shadow: 0 2px 4px rgba(93, 173, 226, 0.25);
        }
.customer-budget-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 1rem;
        }
.budget-summary-card {
            background: var(--off-white);
            border-radius: 0.5rem;
            padding: 1rem;
            text-align: center;
            border-left: 4px solid var(--blue-primary);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
.budget-summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255,255,255,0.1);
        }
.budget-summary-card.revenue {
            border-left-color: #10B981;
        }
.budget-summary-card.costs {
            border-left-color: #EF4444;
        }
.budget-summary-card.margin {
            border-left-color: var(--gold);
        }
.budget-summary-card h4 {
            margin: 0 0 0.4rem 0;
            color: var(--dark-gray);
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
.budget-summary-card .value {
            font-size: 1.4rem;
            font-weight: 700;
            font-family: 'Courier New', monospace;
            margin: 0;
        }
.budget-summary-card .percentage {
            font-size: 0.8rem;
            opacity: 0.7;
            margin: 0.2rem 0 0 0;
        }
.service-mix-section {
            margin-bottom: 1rem;
        }
.service-mix-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }
.service-mix-header h4 {
            margin: 0;
            font-size: 1rem;
            color: var(--dark-gray);
        }
.service-mix-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }
.service-mix-table th,
        .service-mix-table td {
            padding: 0.6rem 0.75rem;
            text-align: left;
            border-bottom: 1px solid var(--border-light);
        }
.service-mix-table th {
            background: var(--thead);
            color: var(--white);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
        }
.service-revenue-input {
            width: 100%;
            padding: 0.4rem;
            border: 1px solid var(--border-light);
            border-radius: 0.25rem;
            font-family: 'Courier New', monospace;
            text-align: right;
            font-size: 0.85rem;
        }
.service-revenue-input:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2);
        }
.monthly-budget-section {
            background: var(--off-white);
            border-radius: 0.5rem;
            padding: 1rem;
            margin-top: 1rem;
        }
.monthly-budget-section h4 {
            margin: 0 0 0.5rem 0;
            font-size: 1rem;
            color: var(--dark-gray);
        }
.monthly-budget-section p {
            margin: 0 0 0.75rem 0;
            color: var(--medium-gray);
            font-size: 0.8rem;
        }
.monthly-budget-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
            margin-top: 0.5rem;
        }
.monthly-budget-table th,
        .monthly-budget-table td {
            padding: 0.4rem;
            text-align: center;
            border: 1px solid var(--border-light);
        }
.monthly-budget-table th {
            background: var(--blue-primary);
            color: var(--white);
            font-weight: 600;
            font-size: 0.7rem;
        }
.monthly-budget-table td:first-child {
            text-align: left;
            font-weight: 600;
            background: var(--surface);
            font-size: 0.75rem;
        }
.monthly-input {
            width: 70px;
            padding: 0.2rem;
            border: 1px solid var(--border-light);
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-family: 'Courier New', monospace;
            text-align: right;
        }
.rollup-indicator {
            background: var(--gold);
            color: var(--white);
            padding: 0.2rem 0.6rem;
            border-radius: 1rem;
            font-size: 0.75rem;
            font-weight: 600;
            margin-left: 0.75rem;
        }
/* Footer */
        .footer {
            background: var(--thead);
            color: var(--white);
            text-align: center;
            padding: 2rem;
            margin-top: 4rem;
        }
.footer p {
            opacity: 0.8;
        }
/* Responsive */
        @media (max-width: 768px) {
            .main-container {
                grid-template-columns: 1fr;
                padding: 1rem;
                gap: 1rem;
            }
.header-content {
                padding: 1rem;
            }
.header-nav {
                display: none;
            }
.sidebar {
                position: static;
            }
}
/* ─── Login gate (step 4) ────────────────────────────── */
        /* When body has .logged-out, the app is hidden and the login screen is shown.
           When body lacks .logged-out, the login screen is hidden and the app is shown. */
        body.logged-out .header,
        body.logged-out .main-container {
            display: none !important;
        }
body:not(.logged-out) #loginScreen {
            display: none !important;
        }
.login-screen {
            position: fixed;
            inset: 0;
            background: var(--off-white);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            z-index: 1000;
        }
.login-card {
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: 0.75rem;
            box-shadow: var(--shadow-lg);
            padding: 2.5rem;
            width: 100%;
            max-width: 380px;
        }
.login-brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }
.login-brand-logo {
            width: 44px;
            height: 30px;
            background: var(--thead);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3px 5px;
        }
.login-brand-text h1 {
            font-family: var(--font-serif);
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--dark-gray);
            margin: 0;
            line-height: 1.1;
        }
.login-brand-text p {
            font-size: 0.75rem;
            color: var(--blue-primary);
            margin: 0;
        }
.login-title {
            font-family: var(--font-serif);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark-gray);
            margin: 0 0 0.25rem 0;
        }
.login-subtitle {
            font-size: 0.875rem;
            color: var(--medium-gray);
            margin: 0 0 1.5rem 0;
        }
.login-field {
            display: block;
            margin-bottom: 1rem;
        }
.login-field label {
            display: block;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--medium-gray);
            margin-bottom: 0.35rem;
        }
.login-field input {
            width: 100%;
            padding: 0.65rem 0.85rem;
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            font-family: var(--font-primary);
            font-size: 0.95rem;
            color: var(--dark-gray);
            background: var(--surface);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
.login-field input:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.18);
        }
.login-submit {
            width: 100%;
            margin-top: 0.5rem;
            background: var(--blue-primary);
            color: var(--white);
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 0.5rem;
            font-family: var(--font-primary);
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
        }
.login-submit:hover {
            background: #4A90C2;
            box-shadow: var(--shadow-blue);
            transform: translateY(-1px);
        }
.login-submit:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
.login-error {
            margin-top: 0.85rem;
            padding: 0.65rem 0.85rem;
            background: rgba(220, 38, 38, 0.14);
            border: 1px solid rgba(220, 38, 38, 0.3);
            color: #e08067;
            border-radius: 0.5rem;
            font-size: 0.85rem;
            display: none;
        }
.login-error.visible {
            display: block;
        }
#signOutLink {
            cursor: pointer;
        }
/* ── block 3 of 7 — 
    

/* ── block 4 of 7 — .fpa-helper ── */
        .fpa-helper { position: fixed; right: 20px; bottom: 20px; z-index: 4000; }
body.logged-out .fpa-helper { display: none; }
.fpa-helper-launcher {
            display: inline-flex; align-items: center; gap: 0.5rem;
            background: var(--blue-primary, #2563EB); color: #fff; border: none;
            border-radius: 999px; padding: 0.7rem 1.15rem;
            font-size: 0.9rem; font-weight: 600; cursor: pointer;
            box-shadow: 0 6px 22px rgba(0,0,0,0.20); transition: filter .15s, transform .15s;
        }
.fpa-helper-launcher:hover { filter: brightness(1.06); transform: translateY(-1px); }
.fpa-helper-launcher-icon { font-size: 1.1rem; line-height: 1; }
.fpa-helper-panel {
            display: none; flex-direction: column;
            width: min(400px, calc(100vw - 40px));
            height: min(560px, calc(100vh - 120px));
            background: var(--surface); border: 1px solid var(--border, #e5e7eb);
            border-radius: 0.9rem; box-shadow: 0 14px 44px rgba(0,0,0,0.24);
            overflow: hidden;
        }
.fpa-helper:not(.collapsed) .fpa-helper-panel { display: flex; }
.fpa-helper:not(.collapsed) .fpa-helper-launcher { display: none; }
.fpa-helper-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--border, #e5e7eb);
            background: var(--off-white, #f8f9fa);
        }
.fpa-helper-title { font-weight: 700; font-size: 0.95rem; }
.fpa-helper-header-actions { display: flex; align-items: center; gap: 0.5rem; }
.fpa-helper-close {
            background: transparent; border: none; font-size: 1rem; line-height: 1;
            cursor: pointer; color: var(--medium-gray, #6b7280); padding: 0.15rem 0.35rem;
        }
.fpa-helper-close:hover { color: var(--dark-gray, #111827); }
/* Reuse the module chat styling, but make the message list flex-fill/scroll. */
        .fpa-helper-panel .ai-chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem; }
.fpa-helper-panel .ai-chat-input-row { padding: 0.7rem; border-top: 1px solid var(--border, #e5e7eb); }
@media (max-width: 480px) {
            .fpa-helper { right: 12px; bottom: 12px; }
.fpa-helper-panel { width: calc(100vw - 24px); height: calc(100vh - 90px); }
}
/* ── block 5 of 7 — .kpi-library-btn ── */
        .kpi-library-btn {
            display: flex; align-items: center; gap: 0.6rem; width: calc(100% - 1.5rem);
            margin: 0.75rem; padding: 0.7rem 0.85rem; text-align: left;
            background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(196,151,59,0.10));
            border: 1px dashed var(--border, #e5e7eb); border-radius: 0.65rem; cursor: pointer;
        }
.kpi-library-btn:hover { background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(196,151,59,0.17)); }
.kpi-library-icon { font-size: 1.35rem; line-height: 1; }
.kpi-library-text { display: flex; flex-direction: column; }
.kpi-library-title { font-weight: 700; font-size: 0.9rem; color: var(--dark-gray, #111827); }
.kpi-library-sub { font-size: 0.72rem; color: var(--medium-gray, #6b7280); }
.kpilib-overlay {
            display: none; position: fixed; inset: 0; z-index: 6000;
            background: rgba(0,0,0,0.45); align-items: center; justify-content: center; padding: 1.5rem;
        }
.kpilib-overlay.open { display: flex; }
.kpilib-modal {
            background: var(--surface); border-radius: 1rem; max-width: 840px; width: 100%;
            max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
.kpilib-header {
            display: flex; align-items: flex-start; justify-content: space-between;
            padding: 1.5rem 1.75rem 1rem; border-bottom: 1px solid var(--border, #e5e7eb);
            position: sticky; top: 0; background: var(--surface); z-index: 1;
        }
.kpilib-header h3 { margin: 0; font-size: 1.35rem; }
.kpilib-header p { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--medium-gray, #6b7280); }
.kpilib-close { background: transparent; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--medium-gray, #6b7280); }
.kpilib-close:hover { color: var(--dark-gray, #111827); }
.kpilib-body { padding: 1.1rem 1.75rem 1.75rem; }
.kpilib-cat { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue-primary, #2563EB); margin: 1.3rem 0 0.65rem; }
.kpilib-cat:first-child { margin-top: 0; }
.kpilib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.6rem; }
.kpi-item { border: 1px solid var(--border, #e5e7eb); border-radius: 0.6rem; padding: 0.6rem 0.75rem; }
.kpi-item .kpi-name { display: block; font-weight: 600; font-size: 0.86rem; color: var(--dark-gray, #111827); }
.kpi-item .kpi-formula { display: block; font-size: 0.75rem; color: var(--medium-gray, #6b7280); margin-top: 0.15rem; line-height: 1.35; }
/* ── block 6 of 7 — ===== CFP 2.0 · Phase 1 — shell polish (dark / sandbox aesthetic) ==== ── */
  /* ===== CFP 2.0 · Phase 1 — shell polish (dark / sandbox aesthetic) ===== */

  /* Form controls: dark surfaces, light text, gold focus */
  input, select, textarea {
    background: var(--surface-2);
    color: var(--ink);
    border: 1px solid var(--line);
  }
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold);
  }
select option { background: var(--surface-2); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); }
/* Flatten: thin borders instead of heavy shadows */
  .header { box-shadow: none; border-bottom: 1px solid var(--line); }
.sidebar { box-shadow: none; border: 1px solid var(--line); }
/* Active/hover nav → gold accent (sandbox style) rather than solid blue */
  .nav-item.active {
    background: color-mix(in srgb, var(--gold) 15%, transparent);
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
/* (Phase-2 dashboard styling now lives in the main stylesheet) */

  /* Dark scrollbars */
  * { scrollbar-color: var(--line) transparent; }
/* ===== Custom KPI section + picker ===== */
  .dash-tier--custom { background: rgba(214,169,75,0.06); border:1px solid rgba(214,169,75,0.22); }
.dash-tier--custom .dash-tier-label { color: var(--gold); }
.dash-add-kpi-btn { margin-left:auto; background:var(--surface-2); color:var(--gold);
    border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line)); border-radius:6px;
    padding:4px 12px; font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer; }
.dash-add-kpi-btn:hover { background:color-mix(in srgb,var(--gold) 16%,var(--surface-2)); }
.dash-kpi-empty { grid-column:1/-1; text-align:center; color:var(--muted); padding:1.1rem;
    font-size:0.88rem; border:1px dashed var(--line); border-radius:0.6rem; }
.dash-kpi-card .kpi-remove { cursor:pointer; color:var(--muted); font-size:1rem; line-height:1; padding:0 2px; }
.dash-kpi-card .kpi-remove:hover { color:#e08067; }
.kpi-picker-overlay { position:fixed; inset:0; background:rgba(6,10,14,0.66); display:none;
    align-items:flex-start; justify-content:center; z-index:2000; padding:6vh 1rem; }
.kpi-picker-overlay.open { display:flex; }
.kpi-picker-modal { background:var(--surface); border:1px solid var(--line); border-radius:12px;
    max-width:660px; width:100%; max-height:82vh; overflow:auto; }
.kpi-picker-head { display:flex; justify-content:space-between; align-items:center; padding:14px 18px;
    border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:1; }
.kpi-picker-head h3 { margin:0; color:var(--ink); font-family:var(--font-serif); font-size:1.3rem; }
.kpi-picker-head button { background:var(--gold); color:#231a08; border:none; border-radius:6px;
    padding:6px 14px; cursor:pointer; font-weight:700; }
.kpi-picker-sub { padding:12px 18px 2px; color:var(--muted); font-size:0.85rem; line-height:1.5; }
.kpi-picker-body { padding:6px 18px 20px; }
.kpi-pick-group { margin-top:16px; }
.kpi-pick-group-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--muted); margin-bottom:8px; }
.kpi-pick-group-title span { font-weight:400; text-transform:none; letter-spacing:0; }
.kpi-pick-group.locked { opacity:0.5; }
.kpi-pick-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
@media (max-width:560px){ .kpi-pick-list{ grid-template-columns:1fr; }
}
.kpi-pick-item { display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line);
    border-radius:8px; cursor:pointer; background:var(--surface-2); }
.kpi-pick-item.on { border-color:color-mix(in srgb,var(--gold) 50%,var(--line));
    background:color-mix(in srgb,var(--gold) 8%,var(--surface-2)); }
.kpi-pick-item.disabled { cursor:not-allowed; }
.kpi-pick-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.kpi-pick-name { font-weight:600; color:var(--ink); font-size:0.85rem; }
.kpi-pick-hint { color:var(--muted); font-size:0.7rem; margin-left:auto; text-align:right; }
.kpi-pick-item input { width:auto; margin:0; }
/* ===== Editable Chart of Accounts ===== */
  .coa-table tbody td { padding: 0; }
.coa-inp { width:100%; background:transparent; border:none; color:var(--ink); font-family:inherit;
    font-size:0.85rem; padding:0.5rem 0.65rem; border-radius:0; }
.coa-inp:focus { outline:2px solid var(--gold); outline-offset:-2px; background:var(--surface-2); }
.coa-inp.coa-num { font-family:'Courier New',monospace; font-weight:700; min-width:64px; }
select.coa-inp { cursor:pointer; min-width:120px; }
.coa-actions { text-align:center; }
.coa-del { background:transparent; border:none; color:var(--muted); font-size:1.15rem; line-height:1;
    cursor:pointer; padding:0 6px; }
.coa-del:hover { color:#e08067; }
/* ===== ERP Import ===== */
  .erp-controls { display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; }
#erpMappedBody td select.coa-inp { width:100%; }
/* ===== Business-model CoA template picker ===== */
  .coa-bizmodel { margin-bottom:1.5rem; }
.bizmodel-current { display:flex; align-items:center; gap:0.9rem; padding:0.85rem 1.1rem;
    background:rgba(214,169,75,0.06); border:1px solid rgba(214,169,75,0.25); border-radius:0.6rem; }
.bizmodel-current .bizmodel-icon { font-size:1.6rem; }
.bizmodel-cur-text { flex:1; }
.bizmodel-cur-text > div:first-child { color:var(--ink); font-size:0.95rem; }
.bizmodel-current strong { color:var(--gold); }
.bizmodel-desc { color:var(--muted); font-size:0.8rem; margin-top:0.15rem; }
.bizmodel-current .btn { background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
    border-radius:6px; padding:6px 14px; cursor:pointer; font-size:0.82rem; }
.bizmodel-current .btn:hover { border-color:var(--gold); color:var(--gold); }
.bizmodel-card.active { border-color:var(--gold); background:color-mix(in srgb, var(--gold) 7%, var(--surface)); }
/* ===== Revenue Drivers module (ported from driver-lab sandbox, rd- namespaced) ===== */
  #revenue-drivers, #headcount-planning { --rd-pos:#4bbd8a; --rd-neg:#e08067; }
.rd-layout { max-width:1520px; }
/* Chart of accounts: rows the engine reads directly */
  .coa-row-engine .coa-num { border-left: 2px solid var(--gold); }
/* Business model page */
  .bizpage-layout { max-width:1180px; }
.bizpage-current { background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:14px 16px; margin-bottom:1.25rem; }
.bizpage-current-in { display:flex; align-items:center; gap:12px; }
.bizpage-current-in.empty { border-left:3px solid var(--gold); padding-left:10px; }
.bizpage-current-icon { font-size:1.6rem; }
.bizpage-current-label { font-size:0.95rem; color:var(--ink); }
.bizpage-current-desc { font-size:0.82rem; color:var(--muted); margin-top:2px; }
.bizpage-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.bizpage-card { background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:16px; cursor:pointer; display:flex; flex-direction:column; transition:border-color .15s ease; }
.bizpage-card:hover { border-color:var(--gold); }
.bizpage-card.on { border-color:var(--gold); background:color-mix(in srgb,var(--gold) 7%,var(--surface)); }
.bizpage-card-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.bizpage-card-icon { font-size:1.35rem; }
.bizpage-card-title { font-weight:700; font-size:1rem; color:var(--ink); }
.bizpage-card-badge { margin-left:auto; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
    font-weight:700; background:var(--gold); color:#231a08; padding:2px 7px; border-radius:5px; }
.bizpage-card-desc { font-size:0.83rem; color:var(--muted); line-height:1.5; margin-bottom:10px; }
.bizpage-card-sets { border-top:1px solid var(--line); padding-top:10px; margin-bottom:12px; flex:1; }
.bizpage-card-sets div { font-size:0.78rem; color:var(--ink); margin-bottom:6px; line-height:1.45; }
.bizpage-card-sets span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted); font-weight:600; }
.bizpage-card-btn { font-family:inherit; font-size:0.83rem; font-weight:600; width:100%;
    background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
    border-radius:7px; padding:7px 12px; cursor:pointer; }
.bizpage-card:hover .bizpage-card-btn { border-color:var(--gold); color:var(--gold); }
.bizpage-card.on .bizpage-card-btn { background:var(--gold); color:#231a08; border-color:var(--gold); }
.bizpage-foot { font-size:0.8rem; color:var(--muted); margin-top:1.1rem; }
/* Setup front page */
  .setup-layout { max-width:1040px; }
.setup-progress { background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:16px 18px; margin-bottom:1.5rem; }
.setup-progress-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:10px; }
.setup-progress-count { font-size:0.95rem; color:var(--ink); }
.setup-progress-sub { font-size:0.8rem; color:var(--muted); margin-top:2px; }
.setup-progress-pct { font-size:1.5rem; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; }
.setup-progress-bar { height:6px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.setup-progress-fill { height:100%; background:var(--gold); border-radius:99px; transition:width .3s ease; }
.setup-phase { margin-bottom:1.75rem; }
.setup-phase-head { display:flex; align-items:baseline; gap:10px; }
.setup-phase-head h3 { margin:0; font-size:1.05rem; color:var(--ink); }
.setup-phase-count { font-size:0.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.setup-phase-blurb { font-size:0.83rem; color:var(--muted); margin:2px 0 12px; }
.setup-step { display:flex; align-items:flex-start; gap:12px; background:var(--surface);
    border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:8px; }
.setup-step.next { border-color:var(--gold); }
.setup-step.done { opacity:.72; }
.setup-step-num { flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:flex;
    align-items:center; justify-content:center; font-size:0.8rem; font-weight:700;
    background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }
.setup-step.done .setup-step-num { background:#22c55e; color:#08240f; border-color:#22c55e; }
.setup-step.next .setup-step-num { background:var(--gold); color:#231a08; border-color:var(--gold); }
.setup-step-body { flex:1; min-width:0; }
.setup-step-title { font-weight:600; font-size:0.94rem; color:var(--ink); }
.setup-step-desc { font-size:0.82rem; color:var(--muted); line-height:1.5; margin-top:2px; }
.setup-step-meta { font-size:0.78rem; color:var(--gold); margin-top:5px; }
.setup-badge { font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
    padding:2px 7px; border-radius:5px; background:var(--surface-2); color:var(--muted); margin-left:6px; }
.setup-badge.done { background:color-mix(in srgb,#22c55e 18%,transparent); color:#22c55e; }
.setup-badge.next { background:var(--gold); color:#231a08; }
.setup-step-btn { flex:0 0 auto; font-family:inherit; font-size:0.82rem; font-weight:600;
    background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
    border-radius:7px; padding:6px 12px; cursor:pointer; white-space:nowrap; }
.setup-step-btn:hover { border-color:var(--gold); color:var(--gold); }
.rd-yearbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.rd-yearbar-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    font-weight:600; margin-right:2px; }
.rd-yearbtn { font-family:inherit; font-size:13px; font-weight:600; color:var(--muted);
    background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:5px 14px; cursor:pointer; }
.rd-yearbtn:hover { color:var(--ink); border-color:var(--muted); }
.rd-yearbtn.on { background:var(--gold); color:#231a08; border-color:var(--gold); }
.rd-yearbar-note { font-size:11.5px; color:var(--muted); margin-left:8px; }
.rd-empty { border:1px dashed var(--line); border-radius:10px; padding:2rem 1.5rem; text-align:center;
    color:var(--muted); background:var(--surface); margin-bottom:1rem; font-size:0.92rem; }
.rd-num { font-variant-numeric:tabular-nums; }
#revenue-drivers input[type=number], #headcount-planning input[type=number] { -moz-appearance:textfield; appearance:textfield; }
#revenue-drivers input[type=number]::-webkit-outer-spin-button,
  #revenue-drivers input[type=number]::-webkit-inner-spin-button,
  #headcount-planning input[type=number]::-webkit-outer-spin-button,
  #headcount-planning input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.rd-driver { background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:13px 14px; margin-bottom:12px; }
.rd-top { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.rd-badge { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; padding:2px 7px; border-radius:5px;
    font-weight:600; white-space:nowrap; }
.rd-badge.rd-rev { background:color-mix(in srgb, var(--rd-pos) 16%, transparent); color:var(--rd-pos); }
.rd-badge.rd-cost { background:color-mix(in srgb, var(--rd-neg) 16%, transparent); color:var(--rd-neg); }
.rd-lbl { flex:1; font-weight:600; border:none; background:transparent; padding:2px 0; font-size:14px;
    color:var(--ink); font-family:inherit; }
.rd-lbl:focus { outline:none; border-bottom:1px solid var(--gold); }
.rd-yoy { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted);
    text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
#revenue-drivers .rd-yoy-in, #headcount-planning .rd-yoy-in, .rd-yoy-in { width:64px; flex:0 0 auto; text-align:right; font-size:12px; color:var(--ink); background:var(--surface-2);
    border:1px solid var(--line); border-radius:5px; padding:3px 5px; font-family:inherit;
    -moz-appearance:textfield; appearance:textfield; }
.rd-yoy-in::-webkit-outer-spin-button, .rd-yoy-in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.rd-yoy-in:focus { outline:2px solid var(--gold); outline-offset:-1px; border-color:var(--gold); }
.rd-del { border:none; background:transparent; color:var(--muted); font-size:16px; padding:0 4px; line-height:1;
    cursor:pointer; }
.rd-del:hover { color:var(--rd-neg); }
.rd-typeline { font-size:11.5px; color:var(--muted); margin:-4px 0 9px; }
.rd-reads { display:flex; gap:7px; flex-wrap:wrap; margin:0 0 11px; }
.rd-reads:empty { display:none; }
.rd-chip { font-size:11px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line);
    border-radius:20px; padding:2px 9px; }
.rd-chip b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.dash-waterfall-card { margin-bottom: 2rem; }
.dash-waterfall-scroll { overflow-x: auto; padding: 0.6rem 0.2rem 0.2rem; }
.dash-waterfall-scroll svg { display:block; }
.py-eb-actions { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin-top:1rem; }
.py-eb-actions-label { font-size:0.8rem; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:0.04em; }
.py-eb-actions input[type=date] { background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
    border-radius:4px; padding:0.3rem 0.5rem; font-family:inherit; font-size:0.82rem; }
.py-eb-actions-hint { font-size:0.76rem; color:var(--muted); }
.py-eb-note { border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.85rem; line-height: 1.55; }
.py-eb-note.ok   { background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.30); color: var(--ink); }
.py-eb-note.warn { background: rgba(224,128,103,0.10); border: 1px solid rgba(224,128,103,0.35); color: var(--ink); }
.py-eb-note em { color: var(--gold); font-style: normal; font-weight: 600; }
/* Prior-year ending balance — the column the plan starts from. */
  .py-eb-col { background: rgba(196,151,59,0.07); border-right: 2px solid rgba(196,151,59,0.35); }
th.py-eb-col { color: var(--gold); letter-spacing: 0.04em; }
.ai-spend { display:flex; justify-content:flex-end; padding:4px 10px 0; }
.ai-spend-btn { display:inline-flex; align-items:center; gap:6px; background:transparent;
    border:none; color:var(--muted); font-size:11px; font-family:inherit; cursor:pointer;
    padding:2px 4px; border-radius:4px; }
.ai-spend-btn:hover { color:var(--ink); background:var(--surface-2); }
.ai-spend-btn b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.ai-spend-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.7; }
.ai-spend-sep { opacity:.5; }
.ai-spend-detail { text-align:left; }
.ai-spend-table { width:100%; border-collapse:collapse; margin-bottom:10px; }
.ai-spend-table td { padding:5px 8px; border-bottom:1px solid var(--line); font-size:13px; }
.ai-spend-num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); }
.ai-spend-meta { text-align:right; font-size:11px; color:var(--muted); white-space:nowrap; }
.ai-spend-detail h4 { margin:12px 0 4px; font-size:12px; color:var(--muted); font-weight:600;
    text-transform:uppercase; letter-spacing:.04em; }
.ai-spend-note { margin:6px 0 0; font-size:11px; color:var(--muted); line-height:1.5; }
.pl-year-tag { margin-left:6px; font-size:10px; letter-spacing:.03em; color:var(--muted);
    border:1px solid var(--line); border-radius:3px; padding:1px 5px; cursor:help; }
.pl-detail-year-select { margin-left:6px; background:var(--surface-2); color:var(--ink);
    border:1px solid var(--line); border-radius:4px; padding:2px 6px; font-size:0.78rem; font-family:inherit; }
.pl-driven-tag { margin-left:6px; font-size:10px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--gold); border:1px solid var(--gold); border-radius:3px; padding:1px 5px; opacity:.85; cursor:help; }
.rd-perfte { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.rd-perfte h4 { margin:0 0 2px; font-size:13px; color:var(--ink); font-weight:600; }
.rd-perfte .rd-perfte-note { margin:0 0 8px; font-size:11px; color:var(--muted); }
.rd-perfte table { width:100%; border-collapse:collapse; }
.rd-perfte th { text-align:left; font-size:11px; color:var(--muted); font-weight:600; padding:2px 6px; }
.rd-perfte td { padding:2px 6px; }
.rd-perfte input, .rd-perfte select { width:100%; background:var(--surface-2); color:var(--ink);
    border:1px solid var(--line); border-radius:4px; padding:4px 6px; font-size:12px; font-family:inherit; }
.rd-perfte .rd-perfte-total { font-size:11px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.rd-params { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }
.rd-params.rd-single { grid-template-columns:1fr; }
.rd-params .rd-p { min-width:0; }
.rd-params .rd-p.rd-full { grid-column:1/-1; }
.rd-p label { display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
#revenue-drivers input, #revenue-drivers select,
  #headcount-planning input, #headcount-planning select { font-family:inherit; font-size:13px; color:var(--ink);
    background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:5px 7px; width:100%; }
#revenue-drivers input:focus, #revenue-drivers select:focus,
  #headcount-planning input:focus, #headcount-planning select:focus { outline:2px solid var(--gold); outline-offset:-1px;
    border-color:var(--gold); }
.rd-custblock { display:block; margin-top:4px; }
.rd-mini-h { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:13px 0 6px; }
.rd-ratecard { background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; max-width:560px; }
.rd-ratecard .rd-mini-h { margin:0 0 7px; }
.rd-rc-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.rd-rc-row .rd-p { min-width:0; }
.rd-prod-list { display:flex; flex-direction:column; gap:7px; }
.rd-prod { display:grid; grid-template-columns:1fr 110px auto; gap:8px; align-items:center; }
.rd-prod-name { font-weight:500; }
.rd-cust-del { border:none; background:transparent; color:var(--muted); font-size:17px; padding:0 4px; line-height:1;
    cursor:pointer; }
.rd-cust-del:hover { color:var(--rd-neg); }
.rd-add-cust { margin-top:9px; width:100%; border-style:dashed; color:var(--muted); }
.rd-add-cust:hover { color:var(--ink); }
.rd-egrid-wrap { overflow-x:auto; overflow-y:auto; border:1px solid var(--line); border-radius:8px; max-height:380px; max-width:100%; }
/* Per-customer product selection row (checkbox chips) */
  .rd-prodpick-row td { background:var(--surface); border-bottom:1px solid var(--line); padding:5px 10px; }
.rd-prodpick { display:flex; align-items:center; gap:8px; flex-wrap:wrap; position:sticky; left:10px;
    width:max-content; max-width:calc(100vw - 160px); }
.rd-prodpick-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.rd-prodchip { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted);
    background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:2px 10px 2px 7px; cursor:pointer;
    white-space:nowrap; }
.rd-prodchip.on { color:var(--ink); border-color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, var(--surface-2)); }
.rd-prodchip input { accent-color:var(--gold); margin:0; cursor:pointer; }
#revenue-drivers .rd-prodchip input { width:auto; }
.rd-prodpick-all { border:none; background:transparent; color:var(--gold); font-size:11.5px; font-weight:600;
    cursor:pointer; padding:2px 4px; font-family:inherit; white-space:nowrap; }
.rd-prodpick-all:hover { text-decoration:underline; }
.rd-line-prodname { font-size:12.5px; color:var(--ink); padding-left:14px; white-space:nowrap; }
.rd-params > *, .rd-custblock, .rd-breakdown { min-width:0; max-width:100%; }
table.rd-egrid { border-collapse:collapse; font-size:12.5px; width:100%; }
table.rd-egrid th, table.rd-egrid td { border:1px solid var(--line); padding:0; white-space:nowrap; }
table.rd-egrid thead th { position:sticky; top:0; z-index:1; background:var(--thead); color:#cfe0f2;
    font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; text-align:left; padding:6px 8px; }
table.rd-egrid thead th.rd-total { text-align:right; }
table.rd-egrid td input, table.rd-egrid td select { border:none; background:transparent; border-radius:0;
    padding:5px 7px; width:100%; min-width:82px; font-size:12.5px; }
table.rd-egrid td input.rd-col-text { min-width:120px; }
/* Employee spreadsheet download / upload, next to "+ Add employees". */
.rd-lbl-fixed { font-weight:600; font-size:0.95rem; color:var(--ink, #e7eef5); }
.hc-xls-note { margin:6px 0 0; font-size:0.76rem; color:var(--muted, #93a4b4); max-width:70ch; }

/* "Posts to" — which P&L line an employee's cost lands on. */
table.rd-egrid td select.rd-col-select { min-width:150px; max-width:210px; width:100%;
            background:var(--surface-2, #1c2732); color:var(--ink, #e7eef5);
            border:1px solid var(--line, #2a3644); border-radius:4px;
            padding:4px 6px; font-family:inherit; font-size:12px; }
table.rd-egrid td select.rd-col-select:focus { outline:2px solid var(--gold, #d6a94b); outline-offset:-1px; }
table.rd-egrid td select.rd-gridsel { min-width:130px; }
table.rd-egrid td input:focus, table.rd-egrid td select:focus { outline:2px solid var(--gold); outline-offset:-2px; }
table.rd-egrid td.rd-total { padding:5px 9px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600;
    background:var(--surface-2); min-width:84px; }
table.rd-egrid td.rd-rowdel { text-align:center; }
table.rd-egrid td.rd-rowdel .rd-cust-del { padding:0 6px; }
table.rd-egrid th.rd-mcol { text-align:right; min-width:58px; font-size:10px; color:#cfe0f2; }
table.rd-egrid td.rd-mcell { text-align:right; }
table.rd-egrid td.rd-mcell.rd-ro { padding:5px 7px; font-variant-numeric:tabular-nums; color:var(--muted); min-width:58px; }
table.rd-egrid td.rd-mcell input { text-align:right; min-width:58px; }
table.rd-egrid td input.rd-num-in { text-align:right; }
table.rd-egrid td.rd-brk-label { padding:5px 9px; font-weight:600; white-space:nowrap; background:var(--surface-2);
    position:sticky; left:0; min-width:120px; }
table.rd-egrid tr.rd-sub td { font-weight:600; background:var(--surface-2); }
table.rd-egrid tr.rd-cust-parent td { background:var(--surface-2); }
table.rd-egrid tr.rd-cust-parent .rd-cust-name { font-weight:700; }
table.rd-egrid tr.rd-cust-parent td.rd-total { font-weight:700; }
table.rd-egrid tr.rd-cust-parent td.rd-mcell.rd-ro { color:var(--ink); font-weight:600; }
table.rd-egrid tr.rd-line-row td.rd-line-name { padding-left:18px; }
table.rd-egrid tr.rd-line-row td.rd-line-name select { min-width:130px; color:var(--muted); }
.rd-egrid-actions { display:flex; gap:8px; margin-top:9px; }
.rd-breakdown { margin-top:14px; }
.rd-params .rd-breakdown { grid-column:1/-1; }
.rd-addbar { display:flex; gap:8px; margin:14px 0 22px; max-width:520px; }
.rd-addbar .rd-select { flex:1; }
.rd-btn { font-family:inherit; font-size:13px; cursor:pointer; border-radius:7px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--ink); padding:6px 13px; }
.rd-btn:hover { border-color:var(--gold); }
.rd-btn-primary { background:var(--gold); border-color:var(--gold); color:#231a08; font-weight:600; }
.rd-egrid-actions .rd-btn { font-size:12.5px; }
.rd-output { margin-top:8px; }
.rd-tblwrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
table.rd-outtable { border-collapse:collapse; width:100%; font-size:12.5px; }
table.rd-outtable th, table.rd-outtable td { padding:7px 10px; text-align:right; white-space:nowrap;
    border-bottom:1px solid var(--line); }
table.rd-outtable th:first-child, table.rd-outtable td:first-child { text-align:left; position:sticky; left:0;
    background:var(--surface); border-right:1px solid var(--line); font-weight:500; }
table.rd-outtable thead th { font-weight:600; color:#cfe0f2; font-size:11px; text-transform:uppercase;
    letter-spacing:.04em; position:sticky; top:0; background:var(--thead); z-index:1; }
table.rd-outtable thead th:first-child { z-index:2; background:var(--thead); }
table.rd-outtable tr.rd-net td { font-weight:700; border-top:2px solid var(--line); background:var(--surface-2); }
table.rd-outtable tr.rd-net td:first-child { background:var(--surface-2); }
table.rd-outtable td.rd-tot { border-left:1px solid var(--line); font-weight:600; }
/* ── block 7 of 7 — .app-confirm-overlay ── */
  .app-confirm-overlay { display:none; position:fixed; inset:0; z-index:7000;
    background:rgba(0,0,0,0.55); align-items:center; justify-content:center; padding:1.5rem; }
.app-confirm-overlay.open { display:flex; }
.app-confirm-modal { background:var(--surface); border:1px solid var(--line); border-radius:12px;
    max-width:440px; width:100%; padding:1.3rem 1.4rem; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.app-confirm-title { font-weight:700; font-size:1.02rem; color:var(--ink); margin:0 0 0.5rem; }
.app-confirm-msg { font-size:0.88rem; color:var(--muted); line-height:1.5; margin:0 0 1.1rem; }
.app-confirm-actions { display:flex; justify-content:flex-end; gap:0.6rem; }
.app-confirm-actions button { font-family:inherit; font-size:0.85rem; font-weight:600; border-radius:7px;
    padding:0.5rem 0.95rem; cursor:pointer; }
.app-confirm-cancel { background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }
.app-confirm-cancel:hover { border-color:var(--muted); }
.app-confirm-ok { background:var(--gold); color:#231a08; border:none; }
.app-confirm-ok:hover { filter:brightness(1.07); }

/* ── FRONT PAGE — what this tool is ─────────────────────────────────────── */
.fp-home-btn { display:inline-flex; align-items:center; justify-content:center;
            width:38px; height:38px; margin-right:14px; flex:0 0 auto;
            background:transparent; border:1px solid var(--line, #2a3644); border-radius:9px;
            color:var(--muted, #93a4b4); cursor:pointer; transition:all .18s ease; }
.fp-home-btn svg { width:19px; height:19px; }
.fp-home-btn:hover { color:var(--gold, #d6a94b); border-color:var(--gold, #d6a94b);
            transform:translateX(-2px); }

.fp-hero { padding:8px 0 26px; }
.fp-wordmark { display:flex; align-items:center; gap:16px; }
.fp-mark { display:inline-flex; width:46px; height:46px; color:var(--blue-primary, #5dade2); flex:0 0 auto; }
.fp-mark svg { width:100%; height:100%; }
.fp-name { margin:0; font-size:2.1rem; line-height:1.1; font-weight:700;
            letter-spacing:-.01em; color:var(--ink, #e7eef5); }
.fp-name span { color:var(--gold, #d6a94b); }
.fp-tagline { margin:3px 0 0; font-size:.95rem; color:var(--muted, #93a4b4);
            letter-spacing:.02em; }
.fp-lede { margin:20px 0 0; max-width:74ch; font-size:1.02rem; line-height:1.6;
            color:var(--ink, #e7eef5); opacity:.9; }

.fp-flow-card { background:var(--surface, #161f28); border:1px solid var(--line, #2a3644);
            border-radius:12px; padding:20px 22px 16px; margin-bottom:26px; }
.fp-flow-title { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
            font-weight:700; color:var(--muted, #93a4b4); margin-bottom:10px; }
.fp-flow { width:100%; height:auto; display:block; overflow:visible; }
.fp-flow-note { margin:12px 0 0; font-size:.83rem; color:var(--muted, #93a4b4); max-width:80ch; }

/* Nodes */
.fp-node rect { fill:var(--surface-2, #1c2732); stroke:var(--line, #2a3644); stroke-width:1.2; }
.fp-node text { fill:var(--ink, #e7eef5); font-size:14.5px; font-weight:600;
            text-anchor:middle; font-family:inherit; }
.fp-node text.fp-sub { fill:var(--muted, #93a4b4); font-size:11px; font-weight:400; }
.fp-src rect { stroke:color-mix(in srgb, var(--blue-primary, #5dade2) 45%, transparent); }
.fp-src-dim rect { stroke-dasharray:4 4; opacity:.75; }
.fp-out rect { stroke:color-mix(in srgb, #22c55e 40%, transparent); }
.fp-out-star rect { stroke:color-mix(in srgb, var(--gold, #d6a94b) 55%, transparent);
            fill:color-mix(in srgb, var(--gold, #d6a94b) 8%, var(--surface-2, #1c2732)); }
.fp-hub rect { fill:color-mix(in srgb, var(--gold, #d6a94b) 12%, var(--surface-2, #1c2732));
            stroke:var(--gold, #d6a94b); stroke-width:1.6; }
.fp-hub-name { font-size:17px; font-weight:700; fill:var(--gold, #d6a94b); }
/* The engine, named — it is a reason to choose the tool, so it should not read
   as another bullet in the subtitle. */
.fp-hub-ai { fill:var(--blue-primary, #5dade2) !important; font-weight:600 !important;
            font-size:11.5px !important; letter-spacing:.02em; }

/* Pipes: a static bed, with a dash travelling along it. */
.fp-pipe { fill:none; stroke:url(#fpPipe); stroke-width:2.5; }
.fp-dash { fill:none; stroke:var(--gold, #d6a94b); stroke-width:2.5; opacity:.9;
            stroke-linecap:round; stroke-dasharray:14 150; animation:fpFlow 3.2s linear infinite; }
.fp-dash-out { stroke:#22c55e; animation-duration:3.6s; }
.fp-flow g.fp-src:nth-of-type(2) ~ .fp-dash { animation-delay:.5s; }
@keyframes fpFlow { from { stroke-dashoffset:164; } to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce) { .fp-dash { animation:none; opacity:.5; } }

/* Questions */
.fp-qs-head h3 { margin:0 0 3px; font-size:1.15rem; color:var(--ink, #e7eef5); }
.fp-qs-head p { margin:0 0 14px; font-size:.86rem; color:var(--muted, #93a4b4); }
.fp-qs-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px; }
.fp-q { position:relative; background:var(--surface, #161f28); border:1px solid var(--line, #2a3644);
            border-radius:10px; padding:14px 16px 14px 44px; }
.fp-q-mark { position:absolute; left:15px; top:13px; width:20px; height:20px; border-radius:50%;
            display:inline-flex; align-items:center; justify-content:center;
            background:color-mix(in srgb, var(--gold, #d6a94b) 16%, transparent);
            color:var(--gold, #d6a94b); font-size:12px; font-weight:700; }
.fp-q strong { display:block; font-size:.93rem; color:var(--ink, #e7eef5); font-weight:600; }
.fp-q em { display:block; margin-top:4px; font-size:.82rem; font-style:normal;
            color:var(--muted, #93a4b4); line-height:1.45; }

.fp-cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }

@media (max-width: 900px) {
    .fp-name { font-size:1.7rem; }
    .fp-flow-card { padding:14px; }
}

/* ── Revenue → cash, as two bridges ─────────────────────────────────────── */
.dash-bridge-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.dash-bridge { min-width:0; }          /* or a wide SVG stretches the grid column */
.dash-bridge-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
            padding:0 0 6px 2px; border-bottom:1px solid var(--line, #2a3644); margin-bottom:8px; }
.dash-bridge-head strong { font-size:.9rem; color:var(--ink, #e7eef5); }
.dash-bridge-head span { font-size:.76rem; color:var(--muted, #93a4b4); }
.dash-bridge-omit { margin:6px 0 0 2px; font-size:.74rem; color:var(--muted, #93a4b4); }
@media (max-width: 1180px) { .dash-bridge-pair { grid-template-columns:1fr; gap:26px; } }

/* One wordmark everywhere: Scaleup in ink, FP&A in gold. */
.brand-fpa { color: var(--gold, #d6a94b); }
.fp-by { margin:22px 0 0; font-size:.8rem; color:var(--muted, #93a4b4); }
.fp-by strong { color:var(--ink, #e7eef5); font-weight:600; }

/* Three steps to start — a strip, deliberately not a second diagram. */
.fp-steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
            list-style:none; margin:0 0 26px; padding:0; counter-reset:none; }
.fp-steps li { position:relative; background:var(--surface, #161f28);
            border:1px solid var(--line, #2a3644); border-radius:10px; padding:14px 16px 14px 46px; }
.fp-step-n { position:absolute; left:14px; top:13px; width:22px; height:22px; border-radius:50%;
            display:inline-flex; align-items:center; justify-content:center;
            background:color-mix(in srgb, var(--blue-primary, #5dade2) 18%, transparent);
            color:var(--blue-primary, #5dade2); font-size:12px; font-weight:700; }
.fp-steps strong { display:block; font-size:.93rem; color:var(--ink, #e7eef5); font-weight:600; }
.fp-steps em { display:block; margin-top:4px; font-size:.81rem; font-style:normal;
            color:var(--muted, #93a4b4); line-height:1.45; }
.fp-step-flag { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
            font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
            vertical-align:middle; color:var(--gold, #d6a94b);
            background:color-mix(in srgb, var(--gold, #d6a94b) 15%, transparent); }
@media (max-width: 900px) { .fp-steps { grid-template-columns:1fr; } }

/* Headcount and its cost on one frame. Two axes because people and kroner share
   no scale: a dozen heads would be invisible against a dozen million. */
.dash-fte-chart { margin-top: 14px; padding: 12px 14px 6px;
            background: var(--card, #131b24); border: 1px solid var(--line, #2a3644);
            border-radius: 8px; }
.dash-fte-chart-head { display: flex; align-items: center; justify-content: space-between;
            flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.dash-fte-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
            font-size: 0.78rem; color: var(--muted, #93a4b4); }
.dash-fte-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dash-fte-swatch { display: inline-block; }
.dash-fte-swatch--bar { width: 11px; height: 11px; border-radius: 2px;
            background: #6ea8e0; opacity: .85; }
.dash-fte-swatch--line { width: 15px; height: 2.5px; border-radius: 2px;
            background: var(--gold, #d6a94b); }
.dash-fte-modes { display: flex; gap: 6px; }
.dash-fte-chip { background: transparent; border: 1px solid var(--line, #2a3644);
            border-radius: 999px; padding: 2px 11px; font-family: inherit; font-size: 0.75rem;
            color: var(--muted, #93a4b4); cursor: pointer; }
.dash-fte-chip:hover { color: var(--ink, #e7eef5); border-color: var(--muted, #93a4b4); }
.dash-fte-chip.on { color: var(--gold, #d6a94b); border-color: var(--gold, #d6a94b);
            background: color-mix(in srgb, var(--gold, #d6a94b) 12%, transparent); }

/* == FINANCIAL STATEMENTS (draft) ============================================
   Ported from the Konsolidator report's column language, translated into this
   app's dark palette. The one rule that carries the design: colour states where
   a number CAME FROM, never whether it is good news. Plain = reported actuals,
   amber = still budget, blue = a derived total. Good/bad is left to the sign and
   the parentheses, exactly as on paper.

   The amber and blue are mixed INTO the surface rather than laid over it at low
   opacity — a translucent tint reads black on this page. */
#statements {
    /* Chosen, not mixed. color-mix(gold 11%, surface) computes to rgb(43,46,44) —
       an olive grey, because this gold's green channel sits almost as high as its
       red, so a small dose over a cold slate cancels rather than warms. These are
       picked to read unmistakably WARM against #161f28 at a glance, which is the
       whole job: you should know a column is budget without reading its header. */
    --stmt-actual-bg:  var(--surface);
    --stmt-budget-bg:  #2b2317;      /* warm, clearly not the plain ground */
    --stmt-budget-sum: #3a2f1e;      /* same family, one step up for caption rows */
    --stmt-budget-ink: #e8c887;
    --stmt-total-bg:   #17293b;      /* cool counterpart — derived, not reported */
    --stmt-total-sum:  #1e3550;
    --stmt-total-ink:  #8cc0f0;
    --stmt-sum-bg:     var(--surface-2);
}

.stmt-head { display: flex; align-items: flex-start; justify-content: space-between;
            gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.stmt-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.stmt-sub { margin: 4px 0 0; font-size: 0.82rem; color: var(--muted); }

/* Segmented control — the three statements are one thing seen three ways, so
   they get one control rather than three sidebar entries. */
.stmt-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px;
            overflow: hidden; background: var(--surface); }
.stmt-seg button { font: inherit; font-size: 0.82rem; font-weight: 600;
            padding: 7px 15px; border: 0; background: transparent; color: var(--muted);
            cursor: pointer; border-right: 1px solid var(--line); }
.stmt-seg button:last-child { border-right: 0; }
.stmt-seg button:hover { background: var(--surface-2); color: var(--ink); }
.stmt-seg button.active { background: var(--blue-primary); color: #0b1017; }
.stmt-seg--sm button { padding: 4px 10px; font-size: 0.75rem; }

.stmt-toolbar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
            padding: 12px 14px; margin-bottom: 10px;
            background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.stmt-ctl { display: flex; flex-direction: column; gap: 4px; }
.stmt-ctl--grow { flex: 1 1 180px; min-width: 150px; }
.stmt-ctl > label { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .05em; color: var(--muted); }
.stmt-ctl select, .stmt-ctl input[type="search"] { font: inherit; font-size: 0.82rem;
            padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line);
            background: var(--surface-2); color: var(--ink); }
.stmt-ctl input[type="search"] { width: 100%; }
.stmt-btn-row { display: flex; gap: 6px; }
.stmt-btn { font: inherit; font-size: 0.75rem; font-weight: 600; padding: 6px 11px;
            border-radius: 7px; border: 1px solid var(--line);
            background: var(--surface-2); color: var(--muted); cursor: pointer; }
.stmt-btn:hover { color: var(--ink); border-color: var(--muted); }
.stmt-check { display: flex; align-items: center; gap: 6px; font-size: 0.8rem;
            font-weight: 600; color: var(--muted); cursor: pointer; padding-bottom: 6px; }

.stmt-legend { display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
            font-size: 0.75rem; color: var(--muted); margin: 0 2px 8px; }
.stmt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stmt-sw { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--line); }
.stmt-sw--actual { background: var(--stmt-actual-bg); }
.stmt-sw--budget { background: var(--stmt-budget-bg); }
.stmt-sw--ytd    { background: var(--stmt-total-bg); }
.stmt-legend-hint { font-style: italic; opacity: .75; }

.stmt-scroll { overflow: auto; max-height: calc(100vh - 300px);
            border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
/* Fixed layout, or auto layout hands every spare pixel to the widest column —
   the account name — which is how a 250px column rendered 748px wide with a
   canyon of dead space before the first month. Fixed also guarantees the header
   and body agree, which matters more here than anywhere: a misaligned figure
   under the wrong month is worse than an ugly one. The twelve months share
   whatever is left, so a wider window really does show wider months. */
.stmt-table { border-collapse: separate; border-spacing: 0; width: 100%;
            min-width: 1150px; table-layout: fixed; }
col.stmt-col-acct  { width: 290px; }
col.stmt-col-spark { width: 76px; }
/* One per comparative column. The colgroup maps POSITIONALLY under
   table-layout:fixed, so the number of <col> elements has to match the number of
   columns actually drawn — see stmtSyncColgroup. */
col.stmt-col-hist  { width: 92px; }
col.stmt-col-fy    { width: 104px; }
col.stmt-col-ytd   { width: 112px; }
/* Long account names truncate rather than forcing the column open. */
.stmt-table tbody td.stmt-acct { overflow: hidden; text-overflow: ellipsis; }

.stmt-table thead th { position: sticky; top: 0; z-index: 2;
            background: var(--thead); border-bottom: 2px solid var(--blue-primary);
            font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
            color: #cfe0f2; padding: 9px 11px; text-align: right; white-space: nowrap; }
.stmt-table thead th.stmt-acct-col { text-align: left; position: sticky; left: 0; z-index: 3;
            min-width: 250px; }
.stmt-table thead th.stmt-spark-col { text-align: center; min-width: 74px; }
.stmt-table thead th.stmt-fy-col { background: #4a3a1c; color: #f2ddaa; min-width: 96px; white-space: normal; line-height: 1.35;
            box-shadow: inset 1px 0 0 var(--line); }
.stmt-table thead th.stmt-ytd-col { background: #23446b; color: #dcecff; min-width: 104px; white-space: normal; line-height: 1.35; }

/* Closed-year comparatives, to the left of the plan. Deliberately the quietest
   thing on the statement: they are context for the plan, not the subject of it,
   so they read as reference rather than competing with the months. */
.stmt-table thead th.stmt-hist-col { background: var(--surface-2); color: var(--muted);
            min-width: 92px; white-space: normal; line-height: 1.35;
            border-right: 1px solid var(--line); }
.stmt-table tbody td.stmt-hist { background: var(--surface-2); color: var(--muted);
            font-variant-numeric: tabular-nums; text-align: right;
            border-right: 1px solid var(--line); }
.stmt-table tbody tr.stmt-caption > td.stmt-hist,
.stmt-table tbody tr.stmt-subtotal > td.stmt-hist { font-weight: 700; color: var(--ink); }
.stmt-th-sub { display: block; font-size: 8.5px; font-weight: 500; text-transform: none;
            letter-spacing: 0; opacity: .8; }

.stmt-table tbody td { padding: 5px 11px; border-bottom: 1px solid var(--line);
            font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right;
            white-space: nowrap; color: var(--ink); background: var(--stmt-actual-bg); }
.stmt-table tbody td.stmt-acct { text-align: left; position: sticky; left: 0; z-index: 1;
            white-space: nowrap; min-width: 250px; box-shadow: 1px 0 0 var(--line); }
.stmt-table tbody td.stmt-spark { text-align: center; padding: 3px 6px; }
.stmt-table tbody td.stmt-budget { background: var(--stmt-budget-bg); color: var(--stmt-budget-ink); }
.stmt-table tbody td.stmt-fy { background: var(--stmt-budget-bg); color: var(--stmt-budget-ink);
            font-weight: 700; box-shadow: inset 1px 0 0 var(--line); }
.stmt-table tbody td.stmt-ytd { background: var(--stmt-total-bg); color: var(--stmt-total-ink);
            font-weight: 700; }
.stmt-nil { color: var(--muted); opacity: .55; }

/* Depth tiers: weight declines as the tree deepens, so captions read as headers
   and detail recedes instead of forty rows shouting equally. */
.stmt-row.stmt-d0 > td { font-weight: 600; }
.stmt-row.stmt-d0 > td.stmt-acct { box-shadow: 1px 0 0 var(--line), inset 3px 0 0 var(--blue-primary); }
.stmt-caption > td, .stmt-subtotal > td { background: var(--stmt-sum-bg); }
/* Prefixed with .stmt-table tbody so these out-specify the plain cell rules above
   — without it a caption row's budget cells stayed the ordinary tint and the sum
   rows lost their step up in weight exactly where the eye needs it. */
.stmt-table tbody tr.stmt-caption > td.stmt-budget,
.stmt-table tbody tr.stmt-subtotal > td.stmt-budget,
.stmt-table tbody tr.stmt-caption > td.stmt-fy,
.stmt-table tbody tr.stmt-subtotal > td.stmt-fy {
            background: var(--stmt-budget-sum); }
.stmt-table tbody tr.stmt-caption > td.stmt-ytd,
.stmt-table tbody tr.stmt-subtotal > td.stmt-ytd {
            background: var(--stmt-total-sum); }
.stmt-subtotal > td { border-top: 1px solid var(--blue-primary); }
.stmt-row.stmt-d1 > td { font-weight: 500; }
.stmt-row.stmt-d2 > td { font-size: 11.5px; color: var(--muted); }
.stmt-row.stmt-d2 .stmt-name { color: var(--muted); }

/* Ratio rows are commentary on the row above, not another figure in the column:
   italic, plain ground, no provenance tint of their own. The balance check joins
   them visually while staying in kroner. */
/* NOT .stmt-check — that class is the toolbar's checkbox label, which is
   display:flex. Reusing it on a <tr> flexed the row and dropped all sixteen
   cells out of table layout: the account column rendered 250px on that row and
   748px on every other, and the numbers slid left of their headers. */
.stmt-ratio > td, .stmt-balcheck > td { font-style: italic; font-weight: 500 !important;
            background: var(--surface) !important; color: var(--muted) !important;
            border-bottom: 1px solid var(--line); }

.stmt-table tbody tr:hover > td { background: var(--surface-2) !important; }

.stmt-toggle { display: inline-flex; width: 14px; justify-content: center;
            color: var(--blue-primary); font-size: 9px; cursor: pointer; user-select: none;
            margin-right: 4px; }
.stmt-toggle.leaf { visibility: hidden; cursor: default; }
.stmt-code { color: var(--muted); font-weight: 400; font-size: 10.5px; margin-left: 7px; }

/* Split an account into detail lines. Hidden until the row is hovered or the
   button itself is focused: it sits on every P&L account row, and sixteen
   permanently visible + signs would compete with the figures, which are what
   the table is for. Kept reachable by keyboard even so. */
.stmt-add-detail { opacity: 0; margin-left: 7px; padding: 0 5px; border-radius: 4px;
            border: 1px dashed var(--blue-primary); background: transparent;
            color: var(--blue-primary); font: 600 10.5px/1.45 inherit; cursor: pointer;
            transition: opacity .12s ease, background .12s ease; }
.stmt-row:hover .stmt-add-detail,
.stmt-add-detail:focus-visible { opacity: 1; }
.stmt-add-detail:hover { background: color-mix(in srgb, var(--blue-primary) 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .stmt-add-detail { transition: none; } }

/* The ✕ that removes a detail line. Same hover-to-reveal manners as the + it
   undoes, in a warning colour rather than the brand blue, so the destructive
   control never reads as just another action. A driver-managed line keeps the
   control in a muted, plainly inert state: hiding it would leave the user
   hunting for a delete that lives in Headcount Planning instead. */
.stmt-del-detail { opacity: 0; margin-left: 5px; padding: 0 5px; border-radius: 4px;
            border: 1px dashed #c4463c; background: transparent;
            color: #d4695f; font: 600 10.5px/1.45 inherit; cursor: pointer;
            transition: opacity .12s ease, background .12s ease; }
.stmt-row:hover .stmt-del-detail,
.stmt-del-detail:focus-visible { opacity: 1; }
.stmt-del-detail:hover { background: color-mix(in srgb, #c4463c 18%, transparent); }
.stmt-del-detail.is-locked { border-color: var(--line); color: var(--muted); cursor: default; }
.stmt-del-detail.is-locked:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) { .stmt-del-detail { transition: none; } }

.stmt-opening-cash { width: 110px; text-align: right; font-variant-numeric: tabular-nums;
            background: var(--surface-2); color: var(--ink); font-weight: 600;
            border: 1px solid var(--gold); border-radius: 5px; padding: 5px 8px;
            font-family: inherit; font-size: 0.82rem; }
.stmt-opening-cash:focus { outline: 2px solid var(--blue-primary); outline-offset: 1px; }

/* Currency picker on the Assumptions page. Sits under the page description, quiet
   enough not to compete with the assumptions themselves. */
.currency-pick { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.currency-pick label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em;
            font-weight: 700; color: var(--muted); }
.currency-pick select { background: var(--surface-2); color: var(--ink);
            border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px;
            font-family: inherit; font-size: 0.85rem; font-weight: 600; }
.currency-pick select:focus { outline: 2px solid var(--blue-primary); outline-offset: 1px; }
.currency-note { font-size: 0.76rem; color: var(--muted); font-style: italic; }

.stmt-hidden { display: none; }
.stmt-foot { margin: 10px 2px 0; font-size: 0.75rem; color: var(--muted); font-style: italic; }

/* Opening balance sheet strip (Balance Sheet view, base year). */
.stmt-pyeb { margin: 14px 2px 0; padding: 12px 14px; border: 1px solid var(--line);
             border-radius: 8px; background: color-mix(in srgb, var(--panel, #0f1a2b) 60%, transparent); }
.stmt-pyeb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stmt-pyeb-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em;
                   font-weight: 700; color: var(--muted); }
.stmt-pyeb-hint { font-size: 0.75rem; color: var(--muted); font-style: italic; }
.stmt-pyeb-note { margin-top: 8px; font-size: 0.8rem; line-height: 1.45; display: none; }
.stmt-pyeb-note.ok, .stmt-pyeb-note.warn { display: block; }
.stmt-pyeb-note.ok { color: var(--muted); }
.stmt-pyeb-note.warn { color: #fca5a5; }
.stmt-pyeb-note.warn .stmt-btn { margin-left: 8px; }
/* The typeable Opening cell — same look as a month cell, but it is not part of
   the month grid, so it does not take part in arrow navigation or fill handles. */
.stmt-open-cell { width: 100%; box-sizing: border-box; background: transparent; border: 0;
                  color: inherit; font: inherit; text-align: right; padding: 0 4px; outline: none; }
.stmt-open-cell:focus { background: color-mix(in srgb, var(--gold, #d6a94b) 18%, transparent); }

.nav-badge-new { margin-left: auto; font-size: 8.5px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .05em; padding: 1px 6px; border-radius: 999px;
            background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }

/* A KPI group caption: a band across the whole row, no figures of its own. Solid
   rather than tinted, because it is structure — it must not read as a column
   provenance colour. */
.stmt-table tbody tr.stmt-group > td {
            background: var(--thead) !important; color: #cfe0f2;
            font-weight: 700; font-size: 10.5px; text-transform: uppercase;
            letter-spacing: .05em; padding-top: 8px; padding-bottom: 8px; }
.stmt-table tbody tr.stmt-group > td.stmt-acct { box-shadow: 1px 0 0 var(--line); }
.stmt-table tbody tr.stmt-group:hover > td { background: var(--thead) !important; }

/* == DASHBOARD PROTOTYPE — "command deck" ====================================
   Futuristic by structure, not by chrome. The 2026 fintech consensus is that
   neon-and-gradient dashboards read as crypto terminals, and that in financial
   UI calm is credibility — so there is exactly one glow on this page, behind the
   hero, and none of it touches a data area. Everything else earns its modern
   feel from space, hairlines, tabular figures and a single arrival animation. */
#dash2 { --d2-gap: 18px; }

/* ── Hero: the "am I okay?" answer, and nothing competing with it ── */
.d2-hero { position: relative; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    padding: 30px 32px; margin-bottom: var(--d2-gap);
    background: linear-gradient(160deg, #17222e 0%, var(--surface) 62%);
    border: 1px solid var(--line); border-radius: 14px; }
/* The one piece of decoration on the page, kept far from any figure. */
.d2-hero-glow { position: absolute; top: -160px; right: -120px; width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(74,144,221,.20) 0%, rgba(74,144,221,0) 68%);
    pointer-events: none; }
.d2-hero-main { position: relative; min-width: 320px; }
.d2-eyebrow { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); }
.d2-hero-num { margin: 0; font-size: 62px; line-height: 1; font-weight: 700; letter-spacing: -0.02em;
    color: var(--ink); font-variant-numeric: tabular-nums; }
.d2-hero-unit { margin-left: 12px; font-size: 17px; font-weight: 600; color: var(--muted);
    letter-spacing: 0; }
.d2-hero-say { margin: 14px 0 0; max-width: 52ch; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.d2-hero-say strong { color: var(--ink); font-weight: 600; }
.d2-hero-side { position: relative; display: flex; gap: 26px; padding-bottom: 6px; }
.d2-hero-stat { display: flex; flex-direction: column; gap: 4px; }
.d2-hero-stat span { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); }
.d2-hero-stat strong { font-size: 19px; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; }

/* ── Blocks ── */
.d2-block { margin-bottom: var(--d2-gap); }
.d2-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; margin-bottom: 10px; }
.d2-block-head h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink); }
.d2-block-sub { font-size: 11.5px; color: var(--muted); font-style: italic; }

/* ── Insight cards: a sentence, its evidence, and a way in ── */
.d2-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.d2-insight { position: relative; padding: 16px 17px 14px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 9px;
    animation: d2rise .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--d2-delay, 0ms); }
/* A 2px rail rather than a tinted card: the severity is legible without the
   whole surface changing colour and fighting the figures inside it. */
.d2-insight::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
    border-radius: 2px; }
.d2-insight--bad::before  { background: #c4463c; }
.d2-insight--warn::before { background: #b58524; }
.d2-insight--good::before { background: #2f9e63; }
.d2-insight h4 { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.d2-insight p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.d2-insight-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: auto; padding-top: 6px; }
.d2-evidence { font-size: 11.5px; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; }
.d2-link { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 600; color: #4a90dd; }
.d2-link:hover { text-decoration: underline; }

/* Status always carries an icon and a word: the three status hues sit inside the
   colourblind warning band against one another, so colour alone will not do. */
.d2-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px;
    border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; border: 1px solid; }
.d2-chip i { font-style: normal; font-size: 9px; }
.d2-chip--good { color: #67c99a; border-color: rgba(47,158,99,.45); background: rgba(47,158,99,.13); }
.d2-chip--warn { color: #e0b45f; border-color: rgba(181,133,36,.45); background: rgba(181,133,36,.13); }
.d2-chip--bad  { color: #e88b83; border-color: rgba(196,70,60,.45);  background: rgba(196,70,60,.13); }

/* ── The one chart ── */
.d2-chart { position: relative; padding: 12px 10px 4px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; }
.d2-chart-svg { display: block; width: 100%; height: 260px; }
.d2-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); }
.d2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.d2-key { width: 16px; height: 0; border-top-width: 2px; border-top-style: solid; }
.d2-key--line { border-top-color: #4a90dd; }
.d2-key--dash { border-top-color: #b58524; border-top-style: dashed; }
.d2-tip { position: absolute; top: 14px; transform: translateX(-50%); pointer-events: none;
    display: flex; flex-direction: column; gap: 1px; padding: 7px 11px; border-radius: 8px;
    background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0,0,0,.5);
    font-size: 11.5px; white-space: nowrap; z-index: 3; }
.d2-tip strong { color: var(--ink); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.d2-tip span { color: var(--ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.d2-tip em { color: var(--muted); font-style: normal; font-size: 10.5px; }

/* ── KPI rail: six tiles, not thirteen cards ── */
.d2-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.d2-tile { padding: 14px 15px 12px; border-radius: 12px; background: var(--surface);
    border: 1px solid var(--line);
    animation: d2rise .45s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--d2-delay, 0ms); }
.d2-tile:hover { border-color: color-mix(in srgb, #4a90dd 45%, var(--line)); }
.d2-tile-label { margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); }
.d2-tile-value { margin: 0; font-size: 27px; font-weight: 700; line-height: 1; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.d2-tile-value span { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted);
    letter-spacing: 0; }
.d2-tile-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
    margin-top: 10px; }
.d2-delta { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.d2-delta--up { color: #67c99a; }
.d2-delta--down { color: #e88b83; }

/* ── Watchlist: a queue, which is what it actually is ── */
.d2-watch { list-style: none; margin: 0; padding: 0; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.d2-watch-row { display: grid; grid-template-columns: 132px 1fr 110px 200px; align-items: center;
    gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.d2-watch-row:last-child { border-bottom: 0; }
.d2-watch-row:hover { background: var(--surface-2); }
.d2-watch-what { color: var(--ink); font-weight: 600; }
.d2-watch-when { color: var(--muted); font-size: 11.5px; }
.d2-watch-detail { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.d2-foot { margin: 4px 2px 0; font-size: 11.5px; font-style: italic; color: var(--muted); }
.d2-spark-line { }

@keyframes d2rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .d2-insight, .d2-tile { animation: none; }
}

@media (max-width: 900px) {
    .d2-hero-num { font-size: 44px; }
    .d2-watch-row { grid-template-columns: 108px 1fr; }
    .d2-watch-when, .d2-watch-detail { display: none; }
}

/* Expansion blocks */
.d2-tile--dual .d2-tile-value { font-size: 24px; }
.d2-ytd { font-size: 12px; font-weight: 700; color: #4a90dd; font-variant-numeric: tabular-nums; }
.d2-ytd em { font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--muted); }
.d2-prog { position: relative; height: 4px; margin-top: 10px; border-radius: 2px;
    background: var(--surface-2); overflow: visible; }
.d2-prog-bar { height: 100%; border-radius: 2px; background: #4a90dd; }
/* Where the year itself has got to, so "56% of plan" has something to mean. */
.d2-prog-mark { position: absolute; top: -3px; width: 1px; height: 10px; background: var(--muted); opacity: .8; }
.d2-prog-cap { margin: 6px 0 0; font-size: 10.5px; color: var(--muted); }

.d2-bridge-svg { display: block; width: 100%; height: auto; }
.d2-chart--flat { padding: 14px 16px; }
.d2-key--bar { width: 11px; height: 11px; border: 0; border-radius: 2px; background: #4a90dd; }
.d2-key--bud { background: #b58524; opacity: .6; }
.d2-key--eb { width: 16px; height: 0; border-top: 2px solid #159c5f; }

.d2-pair { position: relative; }
.d2-pair-row { position: relative; margin-bottom: 4px; }
.d2-pair-label { position: absolute; top: 0; right: 6px; z-index: 2; font-size: 10px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.d2-pair-svg { display: block; width: 100%; height: 104px; }
.d2-pair-axis { position: relative; height: 16px; }
.d2-pair-axis span { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--muted); }

/* Per-month value labels on the headcount/cost pair, so the chart reads without
   a mouse — the only way it works in a printed board pack.

   HTML, not SVG <text>: those panels are preserveAspectRatio="none" and stretch
   to whatever width the card has, which stretches letterforms along with the
   shapes. A percentage position maps exactly onto the viewBox in both axes and
   leaves the type alone. */
.d2-pair-plot { position: relative; }
.d2-pv { position: absolute; font-size: 10px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.d2-pv--axis { left: 0; width: 5.78%; box-sizing: border-box; padding-right: 9px;
    text-align: right; transform: translateY(-50%);
    font-size: 9.5px; font-weight: 600; color: var(--muted); }
/* Above its point, clear of the marker. */
.d2-pv--over { transform: translate(-50%, -150%); color: var(--ink);
    text-shadow: 0 1px 3px var(--surface), 0 0 2px var(--surface); }
/* Inside the bar, just under the top edge — used when the bar is tall enough to
   hold it, which for headcount is most of the year. */
.d2-pv--in { transform: translate(-50%, 55%); color: #fff; }

.d2-mix-row { display: grid; grid-template-columns: 150px 1fr 74px 58px; align-items: center; gap: 12px;
    padding: 6px 0; font-size: 12.5px; }
.d2-mix-name { color: var(--ink); }
.d2-mix-track { height: 9px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.d2-mix-track i { display: block; height: 100%; border-radius: 3px; }
.d2-mix-val, .d2-mix-pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.d2-mix-val { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) {
    .d2-mix-row { grid-template-columns: 118px 1fr 62px; }
    .d2-mix-pct { display: none; }
}

/* The three supporting stats now read as siblings of the headline number rather
   than as a caption beside it: same eyebrow treatment, same tabular figures,
   separated by hairlines so they group without a box. */
.d2-hero-side { gap: 0; align-items: stretch; padding-bottom: 2px; }
.d2-hero-stat { padding: 0 26px; border-left: 1px solid var(--line); justify-content: flex-end; gap: 7px; }
.d2-hero-stat:first-child { border-left: 0; }
.d2-hero-stat span { font-size: 10.5px; letter-spacing: .1em; }
.d2-hero-stat strong { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.015em; }

/* Two series need a key each in the tooltip. */
.d2-tip span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
    color: var(--muted); }
.d2-tip span i { width: 8px; height: 8px; border-radius: 2px; }
.d2-tip span b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.d2-key--rev { width: 16px; height: 0; border-top: 2px solid #4a90dd; }

/* ── Condensed statement recap ── */
.d2-recaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; }
.d2-recap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.d2-recap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 15px; background: var(--thead); border-bottom: 1px solid var(--line); }
.d2-recap-head h4 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #cfe0f2; }
.d2-recap-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.d2-recap-table th { padding: 8px 14px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted); text-align: right; border-bottom: 1px solid var(--line); }
.d2-recap-table th:first-child { text-align: left; }
.d2-recap-table td { padding: 7px 14px; font-size: 12.5px; text-align: right; color: var(--ink);
    font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }
.d2-recap-table td:first-child { text-align: left; color: var(--muted); }
.d2-recap-table tr:last-child td { border-bottom: 0; }
.d2-recap-group td { background: var(--surface-2); color: var(--muted) !important; font-size: 9.5px;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left !important; }
.d2-recap-sum td { font-weight: 700; background: color-mix(in srgb, #4a90dd 8%, var(--surface)); }
.d2-recap-sum td:first-child { color: var(--ink) !important; }
/* Negatives in parentheses AND a muted red — the parentheses carry it for anyone
   who cannot see the hue. */
.d2-neg { color: #e88b83 !important; }

/* ── Variance ── */
.d2-scroll-x { overflow-x: auto; }
.d2-var-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; }
.d2-var-table th { padding: 7px 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted); text-align: right; border-bottom: 1px solid var(--line); }
.d2-var-table th:first-child { text-align: left; }
.d2-var-grp { text-align: center !important; color: #cfe0f2 !important; background: var(--thead);
    border-bottom: 1px solid var(--line); }
.d2-var-grp--ytd { background: #23446b; }
.d2-var-table td { padding: 6px 12px; font-size: 12.5px; text-align: right; color: var(--ink);
    font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }
.d2-var-table td:first-child { text-align: left; color: var(--muted); }
.d2-var-ytd { background: color-mix(in srgb, #4a90dd 7%, var(--surface)); }
.d2-var-v { font-weight: 700; }
.d2-var-good { color: #67c99a; }
.d2-var-bad  { color: #e88b83; }

/* ── Health checks & assumptions, side by side ── */
.d2-halves { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.d2-half { margin-bottom: 0; }
.d2-health { list-style: none; margin: 0; padding: 0; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.d2-health-row { display: grid; grid-template-columns: 128px 1fr; gap: 10px 12px; align-items: center;
    padding: 11px 15px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.d2-health-row:last-child { border-bottom: 0; }
.d2-health-row--flag { background: color-mix(in srgb, #b58524 9%, var(--surface)); }
.d2-health-t { color: var(--ink); font-weight: 600; }
.d2-health-d { grid-column: 2; margin-top: -6px; color: var(--muted); font-size: 11.5px; }

.d2-assum { width: 100%; border-collapse: separate; border-spacing: 0; }
.d2-assum th { padding: 7px 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted); text-align: right; border-bottom: 1px solid var(--line); }
.d2-assum th:first-child, .d2-assum th:last-child { text-align: left; }
.d2-assum td { padding: 7px 10px; font-size: 12.5px; text-align: right; color: var(--ink);
    font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }
.d2-assum td:first-child { text-align: left; color: var(--ink); font-weight: 600; }
.d2-assum tr:last-child td { border-bottom: 0; }
.d2-assum-drives { text-align: left !important; color: var(--muted) !important; font-weight: 400 !important;
    font-size: 11.5px; }

/* ── Custom KPI shelf ── */
.d2-custom { background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; }
.d2-custom-empty { display: flex; align-items: center; justify-content: space-between; gap: 20px;
    flex-wrap: wrap; padding: 18px 20px; }
.d2-custom-empty p { margin: 0; max-width: 62ch; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.d2-add { font: inherit; font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 8px;
    border: 1px solid #4a90dd; background: color-mix(in srgb, #4a90dd 14%, transparent);
    color: #8cc0f0; cursor: pointer; white-space: nowrap; }
.d2-add:hover { background: color-mix(in srgb, #4a90dd 24%, transparent); }

@media (max-width: 900px) {
    .d2-hero-side { flex-wrap: wrap; gap: 14px; }
    .d2-hero-stat { padding: 0 14px 0 0; border-left: 0; }
    .d2-hero-stat strong { font-size: 24px; }
}

/* Hero stats: siblings of the headline, and unmistakably the year-end figures. */
.d2-hero-side { flex-direction: column; align-items: flex-end; gap: 10px; }
.d2-hero-side-cap { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); opacity: .85; }
.d2-hero-stats { display: flex; align-items: stretch; }
.d2-hero-stat strong { font-size: 42px; display: inline-flex; align-items: baseline; gap: 4px; }
.d2-hero-stat strong em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--muted); }

/* Variance period controls */
.d2-var-controls { display: flex; gap: 14px; margin-bottom: 10px; }
.d2-var-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 9.5px;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.d2-var-controls select { font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
.d2-var-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 12px;
    color: #e0b45f; background: color-mix(in srgb, #b58524 12%, var(--surface));
    border: 1px solid rgba(181,133,36,.35); }
.d2-var-nil { color: var(--muted); opacity: .5; }

@media (max-width: 900px) { .d2-hero-stat strong { font-size: 28px; } }

/* Year bar: the page-level control, so it sits above the hero and looks like a
   page control rather than a widget belonging to whatever block is nearest. */
.d2-yearbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.d2-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
    background: var(--surface); }
.d2-seg button { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 20px; border: 0;
    background: transparent; color: var(--muted); cursor: pointer; border-right: 1px solid var(--line);
    font-variant-numeric: tabular-nums; }
.d2-seg button:last-child { border-right: 0; }
.d2-seg button:hover { background: var(--surface-2); color: var(--ink); }
.d2-seg button.on { background: #4a90dd; color: #0b1017; }
.d2-yearbar-note { font-size: 12px; color: var(--muted); font-style: italic; }

/* Panel captions now sit above their plot in normal flow. */
.d2-pair-label { position: static; display: block; margin: 0 0 3px 56px; }
.d2-pair-row { margin-bottom: 10px; }
.d2-pair-svg { height: 96px; }

.d2-ytd--none { color: var(--muted); font-weight: 500; font-style: italic; font-size: 11.5px; }

/* The provenance band: names the two halves of the year outright, above the
   month headers. The tint says two things differ; the band says which is fact
   and which is plan, which is the first question anyone asks of a monthly
   statement. Sticky at the top with the month row sitting directly beneath it. */
.stmt-table thead tr.stmt-band th { position: sticky; top: 0; z-index: 4;
    padding: 5px 11px; font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; text-align: center; white-space: nowrap;
    border-bottom: 1px solid var(--line); }
.stmt-table thead tr.stmt-band th.stmt-band-pad { background: var(--thead); }
.stmt-table thead tr.stmt-band th.stmt-band-actual { background: #1d2b3a; color: #b9cfe4; }
.stmt-table thead tr.stmt-band th.stmt-band-budget { background: #3a2f1e; color: #e8c887; }
/* The month row sits below the band, so its sticky offset is the band height. */
.stmt-table thead tr:not(.stmt-band) th { top: 26px; z-index: 3; }  /* = measured band height */
.stmt-table thead tr:not(.stmt-band) th.stmt-acct-col { z-index: 5; }
.stmt-table thead tr.stmt-band th:first-child { left: 0; z-index: 6; }

.stmt-btn--primary { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
    background: color-mix(in srgb, var(--gold) 12%, var(--surface-2)); }
.stmt-btn--primary:hover { color: var(--gold); border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 20%, var(--surface-2)); }

/* Editable cells look typed-into-able without shouting: a slightly raised ground
   and a caret. The provenance tint still shows through, because whether a cell is
   actual or plan matters more than whether it is editable. */
.stmt-table td.stmt-editable { padding: 0; position: relative; }
input.stmt-cell { width: 100%; border: 0; background: transparent; color: inherit;
    font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
    text-align: right; padding: 5px 11px; border-radius: 0; outline: none; }
input.stmt-cell:hover { background: rgba(255,255,255,.045); }
input.stmt-cell:focus, input.stmt-cell--editing {
    background: var(--surface-2);
    box-shadow: inset 0 0 0 2px var(--blue-primary); }
.stmt-table tbody tr:hover td.stmt-editable { background: var(--surface-2) !important; }
.stmt-foot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
    padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--ink);
    font-style: normal; }

/* Fill handle: a small square at the corner of the focused cell, as in a
   spreadsheet. Drag it along the row to copy the value or the formula. */
.stmt-fill-handle { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;
    background: var(--blue-primary); border: 1px solid var(--surface); border-radius: 1px;
    cursor: crosshair; z-index: 4; }
td.stmt-fill-target { box-shadow: inset 0 0 0 1px var(--blue-primary); }
td.stmt-fill-target input.stmt-cell { background: color-mix(in srgb, var(--blue-primary) 14%, transparent); }

/* The remove control on a custom KPI tile: present but quiet until hovered. */
.d2-kpi-x { float: right; background: none; border: 0; padding: 0 2px; cursor: pointer;
    font-size: 13px; line-height: 1; color: var(--muted); opacity: 0; transition: opacity .12s; }
.d2-tile:hover .d2-kpi-x { opacity: .8; }
.d2-kpi-x:hover { color: #e88b83; opacity: 1; }
.d2-block-head .d2-add { margin-left: auto; }

/* The cell a formula is currently pointing at. Excel's marching ants, without
   the marching — a dashed accent outline reads as "this is a reference being
   built", distinct from the solid border of the cell being edited. */
.fx-point-target {
    outline: 2px dashed var(--gold, #C4973B);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--gold, #C4973B) 12%, transparent);
}