/* ZiePieBooks cv- design system — 11 app stylesheets concatenated VERBATIM in App.razor bundle order. Generated for static demo-html. MudBlazor excluded per decision. */


/* ==================== tokens.css ==================== */
/* tokens.css — design tokens + base reset, lifted from HTML-Templates/shared.css.
   All other stylesheets (auth-layout.css, portal.css, scoped page CSS) consume these. */

:root {
    /* Brand */
    --brand-primary: #2ED4A5;
    --brand-primary-strong: #14B88A;
    --brand-primary-soft: #E5FAF2;
    --brand-dark: #0B0F1E;
    --brand-dark-alt: #111827;
    --brand-accent: #A78BFA;
    --brand-accent-soft: #F1ECFE;

    /* Surfaces */
    --surface-primary: #FFFFFF;
    --surface-secondary: #F7F8FA;
    --surface-tertiary: #EEF1F5;
    --surface-sunken: #F1F3F6;

    /* Text */
    --text-primary: #0B0F1E;
    --text-secondary: #475569;
    --text-tertiary: #64748B;   /* slate-500 — darkened from #94A3B8 for legibility */
    --text-on-dark: #E2E8F0;
    --text-on-dark-muted: #94A3B8;

    /* Borders */
    --border-default: #E2E8F0;
    --border-strong: #CBD5E1;
    --border-dark: #1F2937;

    /* Status */
    --status-success: #10B981;
    --status-success-soft: #D1FAE5;
    --status-warning: #F59E0B;
    --status-warning-soft: #FEF3C7;
    --status-danger: #EF4444;
    --status-danger-soft: #FEE2E2;
    --status-info: #3B82F6;
    --status-info-soft: #DBEAFE;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows */
    --shadow-focus: 0 0 0 3px rgba(46, 212, 165, 0.25);
    --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.2);
    --shadow-card: 0 2px 8px rgba(11, 15, 30, 0.04);
    --shadow-elevated: 0 8px 24px rgba(11, 15, 30, 0.08);
    --shadow-drawer: -12px 0 32px rgba(11, 15, 30, 0.12);

    /* Layout dims */
    --top-nav-height: 56px;
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
}

[data-theme="dark"] {
    --surface-primary: #111827;
    --surface-secondary: #1F2937;
    --surface-tertiary: #374151;
    --surface-sunken: #0B0F1E;
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-tertiary: #B6BECB;   /* lightened from #9CA3AF for legibility on dark surfaces */
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.18);
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-drawer: -12px 0 32px rgba(0, 0, 0, 0.5);
    --brand-primary-soft: rgba(46, 212, 165, 0.12);
    --brand-accent-soft: rgba(167, 139, 250, 0.14);
    --status-success-soft: rgba(16, 185, 129, 0.18);
    --status-warning-soft: rgba(245, 158, 11, 0.18);
    --status-danger-soft: rgba(239, 68, 68, 0.18);
    --status-info-soft: rgba(59, 130, 246, 0.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    min-height: 100%;
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--surface-secondary);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

/* ==================== auth-layout.css ==================== */
/* auth-layout.css — split-screen + form components for /auth/* and /onboarding/*.
   Lifted directly from HTML-Templates/screen-01..03 to keep the visual port faithful. */

/* ----------- Layout — split screen ----------- */
.page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.brand-panel {
    background: var(--brand-dark);
    color: var(--text-on-dark);
    padding: 40px 56px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.brand-panel::before {
    content: "";
    position: absolute;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(46, 212, 165, 0.16), transparent 70%);
    right: -180px;
    top: -160px;
    pointer-events: none;
}
.brand-panel::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(167, 139, 250, 0.12), transparent 70%);
    left: -140px;
    bottom: -120px;
    pointer-events: none;
}
.brand-panel > * { position: relative; z-index: 1; }

.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: 36px; height: 36px; flex-shrink: 0; }
.logo-wordmark {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.15;
    color: #FFFFFF;
}
.logo-wordmark .line-1 { color: var(--brand-primary); }
.logo-wordmark .line-2 { color: #FFFFFF; }

.brand-hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 460px;
}
.brand-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-primary);
}
.brand-headline {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(32px, 3.2vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}
.brand-headline em { font-style: italic; color: var(--brand-primary); }
.brand-subhead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-on-dark-muted);
    max-width: 420px;
}
.brand-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-on-dark-muted);
    letter-spacing: 0.05em;
}
.brand-footer a { color: var(--text-on-dark-muted); transition: color 0.15s ease; }
.brand-footer a:hover { color: #FFFFFF; }

.brand-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 12px;
}
.brand-stat {
    padding-top: 14px;
    border-top: 1px solid var(--border-dark);
}
.brand-stat-value {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 28px;
    color: #FFFFFF;
    line-height: 1.1;
}
.brand-stat-label {
    font-size: 12px;
    color: var(--text-on-dark-muted);
    margin-top: 4px;
}

/* ----------- Form Panel ----------- */
.form-panel {
    padding: 40px 56px;
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
}
.form-panel-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.form-panel-top a {
    color: var(--brand-primary-strong);
    font-weight: 500;
}
.form-panel-top a:hover { text-decoration: underline; }

.form-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}
.form {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
}
.form-header { margin-bottom: 28px; }
.form-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}
.form-title {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.form-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ----------- Form fields ----------- */
.field { margin-bottom: 16px; }
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.field-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}
.field-input, .field-select, .field-textarea {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--text-tertiary); }
.field-input:hover:not(:disabled), .field-select:hover:not(:disabled), .field-textarea:hover:not(:disabled) { border-color: var(--border-strong); }
.field-input:focus, .field-select:focus, .field-textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
}
.field-input:disabled, .field-select:disabled, .field-textarea:disabled {
    background: var(--surface-secondary);
    color: var(--text-tertiary);
    cursor: not-allowed;
}
.field-input.is-error, .field-select.is-error { border-color: var(--status-danger); }
.field-input.is-error:focus, .field-select.is-error:focus { box-shadow: var(--shadow-focus-danger); }

.field-error {
    margin-top: 8px;
    font-size: 13px;
    color: var(--status-danger);
    display: none;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.4;
}
.field-error.is-visible { display: flex; }
.field-error svg { flex-shrink: 0; margin-top: 2px; }

/* OTP / MFA code input */
.code-inputs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
}
.code-input {
    width: 52px;
    height: 60px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.code-input:hover { border-color: var(--border-strong); }
.code-input:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
}
.code-input.is-error { border-color: var(--status-danger); }
.code-input.is-filled { border-color: var(--brand-primary-strong); }

@media (max-width: 720px) {
    .code-input { width: 42px; height: 52px; font-size: 20px; }
    .code-inputs { gap: 6px; }
}

/* ----------- Buttons ----------- */
.btn {
    position: relative;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #FFFFFF;
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn:hover:not(:disabled) {
    background: var(--brand-primary-strong);
    border-color: var(--brand-primary-strong);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--surface-secondary);
    border-color: var(--border-strong);
}

.btn-loading .btn-label { opacity: 0; }
.btn-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.btn-secondary.btn-loading::after { border: 2px solid rgba(11, 15, 30, 0.2); border-top-color: var(--text-primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.form-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    transition: color 0.12s ease;
    width: auto;
    text-decoration: none;
}
.back-link:hover { color: var(--text-primary); text-decoration: none; }

/* ----------- Legal / helper ----------- */
.legal-text {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
    text-align: center;
}
.legal-text a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-decoration-color: var(--border-default);
    text-underline-offset: 2px;
}
.legal-text a:hover {
    color: var(--text-primary);
    text-decoration-color: var(--text-secondary);
}

/* ----------- Alerts ----------- */
.alert {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
}
.alert svg { flex-shrink: 0; margin-top: 1px; }
.alert-info {
    background: var(--status-info-soft);
    border-color: #BFDBFE;
    color: #1E40AF;
}
.alert-warning {
    background: var(--status-warning-soft);
    border-color: #FDE68A;
    color: #92400E;
}
.alert-success {
    background: var(--status-success-soft);
    border-color: #A7F3D0;
    color: #065F46;
}
.alert-danger {
    background: var(--status-danger-soft);
    border-color: #FECACA;
    color: #991B1B;
}
.alert strong { font-weight: 600; }

/* ----------- Animations ----------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.anim { opacity: 0; animation: fadeUp 0.5s ease-out forwards; }
.anim-1 { animation-delay: 0.05s; }
.anim-2 { animation-delay: 0.12s; }
.anim-3 { animation-delay: 0.22s; }
.anim-4 { animation-delay: 0.32s; }
.anim-5 { animation-delay: 0.42s; }
.anim-6 { animation-delay: 0.52s; }

/* ----------- Email chip (used on 02a + 02b) ----------- */
.email-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 20px;
}
.email-chip a {
    background: none;
    border: none;
    color: var(--brand-primary-strong);
    font-weight: 500;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}
.email-chip a:hover { background: var(--brand-primary-soft); text-decoration: none; }

/* ----------- Password field ----------- */
.password-field { position: relative; }
.password-toggle, .pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.12s;
}
.password-toggle:hover, .pw-toggle:hover { color: var(--text-primary); background: var(--surface-secondary); }

.forgot-link {
    display: block;
    text-align: right;
    font-size: 13px;
    color: var(--brand-primary-strong);
    font-weight: 500;
    margin-top: -4px;
    margin-bottom: 20px;
    text-decoration: none;
}
.forgot-link:hover { text-decoration: underline; }

/* ----------- Strength meter + requirement list ----------- */
.strength-meter { margin-top: 8px; margin-bottom: 4px; }
.strength-bar-track { height: 4px; background: var(--surface-tertiary); border-radius: 2px; overflow: hidden; margin-bottom: 5px; }
.strength-bar-fill { height: 100%; border-radius: 2px; transition: width .3s ease, background .3s ease; width: 0%; }
.strength-bar-fill.s1 { width: 25%; background: var(--status-danger); }
.strength-bar-fill.s2 { width: 50%; background: var(--status-warning); }
.strength-bar-fill.s3 { width: 75%; background: var(--brand-primary); }
.strength-bar-fill.s4 { width: 100%; background: var(--status-success); }
.strength-label { font-size: 12px; font-weight: 500; }
.strength-label.s0 { color: var(--text-tertiary); }
.strength-label.s1 { color: var(--status-danger); }
.strength-label.s2 { color: var(--status-warning); }
.strength-label.s3 { color: var(--brand-primary-strong); }
.strength-label.s4 { color: var(--status-success); }

.req-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin: 10px 0 18px; }
.req-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-tertiary); transition: color .2s; }
.req-item.met { color: var(--status-success); }
.req-icon { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.req-item.met .req-icon { background: var(--status-success); border-color: var(--status-success); color: #fff; }
/* Live password-match: red "don't match" state. */
.req-item.unmet { color: var(--status-danger); }
.req-item.unmet .req-icon { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.req-item.unmet .req-icon svg { display: none; }
.req-item.unmet .req-icon::after { content: '\00D7'; font-size: 11px; line-height: 1; color: #fff; }

/* ----------- Resend row + expiry hint ----------- */
.resend-row {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}
.resend-row button {
    background: none;
    border: none;
    color: var(--brand-primary-strong);
    font-weight: 500;
    padding: 2px 4px;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}
.resend-row button:hover:not(:disabled) { text-decoration: underline; }
.resend-row button:disabled { color: var(--text-tertiary); cursor: not-allowed; }

.expiry-hint {
    margin-top: 6px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

.global-error {
    margin-bottom: 16px;
    display: flex;
}

/* ----------- Firm card (01b) ----------- */
.firm-card {
    padding: 20px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.firm-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--brand-dark);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.firm-info-name {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 17px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.firm-info-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
}

/* ----------- Personal email notice (01 brand panel) ----------- */
.personal-email-notice {
    display: none;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 8px;
    margin-top: 20px;
    animation: fadeUp 0.3s ease-out forwards;
}
.personal-email-notice.is-visible { display: flex; }
.personal-email-notice-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--brand-accent);
    margin-top: 1px;
}
.personal-email-notice-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-on-dark-muted);
}
.personal-email-notice-text strong {
    color: #E2E8F0;
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

/* ----------- Success mark (02e) ----------- */
.success-mark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--status-success-soft);
    border: 2px solid var(--status-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--status-success);
}

/* ----------- Responsive ----------- */
@media (max-width: 920px) {
    .page { grid-template-columns: 1fr; }
    .brand-panel { display: none; }
    .form-panel { padding: 32px 24px; }
}

/* ==================== portal.css ==================== */
/* portal.css — full bookkeeper-portal shell + component library.
   Lifted from HTML-Templates Team / Businesses / Customers mocks.
   All rules are scoped under .portal-page so they don't conflict with the auth pages. */

.portal-page { background: var(--surface-secondary); }
.portal-page svg { display: block; }

/* ------------------------------ Eng context (bookkeeper top bar) ------------------------------ */
.portal-page .eng-context { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.portal-page .eng-avatar { width: 28px; height: 28px; border-radius: 7px; background: var(--brand-dark); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.portal-page .eng-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.portal-page .eng-sub { font-size: 10.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }

/* ------------------------------ Top bar ------------------------------ */
.portal-page .portal-top {
    position: sticky; top: 0; z-index: 80;
    height: var(--top-nav-height);
    background: var(--surface-primary);
    border-bottom: 1px solid var(--border-default);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; gap: 16px;
}
.portal-page .portal-top-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.portal-page .portal-top-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.portal-page .portal-top-sep { width: 1px; height: 24px; background: var(--border-default); flex-shrink: 0; }

.portal-page .sidebar-hamburger {
    width: 34px; height: 34px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.portal-page .sidebar-hamburger:hover { border-color: var(--brand-primary); color: var(--text-primary); }

.portal-page .logo { display: flex; align-items: center; gap: 10px; }
.portal-page .logo-mark { width: 28px; height: 28px; flex-shrink: 0; }
.portal-page .logo-wordmark { font-family: 'Fraunces', serif; font-weight: 500; font-size: 11px; letter-spacing: 0.04em; line-height: 1.15; }
.portal-page .logo-wordmark .line-1 { color: var(--brand-primary-strong); }
.portal-page .logo-wordmark .line-2 { color: var(--text-primary); }

.portal-page .firm-context {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: transparent; color: inherit;
}
.portal-page .firm-context:hover { border-color: var(--brand-primary); }
.portal-page .firm-avatar {
    width: 28px; height: 28px; border-radius: 7px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px; flex-shrink: 0;
}
.portal-page .firm-context-info { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.portal-page .firm-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.portal-page .firm-sub { font-size: 10.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.portal-page .firm-context-caret { color: var(--text-tertiary); }

.portal-page .portal-top-search {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-tertiary); font-size: 12.5px; min-width: 260px;
    background: var(--surface-primary); cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.portal-page .portal-top-search:hover { border-color: var(--brand-primary); color: var(--text-secondary); }
.portal-page .portal-top-search kbd {
    margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px;
    padding: 2px 5px; border: 1px solid var(--border-default); border-radius: 4px;
    color: var(--text-tertiary);
}

.icon-btn, .portal-page .icon-btn {
    position: relative; width: 30px; height: 30px;
    border-radius: var(--radius-md); color: var(--text-tertiary);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.icon-btn:hover, .portal-page .icon-btn:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.portal-page .icon-btn-badge {
    position: absolute; top: 3px; right: 3px;
    min-width: 14px; height: 14px; padding: 0 3px;
    border-radius: 7px; background: var(--status-danger);
    color: #FFFFFF; font-size: 9px; font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--surface-primary);
}

.portal-page .theme-toggle {
    width: 34px; height: 34px; border-radius: var(--radius-md);
    color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.portal-page .theme-toggle:hover { background: var(--surface-secondary); color: var(--text-primary); }
.portal-page .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .portal-page .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .portal-page .theme-toggle .icon-sun { display: none; }

.portal-page .user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--brand-dark); color: var(--brand-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px;
    box-shadow: 0 0 0 1px var(--border-default);
    transition: box-shadow 0.15s ease;
}
.portal-page .user-avatar:hover { box-shadow: 0 0 0 2px var(--brand-primary); }

/* ------------------------------ Body grid ------------------------------ */
.portal-page .portal-body {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: calc(100vh - var(--top-nav-height));
    transition: grid-template-columns 0.2s ease;
}
[data-sidebar="collapsed"] .portal-page .portal-body { grid-template-columns: var(--sidebar-collapsed-width) 1fr; }

/* ------------------------------ Sidebar ------------------------------ */
.portal-page .portal-sidebar {
    background: var(--surface-primary);
    border-right: 1px solid var(--border-default);
    padding: 16px 12px;
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: var(--top-nav-height);
    height: calc(100vh - var(--top-nav-height));
    overflow-y: auto; overflow-x: hidden;
    transition: padding 0.2s ease;
}
[data-sidebar="collapsed"] .portal-page .portal-sidebar { padding: 16px 8px; }

.portal-page .sidebar-section-label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 12px 12px 6px; white-space: nowrap;
    transition: opacity 0.15s ease, height 0.15s ease, padding 0.15s ease;
    overflow: hidden;
}
[data-sidebar="collapsed"] .portal-page .sidebar-section-label { opacity: 0; height: 6px; padding: 0; }

.portal-page .nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: var(--radius-md);
    font-size: 13.5px; font-weight: 500; color: var(--text-secondary);
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap; position: relative;
    background: transparent; border: none; border-left: 2px solid transparent; text-align: left; width: 100%;
    cursor: pointer; text-decoration: none;
}
.portal-page .nav-item:hover:not(.is-active) { background: var(--surface-secondary); color: var(--text-primary); text-decoration: none; }
.portal-page .nav-item.is-active { background: rgba(46, 212, 165, 0.12); color: var(--brand-primary); border-left: 2px solid var(--brand-primary); }
.portal-page .nav-item.is-active .nav-item-icon { color: var(--brand-primary); }
.portal-page .nav-item-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-tertiary); transition: color 0.12s ease; }
.portal-page .nav-item:hover:not(.is-active) .nav-item-icon { color: var(--text-secondary); }
.portal-page .nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.15s ease; }
[data-sidebar="collapsed"] .portal-page .nav-item-label { opacity: 0; width: 0; max-width: 0; flex: 0 0 0; overflow: hidden; }

.portal-page .nav-item-badge {
    margin-left: auto; min-width: 18px; padding: 0 6px; height: 18px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
    background: var(--status-warning-soft); color: var(--status-warning);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.portal-page .nav-item.is-active .nav-item-badge { background: rgba(46, 212, 165, 0.18); color: var(--brand-primary); }
[data-sidebar="collapsed"] .portal-page .nav-item-badge { display: none; }
[data-sidebar="collapsed"] .portal-page .nav-item { justify-content: center; padding: 9px 0; gap: 0; }

.portal-page .sidebar-footer {
    margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--border-default);
    display: flex; flex-direction: column; gap: 2px;
}
.portal-page .sidebar-footer .nav-item { font-size: 12.5px; color: var(--text-tertiary); }
[data-sidebar="collapsed"] .portal-page .sidebar-toggle .nav-item-icon { transform: rotate(180deg); }

[data-theme="dark"] .portal-page .nav-item.is-active { background: rgba(46, 212, 165, 0.12); color: var(--brand-primary); }
[data-theme="dark"] .portal-page .nav-item.is-active .nav-item-icon { color: var(--brand-primary); }

/* ------------------------------ Main / page header ------------------------------ */
.portal-page .portal-main { padding: 0; min-width: 0; overflow-x: hidden; position: relative; }
.portal-main-content { display: flex; flex-direction: column; min-height: 100%; }
.portal-page .page-wrap { max-width: 1320px; margin: 0 auto; padding: 24px 28px 80px; }

/* Consistent page-header padding for all BK portal pages (replaces ad-hoc inline styles) */
.portal-page .bk-page-header { padding: 24px 24px 0; }
.portal-page .bk-page-body { padding: 0 24px 80px; }

/* V1 ⇄ V2 design toggle (period-close / Tasks) */
.portal-page .pc-vtoggle { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0 24px; background: var(--surface-tertiary); border-radius: 9px; padding: 3px; width: fit-content; }
.portal-page .pc-vtoggle-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); padding: 0 6px 0 4px; }
.portal-page .pc-vtoggle-btn { border: none; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 7px; cursor: pointer; }
.portal-page .pc-vtoggle-btn.is-on { background: var(--surface-primary); color: var(--text-primary); box-shadow: var(--shadow-card); }
/* Reconciliation views: scrollable main with consistent padding */
.portal-page .portal-main.bk-scroll { overflow-y: auto; padding: 24px 24px 80px; }

.portal-page .page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.portal-page .page-header-left { min-width: 0; flex: 1; }
.portal-page .page-breadcrumb {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--text-tertiary); letter-spacing: 0.04em; text-transform: uppercase;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 4px;
}
.portal-page .page-breadcrumb a { color: var(--text-tertiary); transition: color 0.12s ease; }
.portal-page .page-breadcrumb a:hover { color: var(--text-primary); }
.portal-page .page-breadcrumb span.sep { color: var(--border-strong); }
.portal-page .page-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary); font-weight: 500; margin-bottom: 8px;
}
.portal-page .page-title {
    font-family: 'Fraunces', serif; font-weight: 500; font-size: 28px;
    letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1;
}
.portal-page .page-subtitle, .portal-page .page-greeting {
    font-size: 13.5px; color: var(--text-secondary);
    margin-top: 6px; line-height: 1.5; max-width: 640px;
}
.portal-page .page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ------------------------------ Page tabs ------------------------------ */
.portal-page .page-tabs {
    display: flex; gap: 2px; border-bottom: 1px solid var(--border-default);
    margin-bottom: 20px; overflow-x: auto; scrollbar-width: none;
}
.portal-page .page-tabs::-webkit-scrollbar { display: none; }
.portal-page .page-tab {
    position: relative; padding: 10px 14px; font-size: 13.5px; font-weight: 500;
    color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    background: transparent; border: 0; cursor: pointer;
    transition: color 0.12s ease;
}
.portal-page .page-tab:hover:not(.is-active) { color: var(--text-primary); }
.portal-page .page-tab.is-active { color: var(--text-primary); }
.portal-page .page-tab.is-active::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
    height: 2px; background: var(--brand-primary); border-radius: 2px 2px 0 0;
}
.portal-page .page-tab-count {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    padding: 1px 7px; border-radius: 9px;
    background: var(--surface-secondary); color: var(--text-tertiary);
    min-width: 20px; text-align: center;
}
.portal-page .page-tab.is-active .page-tab-count { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* ------------------------------ Buttons (36px in portal) ------------------------------ */
.portal-page .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 14px; border-radius: var(--radius-md);
    font-size: 13px; font-weight: 500; font-family: inherit;
    background: var(--brand-primary); color: var(--brand-dark);
    border: 1px solid var(--brand-primary);
    cursor: pointer; white-space: nowrap; letter-spacing: -0.005em;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
    text-decoration: none;
}
.portal-page .btn:hover:not(:disabled) { background: var(--brand-primary-strong); border-color: var(--brand-primary-strong); color: #FFFFFF; }
.portal-page .btn:active:not(:disabled) { transform: translateY(1px); }
.portal-page .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.portal-page .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.portal-page .btn svg { width: 14px; height: 14px; }

.portal-page .btn-primary { background: var(--brand-primary); color: var(--brand-dark); border-color: var(--brand-primary); font-weight: 600; }
.portal-page .btn-primary:hover:not(:disabled) { background: var(--brand-primary-strong); color: #FFFFFF; }
.portal-page .btn-secondary { background: var(--surface-primary); color: var(--text-primary); border-color: var(--border-default); }
.portal-page .btn-secondary:hover:not(:disabled) { background: var(--surface-secondary); border-color: var(--border-strong); }
.portal-page .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid transparent; }
.portal-page .btn-ghost:hover:not(:disabled) { background: var(--surface-secondary); color: var(--text-primary); }
.portal-page .btn-danger { background: transparent; color: var(--status-danger); border-color: var(--status-danger); }
.portal-page .btn-danger:hover:not(:disabled) { background: var(--status-danger-soft); }
.portal-page .btn-accent { background: var(--brand-accent); color: #FFFFFF; border-color: var(--brand-accent); font-weight: 600; }
.portal-page .btn-accent:hover:not(:disabled) { filter: brightness(0.95); color: #FFFFFF; }
.portal-page .btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.portal-page .btn-xs { height: 26px; padding: 0 8px; font-size: 11.5px; }
.portal-page .btn-lg { height: 42px; padding: 0 18px; font-size: 14px; }

/* ------------------------------ Form fields (portal — smaller) ------------------------------ */
.portal-page .field { display: flex; flex-direction: column; gap: 6px; }
.portal-page .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal-page .field-label {
    font-size: 12px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.01em;
}
.portal-page .field-label .req { color: var(--status-danger); margin-left: 2px; }
.portal-page .field-hint { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; }
.portal-page .field-input,
.portal-page .field-select,
.portal-page .field-textarea {
    height: 36px; padding: 0 12px;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-primary); color: var(--text-primary);
    font-size: 13.5px; font-family: inherit; width: 100%;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.portal-page .field-textarea { height: auto; padding: 10px 12px; min-height: 72px; resize: vertical; line-height: 1.5; }
.portal-page .field-select {
    appearance: none; -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 3.5L5 6.5L8 3.5' stroke='%2394A3B8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; cursor: pointer;
}
.portal-page .field-input:hover:not(:disabled),
.portal-page .field-select:hover:not(:disabled),
.portal-page .field-textarea:hover:not(:disabled) { border-color: var(--border-strong); }
.portal-page .field-input:focus,
.portal-page .field-select:focus,
.portal-page .field-textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.portal-page .field-input::placeholder, .portal-page .field-textarea::placeholder { color: var(--text-tertiary); }
.portal-page .field-input:disabled { background: var(--surface-secondary); color: var(--text-tertiary); cursor: not-allowed; }
.portal-page .field-input.is-error,
.portal-page .field-select.is-error,
.portal-page .field-textarea.is-error { border-color: var(--status-danger); }
.portal-page .field-input.is-error:focus,
.portal-page .field-select.is-error:focus,
.portal-page .field-textarea.is-error:focus { border-color: var(--status-danger); box-shadow: none; }

/* ------------------------------ Checkbox / switch ------------------------------ */
.portal-page .checkbox {
    width: 16px; height: 16px;
    border: 1.5px solid var(--border-strong); border-radius: 4px;
    background: var(--surface-primary);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: all 0.12s ease;
}
.portal-page .checkbox:hover { border-color: var(--brand-primary); }
.portal-page .checkbox.is-checked { background: var(--brand-primary); border-color: var(--brand-primary); }
.portal-page .checkbox.is-checked::after {
    content: ""; width: 8px; height: 5px;
    border-left: 1.8px solid var(--brand-dark); border-bottom: 1.8px solid var(--brand-dark);
    transform: rotate(-45deg) translate(1px, -1px);
}
.portal-page .checkbox.is-indeterminate { background: var(--brand-primary); border-color: var(--brand-primary); }
.portal-page .checkbox.is-indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--brand-dark); border-radius: 1px; }

.portal-page .switch {
    position: relative; width: 34px; height: 20px;
    background: var(--border-strong); border-radius: 10px;
    cursor: pointer; flex-shrink: 0; border: 0; padding: 0;
    transition: background 0.15s ease;
}
.portal-page .switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: #FFFFFF; border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.portal-page .switch.is-on { background: var(--brand-primary); }
.portal-page .switch.is-on::after { transform: translateX(14px); }

/* ------------------------------ Toolbar (search + chips) ------------------------------ */
.portal-page .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.portal-page .toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.portal-page .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.portal-page .search-input {
    position: relative;
    padding: 0 12px 0 34px; height: 36px; min-width: 260px;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-primary); color: var(--text-primary);
    font-size: 13px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><circle cx='6' cy='6' r='4.5' stroke='%2394A3B8' stroke-width='1.3'/><path d='M9.5 9.5L12 12' stroke='%2394A3B8' stroke-width='1.3' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: left 12px center;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.portal-page .search-input:hover { border-color: var(--border-strong); }
.portal-page .search-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.portal-page .search-input::placeholder { color: var(--text-tertiary); }

.portal-page .filter-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px;
    padding: 0 11px;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-primary); color: var(--text-secondary);
    font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: all 0.12s ease;
}
.portal-page .filter-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.portal-page .filter-chip.is-active { background: var(--brand-dark); border-color: var(--brand-dark); color: #FFFFFF; }
.portal-page .filter-chip .chip-count {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    padding: 1px 6px; border-radius: 9px;
    background: var(--surface-secondary); color: var(--text-tertiary);
}
.portal-page .filter-chip.is-active .chip-count { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.portal-page .filter-chip svg { width: 12px; height: 12px; }

/* ------------------------------ Data table ------------------------------ */
.portal-page .data-panel {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-card);
}
.portal-page .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.portal-page .data-table thead th {
    background: var(--surface-secondary);
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary);
    padding: 10px 14px; text-align: left;
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap; user-select: none;
}
.portal-page .data-table thead th.sortable { cursor: pointer; transition: color 0.12s ease; }
.portal-page .data-table thead th.sortable:hover { color: var(--text-primary); }
.portal-page .data-table tbody tr { border-bottom: 1px solid var(--border-default); transition: background 0.08s ease; }
.portal-page .data-table tbody tr:last-child { border-bottom: 0; }
.portal-page .data-table tbody tr:hover { background: var(--surface-secondary); }
.portal-page .data-table tbody tr.is-selected { background: var(--brand-primary-soft); }
.portal-page .data-table tbody td { padding: 11px 14px; vertical-align: middle; color: var(--text-primary); }
.portal-page .data-table .td-check { width: 40px; padding-right: 0; }
.portal-page .data-table .td-mono { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.portal-page .data-table .td-money { font-family: 'JetBrains Mono', monospace; text-align: right; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.portal-page .data-table .td-actions { width: 48px; text-align: right; padding-right: 10px; }
.portal-page .data-table .cell-primary { font-weight: 500; color: var(--text-primary); }
.portal-page .data-table .cell-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

.portal-page .row-action-btn {
    width: 28px; height: 28px; border-radius: 6px;
    color: var(--text-tertiary);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.portal-page .row-action-btn:hover { background: var(--surface-secondary); color: var(--text-primary); }
.portal-page .row-action-btn svg { width: 16px; height: 16px; }

.portal-page .table-empty { padding: 60px 24px; text-align: center; color: var(--text-secondary); }
.portal-page .table-empty-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--surface-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px; color: var(--text-tertiary);
}
.portal-page .table-empty-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; color: var(--text-primary); margin-bottom: 6px; }
.portal-page .table-empty-sub { font-size: 13px; color: var(--text-secondary); max-width: 360px; margin: 0 auto 16px; line-height: 1.5; }

/* ------------------------------ Pills / badges ------------------------------ */
.portal-page .pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; font-size: 11px; font-weight: 500; border-radius: 10px;
    border: 1px solid var(--border-default);
    background: var(--surface-secondary); color: var(--text-secondary);
    white-space: nowrap; line-height: 1.5;
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em;
}
.portal-page .pill-success { background: var(--status-success-soft); border-color: transparent; color: var(--status-success); }
.portal-page .pill-warning { background: var(--status-warning-soft); border-color: transparent; color: #B45309; }
.portal-page .pill-danger { background: var(--status-danger-soft); border-color: transparent; color: var(--status-danger); }
.portal-page .pill-info { background: var(--status-info-soft); border-color: transparent; color: var(--status-info); }
.portal-page .pill-accent { background: var(--brand-accent-soft); border-color: transparent; color: var(--brand-accent); }
.portal-page .pill-brand { background: var(--brand-primary-soft); border-color: transparent; color: var(--brand-primary-strong); }
.portal-page .pill-neutral { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-secondary); }
.portal-page .pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.portal-page .pill-dot.success { background: var(--status-success); }
.portal-page .pill-dot.warning { background: var(--status-warning); }
.portal-page .pill-dot.danger { background: var(--status-danger); }
.portal-page .pill-dot.info { background: var(--status-info); }
.portal-page .pill-dot.accent { background: var(--brand-accent); }
.portal-page .pill-dot.brand { background: var(--brand-primary); }
.portal-page .pill-dot.muted { background: var(--text-tertiary); }
[data-theme="dark"] .portal-page .pill-warning { color: #FBBF24; }

/* ------------------------------ KPI strip ------------------------------ */
.portal-page .kpi-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
.portal-page .kpi {
    position: relative;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 16px 18px 16px 22px;
    box-shadow: var(--shadow-card);
}
.portal-page .kpi-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--border-strong); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.portal-page .kpi.is-primary .kpi-accent { background: var(--brand-primary); }
.portal-page .kpi.is-success .kpi-accent { background: var(--status-success); }
.portal-page .kpi.is-warning .kpi-accent { background: var(--status-warning); }
.portal-page .kpi.is-danger .kpi-accent { background: var(--status-danger); }
.portal-page .kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 6px; }
.portal-page .kpi-value { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.portal-page .kpi.is-warning .kpi-value { color: #B45309; }
.portal-page .kpi.is-danger .kpi-value { color: var(--status-danger); }
.portal-page .kpi-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; }

/* ------------------------------ Drawer (right slide) ------------------------------ */
.portal-page .drawer-root { position: fixed; inset: 0; z-index: 200; display: none; }
.portal-page .drawer-root.is-open { display: block; }
.portal-page .drawer-root .drawer-backdrop { position: absolute; inset: 0; background: rgba(11, 15, 30, 0.4); animation: drawerFade 0.18s ease forwards; }
.portal-page .drawer-panel {
    position: absolute; top: 0; right: 0; height: 100vh;
    width: 100%; max-width: 520px;
    background: var(--surface-primary); box-shadow: var(--shadow-drawer);
    display: flex; flex-direction: column;
    animation: drawerSlide 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.portal-page .drawer-panel.is-wide { max-width: 720px; }
@keyframes drawerFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerSlide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.portal-page .drawer-head { padding: 18px 24px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.portal-page .drawer-head-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.portal-page .drawer-head-sub { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }
.portal-page .drawer-close { width: 32px; height: 32px; border-radius: 7px; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; transition: background 0.12s ease; }
.portal-page .drawer-close:hover { background: var(--surface-secondary); }
.portal-page .drawer-body { padding: 20px 24px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.portal-page .drawer-foot { padding: 14px 24px; border-top: 1px solid var(--border-default); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-shrink: 0; background: var(--surface-primary); }

/* ------------------------------ Modal (centered) ------------------------------ */
.portal-page .modal-root { position: fixed; inset: 0; z-index: 220; display: none; align-items: center; justify-content: center; padding: 20px; }
.portal-page .modal-root.is-open { display: flex; }
.portal-page .modal-backdrop { position: fixed; inset: 0; background: rgba(11, 15, 30, 0.48); animation: drawerFade 0.15s ease forwards; }
.portal-page .modal-card {
    position: relative; width: 100%; max-width: 480px;
    background: var(--surface-primary); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated); overflow: hidden;
    animation: modalPop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    max-height: calc(100vh - 40px); display: flex; flex-direction: column;
}
.portal-page .modal-card.is-wide { max-width: 640px; }
@keyframes modalPop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.portal-page .modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.portal-page .modal-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.portal-page .modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.portal-page .modal-foot { padding: 14px 22px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }

/* ------------------------------ Bulk action bar ------------------------------ */
.portal-page .bulk-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-default); background: var(--brand-dark); color: #FFFFFF; }
.portal-page .bulk-bar-left { display: flex; align-items: center; gap: 14px; }
.portal-page .bulk-bar-right { display: flex; align-items: center; gap: 6px; }
.portal-page .bulk-bar-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; }
.portal-page .bulk-bar-count strong { color: var(--brand-primary); }
.portal-page .bulk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.08); color: #FFFFFF; font-size: 12.5px; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; transition: background 0.12s ease; }
.portal-page .bulk-btn:hover { background: rgba(255, 255, 255, 0.14); }
.portal-page .bulk-btn svg { width: 13px; height: 13px; }
.portal-page .bulk-btn.is-danger { color: #FCA5A5; }
.portal-page .bulk-btn.is-danger:hover { background: rgba(239, 68, 68, 0.18); color: #FFFFFF; }

/* ------------------------------ Toasts ------------------------------ */
.portal-page .toast-root { position: fixed; top: 68px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.portal-page .toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--brand-dark); color: #FFFFFF; border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); font-size: 13px; max-width: 360px; pointer-events: auto; animation: toastIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.portal-page .toast.is-success { border-left: 3px solid var(--brand-primary); }
.portal-page .toast.is-warning { border-left: 3px solid var(--status-warning); }
.portal-page .toast.is-danger { border-left: 3px solid var(--status-danger); }
@keyframes toastIn { from { transform: translateX(12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ------------------------------ Misc utilities (portal-only) ------------------------------ */
.portal-page .stack { display: flex; flex-direction: column; gap: 14px; }
.portal-page .stack-sm { display: flex; flex-direction: column; gap: 8px; }
.portal-page .row { display: flex; align-items: center; gap: 10px; }
.portal-page .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-page .spacer { flex: 1; }
.portal-page .muted { color: var(--text-tertiary); }
.portal-page .mono { font-family: 'JetBrains Mono', monospace; }
.portal-page .num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.portal-page .divider { height: 1px; background: var(--border-default); margin: 12px 0; border: 0; }

.portal-page .fade-up { opacity: 0; transform: translateY(6px); animation: fadeUp 0.42s ease-out forwards; }
.portal-page .fade-up.d-1 { animation-delay: 0.05s; }
.portal-page .fade-up.d-2 { animation-delay: 0.12s; }
.portal-page .fade-up.d-3 { animation-delay: 0.20s; }
.portal-page .fade-up.d-4 { animation-delay: 0.30s; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1024px) {
    .portal-page .portal-main { padding: 22px 22px 30px; --portal-main-pad: 22px; }
    .portal-page .search-input { min-width: 200px; }
    .portal-page .portal-top-search { display: none; }
}
@media (max-width: 768px) {
    [data-sidebar="expanded"] .portal-page .portal-body,
    [data-sidebar="collapsed"] .portal-page .portal-body { grid-template-columns: 1fr; }
    .portal-page .portal-sidebar { position: fixed; left: 0; top: var(--top-nav-height); width: var(--sidebar-width); z-index: 90; transform: translateX(-100%); transition: transform 0.22s ease; }
    [data-sidebar="mobile-open"] .portal-page .portal-sidebar { transform: translateX(0); }
    .portal-page .firm-context-info { display: none; }
    .portal-page .portal-main { padding: 20px 16px 30px; --portal-main-pad: 20px; }
    .portal-page .drawer-panel { max-width: 100%; }
}

/* ================================================================
   Workflows — ported from Workflows-Create-Edit.html,
   Workflows-List.html, Workflows-Detail.html prototypes
   ================================================================ */

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 18px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.12s ease; }
.breadcrumb a:hover { color: var(--brand-primary-strong); }
.breadcrumb .sep { color: var(--text-tertiary); }
.breadcrumb .current { color: var(--text-primary); font-weight: 500; }

/* Step rail */
.step-rail { display: flex; align-items: center; gap: 0; margin-bottom: 28px; padding: 14px 18px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); position: relative; overflow-x: auto; }
.step-pill { display: flex; align-items: center; gap: 9px; padding: 4px 10px; font-size: 12.5px; flex-shrink: 0; }
.step-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; transition: all 0.15s ease; border: 2px solid transparent; }
.step-pill.is-completed .step-num { background: var(--brand-primary); color: var(--brand-dark); border-color: var(--brand-primary); }
.step-pill.is-current .step-num { background: var(--brand-dark); color: var(--brand-primary); border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); }
[data-theme="dark"] .step-pill.is-current .step-num { background: var(--brand-primary); color: var(--brand-dark); }
.step-pill.is-upcoming .step-num { background: var(--surface-tertiary); color: var(--text-tertiary); border-color: var(--border-default); }
.step-label { font-weight: 500; color: var(--text-tertiary); white-space: nowrap; transition: color 0.15s ease; }
.step-pill.is-completed .step-label { color: var(--text-secondary); }
.step-pill.is-current .step-label { color: var(--text-primary); font-weight: 600; }
.step-connector { flex: 1; height: 2px; background: var(--border-default); min-width: 30px; transition: background 0.15s ease; }
.step-connector.is-filled { background: var(--brand-primary); }

/* Form controls */
.form-group { margin-bottom: 22px; }
.form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.form-help { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.5; }
.form-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease; box-sizing: border-box; }
.form-input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.form-input::placeholder { color: var(--text-tertiary); }
select.form-input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4L6 8L9 4' stroke='%238A92A8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

/* Step panel */
.step-panel { display: none; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 80px; }
.step-panel.active { display: block; }
.step-panel-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 6px; }
.step-panel-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.01em; }
.step-panel-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 24px; max-width: 640px; }

/* Radio cards */
.radio-card-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.radio-card { padding: 14px 16px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: all 0.12s ease; background: var(--surface-primary); position: relative; }
.radio-card:hover { border-color: var(--brand-primary); }
.radio-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.radio-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.radio-card-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; }
.radio-card-check { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s ease; }
.radio-card.is-selected .radio-card-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.radio-card-check svg { display: none; color: var(--brand-dark); }
.radio-card.is-selected .radio-card-check svg { display: block; }

/* Checkbox cards */
.checkbox-card-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.checkbox-card { padding: 14px 16px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: all 0.12s ease; background: var(--surface-primary); position: relative; }
.checkbox-card:hover { border-color: var(--brand-primary); }
.checkbox-card.is-checked { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.checkbox-card.is-required { opacity: 0.85; cursor: not-allowed; }
.checkbox-card.is-required .checkbox-card-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.checkbox-card.is-required .checkbox-card-check svg { display: block; }
.checkbox-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.checkbox-card-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; }
.checkbox-card-check { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s ease; }
.checkbox-card.is-checked .checkbox-card-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.checkbox-card-check svg { display: none; color: var(--brand-dark); }
.checkbox-card.is-checked .checkbox-card-check svg { display: block; }
.required-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-tertiary); color: var(--text-secondary); margin-left: auto; }

/* Stage list (step 2) */
.stage-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.stage-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); transition: border-color 0.12s ease; }
.stage-card:hover { border-color: var(--brand-primary); }
.stage-handle { color: var(--text-tertiary); cursor: grab; flex-shrink: 0; }
.stage-num { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-tertiary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.stage-info { flex: 1; min-width: 0; }
.stage-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.stage-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.stage-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; }
.stage-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Sequence pill */
.sequence-pill { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sequence-pill.is-sequential { background: var(--status-info-soft); color: var(--status-info); }
.sequence-pill.is-iterative { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.sequence-pill.is-final { background: var(--status-success-soft); color: var(--status-success); }
[data-theme="dark"] .sequence-pill.is-iterative { color: #C4B5FD; }

/* Add stage button */
.add-stage-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border: 1.5px dashed var(--border-default); border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.12s ease; }
.add-stage-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary-strong); background: var(--brand-primary-soft); }

/* Stage task blocks (step 3 / detail) */
.stage-task-block { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 10px; }
.stage-task-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; transition: background 0.1s ease; user-select: none; }
.stage-task-head:hover { background: var(--surface-secondary); }
.stage-task-head .chevron { color: var(--text-tertiary); transition: transform 0.15s ease; flex-shrink: 0; }
.stage-task-block.is-expanded .stage-task-head .chevron { transform: rotate(90deg); }
.stage-task-body { display: none; border-top: 1px solid var(--border-default); }
.stage-task-block.is-expanded .stage-task-body { display: block; }
.stage-task-count { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: var(--surface-tertiary); color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; margin-left: auto; }
.stage-num-sm { width: 22px; height: 22px; border-radius: 5px; background: var(--surface-tertiary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; flex-shrink: 0; }

/* Task list */
.task-list { padding: 8px 0; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 48px; border-bottom: 1px solid var(--border-default); transition: background 0.1s ease; }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--surface-secondary); }
.task-handle { color: var(--text-tertiary); cursor: grab; }
.task-icon { width: 22px; height: 22px; border-radius: 5px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.task-info { flex: 1; min-width: 0; }
.task-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.task-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-role-pill { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-tertiary); color: var(--text-secondary); }
.task-role-pill.is-bk { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.task-role-pill.is-sup { background: var(--status-info-soft); color: var(--status-info); }
.task-role-pill.is-cpa { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.task-role-pill.is-client { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .task-role-pill.is-cpa { color: #C4B5FD; }
[data-theme="dark"] .task-role-pill.is-client { color: var(--status-warning); }

/* Condition pills — Frequency / Involvement / Onboarding / Intake / AccountType / Event */
.task-cond-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.03em; background: var(--surface-tertiary); color: var(--text-secondary); border: 1px solid transparent; }
.task-cond-pill .task-cond-label { opacity: 0.7; text-transform: uppercase; }
.task-cond-pill .task-cond-value { font-weight: 700; }
.task-cond-pill.is-frequency { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.task-cond-pill.is-involvement { background: var(--status-info-soft); color: var(--status-info); }
.task-cond-pill.is-onboarding { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.task-cond-pill.is-intake { background: var(--status-warning-soft); color: #B45309; }
.task-cond-pill.is-accounttype { background: var(--surface-tertiary); color: var(--text-secondary); border-color: var(--border-default); }
.task-cond-pill.is-event { background: var(--status-danger-soft); color: var(--status-danger); }
[data-theme="dark"] .task-cond-pill.is-onboarding { color: #C4B5FD; }
[data-theme="dark"] .task-cond-pill.is-intake { color: var(--status-warning); }

/* Stable task number prefix (#1..#40 from the spec) */
.task-num { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--text-tertiary); margin-right: 6px; padding: 0 4px; border-radius: 3px; background: var(--surface-tertiary); }

.add-task-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px 10px 48px; border: 0; border-top: 1px dashed var(--border-default); background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.12s ease, color 0.12s ease; text-align: left; }
.add-task-btn:hover { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* Notification overrides (step 4) */
.notification-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 60px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-default); }
.notification-row:last-child { border-bottom: 0; }
.notification-row.is-header { padding-bottom: 6px; }
.notification-row.is-header > div { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.notification-trigger { font-size: 13px; color: var(--text-primary); }
.notification-trigger-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.channel-toggle { display: flex; gap: 6px; }
.channel-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--border-default); background: var(--surface-primary); color: var(--text-tertiary); }
.channel-pill.is-on { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); }
.channel-pill svg { width: 9px; height: 9px; }

/* Review (step 5) */
.review-section { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 12px; }
.review-section-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.review-section-edit { font-size: 11.5px; color: var(--brand-primary-strong); cursor: pointer; font-weight: 600; background: none; border: 0; font-family: inherit; }
.review-section-edit:hover { text-decoration: underline; }
.review-grid { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; font-size: 12.5px; }
.review-grid dt { color: var(--text-tertiary); font-weight: 500; }
.review-grid dd { color: var(--text-primary); margin: 0; }

/* Wizard footer */
.wizard-footer { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-primary); border-top: 1px solid var(--border-default); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 100; }
.wizard-footer-status { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 8px; }
.saved-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: var(--surface-tertiary); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.wizard-footer-actions { display: flex; gap: 8px; align-items: center; }

/* Type pill (shared — e.g. BkOpeningBalances) */
.type-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.type-pill.is-monthly { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.type-pill.is-yearly { background: var(--status-info-soft); color: var(--status-info); }
.type-pill.is-onetime { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.type-pill.is-catchup { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .type-pill.is-catchup { color: var(--status-warning); }

/* Section cards + tabs (detail page) */
.section-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 18px; }
.section-head { padding: 14px 18px; border-bottom: 1px solid var(--border-default); display: flex; justify-content: space-between; align-items: center; }
.section-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.section-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); font-weight: 600; }
.tab-strip { display: flex; gap: 6px; border-bottom: 1px solid var(--border-default); padding: 0 18px; margin-bottom: 18px; }
.tab, .tab-strip-tab { padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); cursor: pointer; border: 0; background: transparent; font-family: inherit; transition: color 0.12s ease; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover, .tab-strip-tab:hover { color: var(--text-primary); }
.tab.is-active, .tab-strip-tab.is-active { color: var(--brand-primary-strong); border-bottom-color: var(--brand-primary); }
.tab-count-pill { background: var(--surface-tertiary); color: var(--text-secondary); padding: 1px 6px; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; }
.tab.is-active .tab-count-pill { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.tab-panel { display: none; padding: 0; }
.tab-panel.is-active { display: block; }

/* Activity list (shared — e.g. SuperAdminDashboard) */
.activity-row { padding: 11px 18px; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--border-default); }
.activity-row:last-child { border-bottom: 0; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.activity-dot.tone-brand { background: var(--brand-primary); }
.activity-dot.tone-success { background: var(--status-success); }
.activity-dot.tone-info { background: var(--status-info); }
.activity-dot.tone-neutral { background: var(--text-tertiary); }
.activity-info { flex: 1; min-width: 0; }
.activity-text { font-size: 12.5px; color: var(--text-primary); line-height: 1.4; }
.activity-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; font-weight: 500; }

/* ============================================================
   ENGAGEMENT ACTIVATION PAGE
   ============================================================ */

/* Page back button */
.page-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 16px; padding: 6px 8px 6px 0; background: none; border: 0; cursor: pointer; transition: color 0.12s ease; }
.page-back:hover { color: var(--text-primary); }
.page-back svg { color: var(--text-tertiary); }
.page-greeting { font-size: 13.5px; color: var(--text-secondary); margin-top: 6px; max-width: 640px; }

/* Step rail (engagement activation — distinct from workflow step-rail) */
.step-rail-ea { display: flex; align-items: center; gap: 0; margin-bottom: 28px; padding: 0; }
.step-rail-step { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; }
.step-rail-step:last-child { flex: 0; }
.step-marker { display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; transition: opacity 0.12s ease; }
.step-marker:hover { opacity: 0.85; }
.step-num-ea { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-tertiary); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; border: 2px solid var(--surface-tertiary); transition: all 0.18s ease; flex-shrink: 0; }
.step-rail-step.is-completed .step-num-ea { background: var(--brand-primary); color: var(--brand-dark); border-color: var(--brand-primary); }
.step-rail-step.is-current .step-num-ea { background: var(--surface-primary); color: var(--brand-primary-strong); border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(46, 212, 165, 0.18); }
.step-rail-step.is-skipped .step-num-ea { background: var(--surface-secondary); color: var(--text-tertiary); border: 2px dashed var(--border-strong); }
.step-label-ea { font-size: 12.5px; color: var(--text-tertiary); font-weight: 500; white-space: nowrap; transition: color 0.18s ease; }
.step-rail-step.is-completed .step-label-ea { color: var(--brand-primary-strong); font-weight: 600; }
.step-rail-step.is-current .step-label-ea { color: var(--text-primary); font-weight: 600; }
.step-rail-step.is-skipped .step-label-ea { font-style: italic; }
.step-connector-ea { flex: 1; height: 2px; background: var(--surface-tertiary); margin: 0 14px; min-width: 20px; transition: background 0.18s ease; }
.step-rail-step.is-completed > .step-connector-ea { background: var(--brand-primary); }

/* Wizard footer (engagement activation — sticky with border-radius, not fixed full-width) */
.wizard-footer-ea { position: sticky; bottom: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: 0 -4px 16px rgba(11, 15, 30, 0.04); margin-top: 8px; }
.wizard-footer-ea .wizard-footer-meta { font-size: 12.5px; color: var(--text-secondary); }
.wizard-footer-ea .wizard-footer-meta strong { color: var(--text-primary); }
.wizard-footer-ea .wizard-footer-actions { display: flex; gap: 8px; }

/* btn-success */
.btn-success { background: var(--status-success); color: #FFFFFF; border-color: var(--status-success); font-weight: 600; }
.btn-success:hover { filter: brightness(0.95); }

/* Step 1: Summary */
.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 22px; }
.summary-block { padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-secondary); }
.summary-block-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.summary-block-value { font-size: 14.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.summary-block-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.summary-business { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-secondary); }
.summary-business-avatar { width: 40px; height: 40px; border-radius: 9px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.summary-business-name { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 2px; }
.summary-business-meta { font-size: 12.5px; color: var(--text-secondary); }
.scope-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.scope-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-primary); padding: 10px 14px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.scope-item-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.scope-item-text { flex: 1; }
.scope-item-title { font-weight: 600; }
.scope-item-desc { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

/* Step 2: License */
.license-already { background: var(--status-success-soft); border-left: 3px solid var(--status-success); padding: 16px 18px; border-radius: var(--radius-md); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.license-already-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--status-success); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.license-already-info { flex: 1; }
.license-already-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--status-success); margin-bottom: 4px; }
.license-already-desc { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.license-already-desc strong { font-weight: 700; }
.tier-card { border: 2px solid var(--border-default); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 12px; background: var(--surface-primary); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; position: relative; }
.tier-card:hover { border-color: var(--brand-primary); }
.tier-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.tier-card.is-disabled { opacity: 0.55; cursor: not-allowed; }
.tier-card.is-disabled:hover { border-color: var(--border-default); }
.tier-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.tier-card-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.tier-card-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.tier-card.is-selected .tier-card-radio { border-color: var(--brand-primary); background: var(--brand-primary); }
.tier-card.is-selected .tier-card-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; }
.tier-card-name { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.tier-card-recommended { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--brand-primary); color: var(--brand-dark); }
.tier-card-locked-badge { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--surface-tertiary); color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 5px; }
.tier-card-price { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-align: right; }
.tier-card-price-suffix { font-family: 'Work Sans', sans-serif; font-size: 11.5px; color: var(--text-tertiary); font-weight: 500; margin-left: 2px; }
.tier-card-tagline { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; margin-left: 30px; line-height: 1.5; }
.tier-card-locked-message { font-size: 11.5px; color: var(--status-warning); font-weight: 600; margin-left: 30px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.tier-card-features { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-left: 30px; }
.tier-feature { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.tier-feature svg { flex-shrink: 0; color: var(--brand-primary-strong); }
.charge-card { margin-top: 16px; padding: 16px 18px; background: var(--brand-primary-soft); border-left: 3px solid var(--brand-primary); border-radius: var(--radius-md); display: none; }
.charge-card.visible { display: block; }
.charge-card-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 8px; }
.charge-card-rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; font-size: 13px; }
.charge-card-row { display: contents; }
.charge-card-label { color: var(--text-secondary); }
.charge-card-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }
.charge-card-divider { grid-column: 1 / -1; height: 1px; background: var(--border-default); margin: 4px 0; }
.charge-card-row.is-total .charge-card-label { font-family: 'Fraunces', serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.charge-card-row.is-total .charge-card-value { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.charge-card-note { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-default); }

/* Step 3: Team */
.role-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-default); }
.role-row:last-of-type { border-bottom: 0; }
.role-info { display: flex; flex-direction: column; gap: 2px; }
.role-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.role-desc { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.4; }
.assignee-picker { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: border-color 0.12s ease; width: 100%; }
.assignee-picker:hover { border-color: var(--brand-primary); }
.assignee-picker.has-value { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.assignee-picker-empty { font-size: 13px; color: var(--text-tertiary); flex: 1; }
.assignee-picker-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.assignee-picker-role { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.team-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-dark); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex-shrink: 0; }
.team-avatar.tone-1 { background: #4F46E5; color: #E0E7FF; }
.team-avatar.tone-2 { background: #DB2777; color: #FCE7F3; }
.team-avatar.tone-3 { background: #0891B2; color: #CFFAFE; }
.team-avatar.tone-4 { background: #B45309; color: #FEF3C7; }
.team-avatar.tone-5 { background: #047857; color: #D1FAE5; }
.team-dropdown { position: relative; }
.team-dropdown-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); z-index: 50; max-height: 240px; overflow-y: auto; display: none; }
.team-dropdown-list.open { display: block; }
.team-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; transition: background 0.1s ease; }
.team-option:hover { background: var(--surface-secondary); }
.team-option-info { flex: 1; min-width: 0; }
.team-option-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.team-option-role { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.team-option-clear { padding: 8px 12px; border-top: 1px solid var(--border-default); font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.team-option-clear:hover { background: var(--surface-secondary); color: var(--text-primary); }
.task-assign-section { margin-top: 28px; padding-top: 28px; border-top: 2px solid var(--border-default); }
.task-assign-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.task-assign-title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 4px; }
.task-assign-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; max-width: 600px; margin: 0; }
.task-assign-controls { display: flex; gap: 8px; flex-shrink: 0; }
.task-assign-bulk-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12px; font-weight: 500; color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: all 0.12s ease; }
.task-assign-bulk-btn:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.task-assign-summary { display: flex; align-items: center; gap: 24px; padding: 14px 18px; background: var(--surface-secondary); border-radius: var(--radius-md); margin-bottom: 16px; flex-wrap: wrap; }
.task-assign-summary-stat { display: flex; flex-direction: column; align-items: flex-start; }
.task-assign-summary-num { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.task-assign-summary-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-top: 4px; }
.task-assign-summary-info { flex: 1; display: flex; justify-content: flex-end; min-width: 200px; }
.task-assign-summary-info-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 999px; font-size: 11.5px; color: var(--text-secondary); }
.task-assign-summary-info-pill svg { color: var(--brand-primary-strong); }
.ta-stage-block { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 8px; }
.ta-stage-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; cursor: pointer; transition: background 0.1s ease; user-select: none; }
.ta-stage-head:hover { background: var(--surface-secondary); }
.ta-stage-head .chevron { color: var(--text-tertiary); transition: transform 0.15s ease; flex-shrink: 0; }
.ta-stage-block.is-expanded .ta-stage-head .chevron { transform: rotate(90deg); }
.ta-stage-num { width: 22px; height: 22px; border-radius: 5px; background: var(--surface-tertiary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.ta-stage-info { flex: 1; min-width: 0; }
.ta-stage-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.ta-stage-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.ta-stage-body { display: none; border-top: 1px solid var(--border-default); }
.ta-stage-block.is-expanded .ta-stage-body { display: block; }
.ta-task-list { padding: 4px 0; }
.ta-task-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border-default); transition: background 0.1s ease; flex-wrap: wrap; }
.ta-task-row:last-child { border-bottom: 0; }
.ta-task-row:hover { background: var(--surface-secondary); }
.ta-task-row.is-overridden { background: rgba(245, 158, 11, 0.04); }
.ta-task-row.is-overridden:hover { background: rgba(245, 158, 11, 0.08); }
.ta-task-info { flex: 1; min-width: 200px; }
.ta-task-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ta-task-trigger { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.ta-task-pickers { display: flex; align-items: flex-end; gap: 10px; flex-wrap: nowrap; }
.ta-picker-group { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.ta-picker-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.ta-picker { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: border-color 0.12s ease; min-width: 130px; }
.ta-picker:hover { border-color: var(--brand-primary); }
.ta-picker.is-overridden { border-color: var(--status-warning); background: rgba(245, 158, 11, 0.06); }
.ta-picker.is-overridden:hover { border-color: var(--status-warning); }
.ta-picker svg { margin-left: auto; color: var(--text-tertiary); flex-shrink: 0; }
.ta-picker-role-pill { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
.ta-picker-role-pill.is-bk { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.ta-picker-role-pill.is-sup { background: var(--status-info-soft); color: var(--status-info); }
.ta-picker-role-pill.is-cpa { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.ta-picker-role-pill.is-client { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .ta-picker-role-pill.is-cpa { color: #C4B5FD; }
[data-theme="dark"] .ta-picker-role-pill.is-client { color: var(--status-warning); }
.ta-override-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; background: var(--status-warning); color: var(--brand-dark); font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ta-arrow-sep { color: var(--text-tertiary); font-size: 16px; margin-bottom: 8px; flex-shrink: 0; }
.task-assign-footer-actions { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-default); }
.task-assign-reset-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12px; font-weight: 500; color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: all 0.12s ease; }
.task-assign-reset-btn:hover { border-color: var(--brand-primary); color: var(--text-primary); }

/* Step 4: Period */
.period-info { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.period-info-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.period-info-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.period-info-text strong { color: var(--text-primary); }
.form-row { margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row.cols-1 { grid-template-columns: 1fr; }
.form-row:last-child { margin-bottom: 0; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-select { padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13.5px; color: var(--text-primary); font-family: 'Work Sans', sans-serif; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.form-select:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.form-textarea { padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13.5px; color: var(--text-primary); font-family: 'Work Sans', sans-serif; transition: border-color 0.12s ease, box-shadow 0.12s ease; resize: vertical; min-height: 64px; }
.form-textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.form-label .required { color: var(--status-danger); }

/* Step 5: Confirm */
.confirm-section { margin-bottom: 20px; }
.confirm-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.confirm-section-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.confirm-edit-link { font-size: 12px; color: var(--brand-primary-strong); font-weight: 600; background: none; border: 0; cursor: pointer; }
.confirm-edit-link:hover { text-decoration: underline; }
.confirm-block { padding: 12px 16px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.confirm-block-info { flex: 1; }
.confirm-block-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.confirm-block-meta { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.confirm-block-amount { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; font-size: 13.5px; flex-shrink: 0; }
.activate-summary { background: var(--brand-primary-soft); border: 1px solid var(--brand-primary); border-radius: var(--radius-lg); padding: 18px 22px; margin-top: 8px; margin-bottom: 16px; }
.activate-summary-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--brand-primary-strong); letter-spacing: -0.01em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.activate-summary-list { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.activate-summary-item { display: flex; align-items: flex-start; gap: 8px; }
.activate-summary-item svg { flex-shrink: 0; margin-top: 2px; color: var(--brand-primary-strong); }

/* Success view */
.success-view { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 48px 40px; text-align: center; display: none; }
.success-view.active, .success-view[style*="display: block"] { display: block; }
.success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--status-success); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25); }
.success-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 6px; }
.success-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.5; max-width: 480px; margin: 0 auto 24px; }
.success-summary { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; display: inline-flex; align-items: center; gap: 14px; margin-bottom: 24px; text-align: left; }
.success-summary-block { display: flex; flex-direction: column; gap: 2px; }
.success-summary-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.success-summary-value { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.success-summary-divider { width: 1px; align-self: stretch; background: var(--border-default); }
.success-actions { display: flex; gap: 10px; justify-content: center; }

/* Responsive */
@media (max-width: 1024px) {
  .form-row { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .role-row { grid-template-columns: 1fr; }
  .tier-card-features { grid-template-columns: 1fr; }
  .step-rail-ea { overflow-x: auto; }
  .step-label-ea { display: none; }
}
@media (max-width: 700px) {
  .ta-task-row { flex-direction: column; align-items: stretch; }
  .ta-task-pickers { width: 100%; }
  .ta-picker-group { flex: 1; min-width: 0; }
}

/* ============================================================
   Engagements — List, Detail, Add-Flow
   ============================================================ */

/* KPI strip */
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.kpi { position: relative; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 18px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.kpi-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--border-strong); }
.kpi.is-brand .kpi-accent { background: var(--brand-primary); }
.kpi.is-warning .kpi-accent { background: var(--status-warning); }
.kpi.is-success .kpi-accent { background: var(--status-success); }
.kpi.is-danger .kpi-accent { background: var(--status-danger); }
.kpi.is-info .kpi-accent { background: var(--status-info); }
.kpi.is-neutral .kpi-accent { background: var(--text-tertiary); }
.kpi.is-primary .kpi-accent { background: var(--brand-primary); }
.kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 6px; }
.kpi-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.kpi-meta { font-size: 12px; color: var(--text-secondary); margin-top: 5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* Toolbar */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }

/* Search box */
.search-box { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-tertiary); min-width: 220px; flex: 1; max-width: 340px; }
.search-box input { border: 0; background: transparent; font-family: inherit; font-size: 13px; color: var(--text-primary); flex: 1; outline: none; }
.search-box input::placeholder { color: var(--text-tertiary); }

/* Filter pills */
.filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--border-default); border-radius: 999px; font-size: 12px; color: var(--text-secondary); background: var(--surface-primary); cursor: pointer; transition: all 0.12s ease; white-space: nowrap; }
.filter-pill:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.filter-pill.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.filter-pill .pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; }
.filter-pill.tone-success .pill-dot { background: var(--status-success); }
.filter-pill.tone-warning .pill-dot { background: var(--status-warning); }
.filter-pill.tone-danger .pill-dot { background: var(--status-danger); }
.filter-pill.tone-neutral .pill-dot { background: var(--text-tertiary); }
.count-pill { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; background: var(--surface-tertiary); color: var(--text-secondary); padding: 1px 5px; border-radius: 999px; }
.filter-pill.active .count-pill { background: var(--brand-primary); color: var(--brand-dark); }

/* List table */
.list-table { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.table-row { display: grid; gap: 14px; padding: 14px 18px; align-items: center; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background 0.1s ease; }
.table-row:last-child { border-bottom: 0; }
.table-row.is-header { background: var(--surface-secondary); padding: 10px 18px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; cursor: default; }
.table-row:not(.is-header):hover { background: var(--surface-secondary); }
.table-row.is-customers { grid-template-columns: 32px 2fr 1fr 1.4fr 1.6fr 200px 60px; }
.table-row.is-businesses { grid-template-columns: 2fr 1.4fr 1fr 1.6fr 200px 60px; }
.table-row.is-engagements { grid-template-columns: 2.5fr 1fr 1.2fr 1.2fr 1.6fr 50px; }
.table-row.is-coa { grid-template-columns: 2fr 1.2fr 1fr 200px; cursor: default; }
.pc-people-panel { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px; }
.pc-people-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 10px; }
.pc-people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pc-person-card { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 12px; }
.pc-person-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.pc-person-counts { display: flex; gap: 10px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.table-row.is-coa-edit { grid-template-columns: 120px 2fr 1.2fr 1.2fr 50px; cursor: default; }
.table-row.is-teamwork { grid-template-columns: 1.6fr 1.6fr 1fr 1fr 140px 80px; cursor: default; }
.table-row.is-teamwork-capacity { grid-template-columns: 1fr auto; cursor: default; }
@media (max-width: 1100px) {
  .table-row.is-customers, .table-row.is-businesses { grid-template-columns: 2fr 1.5fr 200px 50px; }
  .table-row.is-engagements { grid-template-columns: 2fr 1fr 1.4fr 40px; }
  .table-row.is-teamwork { grid-template-columns: 2fr 1fr 140px 60px; }
  .table-row.is-engagements > :nth-child(2), .table-row.is-engagements > :nth-child(3) { display: none; }
  .table-row.is-customers > :nth-child(n+3):nth-child(-n+4):not(.entity-cell) { display: none; }
  .table-row.is-businesses > :nth-child(n+2):nth-child(-n+3):not(:first-child) { display: none; }
  .table-row.is-teamwork > :nth-child(3), .table-row.is-teamwork > :nth-child(4) { display: none; }
  .table-row.is-header > :nth-child(n+3):nth-child(-n+4) { display: none; }
}
.cell-text { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.cell-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; font-size: 13px; }

/* Entity cell */
.entity-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.entity-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; background: var(--brand-dark); color: var(--brand-primary); }
.entity-avatar.tone-1 { background: #4F46E5; color: #E0E7FF; }
.entity-avatar.tone-2 { background: #DB2777; color: #FCE7F3; }
.entity-avatar.tone-3 { background: #0891B2; color: #CFFAFE; }
.entity-avatar.tone-4 { background: #B45309; color: #FEF3C7; }
.entity-avatar.tone-5 { background: #047857; color: #D1FAE5; }
.entity-avatar.tone-6 { background: #6D28D9; color: #EDE9FE; }
.entity-avatar.is-business { border-radius: 8px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); }
.entity-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-dark); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.entity-cell-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.entity-cell-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-cell-sub { font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Invite action cell */
.invite-action-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.action-btn-prominent { background: var(--surface-primary); color: var(--brand-primary-strong); border: 1px solid var(--brand-primary); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-md); font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; transition: all 0.12s ease; cursor: pointer; font-family: inherit; }
.action-btn-prominent:hover { background: var(--brand-primary); color: var(--brand-dark); }
.action-btn-prominent.tone-warning { color: #B45309; border-color: var(--status-warning); }
[data-theme="dark"] .action-btn-prominent.tone-warning { color: var(--status-warning); }
.action-btn-prominent.tone-warning:hover { background: var(--status-warning); color: #FFFFFF; }
.action-btn-prominent.tone-danger { color: var(--status-danger); border-color: var(--status-danger); }
.action-btn-prominent.tone-danger:hover { background: var(--status-danger); color: #FFFFFF; }
.action-btn-prominent.tone-success { color: var(--status-success); border-color: var(--status-success); }
.action-btn-prominent.tone-success:hover { background: var(--status-success); color: #FFFFFF; }
.action-btn-prominent:disabled { opacity: 0.55; cursor: not-allowed; }
.action-btn-prominent:disabled:hover { background: var(--surface-primary); color: var(--brand-primary-strong); }

/* Team work two-column layout (main list + capacity sidebar) */
.teamwork-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; }
@media (max-width: 1100px) {
  .teamwork-grid { grid-template-columns: 1fr; }
}
.teamwork-capacity .list-table { min-height: 200px; }

/* Type pills */
.type-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-tertiary); color: var(--text-secondary); }
.type-pill.is-monthly { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.type-pill.is-yearly { background: var(--status-info-soft); color: var(--status-info); }
.type-pill.is-onetime { background: var(--brand-accent-soft); color: var(--brand-accent); }
.type-pill.is-catchup { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .type-pill.is-catchup { color: var(--status-warning); }

/* Stage pills */
.stage-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--surface-tertiary); color: var(--text-secondary); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.stage-pill.tone-bookkeeper { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.stage-pill.tone-recon { background: var(--status-info-soft); color: var(--status-info); }
.stage-pill.tone-supervisor { background: var(--brand-accent-soft); color: var(--brand-accent); }
.stage-pill.tone-client { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .stage-pill.tone-client { color: var(--status-warning); }
.stage-pill.tone-readytolock { background: var(--status-success-soft); color: var(--status-success); }
.stage-pill.tone-locked { background: var(--surface-tertiary); color: var(--text-tertiary); }
.stage-pill.tone-paused { background: var(--status-info-soft); color: var(--status-info); }
.stage-pill.tone-draft { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .stage-pill.tone-draft { color: var(--status-warning); }

/* Team avatars in list */
.team-avatars { display: flex; }
.team-avatars .team-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 9px; border: 2px solid var(--surface-primary); margin-left: -5px; }
.team-avatars .team-avatar:first-child { margin-left: 0; }
.team-tone-1 { background: #C7F7EE; color: #0A7A5C; }
.team-tone-2 { background: #DDD6FE; color: #5B21B6; }
.team-tone-3 { background: #FED7AA; color: #92400E; }
.team-tone-4 { background: #BFDBFE; color: #1E40AF; }
.team-tone-5 { background: #FEE2E2; color: #991B1B; }
[data-theme="dark"] .team-tone-1 { background: #134E3F; color: #6EE7B7; }
[data-theme="dark"] .team-tone-2 { background: #2E1065; color: #C4B5FD; }
[data-theme="dark"] .team-tone-3 { background: #431407; color: #FDBA74; }
[data-theme="dark"] .team-tone-4 { background: #1E3A5F; color: #93C5FD; }
[data-theme="dark"] .team-tone-5 { background: #450A0A; color: #FCA5A5; }

/* Due cell */
.due-cell { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); }
.due-cell.is-overdue { color: var(--status-danger); }
.due-cell.is-soon { color: var(--status-warning); }

/* Row actions */
.row-actions { display: flex; align-items: center; justify-content: flex-end; }
.action-menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); min-width: 160px; z-index: 200; overflow: hidden; }
.action-menu.is-open { display: block; }
.action-menu-section { padding: 4px 0; border-bottom: 1px solid var(--border-default); }
.action-menu-section:last-child { border-bottom: 0; }
.action-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; font-size: 13px; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.1s, color 0.1s; }
.action-menu-item:hover { background: var(--surface-secondary); color: var(--text-primary); }
.action-menu-item.is-danger { color: var(--status-danger); }
.action-menu-item.is-danger:hover { background: var(--status-danger-soft); }

/* Modals */
.modal-overlay { position: fixed; inset: 0; background: rgba(11,15,30,0.45); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); max-width: 440px; width: 100%; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-default); }
.modal-head-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.modal-head-sub { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; }
.modal-close { width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; border: 0; cursor: pointer; }
.modal-close:hover { background: var(--surface-secondary); color: var(--text-primary); }
.modal-body { padding: 16px 20px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-default); }
.warn-box { background: var(--status-warning-soft); border-left: 3px solid var(--status-warning); border-radius: var(--radius-md); padding: 10px 13px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.danger-box { background: var(--status-danger-soft); border-left: 3px solid var(--status-danger); border-radius: var(--radius-md); padding: 10px 13px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

/* Empty state */
.empty-state { padding: 40px 20px; text-align: center; font-size: 13.5px; color: var(--text-tertiary); }

/* Detail page header */
.detail-header { background: var(--surface-primary); border-bottom: 1px solid var(--border-default); padding: 18px 28px 0; margin-bottom: 0; }
.detail-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.detail-header-left { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }
.engagement-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-dark); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.detail-header-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 6px; }
.detail-header-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Status pills */
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.active { background: var(--status-success-soft); color: var(--status-success); }
.status-pill.draft { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .status-pill.draft { color: var(--status-warning); }
.status-pill.paused { background: var(--status-info-soft); color: var(--status-info); }
.status-pill.closed { background: var(--surface-tertiary); color: var(--text-tertiary); }

/* Detail tabs */
.detail-tabs { display: flex; gap: 2px; border-bottom: 0; padding-top: 4px; overflow-x: auto; scrollbar-width: none; }
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--radius-md) var(--radius-md) 0 0; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition: all 0.12s; border-bottom: 2px solid transparent; }
.detail-tab:hover { color: var(--text-primary); background: var(--surface-secondary); }
.detail-tab.is-active { color: var(--brand-primary-strong); border-bottom-color: var(--brand-primary); font-weight: 600; }
.tab-check { width: 14px; height: 14px; border-radius: 50%; background: var(--status-success); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tab-content { padding: 24px 28px; }

/* =====================================================================
   Engagement-detail · design refinements
   Scoped polish on top of the shared .detail-* / .config-* / .kpi rules.
   Token-only; raises hierarchy + rhythm without a redesign.
   ===================================================================== */

/* Header: ground it with a soft gradient + align the inner content to the
   same 28px gutter the tab content uses, and add breathing room. */
.detail-header {
  background: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-secondary) 100%);
  padding: 22px 28px 0;
}
.detail-header .breadcrumb { margin-bottom: 14px; }
.detail-header-top { margin-bottom: 18px; }

/* Engagement icon: a touch larger + subtle ring so it reads as the page anchor. */
.engagement-icon {
  width: 46px; height: 46px; border-radius: 12px;
  box-shadow: 0 0 0 1px var(--border-default), var(--shadow-card);
  font-size: 14px;
}
.detail-header-title { font-size: 22px; margin-bottom: 8px; }

/* Meta row: tighten chip rhythm; the trailing context line gets a leading
   divider + mono treatment so it reads as deliberate metadata, not leftover text. */
.detail-header-meta { gap: 7px; row-gap: 8px; }
.detail-header-context {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.02em; color: var(--text-tertiary);
  padding-left: 9px; margin-left: 2px; border-left: 1px solid var(--border-default);
}
.detail-header-context strong { color: var(--text-secondary); font-weight: 600; }

/* Tabs: clean typographic bar. A hairline baseline sits under the row so the
   active tab's mint underline reads as a clear selected state. */
.detail-header .detail-tabs {
  gap: 4px; padding-top: 2px;
  box-shadow: inset 0 -1px 0 var(--border-default);
}
.detail-header .detail-tab {
  padding: 10px 14px 11px; font-size: 13px; gap: 0;
  border-bottom-width: 2px; margin-bottom: -1px;
}
.detail-header .detail-tab.is-active { letter-spacing: -0.005em; }
/* Danger-zone tab: keep it red but make hover/active legible. */
.detail-header .detail-tab.is-danger { color: var(--status-danger); }
.detail-header .detail-tab.is-danger:hover { background: var(--status-danger-soft); color: var(--status-danger); }
.detail-header .detail-tab.is-danger.is-active { border-bottom-color: var(--status-danger); }

/* KPI: keep the "Current period" text value from competing with the numeric
   KPIs — slightly smaller, tighter, and never wraps awkwardly. */
.kpi.is-period .kpi-value {
  font-size: 19px; line-height: 1.15; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Config sections (Setup tab): clearer header rhythm + a hairline under the
   title so each section reads as a discrete card. */
.tab-content .config-section { padding: 18px 20px; }
.tab-content .config-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}
.tab-content .config-section-head .config-section-title { margin-bottom: 0; }

/* ---- Time & effort tab ---- */
/* AI accent for the KPI strip (violet brand accent). */
.kpi.is-accent .kpi-accent { background: var(--brand-accent); }
.kpi.is-accent .kpi-value { color: var(--brand-accent); }

/* Empty / loading states as a real centered card, not a grey blob. */
.te-empty { padding: 28px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.te-empty-card {
  background: var(--surface-primary); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 40px 28px;
}
.te-empty-icon {
  width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-secondary); color: var(--text-tertiary);
}
.te-empty-title { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.te-empty-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; max-width: 44ch; margin: 0 auto; }

/* Effort split — human vs AI proportional bar. */
.te-split {
  background: var(--surface-primary); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 22px;
}
.te-split-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.te-split-total { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); }
.te-split-bar {
  display: flex; height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--surface-tertiary);
}
.te-split-seg { height: 100%; transition: width 0.4s ease; }
.te-split-seg.is-human { background: var(--brand-primary); }
.te-split-seg.is-ai { background: var(--brand-accent); }
.te-split-legend { display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.te-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.te-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.te-dot.is-human { background: var(--brand-primary); }
.te-dot.is-ai { background: var(--brand-accent); }

/* Section eyebrow label (replaces bare <h3>). */
.te-section-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary);
  margin: 26px 0 12px;
}

/* Time-in-status as labeled pill blocks. */
.te-status-row { display: flex; flex-wrap: wrap; gap: 8px; }
.te-status-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-primary);
}
.te-status-name { font-size: 12px; font-weight: 600; color: var(--text-primary); text-transform: capitalize; }
.te-status-val { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-secondary); }

/* ---- Setup tab helpers ---- */
/* A small lock pill in a section header for read-only sections. */
.locked-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface-tertiary); color: var(--text-tertiary);
}
/* Inline locked explanation under a config card — replaces the heavier info-box. */
.config-locked-note {
  font-size: 12px; color: var(--text-tertiary); line-height: 1.5;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-default);
}
/* Setup team rows: a hair more room + hover lift so they feel interactive. */
.tab-content .team-list { display: grid; gap: 8px; }
.tab-content .team-row { gap: 14px; transition: border-color 0.12s ease; }
.tab-content .team-row:hover { border-color: var(--border-strong); }
.tab-content .team-role { min-width: 132px; }

/* ---- Workflow tab: template hero ---- */
.wf-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-primary-soft) 0%, var(--surface-primary) 70%);
}
.wf-hero-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-dark); color: var(--brand-primary);
}
.wf-hero-main { flex: 1; min-width: 0; }
.wf-hero-name { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.wf-hero-name .wf-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  background: var(--brand-primary-soft); color: var(--brand-primary-strong);
}
.wf-hero-stages { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.wf-hero-figures { display: flex; gap: 22px; flex-shrink: 0; padding-left: 6px; }
.wf-figure { text-align: center; }
.wf-figure-num { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.wf-figure-label { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-top: 5px; }

/* ---- License tab: active card ---- */
.license-already-active {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--status-success); border-radius: var(--radius-lg);
  background: var(--status-success-soft);
}
.license-active-mark {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-primary); color: var(--status-success);
}
.license-active-text { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.license-active-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }

/* ---- Danger zone: row-per-action layout, calm until you reach for it ---- */
.danger-zone {
  border: 1px solid var(--status-danger-soft); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface-primary);
}
.danger-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 18px; border-bottom: 1px solid var(--border-default);
}
.danger-row:last-child { border-bottom: 0; }
.danger-row-info { min-width: 0; }
.danger-row-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.danger-row-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; max-width: 60ch; }
.danger-row .btn { flex-shrink: 0; }
.danger-btn-warn { background: var(--status-warning-soft); color: #B45309; border-color: var(--status-warning); font-weight: 600; }
[data-theme="dark"] .danger-btn-warn { color: var(--status-warning); }

/* Overview grid (stat cards) */
.overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.stat-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; }
.stat-card-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.stat-card-value { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; }
.stat-card-meta { font-size: 11.5px; color: var(--text-tertiary); }
.stat-card.is-warning .stat-card-value { color: var(--status-warning); }
.stat-card.is-success .stat-card-value { color: var(--status-success); }
.stat-card.is-danger .stat-card-value { color: var(--status-danger); }

/* Stage pipeline */
.stage-pipeline { display: flex; align-items: center; padding: 14px 16px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 16px; overflow-x: auto; gap: 0; }
.stage-node { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 72px; }
.stage-node-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-default); background: var(--surface-secondary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--text-tertiary); }
.stage-node.is-done .stage-node-dot { background: var(--status-success); border-color: var(--status-success); color: #fff; }
.stage-node.is-current .stage-node-dot { background: var(--brand-dark); border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.stage-node-label { font-size: 10.5px; color: var(--text-tertiary); font-weight: 500; text-align: center; white-space: nowrap; }
.stage-node.is-done .stage-node-label { color: var(--status-success); }
.stage-node.is-current .stage-node-label { color: var(--text-primary); font-weight: 600; }
.stage-connector { flex: 1; height: 2px; background: var(--border-default); min-width: 12px; }
.stage-connector.is-done { background: var(--status-success); }

/* Period section (detail overview) */
.period-section { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 22px; }
.period-section-head { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 10px; }
.period-timeline { position: relative; height: 8px; background: var(--surface-tertiary); border-radius: 999px; margin-bottom: 8px; overflow: hidden; }
.period-timeline-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-primary); border-radius: 999px; }
.period-timeline-today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--status-danger); border-radius: 1px; }
.period-timeline-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); }

/* Overview two-col layout */
.overview-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.overview-col-head { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }

/* Overview task / checklist items */
.ov-task-list { display: flex; flex-direction: column; gap: 6px; }
.ov-task-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; }
.ov-task-row.is-done { text-decoration: line-through; color: var(--text-tertiary); }
.ov-task-row.is-blocked { border-color: var(--status-danger); background: var(--status-danger-soft); color: var(--status-danger); }
.ov-task-row.is-progress { border-color: var(--status-warning); }

/* Blockers section */
.blockers-section { margin-bottom: 22px; }
.blocker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--status-danger-soft); border-left: 3px solid var(--status-danger); border-radius: var(--radius-md); background: var(--surface-primary); margin-bottom: 8px; font-size: 13px; }
.blocker-age { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 7px; border-radius: 4px; background: var(--status-danger-soft); color: var(--status-danger); font-weight: 700; }

/* Team strip */
.team-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.team-member-chip { display: flex; align-items: center; gap: 8px; padding: 6px 11px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 12.5px; }
.team-member-chip .team-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 9px; flex-shrink: 0; }

/* Config section (Workflow tab, Setup tab) */
.config-section { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; }
.config-section-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 12px; }
.config-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-default); }
.config-row:last-child { border-bottom: 0; }
.config-label { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; min-width: 140px; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; padding-top: 1px; }
.config-value { font-size: 13px; color: var(--text-primary); flex: 1; font-weight: 500; }
.config-locked { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); background: var(--surface-tertiary); padding: 4px 10px; border-radius: 999px; }

/* Wf-card in detail Workflow tab */
.wf-card-detail { padding: 16px 18px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); }

/* Stage-task block (Tasks tab + Add-flow Step 3) */
.stage-task-block { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 10px; }
.stage-task-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; transition: background 0.1s; user-select: none; }
.stage-task-head:hover { background: var(--surface-secondary); }
.stage-task-head .chevron { color: var(--text-tertiary); transition: transform 0.15s; flex-shrink: 0; }
.stage-task-block.is-expanded .stage-task-head .chevron { transform: rotate(90deg); }
.stage-task-body { display: none; border-top: 1px solid var(--border-default); }
.stage-task-block.is-expanded .stage-task-body { display: block; }
.stage-num { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-tertiary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.stage-info { flex: 1; min-width: 0; }
.stage-name-text { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.stage-task-count { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: var(--surface-tertiary); color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; flex-shrink: 0; }

/* Task list */
.task-list { padding: 8px 0; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--border-default); transition: background 0.1s; }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--surface-secondary); }
.task-handle { color: var(--text-tertiary); cursor: grab; flex-shrink: 0; }
.task-icon { width: 22px; height: 22px; border-radius: 5px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.task-info { flex: 1; min-width: 0; }
.task-name-text { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.task-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-role-pill { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-tertiary); color: var(--text-secondary); }
.task-role-pill.is-bk { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.task-role-pill.is-sup { background: var(--status-info-soft); color: var(--status-info); }
.task-role-pill.is-client { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .task-role-pill.is-client { color: var(--status-warning); }
.task-override { min-width: 176px; flex-shrink: 0; }
.add-task-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; border: 0; border-top: 1px dashed var(--border-default); background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s; }
.add-task-btn:hover { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* Checklist items list */
.cl-items-list { display: grid; gap: 6px; }
.cl-item-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); }
.cl-item-grip { color: var(--text-tertiary); cursor: grab; }
.cl-item-text { flex: 1; font-size: 13px; color: var(--text-primary); }

/* Step rail (Add-flow) */
.step-rail { display: flex; align-items: center; padding: 14px 18px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.step-rail::-webkit-scrollbar { display: none; }
.step-rail-step { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; user-select: none; min-width: 0; }
.step-rail-step:last-child { flex: 0; }
.step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-tertiary); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; transition: all 0.15s; }
.step-label { font-size: 12px; color: var(--text-tertiary); font-weight: 500; transition: color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-connector { flex: 1; height: 2px; background: var(--border-default); margin: 0 6px; min-width: 12px; flex-shrink: 0; }
.step-rail-step.is-completed .step-num { background: var(--brand-primary); color: var(--brand-dark); }
.step-rail-step.is-current .step-num { background: var(--brand-dark); color: var(--brand-primary); border: 2px solid var(--brand-primary); }
.step-rail-step.is-completed .step-label { color: var(--brand-primary-strong); font-weight: 600; }
.step-rail-step.is-current .step-label { color: var(--text-primary); font-weight: 600; }
.step-rail-step.is-completed .step-connector { background: var(--brand-primary); }

/* Step panels (Add-flow) */
.step-panel { display: none; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 16px; }
.step-panel.active { display: block; }
.step-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 6px; }
.step-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 6px; line-height: 1.2; }
.step-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 24px; max-width: 600px; }
.step-divider { border: 0; height: 1px; background: var(--border-default); margin: 22px 0; }
.section-head { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; margin-bottom: 12px; }
.form-help { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.45; }
.info-box { background: var(--status-info-soft); border-left: 3px solid var(--status-info); border-radius: var(--radius-md); padding: 10px 14px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; }

/* Workflow cards (Add-flow Step 1) */
.wf-grid { display: grid; gap: 10px; }
.wf-card { padding: 16px 18px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: all 0.12s; }
.wf-card:hover { border-color: var(--brand-primary); }
.wf-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.wf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.wf-name { font-size: 14.5px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.wf-badge { display: inline-flex; padding: 1px 7px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.wf-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.wf-stats { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--text-tertiary); flex-wrap: wrap; }
.wf-stat strong { color: var(--text-primary); font-weight: 600; }

/* Pick cards (Add-flow Step 2) */
.pick-grid { display: grid; gap: 8px; margin-bottom: 10px; }
.pick-card { padding: 13px 15px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: all 0.12s; display: flex; align-items: center; gap: 13px; }
.pick-card:hover { border-color: var(--brand-primary); }
.pick-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.pick-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-tertiary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }
.pick-card.is-selected .pick-icon { background: var(--brand-primary); color: var(--brand-dark); }
.pick-info { flex: 1; min-width: 0; }
.pick-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.pick-meta { font-size: 11.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.meta-chip { display: inline-flex; padding: 1px 7px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-tertiary); color: var(--text-secondary); }
.meta-chip.is-active { background: var(--status-success-soft); color: var(--status-success); }
.add-new-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border: 1.5px dashed var(--border-default); border-radius: var(--radius-md); color: var(--brand-primary-strong); font-weight: 600; font-size: 12.5px; cursor: pointer; transition: all 0.12s; background: transparent; font-family: inherit; }
.add-new-link:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }

/* Radio cards (Add-flow Step 2) */
.radio-group { display: grid; gap: 8px; margin-bottom: 14px; }
.radio-group.cols-2 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.radio-group.cols-4 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.radio-card { padding: 11px 13px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: all 0.12s; }
.radio-card:hover { border-color: var(--brand-primary); }
.radio-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.radio-card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.radio-card-icon { font-size: 15px; }
.radio-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.radio-card-desc { font-size: 11.5px; color: var(--text-secondary); }

/* Team assignment (Add-flow Step 2) */
.team-list { display: grid; gap: 8px; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); }
.team-role { min-width: 120px; }
.team-role-title { font-size: 13px; font-weight: 600; }
.team-role-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.team-arrow { color: var(--text-tertiary); flex-shrink: 0; }
.team-select { flex: 1; }

/* Accounts (Add-flow Step 2) */
.accounts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.account-block { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; }
.account-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.account-block-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.account-count { width: 60px; }
.account-names { display: grid; gap: 6px; margin-top: 8px; }

/* Checklist template cards (Add-flow Step 4) */
.cl-template-grid { display: grid; gap: 8px; margin-bottom: 14px; }
.cl-template-card { padding: 12px 14px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: all 0.12s; display: flex; align-items: center; gap: 12px; }
.cl-template-card:hover { border-color: var(--brand-primary); }
.cl-template-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.cl-template-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-tertiary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-secondary); }
.cl-template-card.is-selected .cl-template-icon { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* License (Add-flow Step 5) */
.license-active-banner { background: var(--status-success-soft); border: 1px solid var(--status-success); border-radius: var(--radius-md); padding: 13px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.license-active-title { font-size: 13px; font-weight: 600; color: var(--status-success); }
.license-active-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.license-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.license-card { padding: 14px 16px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: all 0.12s; text-align: center; }
.license-card:hover { border-color: var(--brand-primary); }
.license-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.license-tier { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600; margin-bottom: 3px; }
.license-price { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
.license-features { font-size: 11.5px; color: var(--text-secondary); line-height: 1.6; text-align: left; }

/* Review sections (Add-flow Step 6) */
.review-section { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 15px 18px; margin-bottom: 11px; }
.review-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.review-section-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.review-edit-btn { font-size: 12px; font-weight: 600; color: var(--brand-primary-strong); cursor: pointer; background: none; border: 0; font-family: inherit; }
.review-edit-btn:hover { text-decoration: underline; }
.review-row { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border-default); }
.review-row:last-child { border-bottom: 0; }
.review-label { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; min-width: 120px; padding-top: 1px; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.review-value { font-size: 13px; color: var(--text-primary); font-weight: 500; flex: 1; line-height: 1.5; }
.activate-callout { background: var(--brand-primary-soft); border: 1px solid var(--brand-primary); border-radius: var(--radius-md); padding: 16px 20px; margin-top: 16px; display: flex; align-items: flex-start; gap: 14px; }
.activate-callout-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-primary); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activate-callout-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.activate-callout-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

/* Wizard footer (Add-flow — fixed full-width) */
.wizard-footer { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-primary); border-top: 1px solid var(--border-default); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 100; }
.wizard-footer-left { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 10px; }
.wizard-footer-right { display: flex; gap: 8px; align-items: center; }
.draft-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 7px; border-radius: 4px; background: var(--status-warning-soft); color: #B45309; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
[data-theme="dark"] .draft-badge { color: var(--status-warning); }
.btn-success { background: var(--status-success); color: #FFFFFF; border-color: var(--status-success); font-weight: 600; }
.btn-success:hover { background: #059669; }

@media (max-width: 700px) {
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .overview-grid { grid-template-columns: 1fr 1fr; }
  .overview-two-col { grid-template-columns: 1fr; }
  .accounts-grid { grid-template-columns: 1fr; }
  .license-grid { grid-template-columns: 1fr; }
  .radio-group.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .task-override { display: none; }
  .step-label { display: none; }
  .table-row { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Sidebar — disabled nav items (future features)
   ============================================================ */
.nav-item-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ============================================================
   Dashboard — role toggle
   ============================================================ */
.role-toggle { display: flex; gap: 4px; margin-bottom: 22px; padding: 4px; background: var(--surface-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-default); width: fit-content; }
.role-tab { padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 7px; transition: all 0.12s ease; border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.role-tab:hover { color: var(--text-primary); }
.role-tab.is-active { background: var(--surface-primary); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(11,15,30,0.08); }

/* ============================================================
   Dashboard — hero / greeting
   ============================================================ */
.dash-hero { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 24px; flex-wrap: wrap; }
.dash-hero-left { flex: 1; min-width: 260px; }
.greeting-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; margin-bottom: 4px; }
.greeting-title { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 500; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.01em; }
.greeting-sub { font-size: 14px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; max-width: 640px; }
.role-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); margin-bottom: 6px; }

/* ============================================================
   Dashboard — N2 setup banner
   ============================================================ */
.n2-banner { background: linear-gradient(135deg, rgba(46,212,165,0.07) 0%, rgba(167,139,250,0.07) 100%); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.n2-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.n2-info { flex: 1; min-width: 220px; }
.n2-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.n2-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }
.n2-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.n2-action-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: all 0.12s ease; text-decoration: none; font-family: inherit; }
.n2-action-pill:hover { border-color: var(--brand-primary); }
.n2-dismiss { width: 26px; height: 26px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); border: 0; background: transparent; cursor: pointer; }
.n2-dismiss:hover { background: var(--surface-secondary); color: var(--text-primary); }

/* ============================================================
   Dashboard — KPI trend
   ============================================================ */
.kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; }
.kpi-trend.up { color: var(--status-success); }
.kpi-trend.down { color: var(--status-danger); }

/* ============================================================
   Dashboard — quick actions
   ============================================================ */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.quick-action { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.15s ease; text-decoration: none; color: inherit; }
.quick-action:hover { border-color: var(--brand-primary); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.quick-action-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick-action-text { flex: 1; min-width: 0; }
.quick-action-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.quick-action-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }

/* ============================================================
   Dashboard — two-column grid + dash cards
   ============================================================ */
.dashboard-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin-bottom: 18px; }
.dash-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.dash-card-head { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-default); }
.dash-card-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.dash-card-link { font-size: 12px; font-weight: 600; color: var(--brand-primary-strong); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.12s ease; }
.dash-card-link:hover { gap: 7px; }
.dash-card-body { padding: 4px 0; }

/* ============================================================
   Dashboard — list rows (at-risk, portals)
   ============================================================ */
.dash-row { padding: 12px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); transition: background 0.1s ease; }
.dash-row:last-child { border-bottom: 0; }
.dash-row:hover { background: var(--surface-secondary); }
.dash-row-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-tone-success { background: var(--status-success-soft); color: var(--status-success); }
.icon-tone-warning { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .icon-tone-warning { color: var(--status-warning); }
.icon-tone-danger { background: var(--status-danger-soft); color: var(--status-danger); }
.icon-tone-info { background: var(--status-info-soft); color: var(--status-info); }
.icon-tone-brand { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.icon-tone-neutral { background: var(--surface-tertiary); color: var(--text-secondary); }
.dash-row-info { flex: 1; min-width: 0; }
.dash-row-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.dash-row-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-row-action { font-size: 11.5px; color: var(--brand-primary-strong); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border-default); border-radius: 999px; cursor: pointer; transition: all 0.12s ease; background: transparent; font-family: inherit; }
.dash-row-action:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.row-pill { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; flex-shrink: 0; }
.row-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.row-pill.tone-success { background: var(--status-success-soft); color: var(--status-success); }
.row-pill.tone-warning { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .row-pill.tone-warning { color: var(--status-warning); }
.row-pill.tone-danger { background: var(--status-danger-soft); color: var(--status-danger); }
.row-pill.tone-info { background: var(--status-info-soft); color: var(--status-info); }

/* ============================================================
   Dashboard — activity feed
   ============================================================ */
.activity-feed-row { padding: 12px 18px; display: flex; align-items: flex-start; gap: 11px; border-bottom: 1px solid var(--border-default); }
.activity-feed-row:last-child { border-bottom: 0; }
.activity-feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.activity-feed-dot.tone-success { background: var(--status-success); }
.activity-feed-dot.tone-info { background: var(--status-info); }
.activity-feed-dot.tone-brand { background: var(--brand-primary); }
.activity-feed-dot.tone-warning { background: var(--status-warning); }
.activity-feed-dot.tone-danger { background: var(--status-danger); }
.activity-feed-info { flex: 1; min-width: 0; }
.activity-feed-text { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.activity-feed-text strong { font-weight: 600; }
.activity-feed-actor { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-primary); }
.activity-feed-avatar { width: 16px; height: 16px; border-radius: 50%; background: var(--brand-dark); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; vertical-align: middle; flex-shrink: 0; }
.activity-feed-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; font-weight: 500; }

/* ============================================================
   Dashboard — period close chart
   ============================================================ */
.stage-strip { display: flex; align-items: stretch; height: 32px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-secondary); margin: 12px 0 8px; }
.stage-segment { flex-grow: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #FFFFFF; }
.stage-segment.is-bookkeeper { background: #6366F1; }
.stage-segment.is-recon { background: #0891B2; }
.stage-segment.is-supervisor { background: #F59E0B; }
.stage-segment.is-client { background: #A78BFA; }
.stage-segment.is-readytolock { background: #10B981; }
.stage-segment.is-locked { background: #4B5266; }
.stage-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; font-size: 11px; }
.stage-legend-item { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.stage-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ============================================================
   Dashboard — team load / capacity bars
   ============================================================ */
.member-row { padding: 11px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); }
.member-row:last-child { border-bottom: 0; }
.member-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex-shrink: 0; }
.member-tone-1 { background: #4F46E5; color: #E0E7FF; }
.member-tone-2 { background: #DB2777; color: #FCE7F3; }
.member-tone-3 { background: #0891B2; color: #CFFAFE; }
.member-tone-4 { background: #B45309; color: #FEF3C7; }
.member-tone-5 { background: #047857; color: #D1FAE5; }
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.member-load { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; }
.capacity-bar { width: 80px; height: 6px; border-radius: 3px; background: var(--surface-tertiary); overflow: hidden; flex-shrink: 0; position: relative; }
.capacity-bar-fill { height: 100%; transition: width 0.3s ease; }
.capacity-bar-fill.is-low { background: var(--status-success); }
.capacity-bar-fill.is-mid { background: var(--status-warning); }
.capacity-bar-fill.is-high { background: var(--status-danger); }
.capacity-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; width: 36px; text-align: right; flex-shrink: 0; }

/* ============================================================
   Dashboard — today snapshot
   ============================================================ */
.today-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 18px; }
.today-card-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.today-card-date { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.today-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-default); }
.today-row:last-child { border-bottom: 0; }
.today-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); font-weight: 600; width: 64px; flex-shrink: 0; }
.today-marker { width: 3px; height: 22px; border-radius: 2px; flex-shrink: 0; }
.today-marker.tone-brand { background: var(--brand-primary); }
.today-marker.tone-warning { background: var(--status-warning); }
.today-marker.tone-info { background: var(--status-info); }
.today-marker.tone-danger { background: var(--status-danger); }
.today-info { flex: 1; min-width: 0; }
.today-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.today-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }

/* ============================================================
   Demo callout (shared across pages)
   ============================================================ */
.demo-callout { background: var(--brand-primary-soft); border-left: 3px solid var(--brand-primary); padding: 14px 18px; margin: 0 0 18px; border-radius: var(--radius-md); font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.demo-callout strong { color: var(--text-primary); }
.demo-callout-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary-strong); margin-bottom: 4px; }

/* ============================================================
   Customer / Business hero (detail pages)
   ============================================================ */
.entity-hero { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px 26px; margin-bottom: 22px; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.entity-hero-avatar { width: 72px; height: 72px; border-radius: 14px; background: var(--brand-dark); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 22px; flex-shrink: 0; }
.entity-hero-avatar.is-customer { border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); font-size: 26px; font-family: 'Fraunces', serif; }
.entity-hero-avatar.is-business { border-radius: 14px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); font-size: 22px; font-family: 'JetBrains Mono', monospace; }
.entity-hero-info { flex: 1; min-width: 240px; }
.entity-hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 4px; }
.entity-hero-name { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 6px; }
.entity-hero-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
.entity-hero-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.entity-hero-meta-item svg { color: var(--text-tertiary); flex-shrink: 0; }
.entity-hero-meta-item a { color: var(--brand-primary-strong); text-decoration: none; }
.entity-hero-meta-item a:hover { text-decoration: underline; }
.entity-hero-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 700px) { .entity-hero { flex-direction: column; } .entity-hero-actions { width: 100%; } }

/* ============================================================
   Detail page — section cards
   ============================================================ */
.section-card-head { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-default); }
.section-card-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.section-card-link { font-size: 12px; font-weight: 600; color: var(--brand-primary-strong); background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
.section-card-link:hover { text-decoration: underline; }
.section-card-body { padding: 0; }

/* ============================================================
   Detail page — stat grid tiles
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.stat-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; }
.stat-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.stat-tile-value { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; margin-bottom: 4px; }
.stat-tile-sub { font-size: 11.5px; color: var(--text-tertiary); }

/* ============================================================
   Detail page — info grid (key-value pairs)
   ============================================================ */
.info-grid { padding: 4px 0; }
.info-row { display: grid; grid-template-columns: 180px 1fr; gap: 8px 14px; padding: 10px 20px; border-bottom: 1px solid var(--border-default); font-size: 13px; align-items: start; }
.info-row:last-child { border-bottom: 0; }
.info-label { color: var(--text-tertiary); font-size: 12px; font-weight: 500; padding-top: 1px; }
.info-value { color: var(--text-primary); font-weight: 500; }

/* ============================================================
   Dashboard-view overrides — restore HTML template values over
   the .portal-page .kpi-strip / .kpi cascade (same specificity,
   later position wins).
   ============================================================ */
.dashboard-view .kpi-strip { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 900px) { .dashboard-view .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.dashboard-view .kpi { padding: 16px 18px; box-shadow: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.dashboard-view .kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.dashboard-view .kpi-accent { border-radius: 0; }
.dashboard-view .kpi.is-brand .kpi-accent { background: var(--brand-primary); }
.dashboard-view .kpi-value { font-size: 28px; }
.dashboard-view .kpi.is-warning .kpi-value { color: var(--text-primary); }
.dashboard-view .kpi.is-danger .kpi-value { color: var(--text-primary); }
.dashboard-view .kpi-meta { font-size: 12px; display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.row-pill .pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ============================================================
   Detail page — entity rows (businesses, engagements, etc.)
   ============================================================ */
.entity-row { padding: 12px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background 0.1s ease; }
.entity-row:last-child { border-bottom: 0; }
.entity-row:hover { background: var(--surface-secondary); }
.entity-row-icon { width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.entity-row-icon.is-business { background: var(--brand-dark); color: var(--brand-primary); }
.entity-row-icon.is-customer { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #E0E7FF; }
.entity-row-icon.is-engagement { background: var(--brand-primary-soft); color: var(--brand-primary-strong); font-size: 16px; }
.entity-row-icon.is-account { background: var(--status-info-soft); color: var(--status-info); font-size: 16px; }
.entity-row-icon.is-team { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #E0E7FF; }
.entity-row-info { flex: 1; min-width: 0; }
.entity-row-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entity-row-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.4; }
.entity-row-action { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--text-tertiary); }

/* ============================================================
   Detail page — status pills (template-style)
   ============================================================ */
.status-pill.is-active { background: var(--status-success-soft); color: var(--status-success); }
.status-pill.is-closed { background: var(--surface-tertiary); color: var(--text-tertiary); }
.status-pill.is-not-invited { background: var(--surface-tertiary); color: var(--text-tertiary); }
.status-pill.is-accepted { background: var(--status-success-soft); color: var(--status-success); }
.status-pill.is-sent { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .status-pill.is-sent { color: var(--status-warning); }
.status-pill.is-expired { background: var(--status-danger-soft); color: var(--status-danger); }
.status-pill.is-connected { background: var(--status-success-soft); color: var(--status-success); }
.status-pill.is-expiring { background: var(--status-warning-soft); color: #B45309; }
/* PeriodTask status pills: Ready (actionable, green-tint) vs Pending (waiting, grey-blue). */
.status-pill.is-ready { background: var(--status-success-soft); color: var(--status-success); }
.status-pill.is-waiting { background: var(--status-info-soft); color: var(--status-info); }
.pc-task-sub { margin-top: 3px; font-size: 11px; color: var(--text-tertiary); }
.pc-task-sub.is-blocked { color: var(--status-danger); }

/* ============================================================
   Detail page — portal access card
   ============================================================ */
.portal-status-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.portal-status-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-status-icon.is-accepted { background: var(--status-success-soft); color: var(--status-success); }
.portal-status-icon.is-sent { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .portal-status-icon.is-sent { color: var(--status-warning); }
.portal-status-icon.is-not-invited { background: var(--surface-tertiary); color: var(--text-tertiary); }
.portal-status-info { flex: 1; min-width: 200px; }
.portal-status-headline { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.portal-status-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
.portal-status-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* Portal activity history */
.portal-history-list { padding: 4px 0; }
.portal-history-row { padding: 10px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); }
.portal-history-row:last-child { border-bottom: 0; }
.portal-history-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-history-icon.is-success { background: var(--status-success-soft); color: var(--status-success); }
.portal-history-icon.is-info { background: var(--status-info-soft); color: var(--status-info); }
.portal-history-info { flex: 1; min-width: 0; }
.portal-history-action { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.portal-history-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.portal-history-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   Detail page — documents list
   ============================================================ */
.doc-row { padding: 12px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background 0.1s ease; }
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--surface-secondary); }
.doc-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-secondary); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.doc-size { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   Detail page — activity timeline
   ============================================================ */
.timeline { padding: 4px 0; }
.timeline-item { padding: 12px 20px; display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--border-default); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.timeline-icon.is-success { background: var(--status-success-soft); color: var(--status-success); }
.timeline-icon.is-info { background: var(--status-info-soft); color: var(--status-info); }
.timeline-icon.is-warning { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .timeline-icon.is-warning { color: var(--status-warning); }
.timeline-content { flex: 1; min-width: 0; }
.timeline-action { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.timeline-action strong { font-weight: 600; }
.timeline-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; font-family: 'JetBrains Mono', monospace; }

/* ============================================================
   Detail page — notes
   ============================================================ */
.notes-empty { padding: 32px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.notes-textarea { width: 100%; min-height: 120px; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-family: inherit; font-size: 13.5px; line-height: 1.6; resize: vertical; transition: border-color 0.12s, box-shadow 0.12s; }
.notes-textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }

/* ============================================================
   Customers list — invite status badges
   ============================================================ */
.invite-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.invite-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.invite-status.is-accepted { background: var(--status-success-soft); color: var(--status-success); }
.invite-status.is-sent { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .invite-status.is-sent { color: var(--status-warning); }
.invite-status.is-expired { background: var(--status-danger-soft); color: var(--status-danger); }
.invite-status.is-not-invited { background: var(--surface-tertiary); color: var(--text-tertiary); }
.status-meta { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

/* Customer initials avatar (list + detail) */
.customer-initials { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.customer-tone-1 { background: #EDE9FE; color: #4F46E5; }
.customer-tone-2 { background: #FCE7F3; color: #9D174D; }
.customer-tone-3 { background: #CFFAFE; color: #0E7490; }
.customer-tone-4 { background: #FEF3C7; color: #92400E; }
.customer-tone-5 { background: #D1FAE5; color: #065F46; }
.customer-tone-6 { background: #DBEAFE; color: #1E40AF; }
[data-theme="dark"] .customer-tone-1 { background: #2E1065; color: #C4B5FD; }
[data-theme="dark"] .customer-tone-2 { background: #4A0026; color: #F9A8D4; }
[data-theme="dark"] .customer-tone-3 { background: #164E63; color: #A5F3FC; }
[data-theme="dark"] .customer-tone-4 { background: #431407; color: #FDE68A; }
[data-theme="dark"] .customer-tone-5 { background: #064E3B; color: #A7F3D0; }
[data-theme="dark"] .customer-tone-6 { background: #1E3A5F; color: #93C5FD; }

/* Invite action buttons */
.action-btn-invite { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border-default); border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.12s ease; background: transparent; font-family: inherit; color: var(--brand-primary-strong); }
.action-btn-invite:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.action-btn-invite.tone-warning { color: #B45309; }
[data-theme="dark"] .action-btn-invite.tone-warning { color: var(--status-warning); }
.action-btn-invite.tone-warning:hover { border-color: var(--status-warning); background: var(--status-warning-soft); }
.action-btn-invite.tone-danger { color: var(--status-danger); }
.action-btn-invite.tone-danger:hover { border-color: var(--status-danger); background: var(--status-danger-soft); }

/* ── CUSTOMER (CLIENT) PORTAL ──
   All rules below scoped under .client-portal-page to keep them
   isolated from the firm portal's .portal-page chrome.
   Source: Templates/Customer/cp-dashboard.html (with appbar business-switcher
   visuals from Templates/Customer/Client-Portal-multi-business.html). */

.client-portal-page { height: 100vh; display: flex; flex-direction: column; }

/* Appbar */
.client-portal-page .appbar { height: 56px; background: var(--surface-primary); border-bottom: 1px solid var(--border-default); display: flex; align-items: center; padding: 0 20px 0 0; flex-shrink: 0; z-index: 100; }
.client-portal-page .appbar-logo-zone { width: 232px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 20px; border-right: 1px solid var(--border-default); height: 100%; }
.client-portal-page .appbar-logomark { width: 26px; height: 26px; background: var(--brand-primary); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.client-portal-page .appbar-logomark svg { width: 15px; height: 15px; }
.client-portal-page .appbar-brand-name { font-family: 'Fraunces', Georgia, serif; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.client-portal-page .appbar-client-badge { background: var(--brand-primary-soft); color: var(--brand-primary-strong); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; letter-spacing: .03em; margin-left: 4px; }
.client-portal-page .appbar-spacer { flex: 1; }
.client-portal-page .appbar-actions { display: flex; align-items: center; gap: 6px; }
.client-portal-page .appbar-firm-chip { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-default); border-radius: 20px; padding: 4px 12px 4px 8px; font-size: 12px; color: var(--text-secondary); }
.client-portal-page .appbar-firm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-success); }
.client-portal-page .appbar-icon-btn { width: 34px; height: 34px; border: none; background: transparent; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: background .15s; position: relative; }
.client-portal-page .appbar-icon-btn:hover { background: var(--surface-secondary); }
.client-portal-page .notif-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; background: var(--status-danger); border-radius: 50%; border: 1.5px solid var(--surface-primary); }
.client-portal-page .appbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-primary); color: var(--brand-dark); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 4px; }

/* Business switcher (static display this milestone — no dropdown). */
.client-portal-page .business-switcher { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; margin: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color 0.12s ease; background: transparent; position: relative; }
.client-portal-page .business-switcher:hover { border-color: var(--brand-primary); }
.client-portal-page .bs-avatar { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex-shrink: 0; }
.client-portal-page .bs-info { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.client-portal-page .bs-name { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.15; }
.client-portal-page .bs-sub { font-size: 10px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.client-portal-page .bs-caret { color: var(--text-tertiary); flex-shrink: 0; transition: transform 0.18s ease; }

/* Body / sidebar / page area */
.client-portal-page .portal-body { display: flex; flex: 1; overflow: hidden; }
.client-portal-page .sidebar { width: 232px; background: var(--surface-primary); border-right: 1px solid var(--border-default); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; }
.client-portal-page .sidebar-section-label { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); padding: 18px 20px 7px; }
.client-portal-page .nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 20px; cursor: pointer; transition: background .12s; color: var(--text-secondary); font-size: 13.5px; font-weight: 400; border-left: 3px solid transparent; text-decoration: none; }
.client-portal-page .nav-item:hover { background: var(--surface-secondary); color: var(--text-primary); }
.client-portal-page .nav-item.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); font-weight: 600; border-left-color: var(--brand-primary); }
.client-portal-page .nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.client-portal-page .nav-item.nav-item-disabled { cursor: not-allowed; opacity: 0.55; }
.client-portal-page .nav-item.nav-item-disabled:hover { background: transparent; color: var(--text-secondary); }
.client-portal-page .nav-badge { margin-left: auto; background: var(--status-danger); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
.client-portal-page .nav-badge.green { background: var(--brand-primary); color: var(--brand-dark); }
.client-portal-page .nav-badge.blue { background: var(--status-info-soft); color: var(--status-info); }

.client-portal-page .page-area { flex: 1; overflow-y: auto; background: var(--surface-secondary); }
.client-portal-page .page-content { padding: 24px 28px 60px; max-width: 1200px; width: 100%; }

/* Greeting */
.client-portal-page .dash-greeting { margin-bottom: 24px; }
.client-portal-page .dash-greeting-eyebrow { font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
.client-portal-page .dash-greeting-title { font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 600; color: var(--text-primary); line-height: 1.2; margin-bottom: 4px; }
.client-portal-page .dash-greeting-sub { font-size: 13px; color: var(--text-secondary); }

/* Section header */
.client-portal-page .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.client-portal-page .section-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: .01em; }
.client-portal-page .section-link { font-size: 12px; color: var(--brand-primary-strong); text-decoration: none; font-weight: 500; }
.client-portal-page .section-link:hover { text-decoration: underline; }

/* KPI grid */
.client-portal-page .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.client-portal-page .kpi-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 6px; height: 100%; }
.client-portal-page .kpi-card.alert { border-color: rgba(239, 68, 68, .25); background: linear-gradient(135deg, #fff 0%, var(--status-danger-soft) 100%); }
.client-portal-page .kpi-card.warn { border-color: rgba(245, 158, 11, .25); background: linear-gradient(135deg, #fff 0%, var(--status-warning-soft) 100%); }
.client-portal-page .kpi-card.ok { border-color: rgba(46, 212, 165, .25); background: linear-gradient(135deg, #fff 0%, var(--brand-primary-soft) 100%); }
.client-portal-page .kpi-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); }
.client-portal-page .kpi-value { font-family: 'Fraunces', Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1; }
.client-portal-page .kpi-value.red { color: var(--status-danger); }
.client-portal-page .kpi-value.amber { color: var(--status-warning); }
.client-portal-page .kpi-value.green { color: var(--brand-primary-strong); }
.client-portal-page .kpi-value.neutral { color: var(--text-primary); }
.client-portal-page .kpi-meta { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* Dashboard two-col layout */
.client-portal-page .dash-cols { display: grid; grid-template-columns: 1fr 360px; gap: 20px; margin-bottom: 24px; align-items: start; }
.client-portal-page .dash-cols-full { margin-bottom: 24px; width: 100%; }

/* Card base */
.client-portal-page .card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.client-portal-page .card-head { padding: 14px 18px 12px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; }
.client-portal-page .card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.client-portal-page .card-body { padding: 0; }

/* Month progress timeline */
.client-portal-page .progress-banner { background: var(--brand-dark); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 24px; position: relative; overflow: hidden; }
.client-portal-page .progress-banner::before { content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(46, 212, 165, .15) 0%, transparent 70%); pointer-events: none; }
.client-portal-page .progress-banner::after { content: ''; position: absolute; bottom: -40px; left: 30%; width: 160px; height: 160px; background: radial-gradient(circle, rgba(167, 139, 250, .10) 0%, transparent 70%); pointer-events: none; }
.client-portal-page .progress-banner-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; position: relative; z-index: 1; }
.client-portal-page .progress-period { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; color: #fff; }
.client-portal-page .progress-period-sub { font-size: 12px; color: var(--text-on-dark-muted); margin-top: 2px; }
.client-portal-page .progress-status-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(46, 212, 165, .15); border: 1px solid rgba(46, 212, 165, .25); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--brand-primary); }
.client-portal-page .progress-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); }
.client-portal-page .milestone-track { position: relative; z-index: 1; }
.client-portal-page .milestone-line-wrap { position: relative; margin-bottom: 6px; }
.client-portal-page .milestone-bar-bg { height: 4px; background: rgba(255, 255, 255, .1); border-radius: 2px; position: relative; overflow: hidden; }
.client-portal-page .milestone-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-strong) 100%); transition: width .6s ease; }
.client-portal-page .milestone-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.client-portal-page .milestone-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; position: relative; }
.client-portal-page .milestone-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); flex-shrink: 0; }
.client-portal-page .milestone-dot.done { background: var(--brand-primary); border-color: var(--brand-primary); }
.client-portal-page .milestone-dot.active { background: var(--status-warning); border-color: var(--status-warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.client-portal-page .milestone-dot.pending { background: transparent; border-color: rgba(255, 255, 255, .15); }
.client-portal-page .milestone-step-label { font-size: 10px; color: var(--text-on-dark-muted); text-align: center; line-height: 1.3; font-family: 'Work Sans', sans-serif; }
.client-portal-page .milestone-step-date { font-size: 9px; font-family: 'JetBrains Mono', monospace; color: rgba(255, 255, 255, .3); text-align: center; }
.client-portal-page .milestone-step.done .milestone-step-label { color: var(--brand-primary); }
.client-portal-page .milestone-step.active .milestone-step-label { color: var(--status-warning); font-weight: 600; }

/* Tasks rows */
.client-portal-page .task-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border-default); transition: background .12s; }
.client-portal-page .task-row:last-child { border-bottom: none; }
.client-portal-page .task-row:hover { background: var(--surface-secondary); }
.client-portal-page .task-checkbox { width: 17px; height: 17px; border: 1.5px solid var(--border-strong); border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
.client-portal-page .task-info { flex: 1; min-width: 0; }
.client-portal-page .task-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-portal-page .task-source { font-size: 11px; color: var(--text-tertiary); }
.client-portal-page .task-due-pill { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.client-portal-page .due-overdue { background: var(--status-danger-soft); color: var(--status-danger); }
.client-portal-page .due-soon { background: var(--status-warning-soft); color: var(--status-warning); }
.client-portal-page .due-ok { background: var(--status-success-soft); color: var(--status-success); }

/* Period status table */
.client-portal-page .period-table { width: 100%; }
.client-portal-page .period-row { display: grid; grid-template-columns: 120px 1fr 110px 100px 90px; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--border-default); font-size: 13px; }
.client-portal-page .period-row:last-child { border-bottom: none; }
.client-portal-page .period-row:hover { background: var(--surface-secondary); }
.client-portal-page .period-row.is-header { background: var(--surface-secondary); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; padding: 8px 18px; }
.client-portal-page .period-name { font-weight: 600; color: var(--text-primary); font-family: 'Fraunces', Georgia, serif; font-size: 14px; }
.client-portal-page .period-name.current { color: var(--brand-primary-strong); }
.client-portal-page .period-bar-wrap { display: flex; align-items: center; gap: 8px; }
.client-portal-page .period-bar-bg { flex: 1; height: 5px; background: var(--border-default); border-radius: 3px; overflow: hidden; }
.client-portal-page .period-bar-fill { height: 100%; border-radius: 3px; }
.client-portal-page .period-bar-fill.complete { background: var(--status-success); }
.client-portal-page .period-bar-fill.in-progress { background: var(--brand-primary); }
.client-portal-page .period-bar-fill.waiting { background: var(--status-warning); }
.client-portal-page .period-bar-pct { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); white-space: nowrap; }
.client-portal-page .status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; font-family: 'JetBrains Mono', monospace; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.client-portal-page .chip-closed { background: var(--status-success-soft); color: var(--status-success); }
.client-portal-page .chip-waiting { background: var(--status-warning-soft); color: var(--status-warning); }
.client-portal-page .chip-open { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.client-portal-page .chip-review { background: var(--brand-accent-soft); color: #6D28D9; }
.client-portal-page .period-action-link { font-size: 12px; color: var(--brand-primary-strong); text-decoration: none; font-weight: 500; white-space: nowrap; }
.client-portal-page .period-action-link:hover { text-decoration: underline; }

/* Accounts statement matrix */
.client-portal-page .account-month-grid { display: grid; grid-template-columns: 1fr; width: 100%; }
.client-portal-page .acc-row { display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 0; border-bottom: 1px solid var(--border-default); }
.client-portal-page .acc-row:last-child { border-bottom: none; }
.client-portal-page .acc-row.is-header { background: var(--surface-secondary); }
.client-portal-page .acc-cell { padding: 10px 14px; display: flex; align-items: center; font-size: 12px; border-right: 1px solid var(--border-default); }
.client-portal-page .acc-cell:last-child { border-right: none; }
.client-portal-page .acc-cell.acc-cell-header { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.client-portal-page .acc-cell.acc-cell-name { flex-direction: column; align-items: flex-start; gap: 1px; }
.client-portal-page .acc-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.client-portal-page .acc-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.client-portal-page .acc-status-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; margin-right: 6px; }
.client-portal-page .icon-ok { background: var(--status-success-soft); color: var(--status-success); }
.client-portal-page .icon-miss { background: var(--status-danger-soft); color: var(--status-danger); }
.client-portal-page .icon-warn { background: var(--status-warning-soft); color: var(--status-warning); }
.client-portal-page .icon-na { background: var(--surface-tertiary); color: var(--text-tertiary); }
.client-portal-page .acc-status-text { font-size: 11px; font-weight: 500; }
.client-portal-page .acc-status-text.ok { color: var(--status-success); }
.client-portal-page .acc-status-text.miss { color: var(--status-danger); }
.client-portal-page .acc-status-text.warn { color: var(--status-warning); }
.client-portal-page .acc-status-text.na { color: var(--text-tertiary); }

/* Notifications card */
.client-portal-page .notif-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--border-default); transition: background .12s; }
.client-portal-page .notif-row:last-child { border-bottom: none; }
.client-portal-page .notif-row:hover { background: var(--surface-secondary); }
.client-portal-page .notif-row.unread { border-left: 2px solid var(--brand-primary); padding-left: 16px; }
.client-portal-page .notif-indicator { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); flex-shrink: 0; margin-top: 5px; }
.client-portal-page .notif-indicator.read { background: transparent; border: 1px solid var(--border-strong); }
.client-portal-page .notif-text { flex: 1; font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.client-portal-page .notif-text.read { color: var(--text-secondary); }
.client-portal-page .notif-time { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
.client-portal-page .notif-type-icon { width: 28px; height: 28px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.client-portal-page .nti-reminder { background: var(--status-warning-soft); color: var(--status-warning); }
.client-portal-page .nti-status { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.client-portal-page .nti-alert { background: var(--status-danger-soft); color: var(--status-danger); }

/* Responsive */
@media (max-width: 1100px) {
    .client-portal-page .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .client-portal-page .dash-cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .client-portal-page .acc-row { grid-template-columns: 140px repeat(3, 1fr); }
    .client-portal-page .period-row { grid-template-columns: 100px 1fr 90px 80px; }
}
@media (max-width: 768px) {
    .client-portal-page .sidebar { display: none; }
    .client-portal-page .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .client-portal-page .period-row { grid-template-columns: 80px 1fr 70px; }
    .client-portal-page .page-content { padding: 16px 16px 40px; }
    .client-portal-page .acc-row { grid-template-columns: 110px repeat(3, 1fr); }
}

/* ===================================================
   BK Dashboard — per-client bookkeeper view
   All rules scoped under .bk-dashboard to avoid
   conflicts with the superadmin / supervisor views.
   =================================================== */

.bk-dashboard .page-eyebrow { display: flex; align-items: center; gap: 6px; }
.bk-dashboard .page-sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.bk-dashboard .page-sub strong { color: var(--text-primary); }

/* Ghost button override — template uses brand green, not grey */
.bk-dashboard .btn-ghost { color: var(--brand-primary-strong); }
.bk-dashboard .btn-ghost:hover { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* Grid layout */
.bk-dashboard .dash-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.bk-dashboard .dash-main { display: flex; flex-direction: column; gap: 16px; }
.bk-dashboard .dash-side { display: flex; flex-direction: column; gap: 16px; }

/* Card shell */
.bk-dashboard .card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.bk-dashboard .card-head { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-default); }
.bk-dashboard .card-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.bk-dashboard .card-meta { font-size: 12px; color: var(--text-tertiary); }
.bk-dashboard .card-body { padding: 16px 20px; }
.bk-dashboard .card-link { font-size: 12.5px; color: var(--brand-primary-strong); font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; }
.bk-dashboard .card-link:hover { text-decoration: underline; }

/* Period hero */
.bk-dashboard .period-hero { background: linear-gradient(135deg, var(--brand-dark) 0%, #1a2740 100%); border-radius: var(--radius-lg); padding: 20px 24px; color: #fff; position: relative; overflow: hidden; }
.bk-dashboard .period-hero::before { content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(46, 212, 165, 0.08); }
.bk-dashboard .period-hero::after { content: ''; position: absolute; bottom: -30px; left: 60px; width: 120px; height: 120px; border-radius: 50%; background: rgba(167, 139, 250, 0.06); }
.bk-dashboard .ph-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(46, 212, 165, 0.8); font-weight: 600; margin-bottom: 6px; }
.bk-dashboard .ph-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; color: #fff; }
.bk-dashboard .ph-sub { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; }
.bk-dashboard .ph-progress { height: 6px; background: rgba(255, 255, 255, 0.15); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.bk-dashboard .ph-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-primary), #A78BFA); border-radius: 3px; width: 40%; }
.bk-dashboard .ph-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(255, 255, 255, 0.5); font-family: 'JetBrains Mono', monospace; }
.bk-dashboard .ph-meta strong { color: rgba(46, 212, 165, 0.9); }
.bk-dashboard .ph-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 4px; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.04em; background: rgba(239, 68, 68, 0.2); color: #FCA5A5; margin-top: 10px; }

/* Period timeline */
.bk-dashboard .timeline-stages { display: flex; gap: 0; padding: 16px 20px; }
.bk-dashboard .ts-item { flex: 1; position: relative; }
.bk-dashboard .ts-connector { height: 4px; background: var(--border-default); border-radius: 2px; margin: 0 6px 8px; }
.bk-dashboard .ts-connector.done { background: var(--status-success); }
.bk-dashboard .ts-connector.blocked { background: var(--status-danger); }
.bk-dashboard .ts-connector.active { background: var(--brand-primary); }
.bk-dashboard .ts-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; margin: 0 auto 6px; border: 2px solid var(--border-default); color: var(--text-tertiary); }
.bk-dashboard .ts-dot.done { background: var(--status-success); border-color: var(--status-success); color: #fff; }
.bk-dashboard .ts-dot.blocked { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.bk-dashboard .ts-dot.active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.bk-dashboard .ts-dot.pending { background: var(--surface-tertiary); border-color: var(--surface-tertiary); color: var(--text-tertiary); }
.bk-dashboard .ts-name { font-size: 11px; font-weight: 600; color: var(--text-primary); text-align: center; margin-bottom: 2px; }
.bk-dashboard .ts-detail { font-size: 10.5px; color: var(--text-tertiary); text-align: center; font-family: 'JetBrains Mono', monospace; }
.bk-dashboard .ts-blocker { font-size: 10px; color: var(--status-danger); text-align: center; margin-top: 3px; line-height: 1.3; }

/* Blockers */
.bk-dashboard .blocker-row { padding: 14px 20px; border-bottom: 1px solid var(--border-default); display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: start; border-left: none; border-radius: 0; background: none; margin-bottom: 0; }
.bk-dashboard .blocker-row:last-child { border-bottom: 0; }
.bk-dashboard .blocker-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.bk-dashboard .blocker-dot.critical { background: var(--status-danger); }
.bk-dashboard .blocker-dot.warning { background: var(--status-warning); }
.bk-dashboard .blocker-dot.info { background: var(--status-info); }
.bk-dashboard .blocker-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.bk-dashboard .blocker-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.bk-dashboard .blocker-age { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.bk-dashboard .blocker-age.critical { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.bk-dashboard .blocker-age.warning { background: var(--status-warning-soft); color: #B45309; }
.bk-dashboard .blocker-cta { margin-top: 6px; }

/* Status grid (bookkeeping / bank by month) */
.bk-dashboard .status-grid-wrap { overflow-x: auto; }
.bk-dashboard .status-grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.bk-dashboard .status-grid th { padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); text-align: left; background: var(--surface-secondary); }
.bk-dashboard .status-grid td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); vertical-align: middle; }
.bk-dashboard .status-grid tr:last-child td { border-bottom: 0; }
.bk-dashboard .status-grid tr.is-current td { background: var(--brand-primary-soft); }
.bk-dashboard .stage-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.bk-dashboard .stage-chip.done { background: var(--status-success-soft); color: var(--status-success); }
.bk-dashboard .stage-chip.categorized { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.bk-dashboard .stage-chip.reconciled { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.bk-dashboard .stage-chip.blocked { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.bk-dashboard .stage-chip.pending { background: var(--surface-tertiary); color: var(--text-tertiary); }
.bk-dashboard .period-badge { font-weight: 600; color: var(--text-primary); }
.bk-dashboard .period-badge.current { color: var(--brand-primary-strong); }
.bk-dashboard .duration-chip { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); }

/* KPI accuracy strip (overrides the portal-page kpi for this context) */
.bk-dashboard .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.bk-dashboard .kpi-strip .kpi { background: var(--surface-secondary); border-radius: var(--radius-md); padding: 12px 14px; border: none; box-shadow: none; transform: none; }
.bk-dashboard .kpi-strip .kpi:hover { transform: none; box-shadow: none; }
.bk-dashboard .kpi-strip .kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.bk-dashboard .kpi-strip .kpi-value { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.01em; }
.bk-dashboard .kpi-strip .kpi-sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.bk-dashboard .kpi-strip .kpi.is-good .kpi-value { color: var(--status-success); }
.bk-dashboard .kpi-strip .kpi.is-warn .kpi-value { color: #B45309; }
.bk-dashboard .kpi-strip .kpi.is-bad .kpi-value { color: var(--status-danger); }

/* Accuracy bars */
.bk-dashboard .acc-row { display: grid; grid-template-columns: 110px 1fr 48px; gap: 10px; align-items: center; margin-bottom: 8px; }
.bk-dashboard .acc-label { font-size: 12px; color: var(--text-secondary); }
.bk-dashboard .acc-bar { height: 8px; background: var(--surface-tertiary); border-radius: 4px; overflow: hidden; }
.bk-dashboard .acc-fill { height: 100%; border-radius: 4px; background: var(--brand-primary); }
.bk-dashboard .acc-fill.warn { background: var(--status-warning); }
.bk-dashboard .acc-fill.bad { background: var(--status-danger); }
.bk-dashboard .acc-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-primary); text-align: right; }

/* Notifications */
.bk-dashboard .notif-row { padding: 12px 20px; border-bottom: 1px solid var(--border-default); display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; }
.bk-dashboard .notif-row:last-child { border-bottom: 0; }
.bk-dashboard .notif-row.unread { background: var(--brand-primary-soft); }
.bk-dashboard .notif-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-tertiary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk-dashboard .notif-icon.bank { background: var(--status-info-soft); color: var(--status-info); }
.bk-dashboard .notif-icon.approve { background: var(--status-success-soft); color: var(--status-success); }
.bk-dashboard .notif-icon.alert { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.bk-dashboard .notif-icon.query { background: var(--status-warning-soft); color: #B45309; }
.bk-dashboard .notif-text { font-size: 13px; color: var(--text-primary); line-height: 1.45; }
.bk-dashboard .notif-text strong { font-weight: 600; }
.bk-dashboard .notif-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.bk-dashboard .notif-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; }
.bk-dashboard .unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); display: inline-block; margin-right: 4px; vertical-align: 2px; }

/* Quick actions (2-column grid in sidebar) */
.bk-dashboard .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-dashboard .qa-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: all 0.12s; font-family: inherit; text-decoration: none; }
.bk-dashboard .qa-btn:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.bk-dashboard .qa-btn svg { color: var(--text-tertiary); flex-shrink: 0; }
.bk-dashboard .qa-btn:hover svg { color: var(--brand-primary-strong); }
.bk-dashboard .qa-btn-label { flex: 1; text-align: left; }
.bk-dashboard .qa-btn-sub { font-size: 11px; color: var(--text-tertiary); font-weight: 400; }

/* Connected accounts */
.bk-dashboard .account-row { padding: 12px 20px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; gap: 12px; }
.bk-dashboard .account-icon { font-size: 20px; flex-shrink: 0; }
.bk-dashboard .account-info { flex: 1; min-width: 0; }
.bk-dashboard .account-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.bk-dashboard .account-code { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.bk-dashboard .account-status { font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.bk-dashboard .account-status.synced { color: var(--status-success); }
.bk-dashboard .account-status.pending { color: #B45309; }

@media (max-width: 960px) {
    .bk-dashboard .dash-grid { grid-template-columns: 1fr; }
    .bk-dashboard .kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .bk-dashboard .quick-actions { grid-template-columns: 1fr; }
}

/* =====================================================
   Bookkeeper screen-specific styles
   Transactions · COA · Contacts · Journal ·
   Reconciliation · Staging · Connect Accounts ·
   Staging Detail · Period Close · Reports ·
   Owner Report · Audit Trail
   ===================================================== */

/* ── Shared: KPI card (COA, Contacts, Journal, etc.) ── */
.kpi-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-card); }
.kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; }
.kpi-value { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; line-height: 1.1; }
.kpi-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.kpi-value.warn { color: #B45309; } .kpi-value.ok { color: var(--status-success); } .kpi-value.danger { color: var(--status-danger); }

/* ── Shared: Summary tile (Contacts, Journal, Reconciliation) ── */
.summary-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-card); }
.summary-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.summary-tile-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--text-primary); letter-spacing: -.01em; }
.summary-tile-sub { font-size: 11.5px; color: var(--text-secondary); }
.summary-tile.is-danger .summary-tile-value { color: var(--status-danger); }
.summary-tile.is-warning .summary-tile-value { color: var(--status-warning); }
.summary-tile.is-success .summary-tile-value { color: var(--brand-primary-strong); }

/* ── Transactions ── */
.tx-table-wrap { flex: 1; overflow: auto; background: var(--surface-secondary); }
.tx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tx-table thead th { position: sticky; top: 0; background: var(--surface-primary); padding: 8px 10px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); white-space: nowrap; text-align: left; z-index: 10; }
.tx-table thead th.sortable { cursor: pointer; user-select: none; }
.tx-table thead th.sortable:hover { color: var(--text-primary); }
.tx-table thead th.sorted { color: var(--brand-primary-strong); }
.tx-table tbody tr { border-bottom: 1px solid var(--border-default); transition: background .08s; background: var(--surface-primary); }
.tx-table tbody tr:hover { background: var(--surface-tertiary); }
.tx-table tbody tr.is-selected { background: var(--brand-primary-soft); }
.tx-table tbody tr.is-flagged { background: rgba(239,68,68,.04); }
.tx-table td { padding: 9px 10px; vertical-align: middle; }
.tx-table td.td-check { width: 36px; padding: 10px 8px 10px 16px; }
.tx-check { width: 16px; height: 16px; border: 1.5px solid var(--border-default); border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; background: var(--surface-primary); }
.tx-check.checked { background: var(--brand-primary); border-color: var(--brand-primary); }
.td-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.td-bank { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.bank-icon { width: 22px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.td-desc { max-width: 260px; }
.td-desc-main { font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-desc-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.td-amount { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; white-space: nowrap; text-align: right; }
.td-amount.debit { color: var(--status-danger); }
.td-amount.credit { color: var(--status-success); }
.progress-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.progress-pill.reviewed { background: var(--status-success-soft); color: var(--status-success); }
.progress-pill.categorized { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.progress-pill.ai-suggested { background: rgba(167,139,250,.15); color: #6D28D9; }
.progress-pill.needs-review { background: var(--status-warning-soft); color: #B45309; }
.progress-pill.flagged { background: rgba(239,68,68,.1); color: var(--status-danger); }
.progress-pill.uncategorized { background: var(--surface-tertiary); color: var(--text-tertiary); }
.progress-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.account-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-md); background: var(--surface-secondary); border: 1px solid var(--border-default); font-size: 12.5px; color: var(--text-primary); cursor: pointer; transition: all .12s; max-width: 200px; font-family: inherit; }
.account-chip:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.account-chip.assigned { background: transparent; border-color: transparent; font-weight: 500; }
.account-chip.ai { border-style: dashed; border-color: rgba(167,139,250,.5); }
.account-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); flex-shrink: 0; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-family: 'JetBrains Mono', monospace; font-weight: 700; background: rgba(167,139,250,.15); color: #6D28D9; flex-shrink: 0; }
.row-btn { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: all .12s; font-family: inherit; }
.row-btn:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.row-btn.is-flag { color: var(--status-danger); }
.row-btn.active { color: var(--status-danger); }
.flag-badge { display: inline-flex; align-items: center; margin-left: 5px; color: var(--status-danger); font-size: 11px; }
.ai-conf-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; font-size: 9.5px; font-family: 'JetBrains Mono', monospace; font-weight: 700; flex-shrink: 0; }
.ai-conf-badge.hi { background: rgba(34,197,94,.12); color: #16A34A; }
.ai-conf-badge.med { background: rgba(234,179,8,.12); color: #CA8A04; }
.ai-conf-badge.lo { background: rgba(239,68,68,.12); color: #DC2626; }
.btn.is-danger { border-color: var(--status-danger); color: var(--status-danger); }
.btn.is-danger:hover { background: rgba(239,68,68,.08); }
.col-picker-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 14px; min-width: 160px; box-shadow: 0 4px 16px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 8px; }
.col-picker-title { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; }

/* ── Chart of Accounts ── */
.coa-scroll-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0; padding: 20px 24px 40px; }
.coa-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 960px) { .coa-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.coa-tabs-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 0; gap: 16px; flex-wrap: wrap; }
.coa-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coa-toolbar-right { margin-left: auto; display: flex; gap: 8px; }

/* =====================================================================
   Chart of Accounts · design refinements (list + template editor)
   Token-only; aligns these screens with the firm-portal design system.
   ===================================================================== */

/* ---- List: industry cell with an avatar that lights up when configured ---- */
.coa-list-table tr.is-clickable { cursor: pointer; }
.coa-industry-cell { display: flex; align-items: center; gap: 11px; }
.coa-industry-avatar {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  background: var(--surface-tertiary); color: var(--text-tertiary);
  border: 1px solid var(--border-default);
}
.coa-industry-avatar.is-on { background: var(--brand-dark); color: var(--brand-primary); border-color: transparent; }

/* ---- Editor toolbar: search box + filter selects + segmented status ---- */
.coa-search {
  position: relative; display: inline-flex; align-items: center; min-width: 240px;
}
.coa-search svg { position: absolute; left: 12px; color: var(--text-tertiary); pointer-events: none; }
.coa-search input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-primary); color: var(--text-primary); font-size: 13px; font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.coa-search input:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.coa-filter-select { height: 36px; font-size: 13px; min-width: 140px; }

/* Segmented status control (All / Active / Inactive) */
.coa-seg {
  display: inline-flex; padding: 2px; border-radius: var(--radius-md);
  background: var(--surface-secondary); border: 1px solid var(--border-default);
}
.coa-seg-btn {
  padding: 6px 14px; border: 0; border-radius: calc(var(--radius-md) - 2px);
  background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all 0.12s ease; font-family: inherit;
}
.coa-seg-btn:hover:not(.is-active) { color: var(--text-primary); }
.coa-seg-btn.is-active { background: var(--surface-primary); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-card); }

/* ---- Type pill: dot + label, tinted by account class ---- */
.coa-type-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.coa-type-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--surface-tertiary); color: var(--text-secondary);
}
.coa-type-pill.is-asset     { background: var(--status-info-soft);    color: var(--status-info); }
.coa-type-pill.is-liability { background: var(--status-warning-soft); color: #B45309; }
.coa-type-pill.is-equity    { background: var(--brand-accent-soft);   color: var(--brand-accent); }
.coa-type-pill.is-revenue   { background: var(--brand-primary-soft);  color: var(--brand-primary-strong); }
.coa-type-pill.is-expense   { background: var(--status-danger-soft);  color: var(--status-danger); }
[data-theme="dark"] .coa-type-pill.is-liability { color: var(--status-warning); }

/* ---- Editor header + toolbar layout hardening ----
   The header actions must stay a horizontal, auto-width button row (some global
   rules can otherwise stretch them full-width). Scoped to the COA editor page so
   it can't affect anything else. */
.coa-edit-page .page-header { align-items: flex-start; }
.coa-edit-page .page-actions {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: flex-end; flex-shrink: 0; width: auto;
}
.coa-edit-page .page-actions > .btn,
.coa-edit-page .page-actions > label.btn {
  width: auto; flex: 0 0 auto; white-space: nowrap;
}
/* Toolbar lays out as a single wrapping row of compact controls, not stacked. */
.coa-edit-page .coa-toolbar { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.coa-edit-page .coa-toolbar > .coa-search { flex: 0 1 260px; }
.coa-edit-page .coa-toolbar > .coa-filter-select { flex: 0 0 auto; width: auto; }

/* Row edit/delete actions sit side by side, right-aligned. */
.coa-row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ---- Editor bulk bar ---- */
.coa-bulk-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--brand-primary-soft); border: 1px solid var(--brand-primary);
}
.coa-bulk-count { font-size: 13px; color: var(--text-primary); }
.coa-bulk-count strong { color: var(--brand-primary-strong); }
.coa-bulk-actions { display: flex; gap: 6px; margin-left: auto; }

.type-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.dot-bank { background: #3B82F6; } .dot-asset { background: #0EA5E9; } .dot-fixed { background: #0891B2; }
.dot-liability { background: #F59E0B; } .dot-equity { background: #A78BFA; }
.dot-revenue { background: #2ED4A5; } .dot-overhead { background: #EF4444; }
.dot-other-exp { background: #DC2626; } .dot-direct { background: #F97316; }
.type-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-secondary); }
.coa-table-wrap { flex: 1; overflow: visible; padding: 0 0 24px; }
.bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); gap: 14px; }
.bank-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: box-shadow .12s ease, border-color .12s ease; }
.bank-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); }
.bank-card:hover { box-shadow: var(--shadow-elevated); border-color: var(--border-strong); }
.bank-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bank-logo { width: 38px; height: 38px; border-radius: 9px; background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 500; font-size: 13px; color: var(--text-primary); flex-shrink: 0; }
.bank-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.bank-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.bank-balance { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; }
.bank-balance.is-neg { color: var(--status-danger); }
.bank-balance-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.bank-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-default); }

/* ── Contacts ── */
.ct-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1200px) { .ct-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ct-summary { grid-template-columns: repeat(2, 1fr); } }
.ct-identity { display: flex; align-items: center; gap: 10px; }
.ct-avatar { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11.5px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
.ct-avatar.av-0 { background: #D1FAE5; color: #047857; } .ct-avatar.av-1 { background: #DBEAFE; color: #1E40AF; }
.ct-avatar.av-2 { background: #FEF3C7; color: #92400E; } .ct-avatar.av-3 { background: #FEE2E2; color: #B91C1C; }
.ct-avatar.av-4 { background: #E9D5FF; color: #6B21A8; } .ct-avatar.av-5 { background: #CFFAFE; color: #155E75; }
[data-theme="dark"] .ct-avatar.av-0 { background: rgba(16,185,129,.18); color: #6EE7B7; }
[data-theme="dark"] .ct-avatar.av-1 { background: rgba(59,130,246,.18); color: #93C5FD; }
[data-theme="dark"] .ct-avatar.av-2 { background: rgba(245,158,11,.18); color: #FBBF24; }
[data-theme="dark"] .ct-avatar.av-3 { background: rgba(239,68,68,.18); color: #FCA5A5; }
[data-theme="dark"] .ct-avatar.av-4 { background: rgba(167,139,250,.18); color: #C4B5FD; }
.ct-name { font-weight: 500; color: var(--text-primary); }
.ct-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; }
.ct-role-pills { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Journal ── */
.je-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 900px) { .je-summary { grid-template-columns: repeat(2, 1fr); } }
.je-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: 11px; font-weight: 500; border-radius: 10px; white-space: nowrap; line-height: 1.5; font-family: 'JetBrains Mono', monospace; }
.je-status.st-draft { background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); }
.je-status.st-posted { background: var(--status-success-soft); color: var(--status-success); }
.je-status.st-pending { background: var(--status-warning-soft); color: #B45309; }
.je-status.st-reversed { background: var(--brand-accent-soft); color: var(--brand-accent); }
[data-theme="dark"] .je-status.st-pending { color: #FBBF24; }
.je-num { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.je-narration { font-size: 13px; color: var(--text-primary); }
.je-narration-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.je-bank-flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: 9.5px; font-weight: 500; font-family: 'JetBrains Mono', monospace; border-radius: 8px; background: var(--brand-accent-soft); color: var(--brand-accent); margin-left: 6px; }

/* ── Reconciliation ── */
.rec-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 900px) { .rec-summary { grid-template-columns: repeat(2, 1fr); } }
.pc-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--status-warning-soft); border: 1px solid rgba(245,158,11,.25); border-radius: var(--radius-lg); margin-bottom: 20px; }
.pc-banner.is-green { background: var(--brand-primary-soft); border-color: rgba(46,212,165,.25); }
.pc-banner-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--status-warning); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pc-banner.is-green .pc-banner-icon { background: var(--brand-primary-strong); }
.pc-banner-body { flex: 1; }
.pc-banner-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: var(--text-primary); letter-spacing: -0.01em; }
.pc-banner-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.pc-banner-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .02em; margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; }
.pc-banner-meta .meta-pill { padding: 2px 7px; background: rgba(255,255,255,0.5); border-radius: 8px; }

/* ── Reconciliation workspace ── */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.acct-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: transform .12s, box-shadow .15s, border-color .12s; cursor: pointer; }
.acct-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); }
.acct-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-elevated); border-color: var(--border-strong); }
.acct-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.acct-card-left { display: flex; gap: 12px; min-width: 0; }
.acct-card-logo { width: 38px; height: 38px; border-radius: 9px; background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 500; color: var(--text-primary); flex-shrink: 0; font-size: 13px; }
.acct-card-name { font-size: 15px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.acct-card-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.acct-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px; background: var(--surface-secondary); border-radius: var(--radius-md); }
.acct-stat { display: flex; flex-direction: column; gap: 2px; }
.acct-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.acct-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.acct-card-adj { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: rgba(139,92,246,.08); border-radius: var(--radius-sm); font-size: 11.5px; color: var(--brand-accent); font-family: 'JetBrains Mono', monospace; letter-spacing: .01em; margin-bottom: 2px; }
.acct-card-adj svg { flex-shrink: 0; }
.acct-card-foot { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-default); align-items: center; }
.match-toolbar { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; box-shadow: var(--shadow-card); }
.match-tb-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.match-tb-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.match-tb-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); letter-spacing: .04em; padding-left: 16px; border-left: 1px solid var(--border-default); }
.match-tb-right { display: flex; align-items: center; gap: 8px; }
.match-balance { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 16px; box-shadow: var(--shadow-card); position: sticky; top: var(--top-nav-height); z-index: 15; }
@media (max-width: 1100px) { .match-balance { grid-template-columns: repeat(3, 1fr); row-gap: 14px; } }
.match-bal-cell { padding: 0 14px; border-right: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 4px; }
.match-bal-cell:last-child { border-right: 0; }
.match-bal-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.match-bal-value { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.match-bal-cell.is-positive .match-bal-value { color: var(--brand-primary-strong); }
.match-bal-cell.is-negative .match-bal-value { color: var(--status-danger); }
.match-bal-cell.is-target { background: var(--brand-primary-soft); border-radius: var(--radius-md); padding: 8px 14px; }
.match-bal-cell.is-target .match-bal-label, .match-bal-cell.is-target .match-bal-value { color: var(--brand-primary-strong); }
.match-bal-cell.is-diff-ok { background: var(--status-success-soft); border-radius: var(--radius-md); padding: 8px 14px; }
.match-bal-cell.is-diff-ok .match-bal-value, .match-bal-cell.is-diff-ok .match-bal-label { color: var(--status-success); }
.match-bal-cell.is-diff-bad { background: var(--status-danger-soft); border-radius: var(--radius-md); padding: 8px 14px; }
.match-bal-cell.is-diff-bad .match-bal-value, .match-bal-cell.is-diff-bad .match-bal-label { color: var(--status-danger); }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 960px) { .match-grid { grid-template-columns: 1fr; } }
.match-col { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.match-col-head { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); }
.match-col-title { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: var(--text-primary); letter-spacing: -.01em; }
.match-col-title .col-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-primary); display: flex; align-items: center; justify-content: center; color: var(--brand-primary-strong); border: 1px solid var(--border-default); }
.match-col-title.is-cr .col-icon { color: var(--status-danger); }
.match-col-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; }
.match-col-total { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.match-list { list-style: none; padding: 0; margin: 0; max-height: 520px; overflow-y: auto; }
.match-row { display: grid; grid-template-columns: 30px 90px 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background .08s; }
.match-row:last-child { border-bottom: 0; }
.match-row:hover { background: var(--surface-secondary); }
.match-row.is-cleared { background: var(--brand-primary-soft); }
.match-row-date { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); }
.match-row-desc { font-size: 13px; color: var(--text-primary); line-height: 1.35; }
.match-row-sub { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.match-row-amt { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; white-space: nowrap; text-align: right; }
.match-row.is-cleared .match-row-amt { color: var(--brand-primary-strong); }
.match-empty { padding: 30px 20px; text-align: center; color: var(--text-tertiary); font-size: 12.5px; }
.match-actions { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.match-actions-left { font-size: 12.5px; color: var(--text-secondary); }
.match-actions-left.hint-balanced { color: var(--brand-primary-strong); font-weight: 600; }
.match-actions-left.hint-variance { color: var(--status-danger); font-weight: 600; }
.match-actions-right { display: flex; gap: 8px; }

/* ── Reconciliation — Finished / Report view ── */
.fin-hero { text-align: center; padding: 40px 24px 28px; }
.fin-check { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.fin-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: 6px; }
.fin-sub { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-tertiary); letter-spacing: .02em; }
.report-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 24px; max-width: 780px; margin-left: auto; margin-right: auto; }
.report-head { text-align: center; padding: 28px 32px 20px; border-bottom: 1px solid var(--border-default); margin-bottom: 0; }
.report-brand { font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: var(--brand-primary-strong); letter-spacing: -0.01em; margin-bottom: 4px; }
.report-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: 6px; }
.report-sub { font-size: 12.5px; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; }
.report-section { padding: 20px 24px; border-bottom: 1px solid var(--border-default); }
.report-section:last-child { border-bottom: 0; }
.report-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-bottom: 14px; }
.report-stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.report-stat { display: flex; flex-direction: column; gap: 3px; }
.report-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.report-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.report-balance-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-balance-table td { padding: 5px 0; }
.report-balance-table td:last-child { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.report-balance-table tr.is-total td { font-weight: 700; border-top: 1px solid var(--border-default); padding-top: 8px; margin-top: 4px; }
.report-balance-table tr.is-ok td { color: var(--brand-primary-strong); }
.report-signature { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; }
.report-signature strong { color: var(--text-primary); }
.report-empty { text-align: center; padding: 20px; color: var(--text-tertiary); font-size: 12.5px; }

/* ── Reconciliation — Account card adj strip ── */
.acct-card-adj-strip { padding: 8px 11px; background: var(--brand-accent-soft); border-radius: var(--radius-md); font-size: 11.5px; color: var(--brand-accent); display: flex; align-items: center; gap: 6px; }

/* ── Reconciliation — Workspace adj panel ── */
.adj-panel { background: var(--surface-primary); border: 1px solid var(--brand-accent); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.adj-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.adj-panel-title { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: var(--text-primary); letter-spacing: -0.01em; }
.adj-panel-title .ttl-icon { width: 26px; height: 26px; border-radius: 6px; background: var(--brand-accent-soft); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; }
.adj-panel-total { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--brand-accent); }

/* ── Reconciliation — History table ── */
.duration-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); }
.tl-dur { display: inline-block; }
.tl-dur.fast { background: var(--status-success-soft); color: var(--status-success); }
.tl-dur.slow { background: var(--status-warning-soft); color: #B45309; }
.tl-dur.stuck { background: var(--status-danger-soft); color: var(--status-danger); }
.hist-adj-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; }
.hist-adj-pill.has-adj { background: var(--brand-accent-soft); color: var(--brand-accent); }
.hist-adj-pill.no-adj { background: var(--surface-secondary); color: var(--text-tertiary); }
.hist-acct-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: background 0.08s ease; color: var(--text-primary); }
.hist-acct-item:hover { background: var(--surface-secondary); }
.hist-acct-item .dropdown-item-check { width: 14px; height: 14px; border: 1.5px solid var(--border-strong); border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); }
.hist-acct-item.is-checked .dropdown-item-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.hist-acct-item.is-checked .dropdown-item-check::after { content: ""; width: 7px; height: 4px; border-left: 1.6px solid var(--brand-dark); border-bottom: 1.6px solid var(--brand-dark); transform: rotate(-45deg) translate(1px, -1px); display: block; }

/* ── Reconciliation — History detail report rows ── */
.report-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.report-row.is-total { font-weight: 600; border-top: 1px solid var(--border-default); padding-top: 8px; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
.report-row .lbl { color: var(--text-secondary); }
.report-row .val { font-family: 'JetBrains Mono', monospace; color: var(--text-primary); }
.report-adj-row { padding: 8px 12px; background: var(--brand-accent-soft); border-radius: 6px; margin-bottom: 6px; font-size: 12.5px; }
.report-adj-top { display: flex; justify-content: space-between; color: var(--text-primary); }
.report-adj-reason { color: var(--brand-accent); font-size: 11.5px; margin-top: 2px; font-style: italic; }

/* ── Reconciliation — Adjusting entry drawer ── */
.adj-firm-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: var(--brand-accent-soft); border-radius: var(--radius-md); font-size: 12.5px; color: var(--brand-accent); line-height: 1.5; }
.adj-firm-note svg { flex-shrink: 0; margin-top: 1px; color: var(--brand-accent); }
.adj-reco-row { display: flex; flex-wrap: wrap; gap: 6px; }
.adj-reco-chip { padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border-default); background: var(--surface-secondary); font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: all 0.12s ease; font-family: 'JetBrains Mono', monospace; }
.adj-reco-chip:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.adj-reco-chip.is-active { background: var(--brand-accent-soft); border-color: var(--brand-accent); color: var(--brand-accent); }
.track-preview { padding: 12px 14px; background: var(--surface-secondary); border-radius: var(--radius-md); font-size: 12.5px; }
.track-preview strong { display: block; color: var(--text-primary); margin-bottom: 8px; font-size: 13px; }
.track-preview ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); line-height: 1.5; }
.drawer-section { display: flex; flex-direction: column; gap: 10px; }
.drawer-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; padding-bottom: 6px; border-bottom: 1px solid var(--border-default); }
.drawer-foot-left { flex: 1; }
.drawer-foot-right { display: flex; gap: 8px; }

/* ── Staging (list) ── */
.kpi-bar { display: flex; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.kpi-item { padding: 10px 20px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border-default); }
.kpi-item:last-child { border-right: 0; }
.tab-btn { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); border: 0; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; transition: color .12s; }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--brand-primary-strong); border-bottom-color: var(--brand-primary); }
.tab-count { background: var(--surface-tertiary); color: var(--text-secondary); padding: 1px 7px; border-radius: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; }
.tab-btn.active .tab-count { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.tab-count.warn { background: rgba(239,68,68,.1); color: var(--status-danger); }
.tab-panel.active { display: flex; flex: 1; overflow: hidden; flex-direction: column; }
.search-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 6px 11px; min-width: 200px; }
.search-wrap:focus-within { border-color: var(--brand-primary); }
.search-input { border: 0; background: transparent; font-size: 12.5px; color: var(--text-primary); font-family: inherit; outline: 0; width: 100%; }
.search-input::placeholder { color: var(--text-tertiary); }
.src-btn { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; font-family: inherit; transition: all .12s; }
.src-btn:hover, .src-btn.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); }
/* Count badge inside a source/status filter chip. */
.src-count { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px; background: var(--surface-tertiary); color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; }
.src-btn.active .src-count { background: var(--brand-primary); color: #fff; }
.job-table-wrap { flex: 1; overflow-y: auto; }
.job-table-head { display: grid; grid-template-columns: 110px 130px 1fr 70px 100px 110px 120px 110px; gap: 12px; padding: 8px 22px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; position: sticky; top: 0; z-index: 5; }
.job-row { display: grid; grid-template-columns: 110px 130px 1fr 70px 100px 110px 120px 110px; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--border-default); align-items: center; transition: background .08s; cursor: pointer; }
.job-row:hover { background: var(--surface-secondary); }
.job-row:last-child { border-bottom: 0; }
.src-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px; font-size: 11.5px; font-weight: 600; }
.src-chip.wf { background: #DBEAFE; color: #1D4ED8; } .src-chip.chase { background: #FEE2E2; color: #B91C1C; }
.src-chip.stripe { background: #EDE9FE; color: #6D28D9; } .src-chip.csv { background: var(--status-warning-soft); color: #B45309; }
.src-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.status-badge.pending { background: var(--status-warning-soft); color: #B45309; }
.status-badge.ready { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.status-badge.needs-attention { background: rgba(239,68,68,.1); color: var(--status-danger); }
.status-badge.complete { background: var(--status-success-soft); color: var(--status-success); }
.status-badge.processing { background: var(--status-info-soft); color: var(--status-info); }
.confident-wrap { display: flex; align-items: center; gap: 6px; }
.confident-bar { flex: 1; height: 5px; background: var(--surface-tertiary); border-radius: 3px; overflow: hidden; }
.confident-fill { height: 100%; border-radius: 3px; background: var(--status-success); }
.confident-fill.warn { background: var(--status-warning); }
.confident-txt { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.job-desc-main { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.job-desc-sub { font-size: 11.5px; color: var(--text-tertiary); }
.job-date-main { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--text-primary); }
.job-date-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.job-amount { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; }
.job-amount.pos { color: var(--status-success); } .job-amount.neg { color: var(--status-danger); } .job-amount.mix { color: var(--text-primary); }
.job-txns { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.hist-head, .hist-row { display: grid; grid-template-columns: 120px 120px 1fr 80px 110px 120px; gap: 12px; padding: 10px 22px; border-bottom: 1px solid var(--border-default); align-items: center; }
.hist-head { background: var(--surface-secondary); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; position: sticky; top: 0; z-index: 5; }
.hist-row { transition: background .08s; cursor: pointer; }
.hist-row:hover { background: var(--surface-secondary); }

/* ── Connect Accounts ── */
.ca-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
@media (max-width: 900px) { .ca-kpi-strip { grid-template-columns: repeat(2,1fr); } }
.ca-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-card); }
.ca-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 5px; font-weight: 500; }
.ca-kpi-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.ca-kpi-value.ok { color: var(--status-success); } .ca-kpi-value.warn { color: var(--status-warning); } .ca-kpi-value.danger { color: var(--status-danger); }
.ca-kpi-sub { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }
.ca-kpi-sub strong { color: var(--text-primary); }
.ca-section { margin-bottom: 28px; }
.ca-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-default); }
.ca-section-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ca-section-icon.bank { background: #DBEAFE; color: #1D4ED8; } .ca-section-icon.cc { background: #FEF3C7; color: #92400E; }
.ca-section-icon.payment { background: #EDE9FE; color: #5B21B6; } .ca-section-icon.payroll { background: #FEE2E2; color: #991B1B; }
.ca-section-icon.csv { background: var(--surface-tertiary); color: var(--text-secondary); }
[data-theme="dark"] .ca-section-icon.bank { background: rgba(59,130,246,.18); color: #93C5FD; }
[data-theme="dark"] .ca-section-icon.cc { background: rgba(245,158,11,.18); color: #FCD34D; }
[data-theme="dark"] .ca-section-icon.payment { background: rgba(167,139,250,.18); color: #C4B5FD; }
[data-theme="dark"] .ca-section-icon.payroll { background: rgba(239,68,68,.18); color: #FCA5A5; }
.ca-section-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; color: var(--text-primary); letter-spacing: -.01em; }
.ca-section-count { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; padding: 2px 7px; border-radius: 9px; background: var(--surface-secondary); color: var(--text-tertiary); }
.ca-section-action { margin-left: auto; }
.ca-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ca-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow .15s, border-color .15s; }
.ca-card:hover { box-shadow: var(--shadow-elevated); border-color: var(--border-strong); }
.ca-card.is-error { border-color: var(--status-danger); } .ca-card.is-warning { border-color: var(--status-warning); } .ca-card.is-syncing { border-color: var(--brand-primary); }
.ca-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; }
.ca-logo { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.ca-logo.wf { background: #DBEAFE; color: #1D4ED8; } .ca-logo.chase { background: #FEF3C7; color: #92400E; }
.ca-logo.stripe { background: #EDE9FE; color: #5B21B6; } .ca-logo.gusto { background: #FEE2E2; color: #991B1B; }
.ca-logo.amex { background: #DBEAFE; color: #1E40AF; } .ca-logo.csv { background: var(--surface-secondary); color: var(--text-secondary); }
[data-theme="dark"] .ca-logo.wf { background: rgba(59,130,246,.2); color: #93C5FD; }
[data-theme="dark"] .ca-logo.chase { background: rgba(245,158,11,.2); color: #FCD34D; }
[data-theme="dark"] .ca-logo.stripe { background: rgba(167,139,250,.2); color: #C4B5FD; }
[data-theme="dark"] .ca-logo.gusto { background: rgba(239,68,68,.2); color: #FCA5A5; }
.ca-card-info { flex: 1; min-width: 0; }
.ca-card-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.ca-card-mask { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); }
.ca-card-dims { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.ca-dim-tag { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.ca-dim-sep { color: var(--border-strong); font-size: 10px; }
.ca-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.ca-badge.active { background: var(--status-success-soft); color: var(--status-success); }
.ca-badge.syncing { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.ca-badge.error { background: var(--status-danger-soft); color: var(--status-danger); }
.ca-badge.paused { background: var(--surface-secondary); color: var(--text-tertiary); border: 1px solid var(--border-default); }
.ca-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ca-stats { display: flex; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.ca-stat { flex: 1; padding: 10px 14px; text-align: center; border-right: 1px solid var(--border-default); }
.ca-stat:last-child { border-right: none; }
.ca-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1; }
.ca-stat-val.pos { color: var(--brand-primary-strong); } .ca-stat-val.neg { color: var(--status-danger); }
.ca-stat-lbl { font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; font-family: 'JetBrains Mono', monospace; }
.ca-health { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-bottom: 1px solid var(--border-default); }
.ca-health-label { font-size: 10.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.ca-health-dots { display: flex; gap: 3px; flex: 1; }
.hdot { width: 18px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.hdot.ok { background: var(--status-success); } .hdot.warn { background: var(--status-warning); } .hdot.err { background: var(--status-danger); } .hdot.skip { background: var(--border-default); }
.ca-sync-time { font-size: 10.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.ca-alert { margin: 0 18px 10px; padding: 8px 12px; border-radius: 7px; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.ca-alert.danger { background: var(--status-danger-soft); color: var(--status-danger); }
.ca-alert.warn { background: var(--status-warning-soft); color: #92400E; }
[data-theme="dark"] .ca-alert.warn { color: #FCD34D; }
.ca-actions { display: flex; align-items: center; gap: 6px; padding: 10px 14px; flex-wrap: wrap; }
.ca-actions-left { flex: 1; display: flex; gap: 4px; } .ca-actions-right { display: flex; gap: 4px; }
.ca-btn { padding: 6px 11px; border-radius: var(--radius-md); font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .12s; border: 1px solid var(--border-default); background: var(--surface-primary); color: var(--text-secondary); }
.ca-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ca-btn.primary { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); font-weight: 600; }
.ca-btn.primary:hover { background: var(--brand-primary-strong); }
.ca-btn.danger { color: var(--status-danger); border-color: transparent; }
.ca-btn.danger:hover { background: var(--status-danger-soft); border-color: var(--status-danger); }
.ca-btn.warn { color: var(--status-warning); border-color: transparent; }
.ca-btn.warn:hover { background: var(--status-warning-soft); border-color: var(--status-warning); }
.ca-add-card { background: transparent; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 28px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-align: center; transition: all .15s; min-height: 120px; }
.ca-add-card:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.ca-add-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: all .15s; }
.ca-add-card:hover .ca-add-icon { background: var(--brand-primary); color: var(--brand-dark); }
.ca-add-title { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.ca-add-sub { font-size: 12px; color: var(--text-tertiary); }
.ca-add-card:hover .ca-add-title { color: var(--brand-primary-strong); }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; display: inline-block; }

/* ── Staging Detail ── */
.sd-scroll { flex: 1; overflow-y: auto; padding: 22px 24px 100px; display: flex; flex-direction: column; gap: 16px; }
.sd-kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1100px) { .sd-kpi-strip { grid-template-columns: repeat(3,1fr); } }
.sd-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 12px 16px; box-shadow: var(--shadow-card); }
.sd-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; font-weight: 500; }
.sd-kpi-value { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; line-height: 1.1; }
.sd-kpi-value.pos { color: var(--brand-primary-strong); } .sd-kpi-value.neg { color: var(--status-danger); }
.sd-kpi-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.sd-seg { display: inline-flex; padding: 3px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); gap: 2px; }
.sd-seg-btn { padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary); border-radius: 6px; transition: all .12s; display: inline-flex; align-items: center; gap: 6px; }
.sd-seg-btn:hover { color: var(--text-primary); }
.sd-seg-btn.active { background: var(--brand-dark); color: #fff; }
.sd-seg-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 6px; border-radius: 3px; background: var(--surface-secondary); color: var(--text-tertiary); }
.sd-seg-btn.active .sd-seg-count { background: rgba(255,255,255,.12); color: #fff; }
.conf-legend { display: flex; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.conf-legend span { display: inline-flex; align-items: center; gap: 5px; }
.conf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.conf-dot.high { background: var(--status-success); } .conf-dot.med { background: var(--status-warning); } .conf-dot.low { background: var(--status-danger); }
.group-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .15s; box-shadow: var(--shadow-card); }
.group-card.open { border-color: var(--brand-primary); }
.group-card-head { display: grid; grid-template-columns: 20px 1fr auto auto 160px auto; gap: 16px; align-items: center; padding: 14px 20px; cursor: pointer; transition: background .1s; user-select: none; }
.group-card-head:hover { background: var(--surface-secondary); }
.group-acct-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; }
.group-acct-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; color: var(--text-primary); letter-spacing: -.01em; }
.group-card-meta { display: flex; gap: 12px; }
.group-meta-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.group-meta-total { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; }
.group-meta-total.pos { color: var(--brand-primary-strong); } .group-meta-total.neg { color: var(--status-danger); }
.group-toggle-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 12px; font-weight: 500; font-family: inherit; border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-primary); color: var(--text-secondary); cursor: pointer; transition: all .12s; }
.group-toggle-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.txn-table-head { display: grid; grid-template-columns: 32px 80px minmax(180px,1fr) 110px 220px 100px 120px 120px; gap: 12px; padding: 9px 20px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); align-items: center; }
.txn-table-row { display: grid; grid-template-columns: 32px 80px minmax(180px,1fr) 110px 220px 100px 120px 120px; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border-default); align-items: center; font-size: 13px; transition: background .1s; }
.txn-table-row:last-child { border-bottom: none; }
.txn-table-row:hover { background: var(--surface-secondary); }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.row-action { width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: all .12s; flex-shrink: 0; }
.row-action:hover.accept { border-color: var(--status-success); color: var(--status-success); }
.row-action:hover.modify { border-color: var(--brand-accent); color: var(--brand-accent); }
.row-action:hover.reject { border-color: var(--status-danger); color: var(--status-danger); }
.row-action.accept.on { background: var(--status-success); border-color: var(--status-success); color: #fff; }
.row-action.reject.on { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.load-more-row { padding: 10px 20px; text-align: center; font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); background: var(--surface-secondary); border-top: 1px solid var(--border-default); }
.load-more-row a { color: var(--brand-primary-strong); }
.sd-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--surface-primary); border-top: 1px solid var(--border-default); box-shadow: 0 -4px 16px rgba(11,15,30,.06); }
.sd-footer-inner { max-width: 1600px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sd-footer-status { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--text-secondary); }
.sd-footer-status strong { color: var(--text-primary); font-weight: 600; }
.sd-footer-status .sep { color: var(--border-strong); }
.sd-footer-actions { display: flex; gap: 8px; align-items: center; }

/* ── Staging Detail — group cards & transaction rows ── */
.group-head { display: grid; grid-template-columns: 20px 1fr auto auto 160px auto; gap: 16px; align-items: center; padding: 14px 20px; cursor: pointer; transition: background .1s; user-select: none; }
.group-head:hover { background: var(--surface-secondary); }
.group-card.open .group-head { border-bottom: 1px solid var(--border-default); }
.group-chevron { color: var(--text-tertiary); transition: transform .2s; flex-shrink: 0; }
.group-card.open .group-chevron { transform: rotate(90deg); color: var(--brand-primary-strong); }
.group-name-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; }
.group-name-label { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; color: var(--text-primary); letter-spacing: -.01em; }
.group-txn-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.group-total { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; }
.group-total.pos { color: var(--brand-primary-strong); } .group-total.neg { color: var(--status-danger); }
.group-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.group-bulk-actions { display: flex; gap: 6px; justify-content: flex-end; }
.btn-mini { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 12px; font-weight: 500; font-family: inherit; border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-primary); color: var(--text-secondary); cursor: pointer; transition: all .12s; white-space: nowrap; }
.btn-mini:hover { border-color: var(--border-strong); color: var(--text-primary); }
.btn-mini.accept:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.btn-mini.reject:hover { background: var(--status-danger-soft); border-color: var(--status-danger); color: var(--status-danger); }
.group-body { display: none; }
.group-card.open .group-body { display: block; }
.txn-row { display: grid; grid-template-columns: 32px 80px minmax(180px,1fr) 110px 1fr 80px; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border-default); align-items: center; font-size: 13px; transition: background .1s; }
.txn-row:last-child { border-bottom: none; }
.txn-row:hover { background: var(--surface-secondary); }
.txn-row.is-accepted { background: rgba(46,212,165,.05); }
.txn-row.is-rejected { background: rgba(239,68,68,.04); opacity: .6; }
.txn-check { width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 3px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .1s; }
.txn-check.on { background: var(--brand-primary); border-color: var(--brand-primary); }
.txn-date { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.txn-desc-main { font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.txn-desc-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.txn-amount { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }
.txn-amount.pos { color: var(--brand-primary-strong); } .txn-amount.neg { color: var(--status-danger); }
.acct-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--brand-primary); background: var(--brand-primary-soft); border-radius: var(--radius-md); font-size: 12px; color: var(--brand-primary-strong); max-width: 100%; min-width: 0; cursor: default; }
.acct-pill.uncat { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-secondary); }
.acct-pill-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; opacity: .7; flex-shrink: 0; }
.acct-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dup-alert { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--status-warning-soft); border: 1px solid var(--status-warning); border-radius: var(--radius-md); font-size: 13px; color: var(--text-primary); }
.dup-alert svg { flex-shrink: 0; color: var(--status-warning); }

/* ── Staging Detail — filters, sort, bulk, pagination ── */
.sd-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sd-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border-default); }
.sd-filter-group { display: flex; gap: 3px; }
.sd-filter-count { margin-left: auto; font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.sd-date-input { height: 32px; padding: 0 9px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 12.5px; font-family: inherit; background: var(--surface-primary); color: var(--text-primary); outline: none; }
.sd-date-input:focus { border-color: var(--brand-primary); }
.sortable-col { cursor: pointer; user-select: none; white-space: nowrap; transition: color .1s; }
.sortable-col:hover { color: var(--text-primary); }
.sortable-col.sorted { color: var(--brand-primary-strong); }
.sort-arrow { font-size: 10px; }
.txn-row.is-selected { background: var(--brand-primary-soft); }
.sd-bulk-bar { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--brand-primary-soft); border: 1px solid var(--brand-primary); border-radius: var(--radius-md); flex-wrap: wrap; }
.sd-bulk-count { font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.sd-bulk-count strong { color: var(--brand-primary-strong); font-weight: 600; }
.sd-bulk-cat-select { height: 32px; padding: 0 9px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 12.5px; font-family: inherit; background: var(--surface-primary); color: var(--text-primary); outline: none; cursor: pointer; }
.txn-pagination { display: flex; align-items: center; gap: 4px; padding: 10px 16px; background: var(--surface-secondary); }
.pg-btn { min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-secondary); font-size: 12.5px; font-family: 'JetBrains Mono', monospace; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .1s; }
.pg-btn:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary-strong); }
.pg-btn.active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.pg-ellipsis { padding: 0 4px; color: var(--text-tertiary); font-size: 12px; }
.pg-info { margin-left: 8px; font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); white-space: nowrap; }
.conf-legend { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.conf-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ── Period Close ── */
.pc-hero { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 24px; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pc-hero-left { flex: 1; min-width: 0; }
.pc-hero-period { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-primary-strong); margin-bottom: 4px; }
.pc-hero-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: 3px; }
.pc-hero-sub { font-size: 13px; color: var(--text-secondary); }
.pc-hero-metrics { display: flex; gap: 28px; flex-shrink: 0; }
.pc-metric { text-align: center; }
.pc-metric-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: 3px; }
.pc-metric-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px; color: var(--text-primary); }
.pc-metric-value.ok { color: var(--status-success); } .pc-metric-value.warn { color: var(--status-warning); } .pc-metric-value.accent { color: var(--brand-primary-strong); }
.pc-progress-wrap { margin-bottom: 24px; }
.pc-track { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.pc-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 80px; position: relative; cursor: pointer; }
.pc-step-connector { position: absolute; top: 18px; left: 50%; right: -50%; height: 2px; background: var(--border-default); z-index: 0; }
.pc-step:last-child .pc-step-connector { display: none; }
.pc-step-connector.done { background: var(--brand-primary); }
.pc-step-connector.active { background: linear-gradient(90deg, var(--brand-primary), var(--border-default)); }
.pc-step-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; border: 2px solid var(--border-default); background: var(--surface-primary); color: var(--text-tertiary); position: relative; z-index: 1; transition: all .2s; flex-shrink: 0; }
.pc-step.done .pc-step-num { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.pc-step.active .pc-step-num { background: var(--status-warning); border-color: var(--status-warning); color: #fff; box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.pc-step.blocked .pc-step-num { background: var(--status-danger-soft); border-color: var(--status-danger); color: var(--status-danger); }
.pc-step-label { font-size: 11px; color: var(--text-tertiary); text-align: center; margin-top: 6px; line-height: 1.3; max-width: 72px; font-weight: 500; }
.pc-step.done .pc-step-label { color: var(--brand-primary-strong); }
.pc-step.active .pc-step-label { color: var(--status-warning); font-weight: 600; }
/* Task-type tabs (detail view) */
.pc-type-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
.pc-type-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border-default); border-radius: 999px; font-size: 12.5px; color: var(--text-secondary); background: var(--surface-primary); cursor: pointer; transition: all .12s ease; white-space: nowrap; }
.pc-type-tab:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.pc-type-tab.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.pc-type-tab .count-pill { background: var(--surface-secondary); color: var(--text-tertiary); }
.pc-type-tab.is-active .count-pill { background: var(--brand-primary); color: var(--brand-dark); }

/* Task-type view: account groups, each with a period-keyed task table */
.pc-type-view { display: flex; flex-direction: column; gap: 16px; }
.pc-type-account { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.pc-type-account-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); }
.pc-type-account-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }

.pc-stages { display: flex; flex-direction: column; gap: 12px; }
.pc-stage-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow .15s; }
.pc-stage-card:hover { box-shadow: var(--shadow-elevated); }
.pc-stage-card.is-active { border-color: var(--status-warning); box-shadow: 0 0 0 2px rgba(245,158,11,.1), var(--shadow-card); }
.pc-stage-card.is-done { border-color: rgba(46,212,165,.3); }
.pc-stage-card-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; transition: background .1s; }
.pc-stage-card-head:hover { background: var(--surface-secondary); }
.pc-stage-num { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; background: var(--surface-secondary); color: var(--text-tertiary); }
.pc-stage-card.is-done .pc-stage-num { background: var(--brand-primary); color: var(--brand-dark); }
.pc-stage-card.is-active .pc-stage-num { background: var(--status-warning); color: #fff; }
.pc-stage-body { padding: 12px 20px; }
.pc-stage-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; color: var(--text-primary); margin-bottom: 2px; }
.pc-stage-meta { font-size: 12.5px; color: var(--text-secondary); }
.pc-stage-badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.pc-stage-badge.done { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.pc-stage-badge.active { background: var(--status-warning-soft); color: #92400E; }
.pc-stage-badge.blocked { background: var(--status-danger-soft); color: var(--status-danger); }
.pc-stage-badge.pending { background: var(--surface-secondary); color: var(--text-tertiary); }
[data-theme="dark"] .pc-stage-badge.active { color: #FCD34D; }
.pc-stage-blocking { font-size: 12.5px; color: var(--status-danger); }
.pc-blocking-link { color: var(--brand-primary-strong); text-decoration: none; }
.pc-blocking-link:hover { text-decoration: underline; }
.pc-stage-stats { display: flex; gap: 20px; margin-top: 10px; }
.pc-stage-stat { display: flex; flex-direction: column; gap: 2px; }
.pc-stage-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.pc-stage-stat-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.pc-approval-chain { display: flex; align-items: center; gap: 0; margin-bottom: 16px; overflow-x: auto; }
.pc-approver { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px; text-align: center; flex: 1; min-width: 90px; }
.pc-approver-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.pc-approver-name { font-size: 11.5px; font-weight: 500; color: var(--text-primary); }
.pc-approver-role { font-size: 10.5px; color: var(--text-tertiary); }
.pc-approver-status { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; margin-top: 2px; }
.pc-approver-status.done { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.pc-approver-status.active { background: var(--status-warning-soft); color: #92400E; }
.pc-approver-status.pending { background: var(--surface-secondary); color: var(--text-tertiary); }
[data-theme="dark"] .pc-approver-status.active { color: #FCD34D; }
.pc-chain-arrow { color: var(--text-tertiary); flex-shrink: 0; padding: 0 2px; }
.pc-chain-arrow.done { color: var(--brand-primary); }
.pc-hist-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-card); }
.pc-hist-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 5px; }
.pc-hist-tile-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.pc-hist-tile-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.pc-hist-head { display: grid; grid-template-columns: 110px 100px 100px 60px 120px 120px 100px 1fr; gap: 0; padding: 9px 20px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); align-items: center; }
.pc-hist-row { display: grid; grid-template-columns: 110px 100px 100px 60px 120px 120px 100px 1fr; gap: 0; padding: 12px 20px; border-bottom: 1px solid var(--border-default); align-items: center; font-size: 13px; transition: background .08s; }
.pc-hist-row:last-child { border-bottom: 0; }
.pc-hist-row:hover { background: var(--surface-secondary); }
.pc-hist-period { font-family: 'Fraunces', serif; font-weight: 500; font-size: 14px; color: var(--text-primary); }
.pc-hist-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); }
.pc-hist-days { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pc-hist-days.fast { color: var(--status-success); } .pc-hist-days.slow { color: var(--status-warning); }
.pc-hist-actor { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.pc-hist-av { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pc-hist-status { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.pc-hist-status.locked { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.pc-hist-status.amended { background: var(--status-warning-soft); color: #92400E; }
.pc-hist-reports { display: flex; align-items: center; gap: 6px; }
.pc-hist-report-btn { font-size: 11.5px; color: var(--brand-primary-strong); cursor: pointer; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(46,212,165,.3); background: var(--brand-primary-soft); transition: all .12s; white-space: nowrap; }
.pc-hist-report-btn:hover { background: var(--brand-primary); color: var(--brand-dark); }

/* ── Period Close — stage cards (prototype class names) ── */
.pc-stage { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow .15s; }
.pc-stage:hover { box-shadow: var(--shadow-elevated); }
.pc-stage.is-active { border-color: var(--status-warning); box-shadow: 0 0 0 2px rgba(245,158,11,.1), var(--shadow-card); }
.pc-stage.is-done { border-color: rgba(46,212,165,.3); }
.pc-stage.is-blocked { border-color: var(--status-danger); }
.pc-stage-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; transition: background .1s; }
.pc-stage-head:hover { background: var(--surface-secondary); }
.pc-stage.is-open .pc-stage-head { border-bottom: 1px solid var(--border-default); }
.pc-stage-info { flex: 1; min-width: 0; }
.pc-stage-sub { font-size: 12.5px; color: var(--text-secondary); }
.pc-stage-chevron { color: var(--text-tertiary); transition: transform .15s; flex-shrink: 0; }
.pc-stage.is-open .pc-stage-chevron { transform: rotate(90deg); }
.pc-stage-body { display: none; padding: 16px 20px; }
.pc-stage.is-open .pc-stage-body { display: block; }
.pc-checklist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pc-check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-secondary); transition: background .1s; }
.pc-check-item.is-done { background: var(--status-success-soft); }
.pc-check-box { width: 18px; height: 18px; border: 2px solid var(--border-strong); border-radius: 4px; flex-shrink: 0; cursor: pointer; position: relative; margin-top: 1px; transition: all .12s; }
.pc-check-box::after { content: ''; display: none; position: absolute; left: 3px; top: 0px; width: 6px; height: 10px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(40deg); }
.pc-check-item.is-done .pc-check-box { background: var(--status-success); border-color: var(--status-success); }
.pc-check-item.is-done .pc-check-box::after { display: block; }
.pc-check-body { flex: 1; }
.pc-check-title { font-size: 13.5px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.pc-check-item.is-done .pc-check-title { color: var(--status-success); text-decoration: line-through; text-decoration-color: rgba(16,185,129,.4); }
.pc-check-desc { font-size: 12px; color: var(--text-secondary); }
.pc-task-table { display: flex; flex-direction: column; margin-bottom: 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-primary); }
.pc-task-row { display: grid; grid-template-columns: 2.2fr 110px 1.3fr 1fr 140px; gap: 14px; padding: 10px 14px; align-items: center; border-bottom: 1px solid var(--border-default); font-size: 13px; }
.pc-task-row:last-child { border-bottom: 0; }
.pc-task-row.is-header { background: var(--surface-secondary); padding: 8px 14px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.pc-task-row.is-done .pc-task-name { color: var(--status-success); text-decoration: line-through; text-decoration-color: rgba(16,185,129,.4); }
.pc-task-name { color: var(--text-primary); font-weight: 500; }
.pc-task-cell { color: var(--text-secondary); }
@media (max-width: 900px) {
  /* Narrow: keep Task / Assigned / Status; hide Period + Action. */
  .pc-task-row { grid-template-columns: 1.6fr 1fr 100px; }
  .pc-task-row > :nth-child(2),
  .pc-task-row > :nth-child(5) { display: none; }
  .pc-task-row.is-header > :nth-child(2),
  .pc-task-row.is-header > :nth-child(5) { display: none; }
}
.pc-stage-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-default); margin-top: 12px; flex-wrap: wrap; gap: 8px; }
.pc-owners { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.pc-owner-av { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pc-stage-actions { display: flex; gap: 6px; }
.pc-progress { height: 6px; background: var(--surface-tertiary); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.pc-progress-fill { height: 100%; border-radius: 3px; background: var(--status-warning); transition: width .4s ease; }
.pc-stage.is-done .pc-progress-fill { background: var(--brand-primary); }
.pc-blocker { display: flex; gap: 10px; padding: 10px 14px; background: var(--status-danger-soft); border: 1px solid rgba(239,68,68,.25); border-radius: var(--radius-md); font-size: 12.5px; color: var(--status-danger); margin-bottom: 12px; }
.pc-step-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; border: 2px solid var(--border-default); background: var(--surface-primary); color: var(--text-tertiary); position: relative; z-index: 1; transition: all .2s; flex-shrink: 0; }
.pc-step.done .pc-step-icon { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.pc-step.active .pc-step-icon { background: var(--status-warning); border-color: var(--status-warning); color: #fff; box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.pc-step.blocked .pc-step-icon { background: var(--status-danger-soft); border-color: var(--status-danger); color: var(--status-danger); }
.pc-step.blocked .pc-step-label { color: var(--status-danger); }

/* ── Reports ── */
.rpt-sel { height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; color: var(--text-primary); background: var(--surface-primary); outline: none; cursor: pointer; appearance: auto; }
.rpt-sel:focus { border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.rpt-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 16px; }
.rpt-toolbar-left { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.rpt-toolbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rpt-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; }
.rpt-sum-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-card); }
.rpt-sum-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.rpt-sum-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.rpt-sum-value.is-positive { color: var(--brand-primary-strong); } .rpt-sum-value.is-negative { color: var(--status-danger); }
.rpt-sum-sub { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }
.rpt { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); font-size: 13.5px; }
.rpt-head { padding: 22px 28px 14px; border-bottom: 1px solid var(--border-default); }
.rpt-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; letter-spacing: -.01em; color: var(--text-primary); margin-bottom: 3px; }
.rpt-entity { font-size: 12.5px; color: var(--text-secondary); }
.rpt-period { font-size: 12.5px; color: var(--text-tertiary); margin-top: 1px; }
.rpt-cols-head { display: grid; grid-template-columns: 70px 1fr 130px 130px 80px; gap: 0; padding: 8px 28px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.tb-cols-head { grid-template-columns: 70px 1fr 130px 130px; }
.rpt-cols-head .right { text-align: right; }
.rpt-section-header { padding: 10px 28px 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); background: var(--surface-secondary); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); margin-top: 4px; }
.rpt-line { display: grid; grid-template-columns: 70px 1fr 130px 130px 80px; gap: 0; padding: 8px 28px; border-bottom: 1px solid var(--border-default); transition: background .08s; }
.rpt-line:hover { background: var(--surface-secondary); }
.rpt-line:last-of-type { border-bottom: none; }
.tb-line { grid-template-columns: 70px 1fr 130px 130px; }
.rpt-code { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); padding-top: 1px; }
.rpt-name { color: var(--text-primary); }
.rpt-name.is-indent { padding-left: 14px; color: var(--text-secondary); }
.rpt-amt { font-family: 'JetBrains Mono', monospace; font-size: 13px; text-align: right; color: var(--text-primary); }
.rpt-amt.prev { color: var(--text-tertiary); }
.rpt-delta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; text-align: right; }
.rpt-delta.is-up { color: var(--status-success); } .rpt-delta.is-down { color: var(--status-danger); }
.rpt-subtotal { display: grid; grid-template-columns: 70px 1fr 130px 130px 80px; gap: 0; padding: 9px 28px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); border-top: 1px solid var(--border-strong); font-weight: 600; }
.rpt-total { display: grid; grid-template-columns: 70px 1fr 130px 130px 80px; gap: 0; padding: 11px 28px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); border-top: 2px solid var(--border-strong); font-weight: 700; }
.rpt-total.is-final { background: var(--brand-primary-soft); border-top: 2px solid var(--brand-primary); border-bottom: none; }
.rpt-total.is-final .rpt-name { color: var(--brand-primary-strong); }
.rpt-total.is-final .rpt-amt { color: var(--brand-primary-strong); }
.rpt-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 28px; background: var(--surface-secondary); border-top: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); }
.rpt-index-group-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); padding: 10px 0 6px; font-weight: 600; }
.rpt-index-list { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.rpt-index-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background .1s; }
.rpt-index-row:last-child { border-bottom: 0; }
.rpt-index-row:hover { background: var(--surface-secondary); }
.rpt-index-row:hover .rpt-index-arrow { color: var(--brand-primary-strong); transform: translateX(3px); }
.rpt-index-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rpt-index-body { flex: 1; min-width: 0; }
.rpt-index-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.rpt-index-desc { font-size: 12.5px; color: var(--text-secondary); }
.rpt-index-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.rpt-index-badge { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.rpt-index-badge.ok { background: var(--status-success-soft); color: var(--status-success); }
.rpt-index-badge.warn { background: var(--status-warning-soft); color: #92400E; }
.rpt-index-badge.info { background: var(--status-info-soft); color: var(--status-info); }
[data-theme="dark"] .rpt-index-badge.warn { color: #FCD34D; }
.rpt-index-period { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.rpt-index-arrow { color: var(--text-tertiary); flex-shrink: 0; transition: transform .15s, color .15s; }

/* ── Owner Report ── */
.send-bar { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 20px; display: flex; align-items: center; gap: 12px; margin-bottom: 24px; box-shadow: var(--shadow-card); }
.send-bar-left { flex: 1; min-width: 0; }
.send-bar-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.send-bar-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.send-bar-actions { display: flex; align-items: center; gap: 8px; }
.email-preview { background: var(--surface-secondary); border-radius: var(--radius-xl); padding: 24px; }
.email-frame { max-width: 640px; margin: 0 auto; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 32px rgba(11,15,30,.12); font-family: 'Work Sans', sans-serif; }
[data-theme="dark"] .email-frame { background: #1a2235; box-shadow: 0 4px 32px rgba(0,0,0,.4); }
.email-header { background: linear-gradient(135deg, #0B0F1E 0%, #1a2440 100%); padding: 36px 40px 32px; }
.email-header-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.email-header-logo-text { color: #fff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.email-header-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #2ED4A5; margin-bottom: 8px; }
.email-header-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 28px; letter-spacing: -.02em; color: #fff; line-height: 1.2; margin-bottom: 6px; }
.email-header-sub { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.5; }
.email-score-row { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.email-score-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(46,212,165,.15); border: 1px solid rgba(46,212,165,.3); border-radius: 100px; padding: 8px 16px; }
.email-score-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #2ED4A5; letter-spacing: .06em; text-transform: uppercase; }
.email-score-val { font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; color: #2ED4A5; line-height: 1; }
.email-score-sub { font-size: 13px; color: rgba(255,255,255,.5); }
.email-body { padding: 36px 40px; }
.email-section { margin-bottom: 32px; }
.email-section-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; margin-bottom: 14px; }
.email-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.email-kpi { background: #F8FAFC; border-radius: 12px; padding: 16px 18px; border: 1px solid #E2E8F0; }
[data-theme="dark"] .email-kpi { background: #1F2937; border-color: rgba(255,255,255,.08); }
.email-kpi-label { font-size: 11.5px; color: #64748B; margin-bottom: 5px; font-weight: 500; }
.email-kpi-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: #0B0F1E; letter-spacing: -.02em; line-height: 1; margin-bottom: 3px; }
[data-theme="dark"] .email-kpi-value { color: #F9FAFB; }
.email-kpi-value.green { color: #14B88A; } .email-kpi-value.red { color: #EF4444; }
.email-kpi-change { font-size: 12px; }
.email-kpi-change.up { color: #14B88A; } .email-kpi-change.down { color: #EF4444; } .email-kpi-change.flat { color: #94A3B8; }

/* ── Audit Trail ── */
.audit-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.audit-sel { height: 34px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; color: var(--text-primary); background: var(--surface-primary); outline: none; cursor: pointer; }
.audit-sel:focus { border-color: var(--brand-primary); }
.audit-search { flex: 1; min-width: 200px; height: 34px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; color: var(--text-primary); background: var(--surface-primary); outline: none; }
.audit-search:focus { border-color: var(--brand-primary); }
.audit-tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
.audit-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-card); }
.audit-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 5px; }
.audit-tile-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.audit-tile-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.audit-table-wrap { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.audit-head { display: grid; grid-template-columns: 44px 160px 100px minmax(0,1fr) 120px 140px 120px; gap: 0; padding: 9px 20px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); align-items: center; }
.audit-row { display: grid; grid-template-columns: 44px 160px 100px minmax(0,1fr) 120px 140px 120px; gap: 0; padding: 11px 20px; border-bottom: 1px solid var(--border-default); align-items: center; font-size: 13px; transition: background .08s; cursor: pointer; }
.audit-row:last-child { border-bottom: 0; }
.audit-row:hover { background: var(--surface-secondary); }
.audit-ts { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); }
.audit-actor { display: flex; align-items: center; gap: 7px; }
.audit-actor-av { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; }
.audit-actor-name { font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.audit-event { font-size: 13px; color: var(--text-primary); }
.audit-event-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.audit-entity { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.audit-type { display: inline-flex; align-items: center; gap: 5px; }
.audit-type-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.type-create { color: var(--status-success); } .type-update { color: var(--brand-primary-strong); }
.type-delete { color: var(--status-danger); } .type-review { color: #7C3AED; }
.type-approve { color: #F59E0B; } .type-lock { color: var(--text-secondary); } .type-system { color: var(--text-tertiary); }
.dot-create { background: var(--status-success); } .dot-update { background: var(--brand-primary-strong); }
.dot-delete { background: var(--status-danger); } .dot-review { background: #7C3AED; }
.dot-approve { background: #F59E0B; } .dot-lock { background: var(--text-secondary); } .dot-system { background: var(--text-tertiary); }
.audit-hash { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-tertiary); letter-spacing: .03em; cursor: pointer; }
.audit-hash:hover { color: var(--brand-primary-strong); }
.audit-foot { padding: 10px 20px; background: var(--surface-secondary); border-top: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); }
.audit-pg { display: flex; align-items: center; gap: 6px; }
.audit-pg-btn { width: 28px; height: 28px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all .12s; font-size: 12px; }
.audit-pg-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.audit-pg-btn.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); font-weight: 700; }

/* ── Transaction page layout helpers ── */
/* portal-main may have responsive padding — pull these full-bleed strips out */
.portal-main > .page-toolbar,
.portal-main > .tab-strip,
.portal-main > .bank-strip,
.portal-main > .filter-bar,
.portal-main > .bulk-bar,
.portal-main > .tx-table-wrap {
    margin-left: calc(-1 * var(--portal-main-pad, 0px));
    margin-right: calc(-1 * var(--portal-main-pad, 0px));
}
.page-toolbar { padding: 10px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; background: transparent; flex-shrink: 0; overflow: hidden; }
.page-title-area { flex: 1; min-width: 0; }
.page-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 2px; white-space: nowrap; }
.page-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-bar { padding: 10px 24px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface-secondary); flex-shrink: 0; }
.filter-select { padding: 7px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-secondary); font-family: inherit; cursor: pointer; }
.filter-select:focus { outline: 0; border-color: var(--brand-primary); }
.filter-dot { width: 7px; height: 7px; border-radius: 50%; }
.kpi-item-label { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.kpi-item-value { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.kpi-item-sub { font-size: 10px; color: var(--text-secondary); }
.kpi-item.is-danger .kpi-item-value { color: var(--status-danger); }
.kpi-item.is-warn .kpi-item-value { color: #B45309; }
.kpi-item.is-good .kpi-item-value { color: var(--status-success); }
.bulk-count { font-size: 13px; font-weight: 600; color: var(--brand-primary); font-family: 'JetBrains Mono', monospace; }
.bulk-actions { display: flex; gap: 6px; margin-left: auto; }
.btn-bulk { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); cursor: pointer; font-family: inherit; transition: all .12s; }
.btn-bulk:hover { background: rgba(255,255,255,.2); }
.btn-bulk.is-primary { background: var(--brand-primary); color: var(--brand-dark); border-color: var(--brand-primary); }
.btn-bulk-close { background: transparent; border: 0; color: rgba(255,255,255,.5); cursor: pointer; padding: 4px; display: flex; align-items: center; }
.btn-bulk-close:hover { color: #fff; }

/* ── Transactions — standalone bulk bar (outside .portal-page) ── */
.bulk-bar { display: none; align-items: center; padding: 10px 18px; background: var(--brand-dark); color: #fff; border-bottom: 1px solid var(--border-default); flex-shrink: 0; gap: 12px; }
.bulk-bar.visible { display: flex; }

/* ── Bank strip ── */
.bank-strip { display: flex; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); overflow-x: auto; flex-shrink: 0; }
.bk-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; min-width: 185px; cursor: pointer; transition: border-color .12s; flex-shrink: 0; }
.bk-card:hover, .bk-card.active { border-color: var(--brand-primary); }
.bk-card.bwarn { border-left: 3px solid var(--status-warning); }
.bk-card.bdanger { border-left: 3px solid var(--status-danger); }
.bk-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bk-card-ident { display: flex; align-items: center; gap: 8px; }
.bk-card-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 8px; flex-shrink: 0; background: var(--surface-secondary); color: var(--text-secondary); }
.bk-card-icon.wf     { background: #DBEAFE; color: #1D4ED8; }
.bk-card-icon.chase  { background: #FEE2E2; color: #B91C1C; }
.bk-card-icon.stripe { background: #EDE9FE; color: #6D28D9; }
.bk-card-icon.gusto  { background: #FEF3C7; color: #B45309; }
.bk-card-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.bk-card-mask { font-size: 10.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.bk-dot { width: 7px; height: 7px; border-radius: 50%; }
.bk-dot.ok { background: var(--status-success); }
.bk-dot.warn { background: var(--status-warning); }
.bk-dot.danger { background: var(--status-danger); }
.bk-card-amount { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.bk-card-amount.pos { color: var(--status-success); }
.bk-card-amount.neg { color: var(--status-danger); }
.bk-card-txn { font-size: 11px; color: var(--text-tertiary); margin-bottom: 6px; }
.bk-card-stats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.bk-stat { font-size: 11px; color: var(--text-tertiary); }
.bk-stat.ok   { color: var(--status-success); }
.bk-stat.warn { color: #B45309; font-weight: 600; }
.bk-alert { font-size: 11px; font-weight: 600; color: var(--status-warning); margin-top: 4px; }

/* ── Transaction progress bar ── */
.tx-prog { display: flex; align-items: center; gap: 6px; }
.tx-prog-bar { width: 36px; height: 4px; background: var(--surface-tertiary); border-radius: 2px; overflow: hidden; }
.tx-prog-fill { height: 100%; border-radius: 2px; background: var(--brand-primary); }
.tx-prog-fill.done { background: var(--status-success); }
.tx-prog-fill.warn { background: var(--status-warning); }
.tx-prog-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-secondary); }

/* ── Source badge ── */
.src-badge { display: inline-flex; padding: 2px 6px; border-radius: 3px; font-size: 9.5px; font-family: 'JetBrains Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.src-badge.bk { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.src-badge.ai { background: rgba(167,139,250,.15); color: #6D28D9; }
.src-badge.client { background: var(--status-info-soft); color: var(--status-info); }
.src-badge.csv { background: var(--status-warning-soft); color: #B45309; }

/* ── Review check & flag ── */
.review-check { width: 17px; height: 17px; border: 1.5px solid var(--border-strong); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); transition: all .12s; margin: 0 auto; }
.review-check.on { background: var(--status-success); border-color: var(--status-success); }
.review-check.on::after { content: ''; display: block; width: 7px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }
.flag-btn { background: transparent; border: 0; cursor: pointer; color: var(--border-strong); padding: 3px; display: flex; align-items: center; border-radius: 4px; transition: all .12s; }
.flag-btn:hover { color: var(--status-danger); }
.flag-btn.on { color: var(--status-danger); }

/* ── Column picker ── */
.col-picker-wrap { position: relative; }
.col-picker-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); width: 210px; padding: 12px; display: none; }
.col-picker-panel.open { display: block; }
.col-picker-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); font-weight: 700; margin-bottom: 8px; }

/* ── Filter drawer (fd-*) ── */
.fd-overlay { position: fixed; inset: 0; background: rgba(11,15,30,.4); backdrop-filter: blur(2px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s; }
.fd-overlay.open { opacity: 1; pointer-events: auto; }
.fd-drawer { position: fixed; top: 0; right: 0; width: 340px; max-width: 95vw; height: 100vh; background: var(--surface-primary); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-drawer); z-index: 300; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s; }
.fd-drawer.open { transform: translateX(0); }
.fd-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--border-default); display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; }
.fd-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 3px; }
.fd-title { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; }
.fd-close { width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.fd-close:hover { background: var(--surface-secondary); }
.fd-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.fd-section { margin-bottom: 18px; }
.fd-section-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 9px; }
.fd-input { width: 100%; padding: 7px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.fd-input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.fd-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.fd-range-sep { color: var(--text-tertiary); text-align: center; }
.fd-check-list { display: flex; flex-direction: column; gap: 5px; }
.fd-check-item { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--text-primary); padding: 3px 0; }
.fd-check-item input { width: 14px; height: 14px; accent-color: var(--brand-primary); cursor: pointer; }
.fd-foot { padding: 12px 20px; border-top: 1px solid var(--border-default); display: flex; gap: 8px; flex-shrink: 0; }
.fd-foot .btn { flex: 1; justify-content: center; }

/* ── Receipt drawer (rdw-*) ── */
.rdw-overlay { position: fixed; inset: 0; background: rgba(11,15,30,.4); backdrop-filter: blur(2px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s; }
.rdw-overlay.open { opacity: 1; pointer-events: auto; }
.rdw-drawer { position: fixed; top: 0; right: 0; width: 360px; max-width: 95vw; height: 100vh; background: var(--surface-primary); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-drawer); z-index: 300; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s; }
.rdw-drawer.open { transform: translateX(0); }
.rdw-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.rdw-title { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; color: var(--text-primary); }
.rdw-close { width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.rdw-close:hover { background: var(--surface-secondary); }
.rdw-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.rdw-zone { border: 2px dashed var(--border-default); border-radius: var(--radius-md); padding: 28px; text-align: center; cursor: pointer; transition: all .12s; background: var(--surface-secondary); margin-bottom: 14px; }
.rdw-zone:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.rdw-zone-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.rdw-zone-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.rdw-zone-sub { font-size: 12px; color: var(--text-secondary); }
.rdw-foot { padding: 12px 20px; border-top: 1px solid var(--border-default); display: flex; gap: 8px; flex-shrink: 0; }
.rdw-foot .btn { flex: 1; justify-content: center; }

/* ── Transaction detail drawer (prototype pattern: fixed + opacity/translate toggle) ── */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,.4); z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; backdrop-filter: blur(2px); }
.drawer { position: fixed; top: 0; right: 0; width: 900px; max-width: 96vw; height: 100vh; background: var(--surface-primary); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-drawer); z-index: 400; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; }
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 18px 22px 16px; border-bottom: 1px solid var(--border-default); display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; }
.drawer-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 4px; }
.drawer-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; line-height: 1.25; }
.drawer-close { width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; }
.drawer-close:hover { background: var(--surface-secondary); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 0; }
.drawer-section { margin-bottom: 20px; }
.drawer-section-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 10px; }
.drawer-meta-grid { display: grid; grid-template-columns: 100px 1fr; gap: 5px 12px; font-size: 12.5px; }
.drawer-meta-grid dt { color: var(--text-tertiary); font-size: 11.5px; align-self: center; }
.drawer-meta-grid dd { color: var(--text-primary); font-weight: 500; margin: 0; align-self: center; }
.drawer-field { margin-bottom: 12px; }
.drawer-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.drawer-field-input { width: 100%; padding: 8px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.drawer-field-input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.drawer-actions { padding: 14px 22px; border-top: 1px solid var(--border-default); display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.drawer-actions .btn { flex: 1; justify-content: center; }
/* History timeline */
.tx-history { display: flex; flex-direction: column; gap: 0; }
.tx-history-item { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
.tx-history-item:last-child { padding-bottom: 0; }
.tx-history-item::before { content: ''; position: absolute; left: 15px; top: 30px; bottom: 0; width: 1px; background: var(--border-default); }
.tx-history-item:last-child::before { display: none; }
.tx-history-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-secondary); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; color: var(--text-secondary); }
.tx-history-icon.green { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #16A34A; }
.tx-history-icon.blue { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.3); color: #6366F1; }
.tx-history-icon.ai { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.3); color: #7C3AED; }
.tx-history-icon.red { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.3); color: var(--status-danger); }
.tx-history-empty { font-size: 12px; color: var(--text-tertiary); padding: 6px 0; }
.tx-history-content { flex: 1; min-width: 0; }
.tx-history-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tx-history-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.tx-history-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; }
/* Actions panel */
.drawer-action-list { display: flex; flex-direction: column; gap: 2px; }
.drawer-action-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: var(--radius-md); background: transparent; border: 0; font-size: 13px; color: var(--text-primary); cursor: pointer; text-align: left; transition: background 0.12s ease; }
.drawer-action-btn:hover { background: var(--surface-secondary); }
.drawer-action-btn.is-danger { color: var(--status-danger); }
.drawer-action-btn.is-danger:hover { background: rgba(239,68,68,.08); }
.drawer-action-btn svg { flex-shrink: 0; color: var(--text-tertiary); }
.drawer-action-btn.is-danger svg { color: var(--status-danger); }
/* Inline expand row action buttons — bordered card style matching prototype */
.tx-action-list { display: flex; flex-direction: column; gap: 4px; }
.tx-act-btn { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-primary); font-size: 12.5px; font-weight: 500; color: var(--text-primary); cursor: pointer; font-family: inherit; transition: all 0.12s; text-align: left; text-decoration: none; width: 100%; box-sizing: border-box; }
.tx-act-btn:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.tx-act-btn svg { color: var(--text-tertiary); flex-shrink: 0; }
.tx-act-btn:hover svg { color: var(--brand-primary-strong); }
.tx-act-btn.is-danger { color: var(--status-danger); border-color: var(--status-danger-soft); }
.tx-act-btn.is-danger:hover { background: var(--status-danger-soft); border-color: var(--status-danger); }
.tx-act-btn.is-danger svg { color: var(--status-danger); }
/* Notes textarea */
.drawer-notes-area { width: 100%; min-height: 72px; padding: 9px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; resize: vertical; }
.drawer-notes-area:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }

/* ── Modal (prototype pattern: display:none → display:flex toggle) ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,.5); display: none; align-items: center; justify-content: center; z-index: 500; padding: 20px; }
.modal-backdrop.open { display: flex; backdrop-filter: blur(2px); }
.modal { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 26px; width: 100%; max-width: 480px; box-shadow: 0 24px 60px rgba(0,0,0,.18); max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 5px; }
.modal-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; margin-bottom: 8px; }
.modal-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 16px; }
.modal-form-row { margin-bottom: 13px; }
.modal-form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; }
.modal-form-input { width: 100%; padding: 8px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.modal-form-input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-default); }

/* ── COA — Filter dropdown menus ── */
.dropdown-root { position: relative; }
.filter-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: 6px; z-index: 60; display: none; max-height: 340px; overflow-y: auto; }
.dropdown-root.open .filter-dd-menu { display: block; }
.dd-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-primary); cursor: pointer; transition: background .08s; }
.dd-item:hover { background: var(--surface-secondary); }
.dd-check { width: 14px; height: 14px; border: 1.5px solid var(--border-strong); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dd-item.selected .dd-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.dd-item.selected .dd-check::after { content: ''; width: 7px; height: 4px; border-left: 1.5px solid var(--brand-dark); border-bottom: 1.5px solid var(--brand-dark); transform: rotate(-45deg) translate(1px,-1px); display: block; }
.dd-section-head { padding: 6px 10px 3px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.dd-divider { height: 1px; background: var(--border-default); margin: 5px 4px; }
.dd-foot { display: flex; justify-content: space-between; padding: 6px 4px 0; border-top: 1px solid var(--border-default); margin-top: 4px; }
.dd-foot button { padding: 4px 8px; font-size: 12px; color: var(--text-secondary); border-radius: var(--radius-sm); }
.dd-foot button:hover { background: var(--surface-secondary); color: var(--text-primary); }

/* ── COA — Toggle rows ── */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; gap: 16px; }
.toggle-row-label { font-size: 13.5px; color: var(--text-primary); font-weight: 500; }
.toggle-row-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

/* ── COA — Import dropzone ── */
.import-zone { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.import-zone:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.import-zone-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }

/* ── COA — Confirm icon ── */
.confirm-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.confirm-icon.warn { background: var(--status-warning-soft); color: var(--status-warning); }

/* ── Audit Trail — expandable detail rows ── */
.audit-row.is-open { background: var(--surface-secondary); }
.audit-detail { display: none; padding: 14px 20px 14px 40px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-size: 12.5px; }
.audit-detail.is-open { display: block; }
.audit-detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 10px; }
.audit-detail-field { display: flex; flex-direction: column; gap: 3px; }
.audit-detail-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.audit-detail-val { color: var(--text-primary); font-size: 12.5px; }
.audit-diff { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.audit-diff-row { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.audit-diff-field { color: var(--text-tertiary); min-width: 100px; }
.audit-diff-old { color: var(--status-danger); text-decoration: line-through; }
.audit-diff-new { color: var(--status-success); }
.audit-diff-arrow { color: var(--text-tertiary); }
.audit-gap { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 20px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; white-space: nowrap; background: var(--surface-secondary); color: var(--text-tertiary); border: 1px solid var(--border-default); }
.audit-seq { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-align: center; }
.audit-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.audit-mono-sm { font-size: 10px; }

/* ── Contacts — dropdown menu ── */
.dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: 6px; min-width: 220px; z-index: 60; display: none; max-height: 320px; overflow-y: auto; }
.dropdown-root.is-open .dropdown-menu { display: block; }
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: background 0.08s ease; color: var(--text-primary); }
.dropdown-item:hover { background: var(--surface-secondary); }
.dropdown-item-check { width: 14px; height: 14px; border: 1.5px solid var(--border-strong); border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); }
.dropdown-item.is-checked .dropdown-item-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.dropdown-item.is-checked .dropdown-item-check::after { content: ""; width: 7px; height: 4px; border-left: 1.6px solid var(--brand-dark); border-bottom: 1.6px solid var(--brand-dark); transform: rotate(-45deg) translate(1px, -1px); display: block; }
.dropdown-foot { padding: 6px; border-top: 1px solid var(--border-default); margin-top: 6px; display: flex; justify-content: space-between; }
.dropdown-link { padding: 4px 8px; font-size: 12px; color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; background: none; border: 0; }
.dropdown-link:hover { background: var(--surface-secondary); color: var(--text-primary); }

/* ── Contacts — Role cards ── */
.role-card { padding: 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 12px; transition: border-color 0.15s ease, background 0.15s ease; }
.role-card.is-on { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.role-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.role-card-title { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; color: var(--text-primary); }
.role-card-title .icon { color: var(--text-tertiary); }
.role-card.is-on .role-card-title .icon { color: var(--brand-primary-strong); }
.role-card-fields { display: flex; flex-direction: column; gap: 10px; }
.role-card.is-off .role-card-fields { display: none; }

/* ── Contacts — Activity strip ── */
.activity-strip { background: var(--surface-secondary); border-radius: var(--radius-md); padding: 12px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.activity-stat { display: flex; flex-direction: column; gap: 2px; }
.activity-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.activity-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: var(--text-primary); letter-spacing: -0.01em; }

/* ── Contacts — Contact kind toggle ── */
.kind-toggle { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 3px; background: var(--surface-secondary); gap: 2px; }
.kind-btn { padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; transition: all 0.12s ease; background: transparent; border: 0; cursor: pointer; }
.kind-btn.is-on { background: var(--surface-primary); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* ── Drawer extras ── */
.drawer-section-title { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 6px; border-top: 1px dashed var(--border-default); margin-top: 2px; }
.drawer-foot-left { display: flex; gap: 8px; }
.drawer-foot-right { display: flex; gap: 8px; }
.bulk-bar-close { color: rgba(255,255,255,0.7); padding: 6px; border-radius: 6px; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bulk-bar-close:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; }

/* ── Contacts — Identity cell ── */
.ct-identity { display: flex; align-items: center; gap: 10px; }

@media (max-width: 960px) {
    .ct-summary { grid-template-columns: repeat(3,1fr); }
    .audit-tiles { grid-template-columns: repeat(2,1fr); }
    .sd-kpi-strip { grid-template-columns: repeat(3,1fr); }
    .ca-kpi-strip { grid-template-columns: repeat(2,1fr); }
    .rpt-summary { grid-template-columns: repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════
   Transactions — By Account tab  (ba-*)
   ══════════════════════════════════════════════════ */
.ba-summary-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); flex-shrink: 0; overflow-x: auto; padding: 0 24px; }
.ba-sum-item { padding: 10px 18px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border-default); flex-shrink: 0; }
.ba-sum-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.ba-sum-value { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.ba-sum-value.pos { color: var(--status-success); }
.ba-sum-value.neg { color: var(--status-danger); }
.ba-sum-sub { font-size: 10.5px; color: var(--text-secondary); }
.tpill { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; font-family: inherit; transition: all .12s; }
.tpill:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.tpill.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.type-pills { display: flex; gap: 4px; }
.filter-sep { width: 1px; height: 20px; background: var(--border-default); flex-shrink: 0; }
.qf-pills { display: flex; gap: 4px; }
.qf-pill { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; font-family: inherit; transition: all .12s; display: inline-flex; align-items: center; gap: 5px; }
.qf-pill:hover { border-color: var(--brand-primary); }
.qf-pill.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); }
.qf-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; }
.ba-wrap { flex: 1; overflow-y: auto; padding: 14px 18px; }
.ba-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin: 0 24px 10px; overflow: hidden; transition: border-color .12s; }
.ba-card:hover { border-color: var(--brand-primary-soft); }
.ba-card.rev .ba-head { border-left: 3px solid var(--status-success); }
.ba-card.exp .ba-head { border-left: 3px solid var(--status-danger); }
.ba-card.asset .ba-head { border-left: 3px solid var(--status-info); }
.ba-card.other .ba-head { border-left: 3px solid var(--text-tertiary); }
.ba-head { padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background .1s; border-bottom: 1px solid transparent; }
.ba-head:hover { background: var(--surface-secondary); }
.ba-card.open .ba-head { border-bottom-color: var(--border-default); background: var(--surface-secondary); }
.ba-chevron { color: var(--text-tertiary); flex-shrink: 0; transition: transform .2s; }
.ba-card.open .ba-chevron { transform: rotate(90deg); }
.ba-head-name { flex: 1; min-width: 0; }
.ba-code { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 2px; }
.ba-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ba-head-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 80px; flex-shrink: 0; }
.ba-head-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ba-head-stat-val.pos { color: var(--status-success); }
.ba-head-stat-val.neg { color: var(--status-danger); }
.ba-head-stat-lbl { font-size: 10.5px; color: var(--text-tertiary); }
.ba-prog-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 100px; flex-shrink: 0; }
.ba-prog-bar { width: 80px; height: 5px; background: var(--surface-tertiary); border-radius: 3px; overflow: hidden; }
.ba-prog-fill { height: 100%; border-radius: 3px; background: var(--status-success); }
.ba-prog-lbl { font-size: 10.5px; color: var(--text-tertiary); }
.ba-review-all-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border-default); font-size: 11.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all .12s; flex-shrink: 0; white-space: nowrap; }
.ba-review-all-btn:hover { background: var(--status-success-soft); border-color: var(--status-success); color: var(--status-success); }
.ba-view-btn { width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border-default); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: all .12s; flex-shrink: 0; }
.ba-view-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary-strong); background: var(--brand-primary-soft); }
.ba-body { display: none; }
.ba-card.open .ba-body { display: block; }
.ba-tx-table { width: 100%; overflow-x: hidden; }
/* Columns: chk · Date · Period · Description(flex) · Payee(flex) · Status · Account(flex) · Amount · flag.
   Flexible columns use minmax(0,…) so they shrink before anything overflows the card. Amount is a
   FIXED width (not auto) so it can never be pushed off the right edge by a wide Account picker,
   and the row is clipped to the card width. Keeps Account + Amount on screen at any width. */
/* Content-sized columns, no fixed widths: auto columns (chk/date/period/status/amount/flag) size
   to their content; the flexible text/picker columns use minmax(0,…fr) so they absorb the slack
   and ellipsis-truncate. The track total is always 100% of the card, so the row fits on one line
   at any width without clipping or horizontal scroll. */
/* 9 columns: chk · date · period · description · payee · status · account · amount · flag.
   AUTHORITATIVE COPY of the .ba-tx-* layout (incl. resizable dividers) lives in
   client-portal-shared.css, which loads AFTER this file and wins the cascade. Keep the
   grid template here in sync (--ba-cols var) so the two never diverge — that mismatch was
   the cause of the earlier "flag wraps / amount clipped" bug. */
.ba-tx-head { display: grid; grid-template-columns: var(--ba-cols, 30px 78px 64px minmax(0,1.6fr) minmax(0,1fr) 92px minmax(0,150px) 96px 32px); gap: 8px; padding: 7px 14px; background: var(--surface-secondary); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); }
/* No overflow:hidden on the row — it would clip the COA picker's open dropdown. */
.ba-tx-row { display: grid; grid-template-columns: var(--ba-cols, 30px 78px 64px minmax(0,1.6fr) minmax(0,1fr) 92px minmax(0,150px) 96px 32px); gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-default); align-items: center; transition: background .08s; background: var(--surface-primary); }
.ba-tx-row > div { min-width: 0; }
/* The COA picker (now used for the per-row Account cell) must fill its grid cell and never
   force the row wider. */
.ba-tx-row .coa-picker, .ba-tx-row .coa-picker-trigger { width: 100%; min-width: 0; max-width: 100%; }
.ba-tx-row .coa-picker-trigger { height: 30px; }
.ba-cat-select { width: 100%; max-width: 100%; height: 30px; padding: 0 7px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 12px; font-family: inherit; background: var(--surface-primary); color: var(--text-primary); outline: none; cursor: pointer; }
.ba-cat-select:focus { border-color: var(--brand-primary); }
.ba-group-cat-select { height: 30px; padding: 0 8px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 12px; font-family: inherit; background: var(--surface-primary); color: var(--text-primary); outline: none; cursor: pointer; max-width: 180px; flex-shrink: 0; }
.ba-loadmore-row { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 16px; background: var(--surface-secondary); border-top: 1px solid var(--border-default); }
.ba-loadmore-info { font-size: 12px; color: var(--text-tertiary); }
.ba-loadmore-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-primary); font-size: 12.5px; font-weight: 600; color: var(--brand-primary-strong); cursor: pointer; font-family: inherit; transition: all .12s; }
.ba-loadmore-btn:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.ba-loadmore-btn.subtle { color: var(--text-secondary); font-weight: 500; }
.ba-tx-row:last-child { border-bottom: 0; }
.ba-tx-row:hover { background: #F0FDF9; }
.ba-tx-row.is-selected { background: var(--brand-primary-soft); }
.ba-chk { width: 15px; height: 15px; border: 1.5px solid var(--border-strong); border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); transition: all .12s; }
.ba-chk.on { background: var(--brand-primary); border-color: var(--brand-primary); }
.ba-chk.on::after { content: ''; display: block; width: 7px; height: 4px; border-left: 1.5px solid var(--brand-dark); border-bottom: 1.5px solid var(--brand-dark); transform: rotate(-45deg) translate(1px,-1px); }
.ba-head-chk { width: 15px; height: 15px; border: 1.5px solid var(--border-strong); border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); transition: all .12s; }
.ba-head-chk.on { background: var(--brand-primary); border-color: var(--brand-primary); }
.ba-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); }
.ba-desc-main { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-desc-ref { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-payee { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-prog-chip { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ba-prog-chip.done { background: var(--status-success-soft); color: var(--status-success); }
.ba-prog-chip.ai { background: rgba(167,139,250,.15); color: #6D28D9; }
.ba-prog-chip.review { background: var(--status-warning-soft); color: #B45309; }
.ba-prog-chip.uncat { background: var(--surface-tertiary); color: var(--text-tertiary); }
.ba-amount { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }
.ba-amount.pos { color: var(--status-success); }
.ba-amount.neg { color: var(--status-danger); }
.ba-flag-btn { width: 24px; height: 24px; border-radius: 4px; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--border-strong); transition: all .12s; }
.ba-flag-btn:hover { color: var(--status-danger); }
.ba-flag-btn.on { color: var(--status-danger); }
.ba-bulk-bar { display: none; padding: 7px 16px; background: var(--brand-dark); align-items: center; gap: 8px; flex-wrap: wrap; }
.ba-bulk-bar.on { display: flex; }
.ba-bulk-count { font-size: 12px; font-weight: 600; color: var(--brand-primary); font-family: 'JetBrains Mono', monospace; }
.bbtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); cursor: pointer; font-family: inherit; transition: all .12s; }
.bbtn:hover { background: rgba(255,255,255,.2); }
.bbtn.teal { background: var(--brand-primary); color: var(--brand-dark); border-color: var(--brand-primary); }
.ba-bulk-close { background: transparent; border: 0; color: rgba(255,255,255,.4); cursor: pointer; margin-left: auto; display: flex; align-items: center; }
.ba-bulk-close:hover { color: #fff; }
.ba-empty { padding: 28px 16px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.period-chip { padding: 3px 7px; border-radius: 4px; background: var(--surface-tertiary); border: 0; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-secondary); cursor: pointer; font-weight: 500; transition: all .12s; }
.period-chip:hover { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* ══════════════════════════════════════════════════
   Transactions — Summary tab  (sum-*, widget, fp-*, etc.)
   ══════════════════════════════════════════════════ */
.sum-scroll { flex: 1; overflow-y: auto; padding: 18px; }
.period-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--brand-primary-soft); border: 1px solid rgba(46,212,165,.25); border-radius: var(--radius-md); margin-bottom: 18px; flex-wrap: wrap; }
.period-banner-text { flex: 1; font-size: 13px; color: var(--text-primary); min-width: 200px; }
.blocker-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; background: rgba(239,68,68,.1); color: var(--status-danger); font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.sum-kpi-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 18px; }
.sum-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; }
.sum-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 8px; }
.sum-kpi-val { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; line-height: 1; margin-bottom: 4px; }
.sum-kpi-val.ok { color: var(--status-success); }
.sum-kpi-val.warn { color: #B45309; }
.sum-kpi-val.danger { color: var(--status-danger); }
.sum-kpi-sub { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 8px; }
.sum-kpi-bar { height: 3px; background: var(--surface-tertiary); border-radius: 2px; overflow: hidden; }
.sum-kpi-bar-fill { height: 100%; border-radius: 2px; }
.stage-grid { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 18px; }
.stage-cell { padding: 14px 16px; border-right: 1px solid var(--border-default); }
.stage-cell:last-child { border-right: 0; }
.stage-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.stage-val { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 3px; }
.stage-sub { font-size: 11px; color: var(--text-tertiary); }
.stage-bar { height: 3px; border-radius: 2px; margin-top: 8px; }
.sum-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.sum-row.wide { grid-template-columns: 2fr 1fr; }
.widget { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.widget-head { padding: 14px 18px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.widget-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; }
.widget-link { font-size: 12px; color: var(--brand-primary-strong); font-weight: 600; text-decoration: none; }
.widget-link:hover { text-decoration: underline; }
.widget-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); }
.widget-body { padding: 14px 18px; }
.sbl-card { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start; padding: 12px 18px; border-bottom: 1px solid var(--border-default); }
.sbl-card:last-child { border-bottom: 0; }
.sbl-card.warn { background: rgba(245,158,11,.03); }
.sbl-card.danger { background: rgba(239,68,68,.03); }
.sbl-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 9px; flex-shrink: 0; background: var(--surface-secondary); color: var(--text-secondary); }
.sbl-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.sbl-mask { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-bottom: 6px; }
.sbl-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.sbl-stat { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.sbl-stat.ok { color: var(--status-success); }
.sbl-stat.warn { color: #B45309; }
.sbl-stat.danger { color: var(--status-danger); }
.sbl-alert { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--status-danger); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-default); }
.sbl-amount { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; text-align: right; }
.sbl-amount.pos { color: var(--status-success); }
.sbl-amount.neg { color: var(--status-danger); }
.sbl-amount-sub { font-size: 11px; color: var(--text-tertiary); text-align: right; margin-top: 2px; }
.blocker-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.blocker-icon.critical { background: rgba(239,68,68,.1); color: var(--status-danger); }
.blocker-icon.warn { background: var(--status-warning-soft); color: #B45309; }
.blocker-fix { padding: 4px 10px; border-radius: var(--radius-md); font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); transition: all .12s; white-space: nowrap; }
.blocker-fix:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.blocker-fix.urgent { border-color: var(--status-danger); color: var(--status-danger); }
.blocker-fix.urgent:hover { background: var(--status-danger); color: #fff; }
.fp-section { margin-bottom: 14px; }
.fp-section-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 8px; }
.fp-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.fp-opt { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; font-family: inherit; transition: all .12s; }
.fp-opt:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.fp-opt.on { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.fp-opt-cnt { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; }
.fp-opt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rev-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rev-bar-label { font-size: 12.5px; color: var(--text-primary); min-width: 120px; }
.rev-bar { flex: 1; height: 8px; background: var(--surface-tertiary); border-radius: 4px; overflow: hidden; }
.rev-bar-fill { height: 100%; border-radius: 4px; }
.rev-bar-val { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--text-primary); min-width: 44px; text-align: right; }
.ai-metric { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-default); }
.ai-metric:last-child { border-bottom: 0; }
.ai-metric-label { font-size: 13px; color: var(--text-primary); }
.ai-metric-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ai-metric-val.good { color: var(--status-success); }
.ai-metric-val.warn { color: #B45309; }
.ai-metric-sub { font-size: 11px; color: var(--text-tertiary); text-align: right; }
.coa-row { display: grid; grid-template-columns: 1fr auto 80px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-default); }
.coa-row:last-child { border-bottom: 0; }
.coa-name { font-size: 12.5px; color: var(--text-primary); }
.coa-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); }
.coa-bar { width: 100%; height: 6px; background: var(--surface-tertiary); border-radius: 3px; overflow: hidden; }
.coa-bar-fill { height: 100%; border-radius: 3px; }
.coa-amount { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600; text-align: right; }
.coa-amount.pos { color: var(--status-success); }
.coa-amount.neg { color: var(--status-danger); }

/* ===== Journal / Ledger screen ===== */
.je-lines-head { display: grid; grid-template-columns: 1fr 1.4fr 1fr 110px 110px 28px; gap: 8px; padding: 8px 10px; background: var(--surface-secondary); border-radius: var(--radius-md); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; }
.je-line { display: grid; grid-template-columns: 1fr 1.4fr 1fr 110px 110px 28px; gap: 8px; padding: 6px 0; align-items: start; }
.je-line .field-input, .je-line .field-select { height: 34px; font-size: 12.5px; padding: 0 10px; }
.je-line .field-select { padding-right: 28px; }
.je-line-amt { text-align: right; font-family: 'JetBrains Mono', monospace; }
.je-line-remove { width: 28px; height: 34px; border-radius: 6px; color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.je-line-remove:hover { background: var(--status-danger-soft); color: var(--status-danger); }
.je-line-bank-note { grid-column: 1 / -1; margin: -2px 0 2px; padding: 5px 10px; background: var(--brand-accent-soft); color: var(--brand-accent); font-size: 11px; border-radius: 6px; display: flex; align-items: center; gap: 6px; }
.je-balance { background: var(--surface-secondary); border-radius: var(--radius-md); padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 8px; border: 1px solid transparent; transition: border-color 0.15s ease, background 0.15s ease; }
.je-balance.is-balanced { background: var(--status-success-soft); border-color: rgba(16,185,129,0.2); }
.je-balance.is-unbalanced { background: var(--status-danger-soft); border-color: rgba(239,68,68,0.3); }
.je-balance-stat { display: flex; flex-direction: column; gap: 2px; }
.je-balance-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.je-balance-value { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; color: var(--text-primary); }
.je-balance.is-balanced .je-balance-value { color: var(--status-success); }
.je-balance.is-unbalanced .je-balance-value.is-diff { color: var(--status-danger); }
.approval-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--status-warning); background: var(--status-warning-soft); border-radius: var(--radius-md); color: #92400E; font-size: 12.5px; line-height: 1.5; }
[data-theme="dark"] .approval-callout { color: #FBBF24; }
.approval-callout-icon { flex-shrink: 0; color: var(--status-warning); }
.report-filters { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--surface-secondary); border-radius: var(--radius-lg); margin-bottom: 14px; flex-wrap: wrap; }
.report-filters .field-select, .report-filters .field-input { height: 32px; font-size: 12.5px; }
.report-filter-label { font-size: 11.5px; color: var(--text-secondary); font-weight: 500; }
.journal-group { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; }
.journal-group-head { padding: 12px 18px; background: var(--surface-secondary); display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-default); }
.journal-group-num { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 13px; }
.journal-group-narr { font-size: 13px; color: var(--text-secondary); flex: 1; margin-left: 12px; }
.journal-group-date { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); }
.journal-group-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.journal-group-table td { padding: 9px 18px; border-bottom: 1px solid var(--border-default); }
.journal-group-table tr:last-child td { border-bottom: 0; }
.journal-group-table tr.totals td { background: var(--surface-secondary); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.journal-group-table .td-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); width: 64px; }
.journal-group-table .td-name { color: var(--text-primary); }
.journal-group-table .td-dr, .journal-group-table .td-cr { text-align: right; font-family: 'JetBrains Mono', monospace; width: 120px; }
.acct-picker { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface-secondary); border-radius: var(--radius-lg); margin-bottom: 14px; }
.acct-picker-label { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.acct-picker .field-select { max-width: 380px; }
.acct-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .acct-summary { grid-template-columns: repeat(2, 1fr); } }
.src-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; padding: 1px 7px; border-radius: 8px; font-weight: 500; letter-spacing: 0.02em; }
.src-pill.src-manual  { background: var(--surface-secondary); color: var(--text-secondary); }
.src-pill.src-invoice { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.src-pill.src-bill    { background: var(--status-warning-soft); color: #B45309; }
.src-pill.src-payment { background: var(--status-info-soft); color: var(--status-info); }
.src-pill.src-recon   { background: var(--brand-accent-soft); color: var(--brand-accent); }
[data-theme="dark"] .src-pill.src-bill { color: #FBBF24; }

/* ── Connect Accounts — modal + KPI err ── */
.ca-kpi-err { color: var(--status-danger) !important; }
.connect-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 700; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .18s; }
.connect-modal-overlay.is-open { opacity: 1; pointer-events: all; }
.connect-modal { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); width: 520px; max-width: 96vw; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,.18); }
.cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-default); }
.cm-title { font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.cm-sub { font-size: 12.5px; color: var(--text-tertiary); }
.cm-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; }
.cm-close:hover { background: var(--surface-secondary); color: var(--text-primary); }
.cm-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.cm-type-label { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 6px; margin-bottom: 4px; }
.cm-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.cm-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s, background .15s; }
.cm-opt:hover { background: var(--surface-secondary); border-color: var(--brand-primary); }
.cm-opt.selected { background: var(--brand-primary-soft); border-color: var(--brand-primary); }
.cm-opt-logo { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.cm-opt-logo.wf    { background: #EF4444; color: #fff; }
.cm-opt-logo.chase { background: #1A56DB; color: #fff; }
.cm-opt-logo.boa   { background: #C41230; color: #fff; }
.cm-opt-logo.plaid { background: #111827; color: #fff; }
.cm-opt-logo.amex  { background: #006FCF; color: #fff; }
.cm-opt-logo.stripe { background: #635BFF; color: #fff; }
.cm-opt-logo.paypal { background: #003087; color: #fff; }
.cm-opt-logo.square { background: #000; color: #fff; }
.cm-opt-logo.gusto  { background: #F45D48; color: #fff; }
.cm-opt-logo.adp    { background: #CC0000; color: #fff; }
.cm-opt-logo.csv    { background: var(--surface-tertiary); color: var(--text-secondary); }
.cm-opt-name { font-size: 12px; font-weight: 500; color: var(--text-primary); text-align: center; }
.cm-opt-sub  { font-size: 10.5px; color: var(--text-tertiary); text-align: center; }
.cm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-default); }

/* ── CSV Import Wizard ── */
.cm-step-indicator { display: flex; align-items: center; gap: 0; }
.cm-step-dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-default); background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.cm-step-dot.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.cm-step-dot.is-done { background: var(--status-success-soft); border-color: var(--status-success); color: var(--status-success); }
.cm-step-connector { width: 20px; height: 1.5px; background: var(--border-default); flex-shrink: 0; }

.upload-drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 24px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-secondary); cursor: pointer; transition: border-color .15s, background .15s; text-align: center; min-height: 160px; }
.upload-drop-zone:hover, .upload-drop-zone.dragover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.upload-drop-icon { color: var(--text-tertiary); }
.upload-drop-title { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.upload-drop-link { color: var(--brand-primary-strong); text-decoration: underline; }
.upload-drop-sub { font-size: 12px; color: var(--text-tertiary); }
.upload-file-info { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.upload-file-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.upload-file-size { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

/* ── CSV import (QBO-style): 1/3 controls rail · 2/3 live preview ──
   Fills the portal CONTENT AREA (right of the sidebar, below the top bar) rather than the
   whole viewport, so the left nav + top bar stay visible and usable at all times. The
   left/top offsets track the shell's layout tokens, including the collapsed-sidebar state. */
.csv-fs { position: fixed; top: var(--top-nav-height); left: var(--sidebar-width); right: 0; bottom: 0; z-index: 100; background: var(--surface-primary); display: flex; flex-direction: column; }
[data-sidebar="collapsed"] .csv-fs { left: var(--sidebar-collapsed-width); }
/* The processing overlay also covers only the content area (it's absolute within .csv-fs). */
@media (max-width: 880px) {
    /* Sidebar collapses/stacks on narrow screens — fall back to full width. */
    .csv-fs { left: 0; }
}

/* Step indicator: Map columns → Review periods → Process */
.csv-steps { display: flex; align-items: center; gap: 0; }
.csv-step { display: flex; align-items: center; gap: 8px; }
.csv-step-num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; border: 1.5px solid var(--border-strong); color: var(--text-tertiary); background: var(--surface-primary); flex-shrink: 0; transition: all .15s; }
.csv-step-label { font-size: 12.5px; font-weight: 500; color: var(--text-tertiary); white-space: nowrap; transition: color .15s; }
.csv-step.active .csv-step-num { border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }
.csv-step.active .csv-step-label { color: var(--text-primary); font-weight: 600; }
.csv-step.done .csv-step-num { border-color: var(--status-success); background: var(--status-success); color: #fff; }
.csv-step.done .csv-step-label { color: var(--text-secondary); }
.csv-step-bar { width: 36px; height: 1.5px; background: var(--border-default); margin: 0 10px; flex-shrink: 0; }
.csv-step-bar.done { background: var(--status-success); }

/* Processing overlay: locks the screen + shows progress while files import.
   Scrim is a translucent wash of the page surface so it dims correctly in BOTH themes
   (a hardcoded white wash would glow in dark mode). */
.csv-fs-overlay { position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--surface-primary) 72%, transparent); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; }
.csv-fs-overlay-card { width: min(440px, 86vw); background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 26px 28px; text-align: center; }
.csv-fs-overlay-spinner { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid var(--brand-primary-soft); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin .8s linear infinite; }
.csv-fs-overlay-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.csv-fs-overlay-sub { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 16px; }
.csv-progress-track { width: 100%; height: 7px; border-radius: 4px; background: var(--surface-secondary); overflow: hidden; }
.csv-progress-fill { height: 100%; border-radius: 4px; background: var(--brand-primary); transition: width .4s ease; }
/* Indeterminate stripe when total isn't known (we poll a worker, not row counts) */
.csv-progress-fill.indeterminate { width: 40% !important; background: linear-gradient(90deg, transparent, var(--brand-primary), transparent); animation: csvIndet 1.1s ease-in-out infinite; }
@keyframes csvIndet { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.csv-progress-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; text-align: left; }
.csv-progress-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-tertiary); }
.csv-progress-step.active { color: var(--text-primary); font-weight: 500; }
.csv-progress-step.done { color: var(--status-success); }
.csv-progress-dot { width: 14px; height: 14px; flex-shrink: 0; }
.csv-fs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.csv-fs-head-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.csv-fs-head-sub { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 3px; }
/* Split body: left rail fixed-ish at ~1/3 (clamped), right preview takes the rest. */
.csv-fs-body { flex: 1; display: grid; grid-template-columns: minmax(320px, 1fr) 2fr; min-height: 0; }
.csv-fs-rail { border-right: 1px solid var(--border-default); overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; background: var(--surface-primary); }
.csv-fs-preview { overflow-y: auto; padding: 0; background: var(--surface-secondary); display: flex; flex-direction: column; min-width: 0; }
.csv-fs-preview-head { position: sticky; top: 0; z-index: 1; padding: 14px 22px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); display: flex; align-items: baseline; gap: 10px; }
.csv-fs-preview-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.csv-fs-preview-meta { font-size: 12px; color: var(--text-tertiary); }
.csv-fs-preview-body { flex: 1; padding: 0 22px 22px; }
.csv-fs-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-tertiary); font-size: 13px; text-align: center; padding: 40px; }
.csv-fs-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border-default); flex-shrink: 0; background: var(--surface-primary); }
.csv-fs-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: 2px; }
/* Reusable structures for the wizard (token-only) so markup uses classes, not inline CSS. */
.csv-file-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.csv-file-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: 12px; }
.csv-file-row-name { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-file-row-size { color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.csv-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-top: 14px; overflow: hidden; background: var(--surface-primary); }
.csv-card-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-subtle); font-weight: 600; font-size: 13px; color: var(--text-primary); }
.csv-card-head-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-card-head-meta { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.csv-rail-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.csv-hint { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
/* Money + count cells in the preview tables — mirrors .data-table .td-money/.td-mono. */
.csv-td-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.csv-td-money { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: right; white-space: nowrap; }
.csv-amt-pos { color: var(--status-success); }
.csv-amt-neg { color: var(--status-danger); }
.import-preview-table tr.is-out-of-scope td { opacity: .55; }
@media (max-width: 900px) {
    .csv-fs-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .csv-fs-rail { border-right: 0; border-bottom: 1px solid var(--border-default); max-height: 45vh; }
}

.wizard-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.wizard-badge.ok { background: var(--status-success-soft); color: var(--status-success); }
.wizard-badge.neutral { background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); }

.wizard-map-grid { display: flex; flex-direction: column; gap: 10px; }
.wizard-map-row { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 12px; }
.wizard-map-label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

.csv-preview-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.csv-preview-table th { padding: 6px 10px; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); font-weight: 600; border-bottom: 1px solid var(--border-default); }
.csv-preview-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }

.import-preview-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.import-preview-table th { padding: 7px 10px; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); font-weight: 600; border-bottom: 1px solid var(--border-default); position: sticky; top: 0; background: var(--surface-primary); }
.import-preview-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); }
.import-preview-table tr.is-duplicate td { opacity: .45; }

.dup-pill { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; background: var(--surface-secondary); color: var(--text-tertiary); border: 1px solid var(--border-default); }

.debit-credit-toggle { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; padding: 7px 12px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-left: auto; }

.wizard-acct-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--text-primary); }

.wizard-error { margin-top: 10px; font-size: 12.5px; color: var(--status-danger); }

.wizard-status-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 24px; text-align: center; }
.wizard-check { display: flex; }
.wizard-status-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.wizard-status-sub { font-size: 13px; color: var(--text-secondary); }
.wizard-spinner { width: 32px; height: 32px; border: 3px solid var(--border-default); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wizard-progress-block { display: flex; flex-direction: column; gap: 24px; padding: 32px 8px; }
.wizard-progress-phases { display: flex; flex-direction: column; gap: 0; }
.wizard-phase-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-default); opacity: 0.4; transition: opacity 0.2s; }
.wizard-phase-row:last-child { border-bottom: none; }
.wizard-phase-row.is-running { opacity: 1; }
.wizard-phase-row.is-done { opacity: 1; }
.wizard-phase-row.is-error { opacity: 1; }
.wizard-phase-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.wizard-phase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.wizard-phase-spinner { width: 16px; height: 16px; border: 2px solid var(--border-default); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin .7s linear infinite; }
.wizard-phase-content { display: flex; flex-direction: column; gap: 2px; }
.wizard-phase-label { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.wizard-phase-detail { font-size: 12px; color: var(--text-secondary); }
.wizard-phase-row.is-error .wizard-phase-label { color: var(--status-danger); }
.wizard-progress-summary { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px 20px; }
.wizard-progress-summary-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.wizard-progress-summary-stats { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-secondary); }
.wizard-progress-summary-stats strong { color: var(--text-primary); }

/* ── AI Categorization badges ── */
.ai-badge { display: inline-flex; align-items: center; padding: 2px 7px; font-size: 11px; font-weight: 600; border-radius: 10px; background: var(--surface-secondary); border: 1px solid var(--border-default); color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; white-space: nowrap; flex-shrink: 0; }
.ai-badge.approved { background: var(--brand-primary-soft); border-color: var(--status-success); color: var(--status-success); }
.ai-badge.low { background: var(--status-danger-soft); border-color: var(--status-danger); color: var(--status-danger); }

/* ── Searchable COA picker (code · name · type, filter, add-new) ── */
.coa-picker { position: relative; width: 100%; }
.coa-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-size: 12.5px; font-family: inherit; cursor: pointer; text-align: left; transition: border-color .12s; }
.coa-picker-trigger:hover:not(.is-disabled) { border-color: var(--border-strong); }
.coa-picker.is-open .coa-picker-trigger { border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.coa-picker-trigger.is-disabled { background: var(--surface-secondary); color: var(--text-tertiary); cursor: not-allowed; }
.coa-picker-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.coa-picker-value.is-placeholder { color: var(--text-tertiary); }
.coa-picker-value .coa-code { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); }
.coa-picker-value .coa-sep { color: var(--text-tertiary); }
.coa-picker-value .coa-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coa-picker-caret { color: var(--text-tertiary); flex-shrink: 0; }
.coa-picker-backdrop { position: fixed; inset: 0; z-index: 999; }
/* position:fixed so the dropdown escapes any clipping scroll/overflow ancestor (the
   transaction & staging row grids clip overflow, which otherwise shrinks/cuts the menu —
   the "shrinking groups" symptom). left/top are set inline from the trigger click point. */
.coa-picker-menu { position: fixed; z-index: 1000; width: max-content; min-width: 260px; max-width: 360px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); overflow: hidden; }
.coa-picker-search { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border-default); color: var(--text-tertiary); }
.coa-picker-search-input { flex: 1; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 12.5px; color: var(--text-primary); }
.coa-picker-list { max-height: 280px; overflow-y: auto; padding: 4px; }
.coa-picker-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); padding: 8px 8px 3px; position: sticky; top: 0; background: var(--surface-primary); z-index: 1; }
.coa-picker-group-label:first-child { padding-top: 4px; }
.coa-picker-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: left; font-family: inherit; }
.coa-picker-opt:hover { background: var(--surface-secondary); }
.coa-picker-opt.is-current { background: var(--brand-primary-soft); }
.coa-picker-opt.is-clear { color: var(--text-tertiary); }
.coa-opt-main { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--text-primary); }
.coa-opt-main .coa-code { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); flex-shrink: 0; }
.coa-opt-main .coa-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coa-opt-type { font-size: 9.5px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); background: var(--surface-tertiary); border-radius: var(--radius-sm); padding: 1px 6px; flex-shrink: 0; }
.coa-picker-empty { padding: 12px 10px; font-size: 12px; color: var(--text-tertiary); text-align: center; }
.coa-picker-add { border-top: 1px solid var(--border-default); padding: 6px; }
.coa-picker-add-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--brand-primary-strong); font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; }
.coa-picker-add-btn:hover { background: var(--brand-primary-soft); }
.coa-picker-add-form { display: flex; flex-direction: column; gap: 8px; padding: 6px; }
.coa-picker-add-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ── Categorization SOURCE pill (Rule / AI% / Manual / Needs review) ──
   Shows where a transaction's category came from. Token-based for dark-mode safety. */
.src-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; border: 1px solid transparent; }
.src-pill.rule   { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.src-pill.ai     { background: var(--brand-accent-soft); color: #6D28D9; }
[data-theme="dark"] .src-pill.ai { color: var(--brand-accent); }
.src-pill.manual { background: var(--surface-tertiary); color: var(--text-secondary); }
.src-pill.review { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .src-pill.review { color: var(--status-warning); }

/* ── Toggle switch (column picker) ── */
.toggle-sw { display: inline-flex; align-items: center; cursor: pointer; }
.toggle-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track { position: relative; width: 32px; height: 18px; background: var(--border-strong); border-radius: 999px; transition: background .15s; flex-shrink: 0; }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.toggle-sw input:checked ~ .toggle-track { background: var(--brand-primary); }
.toggle-sw input:checked ~ .toggle-track .toggle-knob { transform: translateX(14px); }

/* ── Column picker row layout ── */
.col-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; }
.col-picker-col-name { font-size: 12.5px; color: var(--text-primary); }

/* ── KPI AI suggested variant ── */
.kpi-item.is-ai .kpi-item-value { color: #7C3AED; }


/* ── Inline transaction detail row ── */
.tx-detail-row td { background: var(--surface-secondary); border-top: none !important; }
.tx-detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--border-default); }
.tx-detail-col { padding: 16px 18px; border-right: 1px solid var(--border-default); }
.tx-detail-col:last-child { border-right: none; }
.tx-detail-section-label { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px; }

/* ── Split line card ── */
.split-line { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; }

/* ── Reconciliation Period List ── */
.period-list-head { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.period-list-head-left { display: flex; flex-direction: column; gap: 6px; }
.period-list-head-name { font-size: 18px; font-weight: 600; color: var(--text-primary); font-family: 'Fraunces', serif; }
.period-list-head-meta { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.period-list-table { width: 100%; border-collapse: collapse; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.period-list-table th { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); }
.period-list-table td { font-size: 13px; color: var(--text-primary); padding: 12px 16px; border-bottom: 1px solid var(--border-subtle, var(--border-default)); vertical-align: middle; }
.period-list-table tr:last-child td { border-bottom: none; }
.period-list-table tbody tr:hover td { background: var(--surface-secondary); }
.period-list-table .mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.period-list-table .text-muted { color: var(--text-tertiary); }
.period-status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.period-status-pill.is-never { background: var(--surface-secondary); color: var(--text-tertiary); border: 1px solid var(--border-default); }
.period-status-pill.is-progress { background: rgba(59,130,246,.12); color: #2563EB; border: 1px solid rgba(59,130,246,.25); }
.period-status-pill.is-finished { background: rgba(16,185,129,.12); color: #059669; border: 1px solid rgba(16,185,129,.25); }
.period-status-pill.is-reopened { background: rgba(245,158,11,.12); color: #D97706; border: 1px solid rgba(245,158,11,.25); }

/* ── Reconciliation Match Workspace (QBO-style) ── */
.recon-info-bar { display:flex; align-items:center; gap:16px; background:var(--surface-secondary); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:9px 16px; margin-bottom:12px; font-size:12.5px; color:var(--text-secondary); flex-wrap:wrap; }
.recon-info-bar strong { color:var(--text-primary); font-weight:600; }
.recon-info-sep { color:var(--border-default); }
.recon-filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.recon-tab-group { display:flex; align-items:center; gap:2px; background:var(--surface-secondary); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:3px; }
.recon-tab { background:none; border:none; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--text-secondary); padding:5px 12px; border-radius:calc(var(--radius-md) - 2px); transition:background .15s, color .15s; white-space:nowrap; }
.recon-tab:hover { background:var(--surface-primary); color:var(--text-primary); }
.recon-tab.is-active { background:var(--surface-primary); color:var(--text-primary); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.recon-search { flex:1; min-width:180px; max-width:280px; font-size:12.5px; padding:6px 10px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-primary); color:var(--text-primary); outline:none; }
.recon-search:focus { border-color:var(--brand-primary); box-shadow:0 0 0 2px rgba(var(--brand-primary-rgb,.2),0.15); }
.recon-filter-count { font-size:11.5px; color:var(--text-tertiary); margin-left:auto; white-space:nowrap; }
.recon-bulk-bar { display:flex; align-items:center; gap:10px; background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2); border-radius:var(--radius-md); padding:7px 14px; margin-bottom:10px; font-size:12.5px; }
.recon-bulk-label { font-weight:600; color:#2563EB; margin-right:4px; }
.recon-table-wrap { border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:12px; }
.recon-table { width:100%; border-collapse:collapse; background:var(--surface-primary); }
.recon-table thead { position:sticky; top:0; z-index:2; }
.recon-table thead th { background:var(--surface-secondary); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-tertiary); padding:9px 12px; text-align:left; border-bottom:1px solid var(--border-default); white-space:nowrap; }
.recon-table thead th.is-right { text-align:right; }
.recon-table thead th.is-center { text-align:center; }
.recon-table thead th.sortable { cursor:pointer; user-select:none; }
.recon-table thead th.sortable:hover { color:var(--text-primary); background:var(--surface-primary); }
.recon-table tbody tr { cursor:pointer; border-bottom:1px solid var(--border-subtle, rgba(0,0,0,.05)); }
.recon-table tbody tr:last-child { border-bottom:none; }
.recon-table tbody tr:hover td { background:rgba(var(--brand-primary-rgb,59,130,246),.04); }
.recon-table tbody tr.is-cleared td { background:rgba(16,185,129,.05); }
.recon-table tbody tr.is-selected td { background:rgba(59,130,246,.08); }
.recon-table tbody tr.is-cleared.is-selected td { background:rgba(59,130,246,.12); }
.recon-table td { padding:9px 12px; font-size:13px; color:var(--text-primary); vertical-align:middle; }
.recon-table td.is-right { text-align:right; }
.recon-table td.is-center { text-align:center; }
.recon-table td.cb-cell { width:36px; padding:9px 8px 9px 14px; }
.recon-row-desc { font-size:13px; font-weight:500; color:var(--text-primary); }
.recon-row-sub { font-size:11px; color:var(--text-tertiary); font-family:'JetBrains Mono',monospace; margin-top:1px; }
.recon-type-pill { display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:12px; }
.recon-type-pill.is-deposit { background:rgba(16,185,129,.12); color:#059669; }
.recon-type-pill.is-payment { background:rgba(239,68,68,.10); color:#DC2626; }
.recon-amount { font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:500; }
.recon-amount.is-deposit { color:var(--text-primary); }
.recon-amount.is-payment { color:var(--status-danger,#DC2626); }
.recon-running-bal { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-secondary); }
.recon-status-check { font-size:15px; color:#059669; font-weight:700; line-height:1; }
.recon-status-open { font-size:15px; color:var(--text-tertiary); line-height:1; }
.recon-table tfoot tr { border-top:2px solid var(--border-default); background:var(--surface-secondary); }
.recon-table tfoot td { font-size:12px; color:var(--text-secondary); padding:8px 12px; font-family:'JetBrains Mono',monospace; }
.recon-empty-row td { text-align:center; padding:40px 24px; color:var(--text-tertiary); font-size:13px; }
.recon-prior-section { border:1px solid var(--border-default); border-radius:var(--radius-lg); margin-bottom:12px; overflow:hidden; }
.recon-prior-toggle { display:flex; align-items:center; gap:8px; width:100%; background:var(--surface-secondary); border:none; cursor:pointer; padding:10px 16px; font-size:12.5px; font-weight:600; color:var(--text-secondary); text-align:left; }
.recon-prior-toggle:hover { color:var(--text-primary); }
.recon-prior-toggle svg { transition:transform .2s; }
.recon-prior-toggle.is-open svg { transform:rotate(90deg); }
.recon-prior-body { padding:0; }


/* ═══════════════════════════════════════════════════════
   My Work page styles
   ═══════════════════════════════════════════════════════ */
/* Page wrap */
.portal-main { padding: 0; }
.page-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 28px 80px;
}

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: 4px;
}
.page-title {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.page-greeting {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.page-actions { display: flex; gap: 8px; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.btn-secondary:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.btn-primary {
  background: var(--brand-primary);
  color: var(--brand-dark);
  border: 1px solid var(--brand-primary);
  font-weight: 600;
}
.btn-primary:hover { background: var(--brand-primary-strong); color: #FFFFFF; }
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 500;
}
.btn-ghost:hover { background: var(--surface-tertiary); color: var(--text-primary); }

/* Tabs */
.view-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 24px;
}
.view-tab {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s ease, border-color 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.view-tab:hover { color: var(--text-primary); }
.view-tab.active { color: var(--brand-primary-strong); border-bottom-color: var(--brand-primary); font-weight: 600; }
.view-tab-badge {
  background: var(--surface-tertiary);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}
.view-tab.active .view-tab-badge { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.view-tab.has-urgent .view-tab-badge { background: var(--status-danger-soft); color: var(--status-danger); }

/* KPI strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
  position: relative;
  overflow: hidden;
}
.kpi:hover { border-color: var(--brand-primary); transform: translateY(-1px); }
.kpi-accent {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--border-strong);
}
.kpi.is-danger .kpi-accent { background: var(--status-danger); }
.kpi.is-warning .kpi-accent { background: var(--status-warning); }
.kpi.is-info .kpi-accent { background: var(--status-info); }
.kpi.is-primary .kpi-accent { background: var(--brand-primary); }
.kpi.is-success .kpi-accent { background: var(--status-success); }
.kpi-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 8px;
}
.kpi-value {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.kpi.is-danger .kpi-value { color: var(--status-danger); }
.kpi.is-warning .kpi-value { color: #B45309; }
[data-theme="dark"] .kpi.is-warning .kpi-value { color: var(--status-warning); }
.kpi-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-meta-delta { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.kpi-meta-delta.up { color: var(--status-success); }
.kpi-meta-delta.down { color: var(--status-danger); }

/* Section heading */
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 28px 0 14px;
}
.section-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.section-meta { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }

/* Category cards grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cat-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
  text-align: left;
}
.cat-card:hover { border-color: var(--brand-primary); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.cat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cat-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.cat-card-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--surface-tertiary);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-card.is-danger .cat-card-icon { background: var(--status-danger-soft); color: var(--status-danger); }
.cat-card.is-warning .cat-card-icon { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .cat-card.is-warning .cat-card-icon { color: var(--status-warning); }
.cat-card.is-info .cat-card-icon { background: var(--status-info-soft); color: var(--status-info); }
.cat-card.is-primary .cat-card-icon { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.cat-card.is-accent .cat-card-icon { background: var(--brand-accent-soft); color: var(--brand-accent); }
.cat-card.is-success .cat-card-icon { background: var(--status-success-soft); color: var(--status-success); }
.cat-card-count {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}
.cat-card-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.cat-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 4px 0;
  border-radius: 4px;
}
.cat-preview-bullet {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}
.cat-card.is-danger .cat-preview-bullet { background: var(--status-danger); }
.cat-card.is-warning .cat-preview-bullet { background: var(--status-warning); }
.cat-preview-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-card-empty {
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: 4px 0;
}
.cat-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-default);
  font-size: 12px;
  color: var(--brand-primary-strong);
  font-weight: 600;
}
.cat-card-foot svg { transition: transform 0.12s ease; }
.cat-card:hover .cat-card-foot svg { transform: translateX(2px); }

/* List view (drilldown from category) */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.list-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  min-width: 280px;
}
.list-search input {
  flex: 1;
  background: none;
  border: 0;
  outline: 0;
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
}
.list-search input::placeholder { color: var(--text-tertiary); }
.list-search svg { color: var(--text-tertiary); }
.list-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-primary);
  transition: all 0.12s ease;
}
.list-filter-pill:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.list-filter-pill.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.list-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 6px 8px 6px 0;
  margin-bottom: 8px;
}
.list-back:hover { color: var(--text-primary); }
.list-back svg { color: var(--text-tertiary); }

/* Task list rows */
.task-list {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.task-row {
  display: grid;
  grid-template-columns: 32px 1.6fr 1.2fr 1fr 110px 36px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  transition: background 0.1s ease;
}
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--surface-secondary); }
.task-checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-primary);
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.task-checkbox:hover { border-color: var(--brand-primary); }
.task-checkbox.checked { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.task-checkbox.checked::after {
  content: '';
  display: block;
  width: 10px; height: 6px;
  border-left: 2px solid var(--brand-dark);
  border-bottom: 2px solid var(--brand-dark);
  transform: rotate(-45deg) translate(2px, -2px);
}
.task-title-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.task-title { font-size: 13.5px; font-weight: 500; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-subtitle { font-size: 11.5px; color: var(--text-tertiary); }
.task-client { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.task-client-avatar {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 10px;
  flex-shrink: 0;
}
.task-client-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-due { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.task-due.is-overdue { color: var(--status-danger); font-weight: 600; }
.task-due.is-today { color: #B45309; font-weight: 600; }
[data-theme="dark"] .task-due.is-today { color: var(--status-warning); }
.task-due-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); }
.task-due.is-overdue .task-due-dot { background: var(--status-danger); }
.task-due.is-today .task-due-dot { background: var(--status-warning); }
.task-status {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--surface-tertiary);
  color: var(--text-secondary);
  width: fit-content;
}
.task-status.is-blocked { background: var(--status-danger-soft); color: var(--status-danger); }
.task-status.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.task-status.is-waiting { background: var(--status-info-soft); color: var(--status-info); }
.task-status.is-done { background: var(--status-success-soft); color: var(--status-success); }
.task-row-action {
  width: 30px; height: 30px;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.task-row-action:hover { background: var(--surface-tertiary); color: var(--text-primary); }

/* Task detail drawer */
.detail-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 480px;
  max-width: 92vw;
  height: 100vh;
  background: var(--surface-primary);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-drawer);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.detail-drawer.open { transform: translateX(0); }
.detail-backdrop {
  position: fixed; inset: 0;
  background: rgba(11,15,30,0.4);
  backdrop-filter: blur(2px);
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.detail-backdrop.open { opacity: 1; pointer-events: auto; }
.detail-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-close {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
}
.detail-close:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.detail-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.detail-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.detail-body { flex: 1; overflow-y: auto; padding: 16px 24px 100px; }
.detail-section { margin-bottom: 22px; }
.detail-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 10px;
}
.detail-meta-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 14px;
  font-size: 13px;
}
.detail-meta-grid dt { color: var(--text-tertiary); font-size: 12px; }
.detail-meta-grid dd { color: var(--text-primary); font-weight: 500; }
.detail-meta-grid dd .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.detail-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.detail-actions {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--surface-primary);
  border-top: 1px solid var(--border-default);
  padding: 14px 24px;
  display: flex;
  gap: 8px;
}
.detail-actions .btn { flex: 1; justify-content: center; }
.detail-activity { display: flex; flex-direction: column; gap: 12px; }
.activity-row { display: flex; gap: 10px; font-size: 12.5px; }
.activity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  margin-top: 5px;
  flex-shrink: 0;
}
.activity-content { flex: 1; }
.activity-text { color: var(--text-primary); }
.activity-meta { color: var(--text-tertiary); font-size: 11.5px; margin-top: 1px; }

/* Daily view */
.daily-day {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.daily-day-head {
  padding: 14px 18px;
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.daily-day.is-today .daily-day-head { background: var(--brand-primary-soft); }
.daily-day-title {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.daily-day.is-today .daily-day-title { color: var(--brand-primary-strong); }
.daily-day-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.daily-day.is-today .daily-day-date { color: var(--brand-primary-strong); }
.daily-empty { padding: 24px 18px; text-align: center; color: var(--text-tertiary); font-size: 13px; font-style: italic; }

/* Calendar view */
.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.calendar-nav { display: flex; align-items: center; gap: 8px; }
.calendar-month {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.calendar-nav-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--surface-primary);
  transition: border-color 0.12s ease, color 0.12s ease;
}
.calendar-nav-btn:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.calendar-dow {
  background: var(--surface-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  text-align: center;
  padding: 8px 4px;
}
.calendar-cell {
  background: var(--surface-primary);
  min-height: 96px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.calendar-cell:hover { background: var(--surface-secondary); }
.calendar-cell.is-other-month { background: var(--surface-secondary); }
.calendar-cell.is-other-month .calendar-day-num { color: var(--text-tertiary); }
.calendar-cell.is-today { background: var(--brand-primary-soft); }
.calendar-cell.is-today .calendar-day-num {
  background: var(--brand-primary);
  color: var(--brand-dark);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.calendar-day-num {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: 'Work Sans', sans-serif;
}
.calendar-event {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-strong);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 2px solid var(--brand-primary);
}
.calendar-event.is-overdue { background: var(--status-danger-soft); color: var(--status-danger); border-left-color: var(--status-danger); }
.calendar-event.is-today-due { background: var(--status-warning-soft); color: #B45309; border-left-color: var(--status-warning); }
[data-theme="dark"] .calendar-event.is-today-due { color: var(--status-warning); }

/* Plan today drawer */
.plan-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 480px;
  max-width: 92vw;
  height: 100vh;
  background: var(--surface-primary);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-drawer);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.plan-drawer.open { transform: translateX(0); }
.plan-backdrop {
  position: fixed; inset: 0;
  background: rgba(11,15,30,0.4);
  backdrop-filter: blur(2px);
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.plan-backdrop.open { opacity: 1; pointer-events: auto; }
.plan-head {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border-default);
}
.plan-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.plan-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.plan-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.plan-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 4px;
}
.plan-search-bar {
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-default);
}
.plan-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.plan-search-input-wrap:focus-within {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}
.plan-search-input-wrap input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
}
.plan-search-input-wrap input::placeholder { color: var(--text-tertiary); }
.plan-search-input-wrap svg { color: var(--text-tertiary); flex-shrink: 0; }
.plan-body { flex: 1; overflow-y: auto; padding: 0 0 90px; }
.plan-section { padding: 14px 24px 8px; }
.plan-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.plan-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.plan-section-label.is-suggested { color: var(--brand-primary-strong); }
.plan-section-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
.plan-task {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.plan-task:hover { border-color: var(--brand-primary); background: var(--surface-secondary); }
.plan-task.is-added { background: var(--brand-primary-soft); border-color: var(--brand-primary); }
.plan-task-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plan-task-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}
.plan-task-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-task-meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.plan-task-due-overdue { color: var(--status-danger); font-weight: 600; }
.plan-task-due-today { color: #B45309; font-weight: 600; }
[data-theme="dark"] .plan-task-due-today { color: var(--status-warning); }
.plan-task-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'Work Sans', sans-serif;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.plan-task-add:hover { border-color: var(--brand-primary); color: var(--brand-primary-strong); }
.plan-task.is-added .plan-task-add {
  background: var(--brand-primary);
  color: var(--brand-dark);
  border-color: var(--brand-primary);
}
.plan-task.is-added .plan-task-add:hover { background: var(--surface-primary); color: var(--status-danger); border-color: var(--status-danger); }
.plan-empty {
  padding: 32px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
}
.plan-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--surface-primary);
  border-top: 1px solid var(--border-default);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan-foot-meta {
  font-size: 12.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-foot-count {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--brand-primary-strong);
}
.plan-foot-actions { display: flex; gap: 8px; }

/* Toast */
.toast {
  position: fixed;
  top: 70px; left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--brand-dark);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-elevated);
  display: flex; align-items: center; gap: 10px;
  z-index: 600;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { color: var(--brand-primary); }

/* Hide views by default */
.view { display: none; }
.view.active { display: block; }

@@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kpi-strip .kpi:nth-child(4), .kpi-strip .kpi:nth-child(5) { display: none; }
  .task-row { grid-template-columns: 28px 1.4fr 1fr 1fr 36px; }
  .task-row .task-status { display: none; }
}

/* ===== All Tasks List View ===== */
.list-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.list-kpi-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; border-left: 3px solid var(--border-default); }
.list-kpi-tile.is-danger { border-left-color: var(--status-danger); }
.list-kpi-tile.is-warning { border-left-color: var(--status-warning); }
.list-kpi-tile.is-info { border-left-color: var(--status-info); }
.list-kpi-tile.is-success { border-left-color: var(--brand-primary); }
.list-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.list-kpi-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.01em; }
.list-kpi-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 5px; }

.list-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.list-filters { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.list-filter-pill { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
.list-filter-pill:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.list-filter-pill.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.list-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.list-search-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 7px 12px; transition: border-color 0.12s ease; }
.list-search-wrap:focus-within { border-color: var(--brand-primary); }
.list-search { border: 0; background: transparent; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: 0; width: 200px; }
.list-search::placeholder { color: var(--text-tertiary); }
.list-sort-select { padding: 7px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-secondary); font-family: inherit; cursor: pointer; }
.list-sort-select:focus { outline: 0; border-color: var(--brand-primary); }

.list-table { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.list-table-header { display: grid; grid-template-columns: 3fr 1.4fr 1fr 1fr 1fr 36px; gap: 14px; padding: 10px 16px; background: var(--surface-secondary); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); }
.list-task-row { display: grid; grid-template-columns: 3fr 1.4fr 1fr 1fr 1fr 36px; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-default); align-items: center; cursor: pointer; transition: background 0.12s ease; }
.list-task-row:last-child { border-bottom: 0; }
.list-task-row:hover { background: var(--surface-secondary); }
.list-task-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-task-client { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.list-task-client-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.list-task-role { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.list-task-due { font-size: 12px; font-family: 'JetBrains Mono', monospace; font-weight: 500; white-space: nowrap; }
.list-task-due.is-overdue { color: var(--status-danger); font-weight: 700; }
.list-task-due.is-today { color: #B45309; font-weight: 700; }
.list-task-due.is-upcoming { color: var(--text-secondary); }
.list-task-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.list-task-status.is-overdue { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.list-task-status.is-today { background: var(--status-warning-soft); color: #B45309; }
.list-task-status.is-waiting { background: var(--status-info-soft); color: var(--status-info); }
.list-task-status.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.list-task-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; transition: all 0.12s ease; }
.list-task-action:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.list-empty { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }

@@media (max-width: 700px) {
  .list-table-header { display: none; }
  .list-task-row { grid-template-columns: 1fr auto; }
  .list-task-client, .list-task-role, .list-task-due { display: none; }
  .list-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .list-kpi-tile:nth-child(4), .list-kpi-tile:nth-child(5) { display: none; }
}

/* ═══════════════════════════════════════════════════════
   Team Work page styles
   ═══════════════════════════════════════════════════════ */
/* ===== Page header ===== */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-header-left { flex: 1; min-width: 260px; }
.page-eyebrow { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 4px; }
.role-pill { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.page-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 6px; }
.page-greeting { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.page-greeting strong { color: var(--text-primary); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; transition: all 0.12s ease; white-space: nowrap; border: 1px solid transparent; font-family: inherit; cursor: pointer; text-decoration: none; }
.btn-secondary { background: transparent; color: var(--text-secondary); border-color: var(--border-default); }
.btn-secondary:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.btn-primary { background: var(--brand-primary); color: var(--brand-dark); font-weight: 600; }
.btn-primary:hover { background: var(--brand-primary-strong); color: #fff; }
.btn-tertiary { background: transparent; color: var(--text-tertiary); border-color: transparent; }
.btn-tertiary:hover { background: var(--surface-secondary); color: var(--text-primary); }
.btn-danger { background: transparent; color: var(--status-danger); border-color: var(--status-danger); }
.btn-danger:hover { background: var(--status-danger); color: #fff; }

/* ===== KPI strip ===== */
.kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; }
.kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; }
.kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.kpi-value { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 11px; color: var(--text-secondary); margin-top: 5px; }
.kpi.is-danger .kpi-value { color: var(--status-danger); }
.kpi.is-warning .kpi-value { color: #B45309; }
.kpi.is-success .kpi-value { color: var(--status-success); }
.kpi.is-info .kpi-value { color: var(--status-info); }

/* ===== Toolbar ===== */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar-left { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.view-toggle-group { display: flex; background: var(--surface-secondary); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.view-toggle { padding: 5px 12px; border-radius: 5px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; font-family: inherit; transition: all 0.12s ease; }
.view-toggle.active { background: var(--surface-primary); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.search-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 7px 12px; transition: border-color 0.12s; }
.search-wrap:focus-within { border-color: var(--brand-primary); }
.search-wrap svg { color: var(--text-tertiary); flex-shrink: 0; }
.search-input { border: 0; background: transparent; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: 0; width: 180px; }
.search-input::placeholder { color: var(--text-tertiary); }
.filter-select { padding: 7px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-secondary); font-family: inherit; cursor: pointer; }
.filter-select:focus { outline: 0; border-color: var(--brand-primary); }

/* ===== Member card grid view ===== */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.member-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.12s ease; }
.member-card:hover { border-color: var(--brand-primary); }
.member-card.is-overloaded { border-left: 3px solid var(--status-danger); }
.member-card.is-busy { border-left: 3px solid var(--status-warning); }
.member-card.is-ok { border-left: 3px solid var(--status-success); }
.member-card-head { padding: 16px 18px 12px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border-default); }
.member-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.member-role { font-size: 11.5px; color: var(--text-secondary); }
.member-capacity-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.member-capacity-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.member-capacity-label.is-overloaded { color: var(--status-danger); }
.member-capacity-label.is-busy { color: #B45309; }
.member-capacity-label.is-ok { color: var(--status-success); }
.capacity-mini-bar { width: 60px; height: 5px; background: var(--surface-tertiary); border-radius: 3px; overflow: hidden; }
.capacity-mini-fill { height: 100%; border-radius: 3px; }
.capacity-mini-fill.is-overloaded { background: var(--status-danger); }
.capacity-mini-fill.is-busy { background: var(--status-warning); }
.capacity-mini-fill.is-ok { background: var(--status-success); }

.member-status-summary { display: grid; grid-template-columns: repeat(5, 1fr); padding: 14px 16px; gap: 8px; border-bottom: 1px solid var(--border-default); }
.member-status-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: var(--radius-sm); }
.member-status-item.is-danger .member-status-count { color: var(--status-danger); }
.member-status-item.is-warning .member-status-count { color: #B45309; }
.member-status-count { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); line-height: 1; }
.member-status-label { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; text-align: center; }
.member-task-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.member-task-dot.is-overdue { background: var(--status-danger); }
.member-task-dot.is-today { background: var(--status-warning); }
.member-task-dot.is-normal { background: var(--brand-primary); }
.member-task-info { flex: 1; min-width: 0; }
.member-task-title { font-size: 12.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-task-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.member-task-due { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; flex-shrink: 0; padding-top: 2px; }
.member-task-due.is-overdue { color: var(--status-danger); }
.member-task-due.is-today { color: #B45309; }
.member-task-due.is-normal { color: var(--text-tertiary); }
.member-card-footer { padding: 10px 18px; border-top: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.member-card-footer-link { font-size: 12px; color: var(--brand-primary-strong); font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; }
.member-card-footer-link:hover { text-decoration: underline; }

/* ===== Engagement table view ===== */
.eng-section { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; }
.eng-section-head { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); cursor: pointer; user-select: none; }
.eng-section-head:hover { background: var(--surface-tertiary); }
.eng-section-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.eng-stage-pill { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.eng-section-meta { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 12px; }
.eng-section-meta strong { color: var(--text-primary); font-weight: 600; }
.eng-task-table { width: 100%; }
.eng-task-header { display: grid; grid-template-columns: 3fr 1.4fr 1fr 1fr 1.2fr 1fr 1.4fr; gap: 12px; padding: 8px 18px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); }
.eng-task-row { display: grid; grid-template-columns: 3fr 1.4fr 1fr 1fr 1.2fr 1fr 1.4fr; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border-default); align-items: center; cursor: pointer; transition: background 0.1s; }
.eng-task-row:last-child { border-bottom: 0; }
.eng-task-row:hover { background: var(--surface-secondary); }
.eng-task-name { font-size: 13px; font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.eng-task-assignee { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); }
.eng-assignee-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.eng-task-kind { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.eng-task-due { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; }
.eng-task-due.is-overdue { color: var(--status-danger); }
.eng-task-due.is-today { color: #B45309; }
.eng-task-due.is-normal { color: var(--text-secondary); }
.status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.status-pill.is-overdue { background: rgba(239,68,68,0.1); color: var(--status-danger); }
.status-pill.is-today { background: var(--status-warning-soft); color: #B45309; }
.status-pill.is-waiting { background: var(--status-info-soft); color: var(--status-info); }
.status-pill.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.expedited-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; background: rgba(167,139,250,0.15); color: #6D28D9; }

/* ===== Modals ===== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 800; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 500px; box-shadow: 0 24px 60px rgba(0,0,0,0.18); max-height: calc(100vh - 40px); overflow-y: auto; }
[data-theme="dark"] .modal { box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
.modal-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.modal-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 8px; }
.modal-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 18px; }
.modal-form-row { margin-bottom: 14px; }
.modal-form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.modal-form-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.modal-form-input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.modal-warning-box { background: var(--status-warning-soft); border-left: 3px solid var(--status-warning); padding: 12px 14px; border-radius: var(--radius-md); font-size: 12.5px; color: #92400E; line-height: 1.55; margin-bottom: 18px; }
[data-theme="dark"] .modal-warning-box { color: var(--status-warning); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border-default); }

.toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-20px); background: var(--brand-dark); color: #fff; padding: 12px 20px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-elevated); display: flex; align-items: center; gap: 10px; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { color: var(--brand-primary); }

@@media (max-width: 900px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kpi:nth-child(4), .kpi:nth-child(5), .kpi:nth-child(6) { display: none; }
  .member-grid { grid-template-columns: repeat(2, 1fr); }
  .eng-task-header, .eng-task-row { grid-template-columns: 2fr 1fr 1fr; }
  .eng-task-row > :nth-child(3), .eng-task-row > :nth-child(4),
  .eng-task-header > :nth-child(3), .eng-task-header > :nth-child(4) { display: none; }
}

/* ===== Task detail drawer ===== */
.detail-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,0.4); backdrop-filter: blur(2px); z-index: 190; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.detail-backdrop.open { opacity: 1; pointer-events: auto; }
.detail-drawer { position: fixed; top: 0; right: 0; width: 480px; max-width: 92vw; height: 100vh; background: var(--surface-primary); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-drawer); z-index: 200; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; }
.detail-drawer.open { transform: translateX(0); }
.detail-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 6px; }
.detail-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-close { width: 32px; height: 32px; border-radius: var(--radius-md); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s ease; background: transparent; border: 0; cursor: pointer; }
.detail-close:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.detail-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.detail-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.25; }
.detail-head-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.detail-body { flex: 1; overflow-y: auto; padding: 18px 24px 20px; }
.detail-section { margin-bottom: 20px; }
.detail-section-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 10px; }
.detail-meta-grid { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: 13px; }
.detail-meta-grid dt { color: var(--text-tertiary); font-size: 12px; }
.detail-meta-grid dd { color: var(--text-primary); font-weight: 500; margin: 0; }
.detail-description { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.detail-activity { display: flex; flex-direction: column; gap: 14px; }
.activity-row { display: flex; gap: 10px; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); flex-shrink: 0; margin-top: 5px; }
.activity-text { font-size: 13px; color: var(--text-primary); line-height: 1.45; }
.activity-meta { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.detail-actions { padding: 16px 24px; border-top: 1px solid var(--border-default); display: flex; gap: 8px; flex-wrap: wrap; }
.detail-actions .btn { flex: 1; justify-content: center; }

/* ===== Bulk reassign overlay ===== */
.bulk-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,0.65); z-index: 900; display: none; align-items: flex-start; justify-content: center; padding: 32px 20px; overflow-y: auto; }
.bulk-backdrop.open { display: flex; }
.bulk-panel { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); width: 100%; max-width: 860px; box-shadow: 0 32px 80px rgba(0,0,0,0.3); display: flex; flex-direction: column; min-height: 0; }
.bulk-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--border-default); }
.bulk-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; }
.bulk-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 4px; }
.bulk-desc { font-size: 13px; color: var(--text-secondary); }
.bulk-table-head { display: grid; grid-template-columns: 2.5fr 1.6fr 1.4fr; gap: 12px; padding: 10px 26px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.bulk-task-row { display: grid; grid-template-columns: 2.5fr 1.6fr 1.4fr; gap: 12px; padding: 12px 26px; border-bottom: 1px solid var(--border-default); align-items: center; transition: background 0.1s; }
.bulk-task-row:last-child { border-bottom: 0; }
.bulk-task-row:hover { background: var(--surface-secondary); }
.bulk-task-info { min-width: 0; }
.bulk-task-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.bulk-task-meta { font-size: 11.5px; color: var(--text-tertiary); }
.bulk-task-meta .is-overdue { color: var(--status-danger); font-weight: 600; }
.bulk-form-select { width: 100%; padding: 7px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-primary); font-family: inherit; cursor: pointer; box-sizing: border-box; }
.bulk-form-select:focus { outline: 0; border-color: var(--brand-primary); }
.bulk-form-date { width: 100%; padding: 7px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.bulk-form-date:focus { outline: 0; border-color: var(--brand-primary); }
.bulk-body { overflow-y: auto; max-height: 50vh; }
.bulk-footer { padding: 16px 26px; border-top: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface-secondary); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.bulk-footer-meta { font-size: 12.5px; color: var(--text-secondary); }
.bulk-footer-actions { display: flex; gap: 8px; }

/* ===== All Tasks List View ===== */
.list-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.list-kpi-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; border-left: 3px solid var(--border-default); }
.list-kpi-tile.is-danger { border-left-color: var(--status-danger); }
.list-kpi-tile.is-warning { border-left-color: var(--status-warning); }
.list-kpi-tile.is-info { border-left-color: var(--status-info); }
.list-kpi-tile.is-success { border-left-color: var(--brand-primary); }
.list-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.list-kpi-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.01em; }
.list-kpi-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 5px; }

.list-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.list-filters { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.list-filter-pill { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
.list-filter-pill:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.list-filter-pill.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.list-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.list-search-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 7px 12px; transition: border-color 0.12s ease; }
.list-search-wrap:focus-within { border-color: var(--brand-primary); }
.list-search { border: 0; background: transparent; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: 0; width: 200px; }
.list-search::placeholder { color: var(--text-tertiary); }
.list-sort-select { padding: 7px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-secondary); font-family: inherit; cursor: pointer; }
.list-sort-select:focus { outline: 0; border-color: var(--brand-primary); }

.list-table { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.list-table-header { display: grid; grid-template-columns: 1.4fr 1.2fr 2fr 1.6fr 1.2fr 1fr 1fr 1.2fr 1.4fr 36px; gap: 12px; padding: 10px 16px; background: var(--surface-secondary); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); }
.list-task-row { display: grid; grid-template-columns: 3fr 1.4fr 1fr 1fr 1fr 36px; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-default); align-items: center; cursor: pointer; transition: background 0.12s ease; }
.list-task-row:last-child { border-bottom: 0; }
.list-task-row:hover { background: var(--surface-secondary); }
.list-task-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-task-client { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.list-task-client-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.list-task-role { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.list-task-due { font-size: 12px; font-family: 'JetBrains Mono', monospace; font-weight: 500; white-space: nowrap; }
.list-task-due.is-overdue { color: var(--status-danger); font-weight: 700; }
.list-task-due.is-today { color: #B45309; font-weight: 700; }
.list-task-due.is-upcoming { color: var(--text-secondary); }
.list-task-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.list-task-status.is-overdue { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.list-task-status.is-today { background: var(--status-warning-soft); color: #B45309; }
.list-task-status.is-waiting { background: var(--status-info-soft); color: var(--status-info); }
.list-task-status.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.list-task-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; transition: all 0.12s ease; }
.list-task-action:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.list-empty { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }

@@media (max-width: 700px) {
  .list-table-header { display: none; }
  .list-task-row { grid-template-columns: 1fr auto; }
  .list-task-client, .list-task-role, .list-task-due { display: none; }
  .list-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .list-kpi-tile:nth-child(4), .list-kpi-tile:nth-child(5) { display: none; }
}


/* ===== Reassign type pill ===== */
.type-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.type-pill.is-regular  { background: var(--surface-tertiary); color: var(--text-secondary); }
.type-pill.is-in       { background: var(--status-info-soft); color: var(--status-info); border: 1px solid rgba(96,165,250,0.3); }
.type-pill.is-out      { background: rgba(239,68,68,0.1); color: var(--status-danger); border: 1px solid rgba(239,68,68,0.25); }


.stage-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; background: var(--surface-tertiary); color: var(--text-secondary); }
.stage-pill.is-bookkeeping    { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.stage-pill.is-review         { background: rgba(167,139,250,0.15); color: #6D28D9; }
.stage-pill.is-client         { background: var(--status-info-soft); color: var(--status-info); }
.stage-pill.is-ingestion      { background: var(--status-warning-soft); color: #B45309; }
.stage-pill.is-close          { background: var(--status-success-soft); color: var(--status-success); }


/* ===== Loading spinner ===== */
.loading-spinner, .btn-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(46,212,165,.25);
    border-top-color: var(--brand-primary-strong, #2ED4A5);
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
.btn-spinner { width: 13px; height: 13px; margin-right: 5px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ===== Statement Import Wizard ===== */

.portal-page .cm-step-dot.is-pending { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-tertiary); }

.portal-page .card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.portal-page .table-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }

.portal-page .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.portal-page .kv-grid > div { display: flex; flex-direction: column; gap: 4px; }
.portal-page .kv-label { font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.portal-page .kv-val { font-size: 14px; font-weight: 500; color: var(--text-primary); }

.portal-page .thumbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 8px; }
.portal-page .thumbcard { position: relative; display: block; padding: 6px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.portal-page .thumbcard:hover { border-color: var(--brand-primary); }
.portal-page .thumbcard.is-selected { border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.portal-page .thumbcard input[type="checkbox"] { position: absolute; top: 8px; right: 8px; z-index: 2; }
.portal-page .thumbcard img { width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--surface-secondary); display: block; }
.portal-page .thumb-label { margin-top: 6px; font-size: 11.5px; font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); text-align: center; }

.portal-page .progress-track { width: 100%; height: 8px; background: var(--surface-secondary); border-radius: 999px; overflow: hidden; }
.portal-page .progress-bar { height: 100%; background: var(--brand-primary); transition: width .25s ease-out; }
.portal-page .progress-bar.indeterminate { width: 40% !important; animation: zpb-indeterminate 1.4s ease-in-out infinite; }
@keyframes zpb-indeterminate {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

.portal-page .confchip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.portal-page .confchip.high { background: var(--status-success-soft); color: var(--status-success); }
.portal-page .confchip.mid  { background: var(--status-warning-soft, #FFF4E0); color: var(--status-warning, #B45309); }
.portal-page .confchip.low  { background: var(--status-danger-soft); color: var(--status-danger); }

.portal-page .warnchip { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-right: 4px; margin-bottom: 2px; border-radius: 4px; background: var(--status-warning-soft, #FFF4E0); color: var(--status-warning, #B45309); font-size: 10.5px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }

.portal-page .ledger-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.portal-page .ledger-table thead th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); position: sticky; top: 0; }
.portal-page .ledger-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); }
.portal-page .ledger-table tbody tr:hover { background: var(--surface-secondary); cursor: pointer; }
.portal-page .ledger-table tbody tr.is-rejected td { color: var(--text-tertiary); text-decoration: line-through; }

.portal-page .ca-kpi-warn { color: var(--status-warning, #B45309); }

.portal-page .rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 24px; }
.portal-page .rec-lbl { font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.portal-page .rec-val { font-size: 15px; font-weight: 600; color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.portal-page .rec-val.ok { color: var(--status-success); }
.portal-page .rec-val.danger { color: var(--status-danger); }

.portal-page .page-progress { display: flex; flex-direction: column; gap: 4px; }
.portal-page .pp-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 6px; font-size: 13px; background: var(--surface-primary); }
.portal-page .pp-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 700; }
.portal-page .pp-label { font-weight: 500; color: var(--text-primary); }
.portal-page .pp-meta { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.portal-page .pp-done { background: var(--status-success-soft); border-color: var(--status-success); }
.portal-page .pp-done .pp-icon { background: var(--status-success); color: #fff; }
.portal-page .pp-done .pp-meta { color: var(--status-success); }
.portal-page .pp-inflight { background: var(--brand-primary-soft); border-color: var(--brand-primary); }
.portal-page .pp-inflight .pp-icon { background: var(--brand-primary); color: #fff; animation: zpb-pulse 1.2s ease-in-out infinite; }
.portal-page .pp-pending .pp-icon { background: var(--surface-secondary); color: var(--text-tertiary); border: 1px solid var(--border-default); }
@keyframes zpb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }


/* ===== Print styles ===== */
@@media print {
    /* Hide all chrome — only the report block prints */
    .portal-nav,
    .portal-sidebar,
    .portal-topbar,
    .bk-page-header,
    .page-tabs,
    .rpt-toolbar,
    .rpt-summary,
    .page-actions,
    .btn,
    .alert { display: none !important; }

    body, .portal-main, .portal-page { background: #fff !important; margin: 0; padding: 0; }
    .portal-main { padding: 0 !important; }

    .rpt {
        box-shadow: none !important;
        border: none !important;
        color: #000 !important;
        font-size: 11pt;
    }
    .rpt-head { color: #000 !important; border-bottom: 1px solid #ccc; }
    .rpt-title { color: #000 !important; font-size: 14pt; }
    .rpt-entity, .rpt-period { color: #444 !important; }
    .rpt-cols-head { background: #f5f5f5 !important; color: #000 !important; border-bottom: 1px solid #ccc; }
    .rpt-section-header { background: #fafafa !important; color: #000 !important; border-bottom: 1px solid #ddd; }
    .rpt-line { color: #000 !important; border-bottom: 1px solid #eee; }
    .rpt-subtotal, .rpt-total { color: #000 !important; border-top: 1px solid #ccc; }
    .rpt-foot { color: #666 !important; font-size: 9pt; border-top: 1px solid #ddd; }
    .rpt-name a { color: #000 !important; text-decoration: none; border-bottom: none !important; }

    /* Ensure page breaks don't split section headers from their rows */
    .rpt-section-header { page-break-after: avoid; }
    .rpt-subtotal, .rpt-total { page-break-before: avoid; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Statement extraction pipeline — source-to-portal token alias map.
   Every .bx-* component CSS file under Components/Shared/Extractions/ uses
   these aliases so the source's --ink / --paper / --ochre / --sage / --crimson
   tokens resolve to the right ZiePieBooks portal values. This is the ONLY
   extraction CSS in portal.css; everything else lives in scoped .razor.css.
   ───────────────────────────────────────────────────────────────────────── */
.portal-page {
    --bx-ink: var(--text-primary);
    --bx-ink-soft: var(--text-secondary);
    --bx-mute: var(--text-tertiary);
    --bx-mute-soft: var(--text-tertiary);
    --bx-paper: var(--surface-secondary);
    --bx-paper-deep: var(--surface-tertiary);
    --bx-card: var(--surface-primary);
    --bx-rule: var(--border-default);
    --bx-rule-soft: var(--border-default);
    --bx-rule-faint: var(--border-default);
    --bx-ochre: var(--brand-primary);
    --bx-ochre-deep: var(--brand-primary-strong, var(--brand-primary));
    --bx-ochre-soft: var(--brand-primary-soft, var(--surface-secondary));
    --bx-sage: var(--status-success);
    --bx-sage-soft: rgba(34, 197, 94, 0.10);
    --bx-crimson: var(--status-danger);
    --bx-crimson-soft: rgba(239, 68, 68, 0.10);
    --bx-gold: #b45309;
    --bx-gold-soft: rgba(245, 158, 11, 0.15);
    --bx-radius-sm: 2px;
    --bx-radius: var(--radius-md);
    --bx-radius-lg: var(--radius-md);
    --bx-font-display: inherit;
    --bx-font-ui: inherit;
    --bx-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --bx-s-1: 0.25rem;
    --bx-s-2: 0.5rem;
    --bx-s-3: 0.75rem;
    --bx-s-4: 1rem;
    --bx-s-5: 1.5rem;
    --bx-s-6: 2rem;
    --bx-s-7: 3rem;
}

/* ─── Extraction shared primitives — buttons, eyebrows, tags, etc.
   These are unscoped so every Components/Shared/Extractions/*.razor can use them.
   Tokens above (--bx-*) drive everything; no fixed colors. ─────────────────── */

.portal-page .bx-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--bx-s-2);
    padding: 0.7rem 1.2rem;
    font-family: var(--bx-font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--bx-ink);
    background: var(--bx-ink);
    color: var(--bx-card);
    border-radius: var(--bx-radius-sm);
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
    cursor: pointer;
}
.portal-page .bx-btn:hover:not(:disabled) { background: var(--bx-ochre); border-color: var(--bx-ochre); color: var(--bx-card); transform: translateY(-1px); }
.portal-page .bx-btn:disabled { background: var(--bx-paper-deep); border-color: var(--bx-rule-soft); color: var(--bx-mute-soft); cursor: not-allowed; transform: none; }

.portal-page .bx-btn--ghost { background: transparent; color: var(--bx-ink); border-color: var(--bx-rule); }
.portal-page .bx-btn--ghost:hover:not(:disabled) { background: var(--bx-ink); color: var(--bx-card); }

.portal-page .bx-btn--ochre { background: var(--bx-ochre); border-color: var(--bx-ochre); color: var(--bx-card); }
.portal-page .bx-btn--ochre:hover:not(:disabled) { background: var(--bx-ochre-deep); border-color: var(--bx-ochre-deep); }

.portal-page .bx-btn--small { padding: 0.45rem 0.85rem; font-size: 0.72rem; }

.portal-page .bx-eyebrow {
    font-family: var(--bx-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--bx-ochre);
}
.portal-page .bx-eyebrow--mute { color: var(--bx-mute); }

.portal-page .bx-num {
    font-family: var(--bx-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Tag pills */
.portal-page .bx-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    font-family: var(--bx-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--bx-rule);
    border-radius: 999px;
    background: transparent;
    color: var(--bx-ink);
}
.portal-page .bx-tag--debit   { color: var(--bx-crimson); border-color: var(--bx-crimson); }
.portal-page .bx-tag--credit  { color: var(--bx-sage); border-color: var(--bx-sage); }
.portal-page .bx-tag--pending { color: var(--bx-gold); border-color: var(--bx-gold); background: var(--bx-gold-soft); }
.portal-page .bx-tag--posted  { color: var(--bx-mute); border-color: var(--bx-rule-soft); }

/* Rules and dividers */
.portal-page .bx-rule { border: 0; border-top: 1px solid var(--bx-rule); margin: var(--bx-s-5) 0; }
.portal-page .bx-rule--soft { border: 0; border-top: 1px solid var(--bx-rule-soft); margin: var(--bx-s-4) 0; }

/* Eyebrow row with trailing rule */
.portal-page .bx-eyebrow-row {
    display: flex;
    align-items: center;
    gap: var(--bx-s-3);
    margin-bottom: var(--bx-s-3);
}
.portal-page .bx-eyebrow-row::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bx-rule);
}

/* Confidence bar shared by InspectView and TransactionsTable */
.portal-page .bx-confbar {
    display: inline-block;
    width: 36px;
    height: 6px;
    background: var(--bx-rule-faint);
    border-radius: 1px;
    position: relative;
    vertical-align: middle;
}
.portal-page .bx-confbar::before {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--bx-w, 0%);
    background: currentColor;
    border-radius: 1px;
}
.portal-page .bx-confbar--high { color: var(--bx-sage); }
.portal-page .bx-confbar--mid  { color: var(--bx-gold); }
.portal-page .bx-confbar--low  { color: var(--bx-crimson); }

/* Extract page shell (orchestrator-only) */
.portal-page .bx-extract-shell { max-width: 1240px; margin: 0 auto; padding: var(--bx-s-6) var(--bx-s-5); display: flex; flex-direction: column; gap: var(--bx-s-5); }
.portal-page .bx-page-title { font-family: var(--bx-font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--bx-ink); }

/* Initial load placeholder on /extract/{id} (prevents Upload-state flash) */
.portal-page .bx-loading { display: flex; align-items: center; justify-content: center; gap: var(--bx-s-3); padding: var(--bx-s-6); color: var(--bx-mute); font-family: var(--bx-font-ui); font-size: 0.95rem; }
.portal-page .bx-spinner { width: 1.1rem; height: 1.1rem; border: 2px solid var(--bx-rule); border-top-color: var(--bx-ochre); border-radius: 50%; animation: bx-spin 0.7s linear infinite; }
@keyframes bx-spin { to { transform: rotate(360deg); } }

/* Resume in-progress card on /extract */
.portal-page .bx-resume { background: var(--bx-card); border: 1px solid var(--bx-rule); border-left: 4px solid var(--bx-ochre); padding: var(--bx-s-4) var(--bx-s-5); display: flex; flex-direction: column; gap: var(--bx-s-3); }
.portal-page .bx-resume__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bx-s-3); }
.portal-page .bx-resume__row { display: grid; grid-template-columns: 120px 1fr auto auto; gap: var(--bx-s-3); align-items: center; padding: var(--bx-s-2) var(--bx-s-3); border: 1px solid var(--bx-rule-soft); border-radius: var(--bx-radius-sm); text-decoration: none; color: var(--bx-ink); }
.portal-page .bx-resume__row:hover { background: var(--bx-paper); border-color: var(--bx-rule); }
.portal-page .bx-resume__chip { display: inline-flex; align-items: center; padding: 0.14rem 0.55rem; font-family: var(--bx-font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; border: 1px solid var(--bx-rule-soft); background: var(--bx-paper); color: var(--bx-mute); }
.portal-page .bx-resume__chip--active { color: var(--bx-ochre-deep); border-color: var(--bx-ochre); background: var(--bx-ochre-soft); }
.portal-page .bx-resume__chip--review { color: var(--bx-gold); border-color: var(--bx-gold); background: var(--bx-gold-soft); }
.portal-page .bx-resume__chip--failed { color: var(--bx-crimson); border-color: var(--bx-crimson); background: var(--bx-crimson-soft); }
.portal-page .bx-resume__name { font-weight: 600; }
.portal-page .bx-resume__meta { color: var(--bx-mute); font-size: 0.78rem; }
.portal-page .bx-resume__cta { color: var(--bx-ochre-deep); font-weight: 600; font-size: 0.85rem; }

/* ───── Reports → Charts tab ───── */
.rpt-charts { display: flex; flex-direction: column; gap: 16px; }
.rpt-charts-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.rpt-charts-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-card); }
.rpt-charts-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.rpt-charts-kpi-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.rpt-charts-kpi-value.ok { color: var(--status-success); }
.rpt-charts-kpi-value.danger { color: var(--status-danger); }
.rpt-charts-kpi-sub { font-size: 11.5px; margin-top: 6px; font-weight: 500; }
.rpt-charts-kpi-sub.ok { color: var(--status-success); }
.rpt-charts-kpi-sub.danger { color: var(--status-danger); }
.rpt-chart-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.rpt-chart-head { padding: 16px 20px 8px; border-bottom: 1px solid var(--border-default); }
.rpt-chart-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; letter-spacing: -.01em; color: var(--text-primary); }
.rpt-chart-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.rpt-chart-canvas-wrap { padding: 16px 20px 20px; position: relative; }

/* ───── Cash Flow Forecast (Owner Report) ───── */
.fc-wrap { display: flex; flex-direction: column; gap: 16px; }
.fc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.fc-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-card); }
.fc-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.fc-tile-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.fc-tile-value.ok { color: var(--status-success); }
.fc-tile-value.danger { color: var(--status-danger); }
.fc-tile-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 6px; }
.fc-alert { display: flex; gap: 12px; padding: 14px 18px; border-radius: var(--radius-md); border-left: 4px solid; align-items: flex-start; }
.fc-alert.danger { background: rgba(239, 68, 68, 0.06); border-left-color: var(--status-danger); color: var(--status-danger); }
.fc-alert.ok     { background: rgba(34, 197, 94, 0.08); border-left-color: var(--status-success); color: var(--status-success); }
.fc-alert-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.fc-alert-body { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.fc-chart-card,
.fc-table-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.fc-chart-head { padding: 16px 20px 8px; border-bottom: 1px solid var(--border-default); }
.fc-chart-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; letter-spacing: -.01em; color: var(--text-primary); }
.fc-chart-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.fc-chart-canvas-wrap { padding: 16px 20px 20px; position: relative; }
.fc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fc-table th { padding: 10px 16px; text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); }
.fc-table th.right, .fc-table td.right { text-align: right; font-family: 'JetBrains Mono', monospace; }
.fc-table td { padding: 10px 16px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); }
.fc-table td.ok { color: var(--status-success); }
.fc-table td.danger { color: var(--status-danger); }
.fc-table tr.is-forecast td { color: var(--text-tertiary); font-style: italic; background: var(--surface-secondary); }
.fc-table tr.is-forecast td.danger { color: var(--status-danger); font-style: italic; }
.fc-source { display: inline-block; padding: 1px 8px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fc-source.actual   { background: rgba(34, 197, 94, 0.12); color: var(--status-success); }
.fc-source.forecast { background: var(--surface-tertiary); color: var(--text-tertiary); }
.fc-method { font-size: 12px; color: var(--text-tertiary); padding: 12px 16px; background: var(--surface-secondary); border-radius: var(--radius-md); line-height: 1.55; }

/* ───── Period Close landing ───── */
.pc-landing-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 16px 24px 0; }
.pc-landing-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-card); }
.pc-landing-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.pc-landing-kpi-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.pc-landing-kpi-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 6px; }

.pc-landing-toolbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px 8px; }
.pc-landing-toolbar-left { display: flex; align-items: center; gap: 10px; }
.pc-landing-toolbar-right { margin-left: auto; }

.pc-landing-table-wrap { padding: 0 24px 24px; }
.pc-landing-table { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.pc-landing-table thead th { background: var(--surface-secondary); padding: 10px 14px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); text-align: left; }
.pc-landing-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-default); vertical-align: middle; font-size: 13px; color: var(--text-primary); }
.pc-landing-table tbody tr:last-child td { border-bottom: 0; }
.pc-landing-row.state-locked td { background: var(--surface-secondary); }
.pc-landing-row.state-inprogress { background: rgba(46, 212, 165, 0.04); }
.pc-landing-period { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.pc-landing-activity { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.pc-landing-tasks { display: flex; flex-direction: column; gap: 4px; }
.pc-landing-tasks-count { font-size: 12px; color: var(--text-secondary); }
.pc-landing-tasks-bar { width: 100%; height: 5px; border-radius: 999px; background: var(--surface-secondary); overflow: hidden; }
.pc-landing-tasks-fill { height: 100%; border-radius: 999px; background: var(--brand-primary); transition: width .2s ease; }

.pc-locked-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin: 12px 0; background: var(--surface-secondary); border: 1px solid var(--border-default); border-left: 4px solid var(--brand-primary-strong); border-radius: var(--radius-md); font-size: 12.5px; color: var(--text-secondary); }
.pc-locked-banner svg { color: var(--brand-primary-strong); flex-shrink: 0; }

/* ==========================================================================
   Customer / Business prototype additions (Phase 1)
   ========================================================================== */

/* --- Bulk action bar children --- */
.bulk-bar-info { display: flex; align-items: center; gap: 12px; flex: 1; font-size: 13px; }
.bulk-bar-count { background: rgba(255,255,255,0.18); color: #fff; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; }
.bulk-bar-clear { color: rgba(255,255,255,0.75); font-size: 12.5px; padding: 4px 8px; border-radius: 6px; background: transparent; border: 0; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.bulk-bar-clear:hover { background: rgba(255,255,255,0.1); color: #fff; }
.bulk-bar-actions { display: flex; align-items: center; gap: 8px; }
.bulk-bar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.bulk-bar-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.35); }
.bulk-bar-btn.is-danger { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.4); color: #FCA5A5; }
.bulk-bar-btn.is-danger:hover { background: rgba(239,68,68,0.3); color: #FFE4E6; }

/* --- Bulk row checkbox --- */
.bulk-checkbox { width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--surface-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.12s ease; color: transparent; }
.bulk-checkbox:hover { border-color: var(--brand-primary); }
.bulk-checkbox.is-checked { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.bulk-checkbox.is-checked svg { color: var(--brand-dark); }
.bulk-checkbox svg { width: 11px; height: 11px; }
.table-row.is-bulk-selected { background: var(--brand-primary-soft); }
.table-row.is-bulk-selected:hover { background: var(--brand-primary-soft); }

/* --- Row 3-dot dropdown menu --- */
.row-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.row-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: 4px; display: none; z-index: 60; }
.row-menu.open { display: block; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text-primary); background: transparent; border: 0; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.12s ease, color 0.12s ease; }
.menu-item:hover { background: var(--surface-secondary); }
.menu-item svg { width: 14px; height: 14px; color: var(--text-tertiary); flex-shrink: 0; }
.menu-item:hover svg { color: var(--text-secondary); }
.menu-item.is-danger { color: var(--status-danger); }
.menu-item.is-danger svg { color: var(--status-danger); }
.menu-item.is-danger:hover { background: rgba(239,68,68,0.08); }
.menu-section { padding: 8px 10px 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.menu-divider { height: 1px; background: var(--border-default); margin: 4px 2px; }

/* --- Modal extensions used by Customers/Businesses prototypes --- */
.modal-eyebrow.is-warning { color: #B45309; }
.modal-eyebrow.is-danger { color: var(--status-danger); }
.modal-danger-box { background: rgba(239,68,68,0.08); border-left: 3px solid var(--status-danger); padding: 12px 14px; border-radius: var(--radius-md); font-size: 12.5px; color: var(--status-danger); line-height: 1.55; margin-bottom: 18px; }
.modal-danger-box strong { color: var(--status-danger); }
[data-theme="dark"] .modal-danger-box { color: #FCA5A5; }
[data-theme="dark"] .modal-danger-box strong { color: #FECACA; }
.modal-form-row.is-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
[data-theme="dark"] .modal-warning-box { color: #FBBF24; }
[data-theme="dark"] .modal-warning-box strong { color: #FDE68A; }

/* --- Sticky form footer (Add flows) --- */
.form-footer { position: sticky; bottom: 0; left: 0; right: 0; background: var(--surface-primary); border-top: 1px solid var(--border-default); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 50; margin-top: 24px; }
.form-footer-meta { font-size: 12px; color: var(--text-tertiary); flex: 1; min-width: 0; }
.form-footer-meta strong { color: var(--text-primary); }
.form-footer-actions { display: flex; gap: 8px; align-items: center; }

/* --- Form sections / cards used by Add flows --- */
.form-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 18px; }
.form-card-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 4px; }
.form-card-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 16px; }
.form-section { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 16px; }
.form-section-header { margin-bottom: 14px; }
.form-section-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16.5px; color: var(--text-primary); letter-spacing: -0.005em; margin-bottom: 4px; }
.form-section-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-row.cols-1 { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.form-label .required, .form-label .req { color: var(--status-danger); margin-left: 2px; font-weight: 600; }
.form-help { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; margin-top: 4px; }
.form-error { font-size: 11.5px; color: var(--status-danger); display: none; margin-top: 4px; }
.form-error.is-visible { display: block; }
.form-input.has-error, .form-select.has-error { border-color: var(--status-danger); box-shadow: var(--shadow-focus-danger); }
.form-input { height: 36px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-size: 13.5px; font-family: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease; width: 100%; }
.form-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.form-select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 34px 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-size: 13.5px; font-family: inherit; cursor: pointer; width: 100%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 3.5L5 6.5L8 3.5' stroke='%2394A3B8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.form-select:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
textarea.form-input { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; line-height: 1.5; }

/* --- Toggle switch (button variant used by Add forms) --- */
.toggle-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 0; gap: 18px; border-top: 1px solid var(--border-default); }
.toggle-row:first-child { border-top: 0; padding-top: 0; }
.toggle-info { flex: 1; min-width: 0; }
.toggle-name, .toggle-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.toggle-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.toggle-switch { position: relative; width: 36px; height: 20px; background: var(--border-strong); border-radius: 10px; cursor: pointer; transition: background 0.15s ease; flex-shrink: 0; padding: 0; border: 0; }
.toggle-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.toggle-switch.on { background: var(--brand-primary); }
.toggle-switch.on::after { transform: translateX(16px); }

/* --- Customer hero / business hero (alias to entity-hero with role classes) --- */
/* Existing .entity-hero already covers most of this; add role-specific avatar tones */
.entity-hero .entity-hero-avatar.is-customer { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); }
.entity-hero .entity-hero-avatar.is-business { background: var(--brand-dark); color: var(--brand-primary); }

/* --- Page back link (used on Add flows) --- */
/* Existing .page-back is already defined */

/* --- Add-Customer post-save modal extras --- */
.modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); margin: 0 auto 14px; }
.modal-customer-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin: 16px 0 18px; }
.modal-customer-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.modal-customer-info { flex: 1; min-width: 0; }
.modal-customer-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.modal-customer-email { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.modal-helper { font-size: 11.5px; color: var(--text-tertiary); text-align: center; margin-top: 12px; }

/* --- Page header eyebrow alias used by some prototype copy --- */
.page-greeting { font-size: 13.5px; color: var(--text-secondary); margin-top: 6px; line-height: 1.55; max-width: 720px; }

/* --- Connected Accounts pill variants used by Business detail (Phase 3 stubs but
       the pills also appear inline in some other surfaces) --- */
.invite-status.is-connected, .status-pill.is-connected { background: var(--status-success-soft); color: var(--status-success); }
.invite-status.is-expiring, .status-pill.is-expiring { background: var(--status-warning-soft); color: var(--status-warning); }

/* --- Typeahead (Add-Business customer picker) --- */
.typeahead-wrap { position: relative; }
/* The .fade-up cards each get `transform`, which makes every .form-section its own
   stacking context. That traps the typeahead dropdown (z-index:70) inside the Customer
   card, so the next card (Business details) paints over it in DOM order. Lift the card
   that currently has an open dropdown above its siblings while it's open. */
.form-section:has(.typeahead-dropdown.open) { position: relative; z-index: 5; }
.typeahead-wrap.has-selection .typeahead-input,
.typeahead-wrap.has-selection .typeahead-icon,
.typeahead-wrap.has-selection .typeahead-dropdown { display: none; }
.typeahead-input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-size: 13.5px; font-family: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.typeahead-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.typeahead-icon { position: absolute; left: 14px; top: 13px; color: var(--text-tertiary); pointer-events: none; }
.typeahead-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: 6px; display: none; z-index: 70; max-height: 320px; overflow-y: auto; }
.typeahead-dropdown.open { display: block; }
.typeahead-section-label { padding: 8px 10px 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.typeahead-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background 0.1s ease; }
.typeahead-option:hover { background: var(--surface-secondary); }
.typeahead-option-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.typeahead-option-info { flex: 1; min-width: 0; }
.typeahead-option-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.typeahead-option-meta { font-size: 11.5px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.typeahead-option-meta .biz-count { font-family: 'JetBrains Mono', monospace; padding: 0 6px; background: var(--surface-tertiary); border-radius: 8px; color: var(--text-secondary); }
.typeahead-empty { padding: 12px; font-size: 12.5px; color: var(--text-tertiary); text-align: center; }
.typeahead-create { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 4px; border-top: 1px solid var(--border-default); cursor: pointer; color: var(--brand-primary-strong); font-weight: 600; font-size: 13px; }
.typeahead-create:hover { background: var(--brand-primary-soft); }
.typeahead-create-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary-soft); display: inline-flex; align-items: center; justify-content: center; }

/* --- Customer chip (after typeahead select) --- */
.customer-chip { display: none; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-top: 8px; }
.customer-chip.visible { display: flex; }
.customer-chip-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.customer-chip-info { flex: 1; min-width: 0; }
.customer-chip-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.customer-chip-meta { font-size: 11.5px; color: var(--text-tertiary); }
.customer-chip-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--surface-tertiary); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.customer-chip-tag.is-new { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.customer-chip-clear { width: 28px; height: 28px; border-radius: 6px; color: var(--text-tertiary); background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s ease, color 0.12s ease; }
.customer-chip-clear:hover { background: var(--surface-tertiary); color: var(--text-primary); }

/* --- Add-Business invite-section helper --- */
.invite-section { display: none; padding-top: 12px; }
.invite-section.visible { display: block; }
.invite-helper { display: flex; gap: 10px; padding: 12px 14px; background: var(--brand-primary-soft); border-left: 3px solid var(--brand-primary); border-radius: var(--radius-md); margin-bottom: 10px; }
.invite-helper-icon { color: var(--brand-primary-strong); flex-shrink: 0; margin-top: 2px; }
.invite-helper-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.invite-helper-text strong { color: var(--text-primary); }

/* --- Notes section --- */
.notes-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.notes-helper { font-size: 11.5px; color: var(--text-tertiary); }
.notes-empty { text-align: center; padding: 20px 16px; color: var(--text-tertiary); }
.notes-empty svg { color: var(--text-tertiary); }

/* --- Portal-status icon variants --- */
.portal-status-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-status-icon.is-accepted { background: var(--status-success-soft); color: var(--status-success); }
.portal-status-icon.is-sent { background: var(--status-info-soft); color: var(--status-info); }
.portal-status-icon.is-not-invited { background: var(--surface-tertiary); color: var(--text-tertiary); }
.portal-status-info { flex: 1; min-width: 0; }
.portal-status-headline { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.portal-status-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.portal-status-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* --- Portal history rows --- */
.portal-history-list { padding: 8px 16px 16px; }
.portal-history-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-default); }
.portal-history-row:last-child { border-bottom: 0; }
.portal-history-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-history-icon.is-info { background: var(--status-info-soft); color: var(--status-info); }
.portal-history-icon.is-success { background: var(--status-success-soft); color: var(--status-success); }
.portal-history-info { flex: 1; min-width: 0; }
.portal-history-action { font-size: 13px; color: var(--text-primary); }
.portal-history-meta { font-size: 11.5px; color: var(--text-tertiary); }
.portal-history-time { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }

/* --- Activity timeline --- */
.timeline { padding: 4px 16px 16px; }
.timeline-item { display: flex; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-default); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-tertiary); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-icon.is-info { background: var(--status-info-soft); color: var(--status-info); }
.timeline-icon.is-success { background: var(--status-success-soft); color: var(--status-success); }
.timeline-icon.is-warning { background: var(--status-warning-soft); color: var(--status-warning); }
.timeline-content { flex: 1; min-width: 0; }
.timeline-action { font-size: 13px; color: var(--text-primary); }
.timeline-action strong { font-weight: 600; }
.timeline-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }


/* ============================================================================
   CSV Import Wizard V2 — ported from the FileUpload design export, scoped under
   .csvv2. Token-only; project tokens.css matches the export 1:1. Shell fills the
   portal content area (no dark backdrop) so left nav + top bar stay visible.
   ============================================================================ */
/* Per design spec (README §Layout shell): the dim scrim is absolutely positioned INSIDE
   .portal-main so it covers only the content region — the left nav + top bar stay visible and
   interactive. NOT a full-viewport modal. .portal-main is position:relative (above) so this
   resolves to the content area. The export's 1200×780 card cap is kept. */
.csvv2-stage { position: absolute; inset: 0; z-index: 40; background: color-mix(in srgb, var(--brand-dark) 20%, transparent); display: flex; align-items: center; justify-content: center; padding: 24px; }
.csvv2 { display: flex; flex-direction: column; min-height: 0; width: min(1200px, 100%); height: min(780px, 100%); }
.csvv2 .mono { font-family: 'JetBrains Mono', monospace; }
.csvv2 .csv-fs { position: relative; flex: 1; min-height: 0; height: 100%; background: var(--surface-primary); display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-elevated); overflow: hidden; }
.csvv2 .csv-fs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 24px; border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
/* The title block may shrink/ellipsize so the stepper + close button always fit. */
.csvv2 .csv-fs-head > div:first-child { min-width: 0; flex-shrink: 1; overflow: hidden; }
.csvv2 .csv-fs-head-sub { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csvv2 .csv-fs-head-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; letter-spacing: -.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Stepper shrinks before the close button does; never pushes content off-screen. */
.csvv2 .csv-steps { display: flex; align-items: center; gap: 0; margin-left: auto; min-width: 0; flex-shrink: 1; overflow: hidden; }
.csvv2 .csv-step { display: flex; align-items: center; gap: 8px; min-width: 0; }
.csvv2 .csv-step-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; border: 1.5px solid var(--border-strong); color: var(--text-tertiary); background: var(--surface-primary); flex-shrink: 0; transition: all .2s ease; }
.csvv2 .csv-step-label { font-size: 12.5px; font-weight: 500; color: var(--text-tertiary); white-space: nowrap; transition: color .2s ease; }
.csvv2 .csv-step.active .csv-step-num { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--brand-dark); box-shadow: var(--shadow-focus); }
.csvv2 .csv-step.active .csv-step-label { color: var(--text-primary); font-weight: 600; }
.csvv2 .csv-step.done .csv-step-num { border-color: var(--status-success); background: var(--status-success); color: #fff; }
.csvv2 .csv-step.done .csv-step-label { color: var(--text-secondary); }
.csvv2 .csv-step-bar { width: 30px; min-width: 12px; height: 2px; border-radius: 2px; background: var(--border-default); margin: 0 10px; flex-shrink: 1; transition: background .25s ease; }
.csvv2 .csv-step-bar.done { background: var(--status-success); }
.csvv2 .icon-btn { width: 30px; height: 30px; border-radius: var(--radius-md); background: transparent; border: 0; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; transition: background .12s ease; cursor: pointer; }
.csvv2 .icon-btn:hover:not(:disabled) { background: var(--surface-secondary); color: var(--text-primary); }
.csvv2 .icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.csvv2 .csv-fs-body { flex: 1; display: grid; grid-template-columns: minmax(296px, 340px) 1fr; min-height: 0; }
.csvv2 .csv-fs-rail { border-right: 1px solid var(--border-default); overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 15px; background: var(--surface-primary); }
/* Empty state (Map columns, no file yet): center the rail content vertically so the
   account picker + drop zone sit mid-panel rather than top-aligned. */
.csvv2 .csv-fs-rail.rail-centered { justify-content: center; }
.csvv2 .csv-fs-section-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); margin-bottom: 9px; }
.csvv2 .rail-block { display: flex; flex-direction: column; }
.csvv2 .field-select { height: 36px; padding: 0 34px 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background-color: var(--surface-primary); color: var(--text-primary); font-size: 13.5px; font-family: inherit; width: 100%; transition: border-color .12s ease, box-shadow .12s ease; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 3.5L5 6.5L8 3.5' stroke='%2394A3B8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.csvv2 .field-select:hover:not(:disabled) { border-color: var(--border-strong); }
.csvv2 .field-select:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.csvv2 .file-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); }
.csvv2 .file-ico { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.csvv2 .file-name { font-size: 12.5px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csvv2 .file-meta { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.csvv2 .file-x { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.csvv2 .file-x:hover { background: var(--status-danger-soft); color: var(--status-danger); }
.csvv2 .map-grid { display: flex; flex-direction: column; gap: 11px; }
.csvv2 .map-row { display: flex; flex-direction: column; gap: 5px; }
.csvv2 .map-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.csvv2 .toggle-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; padding: 9px 12px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-bottom: 0; }
.csvv2 .toggle-row input { accent-color: var(--brand-primary); width: 15px; height: 15px; }
.csvv2 .reverse-help { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.45; margin-top: 6px; }
.csvv2 .map-summary { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.csvv2 .map-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: 12.5px; }
.csvv2 .map-summary-row + .map-summary-row { border-top: 1px solid var(--border-default); }
.csvv2 .map-summary-row .k { color: var(--text-tertiary); }
.csvv2 .map-summary-row .v { color: var(--text-primary); font-weight: 500; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.csvv2 .confirmed-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--status-success); font-weight: 500; }
.csvv2 .add-zone { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all .15s ease; }
.csvv2 .add-zone:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.csvv2 .csv-fs-preview { overflow-y: auto; background: var(--surface-secondary); display: flex; flex-direction: column; min-width: 0; position: relative; }
.csvv2 .csv-fs-preview-head { position: sticky; top: 0; z-index: 1; padding: 15px 24px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.csvv2 .csv-fs-preview-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.csvv2 .csv-fs-preview-meta { font-size: 12px; color: var(--text-secondary); }
.csvv2 .csv-fs-preview-body { flex: 1; padding: 20px 24px 24px; }
.csvv2 .csv-fs-preview-body.fill { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.csvv2 .kpi-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.csvv2 .kpi-strip.kpi-4 { grid-template-columns: repeat(4, 1fr); }
.csvv2 .kpi { position: relative; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.csvv2 .kpi-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--border-strong); }
.csvv2 .kpi.is-success .kpi-accent { background: var(--status-success); }
.csvv2 .kpi.is-primary .kpi-accent { background: var(--brand-primary); }
.csvv2 .kpi.is-neutral .kpi-accent { background: var(--text-tertiary); }
.csvv2 .kpi.is-warning .kpi-accent { background: var(--status-warning); }
.csvv2 .kpi.is-info .kpi-accent { background: var(--status-info); }
.csvv2 .kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 7px; }
.csvv2 .kpi-value { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.csvv2 .kpi.is-warning .kpi-value { color: #B45309; }
.csvv2 .kpi-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 6px; }
.csvv2 .data-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-primary); box-shadow: var(--shadow-card); }
.csvv2 .data-card-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-weight: 600; font-size: 12.5px; }
.csvv2 .import-preview-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.csvv2 .import-preview-table th { padding: 8px 14px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); font-weight: 700; font-family: 'JetBrains Mono', monospace; border-bottom: 1px solid var(--border-default); background: var(--surface-primary); }
.csvv2 .import-preview-table td { padding: 9px 14px; border-bottom: 1px solid var(--border-default); }
.csvv2 .import-preview-table tbody tr:last-child td { border-bottom: 0; }
.csvv2 .import-preview-table tbody tr { transition: background .1s ease; }
.csvv2 .import-preview-table tbody tr:hover { background: var(--surface-secondary); }
.csvv2 .td-amt { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.csvv2 .td-amt.pos { color: var(--status-success); }
.csvv2 .td-amt.neg { color: var(--text-primary); }
.csvv2 .table-foot { padding: 9px 14px; font-size: 11.5px; color: var(--text-tertiary); border-top: 1px solid var(--border-default); background: var(--surface-secondary); }
.csvv2 .txn-card { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); box-shadow: var(--shadow-card); overflow: hidden; }
.csvv2 .txn-card-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-weight: 600; font-size: 12.5px; flex-shrink: 0; }
.csvv2 .txn-card-head .mono { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.csvv2 .txn-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.csvv2 .import-preview-table.txn-table { table-layout: fixed; width: 100%; font-size: 12px; }
.csvv2 .import-preview-table.txn-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-secondary); vertical-align: bottom; padding: 9px 12px 11px; }
.csvv2 .import-preview-table.txn-table td { padding-left: 12px; padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csvv2 .map-th { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.csvv2 .map-th-field { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.csvv2 .map-th.amt .map-th-field { text-align: right; }
.csvv2 .map-th-select { min-width: 0; width: 100%; height: 29px; padding: 0 18px 0 7px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background-color: var(--surface-primary); color: var(--text-primary); font-family: 'Work Sans', sans-serif; font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 3.5L5 6.5L8 3.5' stroke='%2394A3B8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 5px center; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.csvv2 .map-th-select:hover { border-color: var(--border-strong); }
.csvv2 .map-th-select:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.csvv2 .csv-fs-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--border-default); flex-shrink: 0; background: var(--surface-primary); }
.csvv2 .foot-status { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.csvv2 .foot-status .mono { color: var(--text-primary); font-weight: 600; font-size: 12px; }
.csvv2 .drawer-foot-right { display: flex; gap: 10px; }
.csvv2 .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; transition: all .12s ease; white-space: nowrap; border: 1px solid transparent; cursor: pointer; }
.csvv2 .btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); }
.csvv2 .btn-secondary:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--text-primary); }
.csvv2 .btn-primary { background: var(--brand-primary); color: var(--brand-dark); border: 1px solid var(--brand-primary); font-weight: 600; }
.csvv2 .btn-primary:hover:not(:disabled) { background: var(--brand-primary-strong); color: #fff; }
.csvv2 .btn:disabled, .csvv2 .btn[disabled] { opacity: .5; cursor: not-allowed; }
.csvv2 .btn.btn-xs { padding: 4px 10px; font-size: 11.5px; border-radius: var(--radius-sm); gap: 4px; }
.csvv2 .csv-fs-overlay { position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--surface-primary) 78%, transparent); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.csvv2 .csv-fs-overlay-card { width: min(460px, 100%); background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); padding: 28px 30px; text-align: center; }
.csvv2 .proc-ring { width: 40px; height: 40px; margin: 0 auto 16px; border: 3px solid var(--brand-primary-soft); border-top-color: var(--brand-primary); border-radius: 50%; animation: csvv2-spin .8s linear infinite; }
.csvv2 .csv-fs-overlay-title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; color: var(--text-primary); margin-bottom: 5px; letter-spacing: -.01em; }
.csvv2 .csv-fs-overlay-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 18px; }
.csvv2 .csv-progress-track { width: 100%; height: 8px; border-radius: 999px; background: var(--surface-secondary); overflow: hidden; }
.csvv2 .csv-progress-fill { height: 100%; border-radius: 999px; background: var(--brand-primary); width: 0%; transition: width .6s ease; }
.csvv2 .csv-progress-steps { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; text-align: left; }
.csvv2 .csv-progress-step { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-tertiary); transition: color .2s ease; }
.csvv2 .csv-progress-step .lbl { flex: 1; }
.csvv2 .csv-progress-step .cnt { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); }
.csvv2 .csv-progress-step.active { color: var(--text-primary); font-weight: 500; }
.csvv2 .csv-progress-step.active .cnt { color: var(--text-secondary); }
.csvv2 .csv-progress-step.done { color: var(--status-success); }
.csvv2 .csv-progress-step.done .cnt { color: var(--status-success); }
.csvv2 .proc-dot { width: 16px; height: 16px; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.csvv2 .proc-dot .ring { display: block; width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid currentColor; opacity: .4; }
.csvv2 .csv-progress-step.active .proc-dot { animation: csvv2-spin .8s linear infinite; }
.csvv2 .csv-progress-step.active .proc-dot .ring { border-color: var(--brand-primary); border-top-color: transparent; opacity: 1; }
.csvv2 .csv-progress-step .check { display: none; }
.csvv2 .csv-progress-step.done .proc-dot .ring { display: none; }
.csvv2 .csv-progress-step.done .check { display: block; color: var(--status-success); }
.csvv2 .proc-count { margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); letter-spacing: .03em; }
.csvv2 .success-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 40px 32px; text-align: center; }
.csvv2 .success-badge { width: 76px; height: 76px; border-radius: 50%; background: var(--status-success-soft); display: flex; align-items: center; justify-content: center; color: var(--status-success); margin-bottom: 20px; animation: csvv2-pop .45s ease both; }
.csvv2 .success-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: 8px; }
.csvv2 .success-sub { font-size: 14px; color: var(--text-secondary); max-width: 440px; line-height: 1.55; margin-bottom: 24px; }
.csvv2 .success-stats { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 12px; width: min(560px, 100%); margin-bottom: 22px; }
.csvv2 .success-info { width: min(560px, 100%); }
.csvv2 .info-box { background: var(--status-info-soft); border-left: 3px solid var(--status-info); border-radius: var(--radius-md); padding: 11px 14px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.csvv2 .info-box.warn { background: var(--status-warning-soft); border-left-color: var(--status-warning); }
.csvv2 .info-box.ok { background: var(--status-success-soft); border-left-color: var(--status-success); }
.csvv2 .review-tabs { display: flex; gap: 7px; margin: 2px 0 14px; flex-wrap: wrap; }
.csvv2 .rv-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-primary); color: var(--text-secondary); font-size: 12.5px; font-weight: 500; font-family: inherit; transition: all .12s ease; cursor: pointer; }
.csvv2 .rv-tab:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.csvv2 .rv-tab.is-active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.csvv2 .rv-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--surface-tertiary); color: var(--text-secondary); }
.csvv2 .rv-tab.is-active .rv-count { background: rgba(255,255,255,.22); color: #fff; }
.csvv2 .review-table { table-layout: fixed; }
.csvv2 .review-table td { vertical-align: middle; }
.csvv2 .review-table tr.rv-row-error { background: var(--status-warning-soft); }
.csvv2 .review-table tr.rv-row-dupe td { color: var(--text-tertiary); }
.csvv2 .review-table tr.rv-row-skip { opacity: .55; }
.csvv2 .rv-bad { color: var(--status-danger); font-weight: 600; }
.csvv2 .rv-reason { font-size: 11px; color: #B45309; margin-top: 3px; line-height: 1.35; }
.csvv2 .rv-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.csvv2 .rv-pill.ready { background: var(--status-success-soft); color: var(--status-success); }
.csvv2 .rv-pill.error { background: var(--status-danger-soft); color: var(--status-danger); }
.csvv2 .rv-pill.dupe { background: var(--status-info-soft); color: var(--status-info); }
.csvv2 .rv-pill.skip { background: var(--surface-tertiary); color: var(--text-tertiary); }
.csvv2 .rv-actions { display: flex; gap: 6px; justify-content: flex-end; }
.csvv2 .rv-done { font-size: 11.5px; color: var(--status-success); font-weight: 600; white-space: nowrap; }
.csvv2 .rv-willremove { font-size: 11px; color: var(--text-tertiary); font-style: italic; white-space: nowrap; }
.csvv2 .rv-empty { padding: 34px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.csvv2 .rv-empty strong { color: var(--status-success); font-weight: 600; }
/* Upload empty-state (screen: 'upload') — dropzone + supported-formats rail. From design styles.css. */
.csvv2 .wizard-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.csvv2 .wizard-badge.ok { background: var(--status-success-soft); color: var(--status-success); }
.csvv2 .wizard-badge.neutral { background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); }
.csvv2 .dropzone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-primary); padding: 48px 32px; transition: all .15s ease; cursor: pointer; min-height: 300px; }
.csvv2 .dropzone.is-drag { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.csvv2 .dropzone-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: flex; align-items: center; justify-content: center; }
.csvv2 .dropzone-title { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; }
.csvv2 .dropzone-sub { font-size: 13px; color: var(--text-secondary); max-width: 340px; line-height: 1.5; }
.csvv2 .dropzone-formats { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.csvv2 .fmt-chip { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: 999px; padding: 3px 9px; }
.csvv2 .bank-list { display: flex; flex-direction: column; gap: 7px; }
.csvv2 .bank-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.csvv2 .bank-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); flex-shrink: 0; }
[data-theme="dark"] .csvv2 .kpi.is-warning .kpi-value { color: var(--status-warning); }
[data-theme="dark"] .csvv2 .rv-reason { color: var(--status-warning); }
[data-theme="dark"] .csvv2 .rv-tab.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
[data-theme="dark"] .csvv2 .rv-tab.is-active .rv-count { background: rgba(0,0,0,.2); color: var(--brand-dark); }
@keyframes csvv2-spin { to { transform: rotate(360deg); } }
@keyframes csvv2-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
/* 4-node stepper needs more room than the export's 3 — drop labels earlier so the header
   (title + stepper + close) always fits without clipping. */
@media (max-width: 1200px) {
    .csvv2 .csv-step-label { display: none; }
    .csvv2 .csv-step-bar { width: 20px; margin: 0 8px; }
}
@media (max-width: 860px) {
    .csvv2 .csv-fs-body { grid-template-columns: 1fr; }
    .csvv2 .csv-fs-rail { border-right: 0; border-bottom: 1px solid var(--border-default); }
    .csvv2 .csv-step-bar { width: 14px; margin: 0 6px; }
    .csvv2 .kpi-strip.kpi-4 { grid-template-columns: 1fr 1fr; }
    .csvv2 .success-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   Submit-for-review (BkTransactions bulk action) — dropdown menu + summary modal.
   Token-only; reuses the modal-backdrop / modal shell already in portal.css.
   ============================================================================ */
.submit-menu { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 30; min-width: 200px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: 5px; display: flex; flex-direction: column; gap: 2px; }
.submit-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: background .12s ease; }
.submit-menu-item:hover { background: var(--surface-secondary); }
.submit-menu-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.submit-menu-sub { font-size: 11px; color: var(--text-tertiary); }

.submit-summary { display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; margin: 4px 0 14px; }
.submit-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: 13px; }
.submit-summary-row + .submit-summary-row { border-top: 1px solid var(--border-default); }
.submit-summary-k { color: var(--text-secondary); }
.submit-summary-v { color: var(--text-primary); font-weight: 600; }
.submit-summary-v.mono { font-family: 'JetBrains Mono', monospace; }
.submit-summary-row.is-warn { background: var(--status-warning-soft); }
.submit-summary-row.is-warn .submit-summary-k,
.submit-summary-row.is-warn .submit-summary-v { color: #B45309; }
[data-theme="dark"] .submit-summary-row.is-warn .submit-summary-k,
[data-theme="dark"] .submit-summary-row.is-warn .submit-summary-v { color: var(--status-warning); }

.submit-warn-box { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--radius-md); background: var(--status-warning-soft); border-left: 3px solid var(--status-warning); font-size: 12.5px; line-height: 1.45; color: #B45309; }
[data-theme="dark"] .submit-warn-box { color: var(--status-warning); }
.submit-warn-box svg { flex-shrink: 0; margin-top: 1px; }


/* ═════════════════════════════════════════════════════════
   Role editor / permission picker (Team → Roles)
   Structure from the UserRoleManagement prototype; proportions
   from the approved design render (UserRoleManagement.png) —
   tokens only, so light/dark themes work unchanged.
   ═════════════════════════════════════════════════════════ */
.role-editor-split { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.role-editor-rail { position: sticky; top: 18px; }
.config-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feat-group { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-primary); }
.feat-group + .feat-group { margin-top: 12px; }
.feat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; }
.feat-head:hover { background: var(--surface-secondary); }
.feat-caret { flex: none; color: var(--text-tertiary); transition: transform 0.12s ease; }
.feat-group.is-collapsed .feat-caret { transform: rotate(-90deg); }
.feat-body { border-top: 1px solid var(--border-default); padding: 12px 16px 16px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.perm-cell { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; }
.perm-cell:hover { background: var(--surface-secondary); }
.chk { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 6px; cursor: pointer; position: relative; background: var(--surface-primary); flex: none; transition: all 0.12s ease; }
.chk:checked { background: var(--brand-primary); border-color: var(--brand-primary); }
.chk:checked::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid var(--brand-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pill-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-tertiary); color: var(--text-secondary); }
.perm-summary-item + .perm-summary-item { border-top: 1px solid var(--border-default); padding-top: 12px; }
.perm-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.perm-summary-feature { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.perm-summary-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.perm-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 6px; background: var(--surface-tertiary); color: var(--text-secondary); white-space: nowrap; }
.info-box.is-warning { background: var(--status-warning-soft); border-left-color: var(--status-warning); }
@media (max-width: 960px) {
  .role-editor-split { grid-template-columns: 1fr; }
  .role-editor-rail { position: static; }
}
@media (max-width: 720px) {
  .config-two-col { grid-template-columns: 1fr !important; }
  .perm-grid { grid-template-columns: 1fr; }
}

/* Locked-period edit-attempt banner (LockedPeriodErrorBoundary). Shown when a write is
   attempted against a locked period from a stale UI; the period must be reopened to edit. */
.locked-period-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 24px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--status-warning-soft, #fff4e5);
    border-left: 3px solid var(--status-warning, #d98324);
    color: var(--text-primary, #1a1a1a);
    font-size: 13px;
    font-weight: 500;
}
.locked-period-banner-dismiss {
    flex: none;
    background: transparent;
    border: 1px solid var(--border-default, #d9d9d9);
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #555);
    cursor: pointer;
}
.locked-period-banner-dismiss:hover { background: var(--surface-secondary, #f4f4f4); }

/* ==================== client-portal-shared.css ==================== */
/* AUTO-GENERATED from portal.css — shared firm component styles re-scoped under
   .client-portal-page so the customer portal renders identically to the firm portal.
   Excludes firm chrome (top bar/sidebar) and the existing .client-portal-page block.
   Regenerate if portal.css component styles change. */

/* ------------------------------ Main / page header ------------------------------ */
.client-portal-page .portal-main { padding: 0; min-width: 0; }
.portal-main-content { display: flex; flex-direction: column; min-height: 100%; }
.client-portal-page .page-wrap { max-width: 1320px; margin: 0 auto; padding: 24px 28px 80px; }

/* Consistent page-header padding for all BK portal pages (replaces ad-hoc inline styles) */
.client-portal-page .bk-page-header { padding: 24px 24px 0; }
.client-portal-page .bk-page-body { padding: 0 24px 80px; }
/* Reconciliation views: scrollable main with consistent padding */
.client-portal-page .portal-main.bk-scroll { overflow-y: auto; padding: 24px 24px 80px; }

.client-portal-page .page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.client-portal-page .page-header-left { min-width: 0; flex: 1; }
.client-portal-page .page-breadcrumb {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--text-tertiary); letter-spacing: 0.04em; text-transform: uppercase;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 4px;
}
.client-portal-page .page-breadcrumb a { color: var(--text-tertiary); transition: color 0.12s ease; }
.client-portal-page .page-breadcrumb a:hover { color: var(--text-primary); }
.client-portal-page .page-breadcrumb span.sep { color: var(--border-strong); }
.client-portal-page .page-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary); font-weight: 500; margin-bottom: 8px;
}
.client-portal-page .page-title {
    font-family: 'Fraunces', serif; font-weight: 500; font-size: 28px;
    letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1;
}
.client-portal-page .page-subtitle, .client-portal-page .page-greeting {
    font-size: 13.5px; color: var(--text-secondary);
    margin-top: 6px; line-height: 1.5; max-width: 640px;
}
.client-portal-page .page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ------------------------------ Page tabs ------------------------------ */
.client-portal-page .page-tabs {
    display: flex; gap: 2px; border-bottom: 1px solid var(--border-default);
    margin-bottom: 20px; overflow-x: auto; scrollbar-width: none;
}
.client-portal-page .page-tabs::-webkit-scrollbar { display: none; }
.client-portal-page .page-tab {
    position: relative; padding: 10px 14px; font-size: 13.5px; font-weight: 500;
    color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    background: transparent; border: 0; cursor: pointer;
    transition: color 0.12s ease;
}
.client-portal-page .page-tab:hover:not(.is-active) { color: var(--text-primary); }
.client-portal-page .page-tab.is-active { color: var(--text-primary); }
.client-portal-page .page-tab.is-active::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
    height: 2px; background: var(--brand-primary); border-radius: 2px 2px 0 0;
}
.client-portal-page .page-tab-count {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    padding: 1px 7px; border-radius: 9px;
    background: var(--surface-secondary); color: var(--text-tertiary);
    min-width: 20px; text-align: center;
}
.client-portal-page .page-tab.is-active .page-tab-count { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* ------------------------------ Buttons (36px in portal) ------------------------------ */
.client-portal-page .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 14px; border-radius: var(--radius-md);
    font-size: 13px; font-weight: 500; font-family: inherit;
    background: var(--brand-primary); color: var(--brand-dark);
    border: 1px solid var(--brand-primary);
    cursor: pointer; white-space: nowrap; letter-spacing: -0.005em;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
    text-decoration: none;
}
.client-portal-page .btn:hover:not(:disabled) { background: var(--brand-primary-strong); border-color: var(--brand-primary-strong); color: #FFFFFF; }
.client-portal-page .btn:active:not(:disabled) { transform: translateY(1px); }
.client-portal-page .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.client-portal-page .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.client-portal-page .btn svg { width: 14px; height: 14px; }

.client-portal-page .btn-primary { background: var(--brand-primary); color: var(--brand-dark); border-color: var(--brand-primary); font-weight: 600; }
.client-portal-page .btn-primary:hover:not(:disabled) { background: var(--brand-primary-strong); color: #FFFFFF; }
.client-portal-page .btn-secondary { background: var(--surface-primary); color: var(--text-primary); border-color: var(--border-default); }
.client-portal-page .btn-secondary:hover:not(:disabled) { background: var(--surface-secondary); border-color: var(--border-strong); }
.client-portal-page .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid transparent; }
.client-portal-page .btn-ghost:hover:not(:disabled) { background: var(--surface-secondary); color: var(--text-primary); }
.client-portal-page .btn-danger { background: transparent; color: var(--status-danger); border-color: var(--status-danger); }
.client-portal-page .btn-danger:hover:not(:disabled) { background: var(--status-danger-soft); }
.client-portal-page .btn-accent { background: var(--brand-accent); color: #FFFFFF; border-color: var(--brand-accent); font-weight: 600; }
.client-portal-page .btn-accent:hover:not(:disabled) { filter: brightness(0.95); color: #FFFFFF; }
.client-portal-page .btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.client-portal-page .btn-xs { height: 26px; padding: 0 8px; font-size: 11.5px; }
.client-portal-page .btn-lg { height: 42px; padding: 0 18px; font-size: 14px; }

/* ------------------------------ Form fields (portal — smaller) ------------------------------ */
.client-portal-page .field { display: flex; flex-direction: column; gap: 6px; }
.client-portal-page .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.client-portal-page .field-label {
    font-size: 12px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.01em;
}
.client-portal-page .field-label .req { color: var(--status-danger); margin-left: 2px; }
.client-portal-page .field-hint { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; }
.client-portal-page .field-input,
.client-portal-page .field-select,
.client-portal-page .field-textarea {
    height: 36px; padding: 0 12px;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-primary); color: var(--text-primary);
    font-size: 13.5px; font-family: inherit; width: 100%;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.client-portal-page .field-textarea { height: auto; padding: 10px 12px; min-height: 72px; resize: vertical; line-height: 1.5; }
.client-portal-page .field-select {
    appearance: none; -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 3.5L5 6.5L8 3.5' stroke='%2394A3B8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; cursor: pointer;
}
.client-portal-page .field-input:hover:not(:disabled),
.client-portal-page .field-select:hover:not(:disabled),
.client-portal-page .field-textarea:hover:not(:disabled) { border-color: var(--border-strong); }
.client-portal-page .field-input:focus,
.client-portal-page .field-select:focus,
.client-portal-page .field-textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.client-portal-page .field-input::placeholder, .client-portal-page .field-textarea::placeholder { color: var(--text-tertiary); }
.client-portal-page .field-input:disabled { background: var(--surface-secondary); color: var(--text-tertiary); cursor: not-allowed; }

/* ------------------------------ Checkbox / switch ------------------------------ */
.client-portal-page .checkbox {
    width: 16px; height: 16px;
    border: 1.5px solid var(--border-strong); border-radius: 4px;
    background: var(--surface-primary);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: all 0.12s ease;
}
.client-portal-page .checkbox:hover { border-color: var(--brand-primary); }
.client-portal-page .checkbox.is-checked { background: var(--brand-primary); border-color: var(--brand-primary); }
.client-portal-page .checkbox.is-checked::after {
    content: ""; width: 8px; height: 5px;
    border-left: 1.8px solid var(--brand-dark); border-bottom: 1.8px solid var(--brand-dark);
    transform: rotate(-45deg) translate(1px, -1px);
}
.client-portal-page .checkbox.is-indeterminate { background: var(--brand-primary); border-color: var(--brand-primary); }
.client-portal-page .checkbox.is-indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--brand-dark); border-radius: 1px; }

.client-portal-page .switch {
    position: relative; width: 34px; height: 20px;
    background: var(--border-strong); border-radius: 10px;
    cursor: pointer; flex-shrink: 0; border: 0; padding: 0;
    transition: background 0.15s ease;
}
.client-portal-page .switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: #FFFFFF; border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.client-portal-page .switch.is-on { background: var(--brand-primary); }
.client-portal-page .switch.is-on::after { transform: translateX(14px); }

/* ------------------------------ Toolbar (search + chips) ------------------------------ */
.client-portal-page .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.client-portal-page .toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.client-portal-page .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.client-portal-page .search-input {
    position: relative;
    padding: 0 12px 0 34px; height: 36px; min-width: 260px;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-primary); color: var(--text-primary);
    font-size: 13px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><circle cx='6' cy='6' r='4.5' stroke='%2394A3B8' stroke-width='1.3'/><path d='M9.5 9.5L12 12' stroke='%2394A3B8' stroke-width='1.3' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: left 12px center;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.client-portal-page .search-input:hover { border-color: var(--border-strong); }
.client-portal-page .search-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.client-portal-page .search-input::placeholder { color: var(--text-tertiary); }

.client-portal-page .filter-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px;
    padding: 0 11px;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-primary); color: var(--text-secondary);
    font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: all 0.12s ease;
}
.client-portal-page .filter-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.client-portal-page .filter-chip.is-active { background: var(--brand-dark); border-color: var(--brand-dark); color: #FFFFFF; }
.client-portal-page .filter-chip .chip-count {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    padding: 1px 6px; border-radius: 9px;
    background: var(--surface-secondary); color: var(--text-tertiary);
}
.client-portal-page .filter-chip.is-active .chip-count { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.client-portal-page .filter-chip svg { width: 12px; height: 12px; }

/* ------------------------------ Data table ------------------------------ */
.client-portal-page .data-panel {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-card);
}
.client-portal-page .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.client-portal-page .data-table thead th {
    background: var(--surface-secondary);
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary);
    padding: 10px 14px; text-align: left;
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap; user-select: none;
}
.client-portal-page .data-table thead th.sortable { cursor: pointer; transition: color 0.12s ease; }
.client-portal-page .data-table thead th.sortable:hover { color: var(--text-primary); }
.client-portal-page .data-table tbody tr { border-bottom: 1px solid var(--border-default); transition: background 0.08s ease; }
.client-portal-page .data-table tbody tr:last-child { border-bottom: 0; }
.client-portal-page .data-table tbody tr:hover { background: var(--surface-secondary); }
.client-portal-page .data-table tbody tr.is-selected { background: var(--brand-primary-soft); }
.client-portal-page .data-table tbody td { padding: 11px 14px; vertical-align: middle; color: var(--text-primary); }
.client-portal-page .data-table .td-check { width: 40px; padding-right: 0; }
.client-portal-page .data-table .td-mono { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.client-portal-page .data-table .td-money { font-family: 'JetBrains Mono', monospace; text-align: right; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.client-portal-page .data-table .td-actions { width: 48px; text-align: right; padding-right: 10px; }
.client-portal-page .data-table .cell-primary { font-weight: 500; color: var(--text-primary); }
.client-portal-page .data-table .cell-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

.client-portal-page .row-action-btn {
    width: 28px; height: 28px; border-radius: 6px;
    color: var(--text-tertiary);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.client-portal-page .row-action-btn:hover { background: var(--surface-secondary); color: var(--text-primary); }
.client-portal-page .row-action-btn svg { width: 16px; height: 16px; }

.client-portal-page .table-empty { padding: 60px 24px; text-align: center; color: var(--text-secondary); }
.client-portal-page .table-empty-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--surface-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px; color: var(--text-tertiary);
}
.client-portal-page .table-empty-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; color: var(--text-primary); margin-bottom: 6px; }
.client-portal-page .table-empty-sub { font-size: 13px; color: var(--text-secondary); max-width: 360px; margin: 0 auto 16px; line-height: 1.5; }

/* ------------------------------ Pills / badges ------------------------------ */
.client-portal-page .pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; font-size: 11px; font-weight: 500; border-radius: 10px;
    border: 1px solid var(--border-default);
    background: var(--surface-secondary); color: var(--text-secondary);
    white-space: nowrap; line-height: 1.5;
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em;
}
.client-portal-page .pill-success { background: var(--status-success-soft); border-color: transparent; color: var(--status-success); }
.client-portal-page .pill-warning { background: var(--status-warning-soft); border-color: transparent; color: #B45309; }
.client-portal-page .pill-danger { background: var(--status-danger-soft); border-color: transparent; color: var(--status-danger); }
.client-portal-page .pill-info { background: var(--status-info-soft); border-color: transparent; color: var(--status-info); }
.client-portal-page .pill-accent { background: var(--brand-accent-soft); border-color: transparent; color: var(--brand-accent); }
.client-portal-page .pill-brand { background: var(--brand-primary-soft); border-color: transparent; color: var(--brand-primary-strong); }
.client-portal-page .pill-neutral { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-secondary); }
.client-portal-page .pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.client-portal-page .pill-dot.success { background: var(--status-success); }
.client-portal-page .pill-dot.warning { background: var(--status-warning); }
.client-portal-page .pill-dot.danger { background: var(--status-danger); }
.client-portal-page .pill-dot.info { background: var(--status-info); }
.client-portal-page .pill-dot.accent { background: var(--brand-accent); }
.client-portal-page .pill-dot.brand { background: var(--brand-primary); }
.client-portal-page .pill-dot.muted { background: var(--text-tertiary); }
[data-theme="dark"] .client-portal-page .pill-warning { color: #FBBF24; }

/* ------------------------------ KPI strip ------------------------------ */
.client-portal-page .kpi-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
.client-portal-page .kpi {
    position: relative;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 16px 18px 16px 22px;
    box-shadow: var(--shadow-card);
}
.client-portal-page .kpi-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--border-strong); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.client-portal-page .kpi.is-primary .kpi-accent { background: var(--brand-primary); }
.client-portal-page .kpi.is-success .kpi-accent { background: var(--status-success); }
.client-portal-page .kpi.is-warning .kpi-accent { background: var(--status-warning); }
.client-portal-page .kpi.is-danger .kpi-accent { background: var(--status-danger); }
.client-portal-page .kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 6px; }
.client-portal-page .kpi-value { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.client-portal-page .kpi.is-warning .kpi-value { color: #B45309; }
.client-portal-page .kpi.is-danger .kpi-value { color: var(--status-danger); }
.client-portal-page .kpi-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; }

/* ------------------------------ Drawer (right slide) ------------------------------ */
.client-portal-page .drawer-root { position: fixed; inset: 0; z-index: 200; display: none; }
.client-portal-page .drawer-root.is-open { display: block; }
.client-portal-page .drawer-root .drawer-backdrop { position: absolute; inset: 0; background: rgba(11, 15, 30, 0.4); animation: drawerFade 0.18s ease forwards; }
.client-portal-page .drawer-panel {
    position: absolute; top: 0; right: 0; height: 100vh;
    width: 100%; max-width: 520px;
    background: var(--surface-primary); box-shadow: var(--shadow-drawer);
    display: flex; flex-direction: column;
    animation: drawerSlide 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.client-portal-page .drawer-panel.is-wide { max-width: 720px; }
@keyframes drawerFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerSlide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.client-portal-page .drawer-head { padding: 18px 24px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.client-portal-page .drawer-head-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.client-portal-page .drawer-head-sub { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }
.client-portal-page .drawer-close { width: 32px; height: 32px; border-radius: 7px; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; transition: background 0.12s ease; }
.client-portal-page .drawer-close:hover { background: var(--surface-secondary); }
.client-portal-page .drawer-body { padding: 20px 24px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.client-portal-page .drawer-foot { padding: 14px 24px; border-top: 1px solid var(--border-default); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-shrink: 0; background: var(--surface-primary); }

/* ------------------------------ Modal (centered) ------------------------------ */
.client-portal-page .modal-root { position: fixed; inset: 0; z-index: 220; display: none; align-items: center; justify-content: center; padding: 20px; }
.client-portal-page .modal-root.is-open { display: flex; }
.client-portal-page .modal-backdrop { position: absolute; inset: 0; background: rgba(11, 15, 30, 0.48); animation: drawerFade 0.15s ease forwards; }
.client-portal-page .modal-card {
    position: relative; width: 100%; max-width: 480px;
    background: var(--surface-primary); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated); overflow: hidden;
    animation: modalPop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    max-height: calc(100vh - 40px); display: flex; flex-direction: column;
}
.client-portal-page .modal-card.is-wide { max-width: 640px; }
@keyframes modalPop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.client-portal-page .modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.client-portal-page .modal-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.client-portal-page .modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.client-portal-page .modal-foot { padding: 14px 22px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }

/* ------------------------------ Bulk action bar ------------------------------ */
.client-portal-page .bulk-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-default); background: var(--brand-dark); color: #FFFFFF; }
.client-portal-page .bulk-bar-left { display: flex; align-items: center; gap: 14px; }
.client-portal-page .bulk-bar-right { display: flex; align-items: center; gap: 6px; }
.client-portal-page .bulk-bar-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; }
.client-portal-page .bulk-bar-count strong { color: var(--brand-primary); }
.client-portal-page .bulk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.08); color: #FFFFFF; font-size: 12.5px; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; transition: background 0.12s ease; }
.client-portal-page .bulk-btn:hover { background: rgba(255, 255, 255, 0.14); }
.client-portal-page .bulk-btn svg { width: 13px; height: 13px; }
.client-portal-page .bulk-btn.is-danger { color: #FCA5A5; }
.client-portal-page .bulk-btn.is-danger:hover { background: rgba(239, 68, 68, 0.18); color: #FFFFFF; }

/* ------------------------------ Toasts ------------------------------ */
.client-portal-page .toast-root { position: fixed; top: 68px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.client-portal-page .toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--brand-dark); color: #FFFFFF; border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); font-size: 13px; max-width: 360px; pointer-events: auto; animation: toastIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.client-portal-page .toast.is-success { border-left: 3px solid var(--brand-primary); }
.client-portal-page .toast.is-warning { border-left: 3px solid var(--status-warning); }
.client-portal-page .toast.is-danger { border-left: 3px solid var(--status-danger); }
@keyframes toastIn { from { transform: translateX(12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ------------------------------ Misc utilities (portal-only) ------------------------------ */
.client-portal-page .stack { display: flex; flex-direction: column; gap: 14px; }
.client-portal-page .stack-sm { display: flex; flex-direction: column; gap: 8px; }
.client-portal-page .row { display: flex; align-items: center; gap: 10px; }
.client-portal-page .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.client-portal-page .spacer { flex: 1; }
.client-portal-page .muted { color: var(--text-tertiary); }
.client-portal-page .mono { font-family: 'JetBrains Mono', monospace; }
.client-portal-page .num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.client-portal-page .divider { height: 1px; background: var(--border-default); margin: 12px 0; border: 0; }

.client-portal-page .fade-up { opacity: 0; transform: translateY(6px); animation: fadeUp 0.42s ease-out forwards; }
.client-portal-page .fade-up.d-1 { animation-delay: 0.05s; }
.client-portal-page .fade-up.d-2 { animation-delay: 0.12s; }
.client-portal-page .fade-up.d-3 { animation-delay: 0.20s; }
.client-portal-page .fade-up.d-4 { animation-delay: 0.30s; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1024px) {
    .client-portal-page .portal-main { padding: 22px 22px 30px; --portal-main-pad: 22px; }
    .client-portal-page .search-input { min-width: 200px; }
    .client-portal-page .portal-top-search { display: none; }
}
@media (max-width: 768px) {
    [data-sidebar="expanded"] .client-portal-page .portal-body,
    [data-sidebar="collapsed"] .client-portal-page .portal-body { grid-template-columns: 1fr; }
    .client-portal-page .portal-sidebar { position: fixed; left: 0; top: var(--top-nav-height); width: var(--sidebar-width); z-index: 90; transform: translateX(-100%); transition: transform 0.22s ease; }
    [data-sidebar="mobile-open"] .client-portal-page .portal-sidebar { transform: translateX(0); }
    .client-portal-page .firm-context-info { display: none; }
    .client-portal-page .portal-main { padding: 20px 16px 30px; --portal-main-pad: 20px; }
    .client-portal-page .drawer-panel { max-width: 100%; }
}

/* ================================================================
   Workflows — ported from Workflows-Create-Edit.html,
   Workflows-List.html, Workflows-Detail.html prototypes
   ================================================================ */

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 18px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.12s ease; }
.breadcrumb a:hover { color: var(--brand-primary-strong); }
.breadcrumb .sep { color: var(--text-tertiary); }
.breadcrumb .current { color: var(--text-primary); font-weight: 500; }

/* Step rail */
.step-rail { display: flex; align-items: center; gap: 0; margin-bottom: 28px; padding: 14px 18px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); position: relative; overflow-x: auto; }
.step-pill { display: flex; align-items: center; gap: 9px; padding: 4px 10px; font-size: 12.5px; flex-shrink: 0; }
.step-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; transition: all 0.15s ease; border: 2px solid transparent; }
.step-pill.is-completed .step-num { background: var(--brand-primary); color: var(--brand-dark); border-color: var(--brand-primary); }
.step-pill.is-current .step-num { background: var(--brand-dark); color: var(--brand-primary); border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); }
[data-theme="dark"] .step-pill.is-current .step-num { background: var(--brand-primary); color: var(--brand-dark); }
.step-pill.is-upcoming .step-num { background: var(--surface-tertiary); color: var(--text-tertiary); border-color: var(--border-default); }
.step-label { font-weight: 500; color: var(--text-tertiary); white-space: nowrap; transition: color 0.15s ease; }
.step-pill.is-completed .step-label { color: var(--text-secondary); }
.step-pill.is-current .step-label { color: var(--text-primary); font-weight: 600; }
.step-connector { flex: 1; height: 2px; background: var(--border-default); min-width: 30px; transition: background 0.15s ease; }
.step-connector.is-filled { background: var(--brand-primary); }

/* Form controls */
.form-group { margin-bottom: 22px; }
.form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.form-help { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.5; }
.form-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease; box-sizing: border-box; }
.form-input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.form-input::placeholder { color: var(--text-tertiary); }
select.form-input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4L6 8L9 4' stroke='%238A92A8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

/* Step panel */
.step-panel { display: none; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 80px; }
.step-panel.active { display: block; }
.step-panel-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 6px; }
.step-panel-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.01em; }
.step-panel-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 24px; max-width: 640px; }

/* Radio cards */
.radio-card-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.radio-card { padding: 14px 16px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: all 0.12s ease; background: var(--surface-primary); position: relative; }
.radio-card:hover { border-color: var(--brand-primary); }
.radio-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.radio-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.radio-card-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; }
.radio-card-check { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s ease; }
.radio-card.is-selected .radio-card-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.radio-card-check svg { display: none; color: var(--brand-dark); }
.radio-card.is-selected .radio-card-check svg { display: block; }

/* Checkbox cards */
.checkbox-card-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.checkbox-card { padding: 14px 16px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: all 0.12s ease; background: var(--surface-primary); position: relative; }
.checkbox-card:hover { border-color: var(--brand-primary); }
.checkbox-card.is-checked { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.checkbox-card.is-required { opacity: 0.85; cursor: not-allowed; }
.checkbox-card.is-required .checkbox-card-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.checkbox-card.is-required .checkbox-card-check svg { display: block; }
.checkbox-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.checkbox-card-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; }
.checkbox-card-check { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s ease; }
.checkbox-card.is-checked .checkbox-card-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.checkbox-card-check svg { display: none; color: var(--brand-dark); }
.checkbox-card.is-checked .checkbox-card-check svg { display: block; }
.required-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-tertiary); color: var(--text-secondary); margin-left: auto; }

/* Stage list (step 2) */
.stage-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.stage-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); transition: border-color 0.12s ease; }
.stage-card:hover { border-color: var(--brand-primary); }
.stage-handle { color: var(--text-tertiary); cursor: grab; flex-shrink: 0; }
.stage-num { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-tertiary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.stage-info { flex: 1; min-width: 0; }
.stage-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.stage-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.stage-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; }
.stage-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Sequence pill */
.sequence-pill { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sequence-pill.is-sequential { background: var(--status-info-soft); color: var(--status-info); }
.sequence-pill.is-iterative { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.sequence-pill.is-final { background: var(--status-success-soft); color: var(--status-success); }
[data-theme="dark"] .sequence-pill.is-iterative { color: #C4B5FD; }

/* Add stage button */
.add-stage-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border: 1.5px dashed var(--border-default); border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.12s ease; }
.add-stage-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary-strong); background: var(--brand-primary-soft); }

/* Stage task blocks (step 3 / detail) */
.stage-task-block { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 10px; }
.stage-task-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; transition: background 0.1s ease; user-select: none; }
.stage-task-head:hover { background: var(--surface-secondary); }
.stage-task-head .chevron { color: var(--text-tertiary); transition: transform 0.15s ease; flex-shrink: 0; }
.stage-task-block.is-expanded .stage-task-head .chevron { transform: rotate(90deg); }
.stage-task-body { display: none; border-top: 1px solid var(--border-default); }
.stage-task-block.is-expanded .stage-task-body { display: block; }
.stage-task-count { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: var(--surface-tertiary); color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; margin-left: auto; }
.stage-num-sm { width: 22px; height: 22px; border-radius: 5px; background: var(--surface-tertiary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; flex-shrink: 0; }

/* Task list */
.task-list { padding: 8px 0; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 48px; border-bottom: 1px solid var(--border-default); transition: background 0.1s ease; }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--surface-secondary); }
.task-handle { color: var(--text-tertiary); cursor: grab; }
.task-icon { width: 22px; height: 22px; border-radius: 5px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.task-info { flex: 1; min-width: 0; }
.task-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.task-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-role-pill { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-tertiary); color: var(--text-secondary); }
.task-role-pill.is-bk { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.task-role-pill.is-sup { background: var(--status-info-soft); color: var(--status-info); }
.task-role-pill.is-cpa { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.task-role-pill.is-client { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .task-role-pill.is-cpa { color: #C4B5FD; }
[data-theme="dark"] .task-role-pill.is-client { color: var(--status-warning); }

/* Condition pills — Frequency / Involvement / Onboarding / Intake / AccountType / Event */
.task-cond-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.03em; background: var(--surface-tertiary); color: var(--text-secondary); border: 1px solid transparent; }
.task-cond-pill .task-cond-label { opacity: 0.7; text-transform: uppercase; }
.task-cond-pill .task-cond-value { font-weight: 700; }
.task-cond-pill.is-frequency { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.task-cond-pill.is-involvement { background: var(--status-info-soft); color: var(--status-info); }
.task-cond-pill.is-onboarding { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.task-cond-pill.is-intake { background: var(--status-warning-soft); color: #B45309; }
.task-cond-pill.is-accounttype { background: var(--surface-tertiary); color: var(--text-secondary); border-color: var(--border-default); }
.task-cond-pill.is-event { background: var(--status-danger-soft); color: var(--status-danger); }
[data-theme="dark"] .task-cond-pill.is-onboarding { color: #C4B5FD; }
[data-theme="dark"] .task-cond-pill.is-intake { color: var(--status-warning); }

/* Stable task number prefix (#1..#40 from the spec) */
.task-num { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--text-tertiary); margin-right: 6px; padding: 0 4px; border-radius: 3px; background: var(--surface-tertiary); }

.add-task-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px 10px 48px; border: 0; border-top: 1px dashed var(--border-default); background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.12s ease, color 0.12s ease; text-align: left; }
.add-task-btn:hover { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* Notification overrides (step 4) */
.notification-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 60px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-default); }
.notification-row:last-child { border-bottom: 0; }
.notification-row.is-header { padding-bottom: 6px; }
.notification-row.is-header > div { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.notification-trigger { font-size: 13px; color: var(--text-primary); }
.notification-trigger-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.channel-toggle { display: flex; gap: 6px; }
.channel-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--border-default); background: var(--surface-primary); color: var(--text-tertiary); }
.channel-pill.is-on { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); }
.channel-pill svg { width: 9px; height: 9px; }

/* Review (step 5) */
.review-section { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 12px; }
.review-section-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.review-section-edit { font-size: 11.5px; color: var(--brand-primary-strong); cursor: pointer; font-weight: 600; background: none; border: 0; font-family: inherit; }
.review-section-edit:hover { text-decoration: underline; }
.review-grid { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; font-size: 12.5px; }
.review-grid dt { color: var(--text-tertiary); font-weight: 500; }
.review-grid dd { color: var(--text-primary); margin: 0; }

/* Wizard footer */
.wizard-footer { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-primary); border-top: 1px solid var(--border-default); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 100; }
.wizard-footer-status { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 8px; }
.saved-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: var(--surface-tertiary); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.wizard-footer-actions { display: flex; gap: 8px; align-items: center; }

/* Detail page */
.template-header { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 22px; display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
.template-icon-large { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.template-header-info { flex: 1; min-width: 240px; }
.template-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.template-name { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.01em; }
.template-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--text-secondary); align-items: center; }
.template-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.template-meta-item svg { color: var(--text-tertiary); flex-shrink: 0; }
.template-actions { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-start; }
.default-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* Basics grid */
.basics-grid { padding: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.basics-cell { font-size: 12.5px; }
.basics-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 5px; }
.basics-value { font-size: 13px; color: var(--text-primary); font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Type / setup / source / participant pills */
.type-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.type-pill.is-monthly { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.type-pill.is-yearly { background: var(--status-info-soft); color: var(--status-info); }
.type-pill.is-onetime { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.type-pill.is-catchup { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .type-pill.is-catchup { color: var(--status-warning); }
.setup-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 600; }
.setup-pill.is-fresh { background: var(--status-success-soft); color: var(--status-success); }
.setup-pill.is-migration { background: rgba(59, 130, 246, 0.12); color: #1D4ED8; }
[data-theme="dark"] .setup-pill.is-migration { color: #60A5FA; }
.source-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 600; background: var(--surface-tertiary); color: var(--text-secondary); }
.participant-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.participant-chip.is-on { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.participant-chip.is-off { background: var(--surface-tertiary); color: var(--text-tertiary); text-decoration: line-through; opacity: 0.6; }

/* Stage flow diagram */
.stage-flow { padding: 22px; }
.stage-flow-row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 14px; }
.stage-node { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 100px; flex: 1; max-width: 140px; }
.stage-node-circle { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; border: 2px solid var(--brand-primary); }
.stage-node-circle.is-final { background: var(--status-success-soft); color: var(--status-success); border-color: var(--status-success); }
.stage-node-circle.is-iterative { background: rgba(167, 139, 250, 0.15); color: #6D28D9; border-color: #A78BFA; }
[data-theme="dark"] .stage-node-circle.is-iterative { color: #C4B5FD; }
.stage-node-name { font-size: 11.5px; font-weight: 600; color: var(--text-primary); text-align: center; line-height: 1.3; }
.stage-node-meta { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.stage-arrow { color: var(--text-tertiary); flex-shrink: 0; }
.stage-arrow svg { width: 18px; height: 18px; }
.iteration-bracket { position: relative; padding: 8px 14px; border: 1.5px dashed var(--brand-accent); border-radius: var(--radius-md); margin: 0 4px; display: flex; align-items: center; gap: 0; }
.iteration-bracket::before { content: 'Iterates'; position: absolute; top: -8px; left: 14px; background: var(--surface-primary); padding: 0 6px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6D28D9; }
[data-theme="dark"] .iteration-bracket::before { color: #C4B5FD; }

/* Section cards + tabs (detail page) */
.section-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 18px; }
.section-head { padding: 14px 18px; border-bottom: 1px solid var(--border-default); display: flex; justify-content: space-between; align-items: center; }
.section-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.section-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); font-weight: 600; }
.tab-strip { display: flex; gap: 6px; border-bottom: 1px solid var(--border-default); padding: 0 18px; margin-bottom: 18px; }
.tab, .tab-strip-tab { padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); cursor: pointer; border: 0; background: transparent; font-family: inherit; transition: color 0.12s ease; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover, .tab-strip-tab:hover { color: var(--text-primary); }
.tab.is-active, .tab-strip-tab.is-active { color: var(--brand-primary-strong); border-bottom-color: var(--brand-primary); }
.tab-count-pill { background: var(--surface-tertiary); color: var(--text-secondary); padding: 1px 6px; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; }
.tab.is-active .tab-count-pill { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.tab-panel { display: none; padding: 0; }
.tab-panel.is-active { display: block; }

/* Notification overrides — detail page read-only list */
.notif-list { padding: 0; }
.notif-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); align-items: center; }
.notif-row:last-child { border-bottom: 0; }
.notif-row.is-header { padding: 10px 18px; background: var(--surface-secondary); }
.notif-row.is-header > div { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.notif-trigger { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.notif-trigger-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.notif-recipient { font-size: 13px; color: var(--text-secondary); }

/* Used by + activity (detail page sidebar) */
.usage-row { padding: 11px 18px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background 0.12s ease; }
.usage-row:last-child { border-bottom: 0; }
.usage-row:hover { background: var(--surface-secondary); }
.usage-business-icon { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 10px; flex-shrink: 0; }
.usage-info { flex: 1; min-width: 0; }
.usage-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.usage-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.activity-row { padding: 11px 18px; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--border-default); }
.activity-row:last-child { border-bottom: 0; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.activity-dot.tone-brand { background: var(--brand-primary); }
.activity-dot.tone-success { background: var(--status-success); }
.activity-dot.tone-info { background: var(--status-info); }
.activity-dot.tone-neutral { background: var(--text-tertiary); }
.activity-info { flex: 1; min-width: 0; }
.activity-text { font-size: 12.5px; color: var(--text-primary); line-height: 1.4; }
.activity-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; font-weight: 500; }

/* Detail two-column grid */
.detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .detail-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ENGAGEMENT ACTIVATION PAGE
   ============================================================ */

/* Page back button */
.page-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 16px; padding: 6px 8px 6px 0; background: none; border: 0; cursor: pointer; transition: color 0.12s ease; }
.page-back:hover { color: var(--text-primary); }
.page-back svg { color: var(--text-tertiary); }
.page-greeting { font-size: 13.5px; color: var(--text-secondary); margin-top: 6px; max-width: 640px; }

/* Step rail (engagement activation — distinct from workflow step-rail) */
.step-rail-ea { display: flex; align-items: center; gap: 0; margin-bottom: 28px; padding: 0; }
.step-rail-step { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; }
.step-rail-step:last-child { flex: 0; }
.step-marker { display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; transition: opacity 0.12s ease; }
.step-marker:hover { opacity: 0.85; }
.step-num-ea { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-tertiary); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; border: 2px solid var(--surface-tertiary); transition: all 0.18s ease; flex-shrink: 0; }
.step-rail-step.is-completed .step-num-ea { background: var(--brand-primary); color: var(--brand-dark); border-color: var(--brand-primary); }
.step-rail-step.is-current .step-num-ea { background: var(--surface-primary); color: var(--brand-primary-strong); border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(46, 212, 165, 0.18); }
.step-rail-step.is-skipped .step-num-ea { background: var(--surface-secondary); color: var(--text-tertiary); border: 2px dashed var(--border-strong); }
.step-label-ea { font-size: 12.5px; color: var(--text-tertiary); font-weight: 500; white-space: nowrap; transition: color 0.18s ease; }
.step-rail-step.is-completed .step-label-ea { color: var(--brand-primary-strong); font-weight: 600; }
.step-rail-step.is-current .step-label-ea { color: var(--text-primary); font-weight: 600; }
.step-rail-step.is-skipped .step-label-ea { font-style: italic; }
.step-connector-ea { flex: 1; height: 2px; background: var(--surface-tertiary); margin: 0 14px; min-width: 20px; transition: background 0.18s ease; }
.step-rail-step.is-completed > .step-connector-ea { background: var(--brand-primary); }

/* Wizard footer (engagement activation — sticky with border-radius, not fixed full-width) */
.wizard-footer-ea { position: sticky; bottom: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: 0 -4px 16px rgba(11, 15, 30, 0.04); margin-top: 8px; }
.wizard-footer-ea .wizard-footer-meta { font-size: 12.5px; color: var(--text-secondary); }
.wizard-footer-ea .wizard-footer-meta strong { color: var(--text-primary); }
.wizard-footer-ea .wizard-footer-actions { display: flex; gap: 8px; }

/* btn-success */
.btn-success { background: var(--status-success); color: #FFFFFF; border-color: var(--status-success); font-weight: 600; }
.btn-success:hover { filter: brightness(0.95); }

/* Step 1: Summary */
.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 22px; }
.summary-block { padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-secondary); }
.summary-block-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.summary-block-value { font-size: 14.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.summary-block-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.summary-business { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-secondary); }
.summary-business-avatar { width: 40px; height: 40px; border-radius: 9px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.summary-business-name { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 2px; }
.summary-business-meta { font-size: 12.5px; color: var(--text-secondary); }
.scope-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.scope-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-primary); padding: 10px 14px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.scope-item-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.scope-item-text { flex: 1; }
.scope-item-title { font-weight: 600; }
.scope-item-desc { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

/* Step 2: License */
.license-already { background: var(--status-success-soft); border-left: 3px solid var(--status-success); padding: 16px 18px; border-radius: var(--radius-md); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.license-already-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--status-success); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.license-already-info { flex: 1; }
.license-already-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--status-success); margin-bottom: 4px; }
.license-already-desc { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.license-already-desc strong { font-weight: 700; }
.tier-card { border: 2px solid var(--border-default); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 12px; background: var(--surface-primary); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; position: relative; }
.tier-card:hover { border-color: var(--brand-primary); }
.tier-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.tier-card.is-disabled { opacity: 0.55; cursor: not-allowed; }
.tier-card.is-disabled:hover { border-color: var(--border-default); }
.tier-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.tier-card-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.tier-card-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.tier-card.is-selected .tier-card-radio { border-color: var(--brand-primary); background: var(--brand-primary); }
.tier-card.is-selected .tier-card-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; }
.tier-card-name { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.tier-card-recommended { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--brand-primary); color: var(--brand-dark); }
.tier-card-locked-badge { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--surface-tertiary); color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 5px; }
.tier-card-price { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-align: right; }
.tier-card-price-suffix { font-family: 'Work Sans', sans-serif; font-size: 11.5px; color: var(--text-tertiary); font-weight: 500; margin-left: 2px; }
.tier-card-tagline { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; margin-left: 30px; line-height: 1.5; }
.tier-card-locked-message { font-size: 11.5px; color: var(--status-warning); font-weight: 600; margin-left: 30px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.tier-card-features { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-left: 30px; }
.tier-feature { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.tier-feature svg { flex-shrink: 0; color: var(--brand-primary-strong); }
.charge-card { margin-top: 16px; padding: 16px 18px; background: var(--brand-primary-soft); border-left: 3px solid var(--brand-primary); border-radius: var(--radius-md); display: none; }
.charge-card.visible { display: block; }
.charge-card-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 8px; }
.charge-card-rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; font-size: 13px; }
.charge-card-row { display: contents; }
.charge-card-label { color: var(--text-secondary); }
.charge-card-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }
.charge-card-divider { grid-column: 1 / -1; height: 1px; background: var(--border-default); margin: 4px 0; }
.charge-card-row.is-total .charge-card-label { font-family: 'Fraunces', serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.charge-card-row.is-total .charge-card-value { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.charge-card-note { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-default); }

/* Step 3: Team */
.role-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-default); }
.role-row:last-of-type { border-bottom: 0; }
.role-info { display: flex; flex-direction: column; gap: 2px; }
.role-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.role-desc { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.4; }
.assignee-picker { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: border-color 0.12s ease; width: 100%; }
.assignee-picker:hover { border-color: var(--brand-primary); }
.assignee-picker.has-value { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.assignee-picker-empty { font-size: 13px; color: var(--text-tertiary); flex: 1; }
.assignee-picker-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.assignee-picker-role { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.team-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-dark); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex-shrink: 0; }
.team-avatar.tone-1 { background: #4F46E5; color: #E0E7FF; }
.team-avatar.tone-2 { background: #DB2777; color: #FCE7F3; }
.team-avatar.tone-3 { background: #0891B2; color: #CFFAFE; }
.team-avatar.tone-4 { background: #B45309; color: #FEF3C7; }
.team-avatar.tone-5 { background: #047857; color: #D1FAE5; }
.team-dropdown { position: relative; }
.team-dropdown-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); z-index: 50; max-height: 240px; overflow-y: auto; display: none; }
.team-dropdown-list.open { display: block; }
.team-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; transition: background 0.1s ease; }
.team-option:hover { background: var(--surface-secondary); }
.team-option-info { flex: 1; min-width: 0; }
.team-option-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.team-option-role { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.team-option-clear { padding: 8px 12px; border-top: 1px solid var(--border-default); font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.team-option-clear:hover { background: var(--surface-secondary); color: var(--text-primary); }
.task-assign-section { margin-top: 28px; padding-top: 28px; border-top: 2px solid var(--border-default); }
.task-assign-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.task-assign-title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 4px; }
.task-assign-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; max-width: 600px; margin: 0; }
.task-assign-controls { display: flex; gap: 8px; flex-shrink: 0; }
.task-assign-bulk-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12px; font-weight: 500; color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: all 0.12s ease; }
.task-assign-bulk-btn:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.task-assign-summary { display: flex; align-items: center; gap: 24px; padding: 14px 18px; background: var(--surface-secondary); border-radius: var(--radius-md); margin-bottom: 16px; flex-wrap: wrap; }
.task-assign-summary-stat { display: flex; flex-direction: column; align-items: flex-start; }
.task-assign-summary-num { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.task-assign-summary-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-top: 4px; }
.task-assign-summary-info { flex: 1; display: flex; justify-content: flex-end; min-width: 200px; }
.task-assign-summary-info-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 999px; font-size: 11.5px; color: var(--text-secondary); }
.task-assign-summary-info-pill svg { color: var(--brand-primary-strong); }
.ta-stage-block { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 8px; }
.ta-stage-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; cursor: pointer; transition: background 0.1s ease; user-select: none; }
.ta-stage-head:hover { background: var(--surface-secondary); }
.ta-stage-head .chevron { color: var(--text-tertiary); transition: transform 0.15s ease; flex-shrink: 0; }
.ta-stage-block.is-expanded .ta-stage-head .chevron { transform: rotate(90deg); }
.ta-stage-num { width: 22px; height: 22px; border-radius: 5px; background: var(--surface-tertiary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.ta-stage-info { flex: 1; min-width: 0; }
.ta-stage-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.ta-stage-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.ta-stage-body { display: none; border-top: 1px solid var(--border-default); }
.ta-stage-block.is-expanded .ta-stage-body { display: block; }
.ta-task-list { padding: 4px 0; }
.ta-task-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border-default); transition: background 0.1s ease; flex-wrap: wrap; }
.ta-task-row:last-child { border-bottom: 0; }
.ta-task-row:hover { background: var(--surface-secondary); }
.ta-task-row.is-overridden { background: rgba(245, 158, 11, 0.04); }
.ta-task-row.is-overridden:hover { background: rgba(245, 158, 11, 0.08); }
.ta-task-info { flex: 1; min-width: 200px; }
.ta-task-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ta-task-trigger { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.ta-task-pickers { display: flex; align-items: flex-end; gap: 10px; flex-wrap: nowrap; }
.ta-picker-group { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.ta-picker-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.ta-picker { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: border-color 0.12s ease; min-width: 130px; }
.ta-picker:hover { border-color: var(--brand-primary); }
.ta-picker.is-overridden { border-color: var(--status-warning); background: rgba(245, 158, 11, 0.06); }
.ta-picker.is-overridden:hover { border-color: var(--status-warning); }
.ta-picker svg { margin-left: auto; color: var(--text-tertiary); flex-shrink: 0; }
.ta-picker-role-pill { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
.ta-picker-role-pill.is-bk { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.ta-picker-role-pill.is-sup { background: var(--status-info-soft); color: var(--status-info); }
.ta-picker-role-pill.is-cpa { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.ta-picker-role-pill.is-client { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .ta-picker-role-pill.is-cpa { color: #C4B5FD; }
[data-theme="dark"] .ta-picker-role-pill.is-client { color: var(--status-warning); }
.ta-override-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; background: var(--status-warning); color: var(--brand-dark); font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ta-arrow-sep { color: var(--text-tertiary); font-size: 16px; margin-bottom: 8px; flex-shrink: 0; }
.task-assign-footer-actions { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-default); }
.task-assign-reset-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12px; font-weight: 500; color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: all 0.12s ease; }
.task-assign-reset-btn:hover { border-color: var(--brand-primary); color: var(--text-primary); }

/* Step 4: Period */
.period-info { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.period-info-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.period-info-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.period-info-text strong { color: var(--text-primary); }
.form-row { margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row.cols-1 { grid-template-columns: 1fr; }
.form-row:last-child { margin-bottom: 0; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-select { padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13.5px; color: var(--text-primary); font-family: 'Work Sans', sans-serif; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.form-select:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.form-textarea { padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13.5px; color: var(--text-primary); font-family: 'Work Sans', sans-serif; transition: border-color 0.12s ease, box-shadow 0.12s ease; resize: vertical; min-height: 64px; }
.form-textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.form-label .required { color: var(--status-danger); }

/* Step 5: Confirm */
.confirm-section { margin-bottom: 20px; }
.confirm-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.confirm-section-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.confirm-edit-link { font-size: 12px; color: var(--brand-primary-strong); font-weight: 600; background: none; border: 0; cursor: pointer; }
.confirm-edit-link:hover { text-decoration: underline; }
.confirm-block { padding: 12px 16px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.confirm-block-info { flex: 1; }
.confirm-block-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.confirm-block-meta { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.confirm-block-amount { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; font-size: 13.5px; flex-shrink: 0; }
.activate-summary { background: var(--brand-primary-soft); border: 1px solid var(--brand-primary); border-radius: var(--radius-lg); padding: 18px 22px; margin-top: 8px; margin-bottom: 16px; }
.activate-summary-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--brand-primary-strong); letter-spacing: -0.01em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.activate-summary-list { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.activate-summary-item { display: flex; align-items: flex-start; gap: 8px; }
.activate-summary-item svg { flex-shrink: 0; margin-top: 2px; color: var(--brand-primary-strong); }

/* Success view */
.success-view { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 48px 40px; text-align: center; display: none; }
.success-view.active, .success-view[style*="display: block"] { display: block; }
.success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--status-success); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25); }
.success-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 6px; }
.success-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.5; max-width: 480px; margin: 0 auto 24px; }
.success-summary { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; display: inline-flex; align-items: center; gap: 14px; margin-bottom: 24px; text-align: left; }
.success-summary-block { display: flex; flex-direction: column; gap: 2px; }
.success-summary-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.success-summary-value { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.success-summary-divider { width: 1px; align-self: stretch; background: var(--border-default); }
.success-actions { display: flex; gap: 10px; justify-content: center; }

/* Responsive */
@media (max-width: 1024px) {
  .form-row { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .role-row { grid-template-columns: 1fr; }
  .tier-card-features { grid-template-columns: 1fr; }
  .step-rail-ea { overflow-x: auto; }
  .step-label-ea { display: none; }
}
@media (max-width: 700px) {
  .ta-task-row { flex-direction: column; align-items: stretch; }
  .ta-task-pickers { width: 100%; }
  .ta-picker-group { flex: 1; min-width: 0; }
}

/* ============================================================
   Engagements — List, Detail, Add-Flow
   ============================================================ */

/* KPI strip */
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.kpi { position: relative; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 18px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.kpi-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--border-strong); }
.kpi.is-brand .kpi-accent { background: var(--brand-primary); }
.kpi.is-warning .kpi-accent { background: var(--status-warning); }
.kpi.is-success .kpi-accent { background: var(--status-success); }
.kpi.is-danger .kpi-accent { background: var(--status-danger); }
.kpi.is-info .kpi-accent { background: var(--status-info); }
.kpi.is-neutral .kpi-accent { background: var(--text-tertiary); }
.kpi.is-primary .kpi-accent { background: var(--brand-primary); }
.kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 6px; }
.kpi-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.kpi-meta { font-size: 12px; color: var(--text-secondary); margin-top: 5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* Toolbar */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }

/* Search box */
.search-box { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-tertiary); min-width: 220px; flex: 1; max-width: 340px; }
.search-box input { border: 0; background: transparent; font-family: inherit; font-size: 13px; color: var(--text-primary); flex: 1; outline: none; }
.search-box input::placeholder { color: var(--text-tertiary); }

/* Filter pills */
.filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--border-default); border-radius: 999px; font-size: 12px; color: var(--text-secondary); background: var(--surface-primary); cursor: pointer; transition: all 0.12s ease; white-space: nowrap; }
.filter-pill:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.filter-pill.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.filter-pill .pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; }
.filter-pill.tone-success .pill-dot { background: var(--status-success); }
.filter-pill.tone-warning .pill-dot { background: var(--status-warning); }
.filter-pill.tone-danger .pill-dot { background: var(--status-danger); }
.filter-pill.tone-neutral .pill-dot { background: var(--text-tertiary); }
.count-pill { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; background: var(--surface-tertiary); color: var(--text-secondary); padding: 1px 5px; border-radius: 999px; }
.filter-pill.active .count-pill { background: var(--brand-primary); color: var(--brand-dark); }

/* List table */
.list-table { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.table-row { display: grid; gap: 14px; padding: 14px 18px; align-items: center; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background 0.1s ease; }
.table-row:last-child { border-bottom: 0; }
.table-row.is-header { background: var(--surface-secondary); padding: 10px 18px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; cursor: default; }
.table-row:not(.is-header):hover { background: var(--surface-secondary); }
.table-row.is-customers { grid-template-columns: 32px 2fr 1fr 1.4fr 1.6fr 200px 60px; }
.table-row.is-businesses { grid-template-columns: 2fr 1.4fr 1fr 1.6fr 200px 60px; }
.table-row.is-engagements { grid-template-columns: 2.5fr 1fr 1.2fr 1.2fr 1.6fr 50px; }
.table-row.is-coa { grid-template-columns: 2fr 1.2fr 1fr 200px; cursor: default; }
.pc-people-panel { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px; }
.pc-people-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 10px; }
.pc-people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pc-person-card { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 12px; }
.pc-person-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.pc-person-counts { display: flex; gap: 10px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.table-row.is-coa-edit { grid-template-columns: 120px 2fr 1.2fr 1.2fr 50px; cursor: default; }
.table-row.is-teamwork { grid-template-columns: 1.6fr 1.6fr 1fr 1fr 140px 80px; cursor: default; }
.table-row.is-teamwork-capacity { grid-template-columns: 1fr auto; cursor: default; }
@media (max-width: 1100px) {
  .table-row.is-customers, .table-row.is-businesses { grid-template-columns: 2fr 1.5fr 200px 50px; }
  .table-row.is-engagements { grid-template-columns: 2fr 1fr 1.4fr 40px; }
  .table-row.is-teamwork { grid-template-columns: 2fr 1fr 140px 60px; }
  .table-row.is-engagements > :nth-child(2), .table-row.is-engagements > :nth-child(3) { display: none; }
  .table-row.is-customers > :nth-child(n+3):nth-child(-n+4):not(.entity-cell) { display: none; }
  .table-row.is-businesses > :nth-child(n+2):nth-child(-n+3):not(:first-child) { display: none; }
  .table-row.is-teamwork > :nth-child(3), .table-row.is-teamwork > :nth-child(4) { display: none; }
  .table-row.is-header > :nth-child(n+3):nth-child(-n+4) { display: none; }
}
.cell-text { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.cell-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; font-size: 13px; }

/* Entity cell */
.entity-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.entity-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; background: var(--brand-dark); color: var(--brand-primary); }
.entity-avatar.tone-1 { background: #4F46E5; color: #E0E7FF; }
.entity-avatar.tone-2 { background: #DB2777; color: #FCE7F3; }
.entity-avatar.tone-3 { background: #0891B2; color: #CFFAFE; }
.entity-avatar.tone-4 { background: #B45309; color: #FEF3C7; }
.entity-avatar.tone-5 { background: #047857; color: #D1FAE5; }
.entity-avatar.tone-6 { background: #6D28D9; color: #EDE9FE; }
.entity-avatar.is-business { border-radius: 8px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); }
.entity-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-dark); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.entity-cell-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.entity-cell-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-cell-sub { font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Invite action cell */
.invite-action-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.action-btn-prominent { background: var(--surface-primary); color: var(--brand-primary-strong); border: 1px solid var(--brand-primary); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-md); font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; transition: all 0.12s ease; cursor: pointer; font-family: inherit; }
.action-btn-prominent:hover { background: var(--brand-primary); color: var(--brand-dark); }
.action-btn-prominent.tone-warning { color: #B45309; border-color: var(--status-warning); }
[data-theme="dark"] .action-btn-prominent.tone-warning { color: var(--status-warning); }
.action-btn-prominent.tone-warning:hover { background: var(--status-warning); color: #FFFFFF; }
.action-btn-prominent.tone-danger { color: var(--status-danger); border-color: var(--status-danger); }
.action-btn-prominent.tone-danger:hover { background: var(--status-danger); color: #FFFFFF; }
.action-btn-prominent.tone-success { color: var(--status-success); border-color: var(--status-success); }
.action-btn-prominent.tone-success:hover { background: var(--status-success); color: #FFFFFF; }
.action-btn-prominent:disabled { opacity: 0.55; cursor: not-allowed; }
.action-btn-prominent:disabled:hover { background: var(--surface-primary); color: var(--brand-primary-strong); }

/* Team work two-column layout (main list + capacity sidebar) */
.teamwork-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; }
@media (max-width: 1100px) {
  .teamwork-grid { grid-template-columns: 1fr; }
}
.teamwork-capacity .list-table { min-height: 200px; }

/* Type pills */
.type-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-tertiary); color: var(--text-secondary); }
.type-pill.is-monthly { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.type-pill.is-yearly { background: var(--status-info-soft); color: var(--status-info); }
.type-pill.is-onetime { background: var(--brand-accent-soft); color: var(--brand-accent); }
.type-pill.is-catchup { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .type-pill.is-catchup { color: var(--status-warning); }

/* Stage pills */
.stage-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--surface-tertiary); color: var(--text-secondary); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.stage-pill.tone-bookkeeper { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.stage-pill.tone-recon { background: var(--status-info-soft); color: var(--status-info); }
.stage-pill.tone-supervisor { background: var(--brand-accent-soft); color: var(--brand-accent); }
.stage-pill.tone-client { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .stage-pill.tone-client { color: var(--status-warning); }
.stage-pill.tone-readytolock { background: var(--status-success-soft); color: var(--status-success); }
.stage-pill.tone-locked { background: var(--surface-tertiary); color: var(--text-tertiary); }
.stage-pill.tone-paused { background: var(--status-info-soft); color: var(--status-info); }
.stage-pill.tone-draft { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .stage-pill.tone-draft { color: var(--status-warning); }

/* Team avatars in list */
.team-avatars { display: flex; }
.team-avatars .team-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 9px; border: 2px solid var(--surface-primary); margin-left: -5px; }
.team-avatars .team-avatar:first-child { margin-left: 0; }
.team-tone-1 { background: #C7F7EE; color: #0A7A5C; }
.team-tone-2 { background: #DDD6FE; color: #5B21B6; }
.team-tone-3 { background: #FED7AA; color: #92400E; }
.team-tone-4 { background: #BFDBFE; color: #1E40AF; }
.team-tone-5 { background: #FEE2E2; color: #991B1B; }
[data-theme="dark"] .team-tone-1 { background: #134E3F; color: #6EE7B7; }
[data-theme="dark"] .team-tone-2 { background: #2E1065; color: #C4B5FD; }
[data-theme="dark"] .team-tone-3 { background: #431407; color: #FDBA74; }
[data-theme="dark"] .team-tone-4 { background: #1E3A5F; color: #93C5FD; }
[data-theme="dark"] .team-tone-5 { background: #450A0A; color: #FCA5A5; }

/* Due cell */
.due-cell { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); }
.due-cell.is-overdue { color: var(--status-danger); }
.due-cell.is-soon { color: var(--status-warning); }

/* Row actions */
.row-actions { display: flex; align-items: center; justify-content: flex-end; }
.action-menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); min-width: 160px; z-index: 200; overflow: hidden; }
.action-menu.is-open { display: block; }
.action-menu-section { padding: 4px 0; border-bottom: 1px solid var(--border-default); }
.action-menu-section:last-child { border-bottom: 0; }
.action-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; font-size: 13px; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.1s, color 0.1s; }
.action-menu-item:hover { background: var(--surface-secondary); color: var(--text-primary); }
.action-menu-item.is-danger { color: var(--status-danger); }
.action-menu-item.is-danger:hover { background: var(--status-danger-soft); }

/* Modals */
.modal-overlay { position: fixed; inset: 0; background: rgba(11,15,30,0.45); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); max-width: 440px; width: 100%; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-default); }
.modal-head-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.modal-head-sub { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; }
.modal-close { width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; border: 0; cursor: pointer; }
.modal-close:hover { background: var(--surface-secondary); color: var(--text-primary); }
.modal-body { padding: 16px 20px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-default); }
.warn-box { background: var(--status-warning-soft); border-left: 3px solid var(--status-warning); border-radius: var(--radius-md); padding: 10px 13px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.danger-box { background: var(--status-danger-soft); border-left: 3px solid var(--status-danger); border-radius: var(--radius-md); padding: 10px 13px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

/* Empty state */
.empty-state { padding: 40px 20px; text-align: center; font-size: 13.5px; color: var(--text-tertiary); }

/* Detail page header */
.detail-header { background: var(--surface-primary); border-bottom: 1px solid var(--border-default); padding: 18px 28px 0; margin-bottom: 0; }
.detail-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.detail-header-left { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }
.engagement-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-dark); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.detail-header-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 6px; }
.detail-header-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Status pills */
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.active { background: var(--status-success-soft); color: var(--status-success); }
.status-pill.draft { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .status-pill.draft { color: var(--status-warning); }
.status-pill.paused { background: var(--status-info-soft); color: var(--status-info); }
.status-pill.closed { background: var(--surface-tertiary); color: var(--text-tertiary); }

/* Detail tabs */
.detail-tabs { display: flex; gap: 2px; border-bottom: 0; padding-top: 4px; overflow-x: auto; scrollbar-width: none; }
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--radius-md) var(--radius-md) 0 0; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition: all 0.12s; border-bottom: 2px solid transparent; }
.detail-tab:hover { color: var(--text-primary); background: var(--surface-secondary); }
.detail-tab.is-active { color: var(--brand-primary-strong); border-bottom-color: var(--brand-primary); font-weight: 600; }
.tab-check { width: 14px; height: 14px; border-radius: 50%; background: var(--status-success); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tab-content { padding: 24px 28px; }

/* Overview grid (stat cards) */
.overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.stat-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; }
.stat-card-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.stat-card-value { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; }
.stat-card-meta { font-size: 11.5px; color: var(--text-tertiary); }
.stat-card.is-warning .stat-card-value { color: var(--status-warning); }
.stat-card.is-success .stat-card-value { color: var(--status-success); }
.stat-card.is-danger .stat-card-value { color: var(--status-danger); }

/* Stage pipeline */
.stage-pipeline { display: flex; align-items: center; padding: 14px 16px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 16px; overflow-x: auto; gap: 0; }
.stage-node { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 72px; }
.stage-node-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-default); background: var(--surface-secondary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--text-tertiary); }
.stage-node.is-done .stage-node-dot { background: var(--status-success); border-color: var(--status-success); color: #fff; }
.stage-node.is-current .stage-node-dot { background: var(--brand-dark); border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.stage-node-label { font-size: 10.5px; color: var(--text-tertiary); font-weight: 500; text-align: center; white-space: nowrap; }
.stage-node.is-done .stage-node-label { color: var(--status-success); }
.stage-node.is-current .stage-node-label { color: var(--text-primary); font-weight: 600; }
.stage-connector { flex: 1; height: 2px; background: var(--border-default); min-width: 12px; }
.stage-connector.is-done { background: var(--status-success); }

/* Period section (detail overview) */
.period-section { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 22px; }
.period-section-head { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 10px; }
.period-timeline { position: relative; height: 8px; background: var(--surface-tertiary); border-radius: 999px; margin-bottom: 8px; overflow: hidden; }
.period-timeline-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-primary); border-radius: 999px; }
.period-timeline-today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--status-danger); border-radius: 1px; }
.period-timeline-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); }

/* Overview two-col layout */
.overview-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.overview-col-head { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }

/* Overview task / checklist items */
.ov-task-list { display: flex; flex-direction: column; gap: 6px; }
.ov-task-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; }
.ov-task-row.is-done { text-decoration: line-through; color: var(--text-tertiary); }
.ov-task-row.is-blocked { border-color: var(--status-danger); background: var(--status-danger-soft); color: var(--status-danger); }
.ov-task-row.is-progress { border-color: var(--status-warning); }

/* Blockers section */
.blockers-section { margin-bottom: 22px; }
.blocker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--status-danger-soft); border-left: 3px solid var(--status-danger); border-radius: var(--radius-md); background: var(--surface-primary); margin-bottom: 8px; font-size: 13px; }
.blocker-age { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 7px; border-radius: 4px; background: var(--status-danger-soft); color: var(--status-danger); font-weight: 700; }

/* Team strip */
.team-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.team-member-chip { display: flex; align-items: center; gap: 8px; padding: 6px 11px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 12.5px; }
.team-member-chip .team-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 9px; flex-shrink: 0; }

/* Config section (Workflow tab, Setup tab) */
.config-section { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; }
.config-section-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 12px; }
.config-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-default); }
.config-row:last-child { border-bottom: 0; }
.config-label { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; min-width: 140px; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; padding-top: 1px; }
.config-value { font-size: 13px; color: var(--text-primary); flex: 1; font-weight: 500; }
.config-locked { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); background: var(--surface-tertiary); padding: 4px 10px; border-radius: 999px; }

/* Wf-card in detail Workflow tab */
.wf-card-detail { padding: 16px 18px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); }

/* Stage-task block (Tasks tab + Add-flow Step 3) */
.stage-task-block { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 10px; }
.stage-task-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; transition: background 0.1s; user-select: none; }
.stage-task-head:hover { background: var(--surface-secondary); }
.stage-task-head .chevron { color: var(--text-tertiary); transition: transform 0.15s; flex-shrink: 0; }
.stage-task-block.is-expanded .stage-task-head .chevron { transform: rotate(90deg); }
.stage-task-body { display: none; border-top: 1px solid var(--border-default); }
.stage-task-block.is-expanded .stage-task-body { display: block; }
.stage-num { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-tertiary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.stage-info { flex: 1; min-width: 0; }
.stage-name-text { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.stage-task-count { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: var(--surface-tertiary); color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; flex-shrink: 0; }

/* Task list */
.task-list { padding: 8px 0; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--border-default); transition: background 0.1s; }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--surface-secondary); }
.task-handle { color: var(--text-tertiary); cursor: grab; flex-shrink: 0; }
.task-icon { width: 22px; height: 22px; border-radius: 5px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.task-info { flex: 1; min-width: 0; }
.task-name-text { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.task-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-role-pill { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-tertiary); color: var(--text-secondary); }
.task-role-pill.is-bk { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.task-role-pill.is-sup { background: var(--status-info-soft); color: var(--status-info); }
.task-role-pill.is-client { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .task-role-pill.is-client { color: var(--status-warning); }
.task-override { min-width: 176px; flex-shrink: 0; }
.add-task-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; border: 0; border-top: 1px dashed var(--border-default); background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s; }
.add-task-btn:hover { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* Checklist items list */
.cl-items-list { display: grid; gap: 6px; }
.cl-item-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); }
.cl-item-grip { color: var(--text-tertiary); cursor: grab; }
.cl-item-text { flex: 1; font-size: 13px; color: var(--text-primary); }

/* Step rail (Add-flow) */
.step-rail { display: flex; align-items: center; padding: 14px 18px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.step-rail::-webkit-scrollbar { display: none; }
.step-rail-step { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; user-select: none; min-width: 0; }
.step-rail-step:last-child { flex: 0; }
.step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-tertiary); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; transition: all 0.15s; }
.step-label { font-size: 12px; color: var(--text-tertiary); font-weight: 500; transition: color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-connector { flex: 1; height: 2px; background: var(--border-default); margin: 0 6px; min-width: 12px; flex-shrink: 0; }
.step-rail-step.is-completed .step-num { background: var(--brand-primary); color: var(--brand-dark); }
.step-rail-step.is-current .step-num { background: var(--brand-dark); color: var(--brand-primary); border: 2px solid var(--brand-primary); }
.step-rail-step.is-completed .step-label { color: var(--brand-primary-strong); font-weight: 600; }
.step-rail-step.is-current .step-label { color: var(--text-primary); font-weight: 600; }
.step-rail-step.is-completed .step-connector { background: var(--brand-primary); }

/* Step panels (Add-flow) */
.step-panel { display: none; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 16px; }
.step-panel.active { display: block; }
.step-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 6px; }
.step-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 6px; line-height: 1.2; }
.step-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 24px; max-width: 600px; }
.step-divider { border: 0; height: 1px; background: var(--border-default); margin: 22px 0; }
.section-head { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; margin-bottom: 12px; }
.form-help { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.45; }
.info-box { background: var(--status-info-soft); border-left: 3px solid var(--status-info); border-radius: var(--radius-md); padding: 10px 14px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; }

/* Workflow cards (Add-flow Step 1) */
.wf-grid { display: grid; gap: 10px; }
.wf-card { padding: 16px 18px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: all 0.12s; }
.wf-card:hover { border-color: var(--brand-primary); }
.wf-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.wf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.wf-name { font-size: 14.5px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.wf-badge { display: inline-flex; padding: 1px 7px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.wf-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.wf-stats { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--text-tertiary); flex-wrap: wrap; }
.wf-stat strong { color: var(--text-primary); font-weight: 600; }

/* Pick cards (Add-flow Step 2) */
.pick-grid { display: grid; gap: 8px; margin-bottom: 10px; }
.pick-card { padding: 13px 15px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: all 0.12s; display: flex; align-items: center; gap: 13px; }
.pick-card:hover { border-color: var(--brand-primary); }
.pick-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.pick-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-tertiary); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }
.pick-card.is-selected .pick-icon { background: var(--brand-primary); color: var(--brand-dark); }
.pick-info { flex: 1; min-width: 0; }
.pick-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.pick-meta { font-size: 11.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.meta-chip { display: inline-flex; padding: 1px 7px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-tertiary); color: var(--text-secondary); }
.meta-chip.is-active { background: var(--status-success-soft); color: var(--status-success); }
.add-new-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border: 1.5px dashed var(--border-default); border-radius: var(--radius-md); color: var(--brand-primary-strong); font-weight: 600; font-size: 12.5px; cursor: pointer; transition: all 0.12s; background: transparent; font-family: inherit; }
.add-new-link:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }

/* Radio cards (Add-flow Step 2) */
.radio-group { display: grid; gap: 8px; margin-bottom: 14px; }
.radio-group.cols-2 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.radio-group.cols-4 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.radio-card { padding: 11px 13px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: all 0.12s; }
.radio-card:hover { border-color: var(--brand-primary); }
.radio-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.radio-card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.radio-card-icon { font-size: 15px; }
.radio-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.radio-card-desc { font-size: 11.5px; color: var(--text-secondary); }

/* Team assignment (Add-flow Step 2) */
.team-list { display: grid; gap: 8px; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); }
.team-role { min-width: 120px; }
.team-role-title { font-size: 13px; font-weight: 600; }
.team-role-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.team-arrow { color: var(--text-tertiary); flex-shrink: 0; }
.team-select { flex: 1; }

/* Accounts (Add-flow Step 2) */
.accounts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.account-block { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; }
.account-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.account-block-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.account-count { width: 60px; }
.account-names { display: grid; gap: 6px; margin-top: 8px; }

/* Checklist template cards (Add-flow Step 4) */
.cl-template-grid { display: grid; gap: 8px; margin-bottom: 14px; }
.cl-template-card { padding: 12px 14px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: all 0.12s; display: flex; align-items: center; gap: 12px; }
.cl-template-card:hover { border-color: var(--brand-primary); }
.cl-template-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.cl-template-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-tertiary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-secondary); }
.cl-template-card.is-selected .cl-template-icon { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* License (Add-flow Step 5) */
.license-active-banner { background: var(--status-success-soft); border: 1px solid var(--status-success); border-radius: var(--radius-md); padding: 13px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.license-active-title { font-size: 13px; font-weight: 600; color: var(--status-success); }
.license-active-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.license-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.license-card { padding: 14px 16px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: all 0.12s; text-align: center; }
.license-card:hover { border-color: var(--brand-primary); }
.license-card.is-selected { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.license-tier { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600; margin-bottom: 3px; }
.license-price { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
.license-features { font-size: 11.5px; color: var(--text-secondary); line-height: 1.6; text-align: left; }

/* Review sections (Add-flow Step 6) */
.review-section { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 15px 18px; margin-bottom: 11px; }
.review-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.review-section-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.review-edit-btn { font-size: 12px; font-weight: 600; color: var(--brand-primary-strong); cursor: pointer; background: none; border: 0; font-family: inherit; }
.review-edit-btn:hover { text-decoration: underline; }
.review-row { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border-default); }
.review-row:last-child { border-bottom: 0; }
.review-label { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; min-width: 120px; padding-top: 1px; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.review-value { font-size: 13px; color: var(--text-primary); font-weight: 500; flex: 1; line-height: 1.5; }
.activate-callout { background: var(--brand-primary-soft); border: 1px solid var(--brand-primary); border-radius: var(--radius-md); padding: 16px 20px; margin-top: 16px; display: flex; align-items: flex-start; gap: 14px; }
.activate-callout-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-primary); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activate-callout-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.activate-callout-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

/* Wizard footer (Add-flow — fixed full-width) */
.wizard-footer { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-primary); border-top: 1px solid var(--border-default); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 100; }
.wizard-footer-left { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 10px; }
.wizard-footer-right { display: flex; gap: 8px; align-items: center; }
.draft-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 7px; border-radius: 4px; background: var(--status-warning-soft); color: #B45309; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
[data-theme="dark"] .draft-badge { color: var(--status-warning); }
.btn-success { background: var(--status-success); color: #FFFFFF; border-color: var(--status-success); font-weight: 600; }
.btn-success:hover { background: #059669; }

@media (max-width: 700px) {
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .overview-grid { grid-template-columns: 1fr 1fr; }
  .overview-two-col { grid-template-columns: 1fr; }
  .accounts-grid { grid-template-columns: 1fr; }
  .license-grid { grid-template-columns: 1fr; }
  .radio-group.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .task-override { display: none; }
  .step-label { display: none; }
  .table-row { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Sidebar — disabled nav items (future features)
   ============================================================ */
.nav-item-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ============================================================
   Dashboard — role toggle
   ============================================================ */
.role-toggle { display: flex; gap: 4px; margin-bottom: 22px; padding: 4px; background: var(--surface-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-default); width: fit-content; }
.role-tab { padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 7px; transition: all 0.12s ease; border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.role-tab:hover { color: var(--text-primary); }
.role-tab.is-active { background: var(--surface-primary); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(11,15,30,0.08); }

/* ============================================================
   Dashboard — hero / greeting
   ============================================================ */
.dash-hero { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 24px; flex-wrap: wrap; }
.dash-hero-left { flex: 1; min-width: 260px; }
.greeting-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; margin-bottom: 4px; }
.greeting-title { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 500; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.01em; }
.greeting-sub { font-size: 14px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; max-width: 640px; }
.role-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); margin-bottom: 6px; }

/* ============================================================
   Dashboard — N2 setup banner
   ============================================================ */
.n2-banner { background: linear-gradient(135deg, rgba(46,212,165,0.07) 0%, rgba(167,139,250,0.07) 100%); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.n2-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.n2-info { flex: 1; min-width: 220px; }
.n2-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.n2-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }
.n2-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.n2-action-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: all 0.12s ease; text-decoration: none; font-family: inherit; }
.n2-action-pill:hover { border-color: var(--brand-primary); }
.n2-dismiss { width: 26px; height: 26px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); border: 0; background: transparent; cursor: pointer; }
.n2-dismiss:hover { background: var(--surface-secondary); color: var(--text-primary); }

/* ============================================================
   Dashboard — KPI trend
   ============================================================ */
.kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; }
.kpi-trend.up { color: var(--status-success); }
.kpi-trend.down { color: var(--status-danger); }

/* ============================================================
   Dashboard — quick actions
   ============================================================ */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.quick-action { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.15s ease; text-decoration: none; color: inherit; }
.quick-action:hover { border-color: var(--brand-primary); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.quick-action-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick-action-text { flex: 1; min-width: 0; }
.quick-action-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.quick-action-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }

/* ============================================================
   Dashboard — two-column grid + dash cards
   ============================================================ */
.dashboard-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin-bottom: 18px; }
.dash-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.dash-card-head { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-default); }
.dash-card-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.dash-card-link { font-size: 12px; font-weight: 600; color: var(--brand-primary-strong); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.12s ease; }
.dash-card-link:hover { gap: 7px; }
.dash-card-body { padding: 4px 0; }

/* ============================================================
   Dashboard — list rows (at-risk, portals)
   ============================================================ */
.dash-row { padding: 12px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); transition: background 0.1s ease; }
.dash-row:last-child { border-bottom: 0; }
.dash-row:hover { background: var(--surface-secondary); }
.dash-row-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-tone-success { background: var(--status-success-soft); color: var(--status-success); }
.icon-tone-warning { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .icon-tone-warning { color: var(--status-warning); }
.icon-tone-danger { background: var(--status-danger-soft); color: var(--status-danger); }
.icon-tone-info { background: var(--status-info-soft); color: var(--status-info); }
.icon-tone-brand { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.icon-tone-neutral { background: var(--surface-tertiary); color: var(--text-secondary); }
.dash-row-info { flex: 1; min-width: 0; }
.dash-row-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.dash-row-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-row-action { font-size: 11.5px; color: var(--brand-primary-strong); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border-default); border-radius: 999px; cursor: pointer; transition: all 0.12s ease; background: transparent; font-family: inherit; }
.dash-row-action:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.row-pill { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; flex-shrink: 0; }
.row-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.row-pill.tone-success { background: var(--status-success-soft); color: var(--status-success); }
.row-pill.tone-warning { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .row-pill.tone-warning { color: var(--status-warning); }
.row-pill.tone-danger { background: var(--status-danger-soft); color: var(--status-danger); }
.row-pill.tone-info { background: var(--status-info-soft); color: var(--status-info); }

/* ============================================================
   Dashboard — activity feed
   ============================================================ */
.activity-feed-row { padding: 12px 18px; display: flex; align-items: flex-start; gap: 11px; border-bottom: 1px solid var(--border-default); }
.activity-feed-row:last-child { border-bottom: 0; }
.activity-feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.activity-feed-dot.tone-success { background: var(--status-success); }
.activity-feed-dot.tone-info { background: var(--status-info); }
.activity-feed-dot.tone-brand { background: var(--brand-primary); }
.activity-feed-dot.tone-warning { background: var(--status-warning); }
.activity-feed-dot.tone-danger { background: var(--status-danger); }
.activity-feed-info { flex: 1; min-width: 0; }
.activity-feed-text { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.activity-feed-text strong { font-weight: 600; }
.activity-feed-actor { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-primary); }
.activity-feed-avatar { width: 16px; height: 16px; border-radius: 50%; background: var(--brand-dark); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; vertical-align: middle; flex-shrink: 0; }
.activity-feed-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; font-weight: 500; }

/* ============================================================
   Dashboard — period close chart
   ============================================================ */
.stage-strip { display: flex; align-items: stretch; height: 32px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-secondary); margin: 12px 0 8px; }
.stage-segment { flex-grow: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #FFFFFF; }
.stage-segment.is-bookkeeper { background: #6366F1; }
.stage-segment.is-recon { background: #0891B2; }
.stage-segment.is-supervisor { background: #F59E0B; }
.stage-segment.is-client { background: #A78BFA; }
.stage-segment.is-readytolock { background: #10B981; }
.stage-segment.is-locked { background: #4B5266; }
.stage-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; font-size: 11px; }
.stage-legend-item { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.stage-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ============================================================
   Dashboard — team load / capacity bars
   ============================================================ */
.member-row { padding: 11px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); }
.member-row:last-child { border-bottom: 0; }
.member-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex-shrink: 0; }
.member-tone-1 { background: #4F46E5; color: #E0E7FF; }
.member-tone-2 { background: #DB2777; color: #FCE7F3; }
.member-tone-3 { background: #0891B2; color: #CFFAFE; }
.member-tone-4 { background: #B45309; color: #FEF3C7; }
.member-tone-5 { background: #047857; color: #D1FAE5; }
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.member-load { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; }
.capacity-bar { width: 80px; height: 6px; border-radius: 3px; background: var(--surface-tertiary); overflow: hidden; flex-shrink: 0; position: relative; }
.capacity-bar-fill { height: 100%; transition: width 0.3s ease; }
.capacity-bar-fill.is-low { background: var(--status-success); }
.capacity-bar-fill.is-mid { background: var(--status-warning); }
.capacity-bar-fill.is-high { background: var(--status-danger); }
.capacity-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; width: 36px; text-align: right; flex-shrink: 0; }

/* ============================================================
   Dashboard — today snapshot
   ============================================================ */
.today-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 18px; }
.today-card-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.today-card-date { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.today-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-default); }
.today-row:last-child { border-bottom: 0; }
.today-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); font-weight: 600; width: 64px; flex-shrink: 0; }
.today-marker { width: 3px; height: 22px; border-radius: 2px; flex-shrink: 0; }
.today-marker.tone-brand { background: var(--brand-primary); }
.today-marker.tone-warning { background: var(--status-warning); }
.today-marker.tone-info { background: var(--status-info); }
.today-marker.tone-danger { background: var(--status-danger); }
.today-info { flex: 1; min-width: 0; }
.today-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.today-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }

/* ============================================================
   Demo callout (shared across pages)
   ============================================================ */
.demo-callout { background: var(--brand-primary-soft); border-left: 3px solid var(--brand-primary); padding: 14px 18px; margin: 0 0 18px; border-radius: var(--radius-md); font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.demo-callout strong { color: var(--text-primary); }
.demo-callout-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary-strong); margin-bottom: 4px; }

/* ============================================================
   Customer / Business hero (detail pages)
   ============================================================ */
.entity-hero { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px 26px; margin-bottom: 22px; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.entity-hero-avatar { width: 72px; height: 72px; border-radius: 14px; background: var(--brand-dark); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 22px; flex-shrink: 0; }
.entity-hero-avatar.is-customer { border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); font-size: 26px; font-family: 'Fraunces', serif; }
.entity-hero-avatar.is-business { border-radius: 14px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); font-size: 22px; font-family: 'JetBrains Mono', monospace; }
.entity-hero-info { flex: 1; min-width: 240px; }
.entity-hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 4px; }
.entity-hero-name { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 6px; }
.entity-hero-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
.entity-hero-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.entity-hero-meta-item svg { color: var(--text-tertiary); flex-shrink: 0; }
.entity-hero-meta-item a { color: var(--brand-primary-strong); text-decoration: none; }
.entity-hero-meta-item a:hover { text-decoration: underline; }
.entity-hero-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 700px) { .entity-hero { flex-direction: column; } .entity-hero-actions { width: 100%; } }

/* ============================================================
   Detail page — section cards
   ============================================================ */
.section-card-head { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-default); }
.section-card-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.section-card-link { font-size: 12px; font-weight: 600; color: var(--brand-primary-strong); background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
.section-card-link:hover { text-decoration: underline; }
.section-card-body { padding: 0; }

/* ============================================================
   Detail page — stat grid tiles
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.stat-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; }
.stat-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.stat-tile-value { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; margin-bottom: 4px; }
.stat-tile-sub { font-size: 11.5px; color: var(--text-tertiary); }

/* ============================================================
   Detail page — info grid (key-value pairs)
   ============================================================ */
.info-grid { padding: 4px 0; }
.info-row { display: grid; grid-template-columns: 180px 1fr; gap: 8px 14px; padding: 10px 20px; border-bottom: 1px solid var(--border-default); font-size: 13px; align-items: start; }
.info-row:last-child { border-bottom: 0; }
.info-label { color: var(--text-tertiary); font-size: 12px; font-weight: 500; padding-top: 1px; }
.info-value { color: var(--text-primary); font-weight: 500; }

/* ============================================================
   Dashboard-view overrides — restore HTML template values over
   the .client-portal-page .kpi-strip / .kpi cascade (same specificity,
   later position wins).
   ============================================================ */
.dashboard-view .kpi-strip { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 900px) { .dashboard-view .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.dashboard-view .kpi { padding: 16px 18px; box-shadow: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.dashboard-view .kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.dashboard-view .kpi-accent { border-radius: 0; }
.dashboard-view .kpi.is-brand .kpi-accent { background: var(--brand-primary); }
.dashboard-view .kpi-value { font-size: 28px; }
.dashboard-view .kpi.is-warning .kpi-value { color: var(--text-primary); }
.dashboard-view .kpi.is-danger .kpi-value { color: var(--text-primary); }
.dashboard-view .kpi-meta { font-size: 12px; display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.row-pill .pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ============================================================
   Detail page — entity rows (businesses, engagements, etc.)
   ============================================================ */
.entity-row { padding: 12px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background 0.1s ease; }
.entity-row:last-child { border-bottom: 0; }
.entity-row:hover { background: var(--surface-secondary); }
.entity-row-icon { width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.entity-row-icon.is-business { background: var(--brand-dark); color: var(--brand-primary); }
.entity-row-icon.is-customer { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #E0E7FF; }
.entity-row-icon.is-engagement { background: var(--brand-primary-soft); color: var(--brand-primary-strong); font-size: 16px; }
.entity-row-icon.is-account { background: var(--status-info-soft); color: var(--status-info); font-size: 16px; }
.entity-row-icon.is-team { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #E0E7FF; }
.entity-row-info { flex: 1; min-width: 0; }
.entity-row-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entity-row-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.4; }
.entity-row-action { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--text-tertiary); }

/* ============================================================
   Detail page — status pills (template-style)
   ============================================================ */
.status-pill.is-active { background: var(--status-success-soft); color: var(--status-success); }
.status-pill.is-closed { background: var(--surface-tertiary); color: var(--text-tertiary); }
.status-pill.is-not-invited { background: var(--surface-tertiary); color: var(--text-tertiary); }
.status-pill.is-accepted { background: var(--status-success-soft); color: var(--status-success); }
.status-pill.is-sent { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .status-pill.is-sent { color: var(--status-warning); }
.status-pill.is-expired { background: var(--status-danger-soft); color: var(--status-danger); }
.status-pill.is-connected { background: var(--status-success-soft); color: var(--status-success); }
.status-pill.is-expiring { background: var(--status-warning-soft); color: #B45309; }
/* PeriodTask status pills: Ready (actionable, green-tint) vs Pending (waiting, grey-blue). */
.status-pill.is-ready { background: var(--status-success-soft); color: var(--status-success); }
.status-pill.is-waiting { background: var(--status-info-soft); color: var(--status-info); }
.pc-task-sub { margin-top: 3px; font-size: 11px; color: var(--text-tertiary); }
.pc-task-sub.is-blocked { color: var(--status-danger); }

/* ============================================================
   Detail page — portal access card
   ============================================================ */
.portal-status-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.portal-status-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-status-icon.is-accepted { background: var(--status-success-soft); color: var(--status-success); }
.portal-status-icon.is-sent { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .portal-status-icon.is-sent { color: var(--status-warning); }
.portal-status-icon.is-not-invited { background: var(--surface-tertiary); color: var(--text-tertiary); }
.portal-status-info { flex: 1; min-width: 200px; }
.portal-status-headline { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.portal-status-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
.portal-status-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* Portal activity history */
.portal-history-list { padding: 4px 0; }
.portal-history-row { padding: 10px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); }
.portal-history-row:last-child { border-bottom: 0; }
.portal-history-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-history-icon.is-success { background: var(--status-success-soft); color: var(--status-success); }
.portal-history-icon.is-info { background: var(--status-info-soft); color: var(--status-info); }
.portal-history-info { flex: 1; min-width: 0; }
.portal-history-action { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.portal-history-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.portal-history-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   Detail page — documents list
   ============================================================ */
.doc-row { padding: 12px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background 0.1s ease; }
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--surface-secondary); }
.doc-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-secondary); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.doc-size { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   Detail page — activity timeline
   ============================================================ */
.timeline { padding: 4px 0; }
.timeline-item { padding: 12px 20px; display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--border-default); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.timeline-icon.is-success { background: var(--status-success-soft); color: var(--status-success); }
.timeline-icon.is-info { background: var(--status-info-soft); color: var(--status-info); }
.timeline-icon.is-warning { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .timeline-icon.is-warning { color: var(--status-warning); }
.timeline-content { flex: 1; min-width: 0; }
.timeline-action { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.timeline-action strong { font-weight: 600; }
.timeline-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; font-family: 'JetBrains Mono', monospace; }

/* ============================================================
   Detail page — notes
   ============================================================ */
.notes-empty { padding: 32px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.notes-textarea { width: 100%; min-height: 120px; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-family: inherit; font-size: 13.5px; line-height: 1.6; resize: vertical; transition: border-color 0.12s, box-shadow 0.12s; }
.notes-textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }

/* ============================================================
   Customers list — invite status badges
   ============================================================ */
.invite-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.invite-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.invite-status.is-accepted { background: var(--status-success-soft); color: var(--status-success); }
.invite-status.is-sent { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .invite-status.is-sent { color: var(--status-warning); }
.invite-status.is-expired { background: var(--status-danger-soft); color: var(--status-danger); }
.invite-status.is-not-invited { background: var(--surface-tertiary); color: var(--text-tertiary); }
.status-meta { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

/* Customer initials avatar (list + detail) */
.customer-initials { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.customer-tone-1 { background: #EDE9FE; color: #4F46E5; }
.customer-tone-2 { background: #FCE7F3; color: #9D174D; }
.customer-tone-3 { background: #CFFAFE; color: #0E7490; }
.customer-tone-4 { background: #FEF3C7; color: #92400E; }
.customer-tone-5 { background: #D1FAE5; color: #065F46; }
.customer-tone-6 { background: #DBEAFE; color: #1E40AF; }
[data-theme="dark"] .customer-tone-1 { background: #2E1065; color: #C4B5FD; }
[data-theme="dark"] .customer-tone-2 { background: #4A0026; color: #F9A8D4; }
[data-theme="dark"] .customer-tone-3 { background: #164E63; color: #A5F3FC; }
[data-theme="dark"] .customer-tone-4 { background: #431407; color: #FDE68A; }
[data-theme="dark"] .customer-tone-5 { background: #064E3B; color: #A7F3D0; }
[data-theme="dark"] .customer-tone-6 { background: #1E3A5F; color: #93C5FD; }

/* Invite action buttons */
.action-btn-invite { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border-default); border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.12s ease; background: transparent; font-family: inherit; color: var(--brand-primary-strong); }
.action-btn-invite:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.action-btn-invite.tone-warning { color: #B45309; }
[data-theme="dark"] .action-btn-invite.tone-warning { color: var(--status-warning); }
.action-btn-invite.tone-warning:hover { border-color: var(--status-warning); background: var(--status-warning-soft); }
.action-btn-invite.tone-danger { color: var(--status-danger); }
.action-btn-invite.tone-danger:hover { border-color: var(--status-danger); background: var(--status-danger-soft); }

/* ── CUSTOMER (CLIENT) PORTAL ──
   All rules below scoped under .client-portal-page to keep them
   isolated from the firm portal's .client-portal-page chrome.

/* ===================================================
   BK Dashboard — per-client bookkeeper view
   All rules scoped under .bk-dashboard to avoid
   conflicts with the superadmin / supervisor views.
   =================================================== */

.bk-dashboard .page-eyebrow { display: flex; align-items: center; gap: 6px; }
.bk-dashboard .page-sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.bk-dashboard .page-sub strong { color: var(--text-primary); }

/* Ghost button override — template uses brand green, not grey */
.bk-dashboard .btn-ghost { color: var(--brand-primary-strong); }
.bk-dashboard .btn-ghost:hover { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* Grid layout */
.bk-dashboard .dash-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.bk-dashboard .dash-main { display: flex; flex-direction: column; gap: 16px; }
.bk-dashboard .dash-side { display: flex; flex-direction: column; gap: 16px; }

/* Card shell */
.bk-dashboard .card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.bk-dashboard .card-head { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-default); }
.bk-dashboard .card-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.bk-dashboard .card-meta { font-size: 12px; color: var(--text-tertiary); }
.bk-dashboard .card-body { padding: 16px 20px; }
.bk-dashboard .card-link { font-size: 12.5px; color: var(--brand-primary-strong); font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; }
.bk-dashboard .card-link:hover { text-decoration: underline; }

/* Period hero */
.bk-dashboard .period-hero { background: linear-gradient(135deg, var(--brand-dark) 0%, #1a2740 100%); border-radius: var(--radius-lg); padding: 20px 24px; color: #fff; position: relative; overflow: hidden; }
.bk-dashboard .period-hero::before { content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(46, 212, 165, 0.08); }
.bk-dashboard .period-hero::after { content: ''; position: absolute; bottom: -30px; left: 60px; width: 120px; height: 120px; border-radius: 50%; background: rgba(167, 139, 250, 0.06); }
.bk-dashboard .ph-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(46, 212, 165, 0.8); font-weight: 600; margin-bottom: 6px; }
.bk-dashboard .ph-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; color: #fff; }
.bk-dashboard .ph-sub { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; }
.bk-dashboard .ph-progress { height: 6px; background: rgba(255, 255, 255, 0.15); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.bk-dashboard .ph-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-primary), #A78BFA); border-radius: 3px; width: 40%; }
.bk-dashboard .ph-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(255, 255, 255, 0.5); font-family: 'JetBrains Mono', monospace; }
.bk-dashboard .ph-meta strong { color: rgba(46, 212, 165, 0.9); }
.bk-dashboard .ph-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 4px; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.04em; background: rgba(239, 68, 68, 0.2); color: #FCA5A5; margin-top: 10px; }

/* Period timeline */
.bk-dashboard .timeline-stages { display: flex; gap: 0; padding: 16px 20px; }
.bk-dashboard .ts-item { flex: 1; position: relative; }
.bk-dashboard .ts-connector { height: 4px; background: var(--border-default); border-radius: 2px; margin: 0 6px 8px; }
.bk-dashboard .ts-connector.done { background: var(--status-success); }
.bk-dashboard .ts-connector.blocked { background: var(--status-danger); }
.bk-dashboard .ts-connector.active { background: var(--brand-primary); }
.bk-dashboard .ts-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; margin: 0 auto 6px; border: 2px solid var(--border-default); color: var(--text-tertiary); }
.bk-dashboard .ts-dot.done { background: var(--status-success); border-color: var(--status-success); color: #fff; }
.bk-dashboard .ts-dot.blocked { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.bk-dashboard .ts-dot.active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.bk-dashboard .ts-dot.pending { background: var(--surface-tertiary); border-color: var(--surface-tertiary); color: var(--text-tertiary); }
.bk-dashboard .ts-name { font-size: 11px; font-weight: 600; color: var(--text-primary); text-align: center; margin-bottom: 2px; }
.bk-dashboard .ts-detail { font-size: 10.5px; color: var(--text-tertiary); text-align: center; font-family: 'JetBrains Mono', monospace; }
.bk-dashboard .ts-blocker { font-size: 10px; color: var(--status-danger); text-align: center; margin-top: 3px; line-height: 1.3; }

/* Blockers */
.bk-dashboard .blocker-row { padding: 14px 20px; border-bottom: 1px solid var(--border-default); display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: start; border-left: none; border-radius: 0; background: none; margin-bottom: 0; }
.bk-dashboard .blocker-row:last-child { border-bottom: 0; }
.bk-dashboard .blocker-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.bk-dashboard .blocker-dot.critical { background: var(--status-danger); }
.bk-dashboard .blocker-dot.warning { background: var(--status-warning); }
.bk-dashboard .blocker-dot.info { background: var(--status-info); }
.bk-dashboard .blocker-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.bk-dashboard .blocker-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.bk-dashboard .blocker-age { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.bk-dashboard .blocker-age.critical { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.bk-dashboard .blocker-age.warning { background: var(--status-warning-soft); color: #B45309; }
.bk-dashboard .blocker-cta { margin-top: 6px; }

/* Status grid (bookkeeping / bank by month) */
.bk-dashboard .status-grid-wrap { overflow-x: auto; }
.bk-dashboard .status-grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.bk-dashboard .status-grid th { padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); text-align: left; background: var(--surface-secondary); }
.bk-dashboard .status-grid td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); vertical-align: middle; }
.bk-dashboard .status-grid tr:last-child td { border-bottom: 0; }
.bk-dashboard .status-grid tr.is-current td { background: var(--brand-primary-soft); }
.bk-dashboard .stage-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.bk-dashboard .stage-chip.done { background: var(--status-success-soft); color: var(--status-success); }
.bk-dashboard .stage-chip.categorized { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.bk-dashboard .stage-chip.reconciled { background: rgba(167, 139, 250, 0.15); color: #6D28D9; }
.bk-dashboard .stage-chip.blocked { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.bk-dashboard .stage-chip.pending { background: var(--surface-tertiary); color: var(--text-tertiary); }
.bk-dashboard .period-badge { font-weight: 600; color: var(--text-primary); }
.bk-dashboard .period-badge.current { color: var(--brand-primary-strong); }
.bk-dashboard .duration-chip { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); }

/* KPI accuracy strip (overrides the portal-page kpi for this context) */
.bk-dashboard .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.bk-dashboard .kpi-strip .kpi { background: var(--surface-secondary); border-radius: var(--radius-md); padding: 12px 14px; border: none; box-shadow: none; transform: none; }
.bk-dashboard .kpi-strip .kpi:hover { transform: none; box-shadow: none; }
.bk-dashboard .kpi-strip .kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.bk-dashboard .kpi-strip .kpi-value { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.01em; }
.bk-dashboard .kpi-strip .kpi-sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.bk-dashboard .kpi-strip .kpi.is-good .kpi-value { color: var(--status-success); }
.bk-dashboard .kpi-strip .kpi.is-warn .kpi-value { color: #B45309; }
.bk-dashboard .kpi-strip .kpi.is-bad .kpi-value { color: var(--status-danger); }

/* Accuracy bars */
.bk-dashboard .acc-row { display: grid; grid-template-columns: 110px 1fr 48px; gap: 10px; align-items: center; margin-bottom: 8px; }
.bk-dashboard .acc-label { font-size: 12px; color: var(--text-secondary); }
.bk-dashboard .acc-bar { height: 8px; background: var(--surface-tertiary); border-radius: 4px; overflow: hidden; }
.bk-dashboard .acc-fill { height: 100%; border-radius: 4px; background: var(--brand-primary); }
.bk-dashboard .acc-fill.warn { background: var(--status-warning); }
.bk-dashboard .acc-fill.bad { background: var(--status-danger); }
.bk-dashboard .acc-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-primary); text-align: right; }

/* Notifications */
.bk-dashboard .notif-row { padding: 12px 20px; border-bottom: 1px solid var(--border-default); display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; }
.bk-dashboard .notif-row:last-child { border-bottom: 0; }
.bk-dashboard .notif-row.unread { background: var(--brand-primary-soft); }
.bk-dashboard .notif-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-tertiary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk-dashboard .notif-icon.bank { background: var(--status-info-soft); color: var(--status-info); }
.bk-dashboard .notif-icon.approve { background: var(--status-success-soft); color: var(--status-success); }
.bk-dashboard .notif-icon.alert { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.bk-dashboard .notif-icon.query { background: var(--status-warning-soft); color: #B45309; }
.bk-dashboard .notif-text { font-size: 13px; color: var(--text-primary); line-height: 1.45; }
.bk-dashboard .notif-text strong { font-weight: 600; }
.bk-dashboard .notif-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.bk-dashboard .notif-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; }
.bk-dashboard .unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); display: inline-block; margin-right: 4px; vertical-align: 2px; }

/* Quick actions (2-column grid in sidebar) */
.bk-dashboard .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-dashboard .qa-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: all 0.12s; font-family: inherit; text-decoration: none; }
.bk-dashboard .qa-btn:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.bk-dashboard .qa-btn svg { color: var(--text-tertiary); flex-shrink: 0; }
.bk-dashboard .qa-btn:hover svg { color: var(--brand-primary-strong); }
.bk-dashboard .qa-btn-label { flex: 1; text-align: left; }
.bk-dashboard .qa-btn-sub { font-size: 11px; color: var(--text-tertiary); font-weight: 400; }

/* Connected accounts */
.bk-dashboard .account-row { padding: 12px 20px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; gap: 12px; }
.bk-dashboard .account-icon { font-size: 20px; flex-shrink: 0; }
.bk-dashboard .account-info { flex: 1; min-width: 0; }
.bk-dashboard .account-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.bk-dashboard .account-code { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.bk-dashboard .account-status { font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.bk-dashboard .account-status.synced { color: var(--status-success); }
.bk-dashboard .account-status.pending { color: #B45309; }

@media (max-width: 960px) {
    .bk-dashboard .dash-grid { grid-template-columns: 1fr; }
    .bk-dashboard .kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .bk-dashboard .quick-actions { grid-template-columns: 1fr; }
}

/* =====================================================
   Bookkeeper screen-specific styles
   Transactions · COA · Contacts · Journal ·
   Reconciliation · Staging · Connect Accounts ·
   Staging Detail · Period Close · Reports ·
   Owner Report · Audit Trail
   ===================================================== */

/* ── Shared: KPI card (COA, Contacts, Journal, etc.) ── */
.kpi-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-card); }
.kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; }
.kpi-value { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; line-height: 1.1; }
.kpi-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.kpi-value.warn { color: #B45309; } .kpi-value.ok { color: var(--status-success); } .kpi-value.danger { color: var(--status-danger); }

/* ── Shared: Summary tile (Contacts, Journal, Reconciliation) ── */
.summary-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-card); }
.summary-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.summary-tile-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--text-primary); letter-spacing: -.01em; }
.summary-tile-sub { font-size: 11.5px; color: var(--text-secondary); }
.summary-tile.is-danger .summary-tile-value { color: var(--status-danger); }
.summary-tile.is-warning .summary-tile-value { color: var(--status-warning); }
.summary-tile.is-success .summary-tile-value { color: var(--brand-primary-strong); }

/* ── Transactions ── */
.tx-table-wrap { flex: 1; overflow: auto; background: var(--surface-secondary); }
.tx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tx-table thead th { position: sticky; top: 0; background: var(--surface-primary); padding: 8px 10px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); white-space: nowrap; text-align: left; z-index: 10; }
.tx-table thead th.sortable { cursor: pointer; user-select: none; }
.tx-table thead th.sortable:hover { color: var(--text-primary); }
.tx-table thead th.sorted { color: var(--brand-primary-strong); }
.tx-table tbody tr { border-bottom: 1px solid var(--border-default); transition: background .08s; background: var(--surface-primary); }
.tx-table tbody tr:hover { background: var(--surface-tertiary); }
.tx-table tbody tr.is-selected { background: var(--brand-primary-soft); }
.tx-table tbody tr.is-flagged { background: rgba(239,68,68,.04); }
.tx-table td { padding: 9px 10px; vertical-align: middle; }
.tx-table td.td-check { width: 36px; padding: 10px 8px 10px 16px; }
.tx-check { width: 16px; height: 16px; border: 1.5px solid var(--border-default); border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; background: var(--surface-primary); }
.tx-check.checked { background: var(--brand-primary); border-color: var(--brand-primary); }
.td-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.td-bank { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.bank-icon { width: 22px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.td-desc { max-width: 260px; }
.td-desc-main { font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-desc-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.td-amount { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; white-space: nowrap; text-align: right; }
.td-amount.debit { color: var(--status-danger); }
.td-amount.credit { color: var(--status-success); }
.progress-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.progress-pill.reviewed { background: var(--status-success-soft); color: var(--status-success); }
.progress-pill.categorized { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.progress-pill.ai-suggested { background: rgba(167,139,250,.15); color: #6D28D9; }
.progress-pill.needs-review { background: var(--status-warning-soft); color: #B45309; }
.progress-pill.flagged { background: rgba(239,68,68,.1); color: var(--status-danger); }
.progress-pill.uncategorized { background: var(--surface-tertiary); color: var(--text-tertiary); }
.progress-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.account-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-md); background: var(--surface-secondary); border: 1px solid var(--border-default); font-size: 12.5px; color: var(--text-primary); cursor: pointer; transition: all .12s; max-width: 200px; font-family: inherit; }
.account-chip:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.account-chip.assigned { background: transparent; border-color: transparent; font-weight: 500; }
.account-chip.ai { border-style: dashed; border-color: rgba(167,139,250,.5); }
.account-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); flex-shrink: 0; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-family: 'JetBrains Mono', monospace; font-weight: 700; background: rgba(167,139,250,.15); color: #6D28D9; flex-shrink: 0; }
.row-btn { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: all .12s; font-family: inherit; }
.row-btn:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.row-btn.is-flag { color: var(--status-danger); }
.row-btn.active { color: var(--status-danger); }
.flag-badge { display: inline-flex; align-items: center; margin-left: 5px; color: var(--status-danger); font-size: 11px; }
.ai-conf-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; font-size: 9.5px; font-family: 'JetBrains Mono', monospace; font-weight: 700; flex-shrink: 0; }
.ai-conf-badge.hi { background: rgba(34,197,94,.12); color: #16A34A; }
.ai-conf-badge.med { background: rgba(234,179,8,.12); color: #CA8A04; }
.ai-conf-badge.lo { background: rgba(239,68,68,.12); color: #DC2626; }
.btn.is-danger { border-color: var(--status-danger); color: var(--status-danger); }
.btn.is-danger:hover { background: rgba(239,68,68,.08); }
.col-picker-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 14px; min-width: 160px; box-shadow: 0 4px 16px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 8px; }
.col-picker-title { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; }

/* ── Chart of Accounts ── */
.coa-scroll-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0; padding: 20px 24px 40px; }
.coa-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 960px) { .coa-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.coa-tabs-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 0; gap: 16px; flex-wrap: wrap; }
.coa-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coa-toolbar-right { margin-left: auto; display: flex; gap: 8px; }
.type-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.dot-bank { background: #3B82F6; } .dot-asset { background: #0EA5E9; } .dot-fixed { background: #0891B2; }
.dot-liability { background: #F59E0B; } .dot-equity { background: #A78BFA; }
.dot-revenue { background: #2ED4A5; } .dot-overhead { background: #EF4444; }
.dot-other-exp { background: #DC2626; } .dot-direct { background: #F97316; }
.type-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-secondary); }
.coa-table-wrap { flex: 1; overflow: visible; padding: 0 0 24px; }
.bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); gap: 14px; }
.bank-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: box-shadow .12s ease, border-color .12s ease; }
.bank-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); }
.bank-card:hover { box-shadow: var(--shadow-elevated); border-color: var(--border-strong); }
.bank-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bank-logo { width: 38px; height: 38px; border-radius: 9px; background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 500; font-size: 13px; color: var(--text-primary); flex-shrink: 0; }
.bank-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.bank-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.bank-balance { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; }
.bank-balance.is-neg { color: var(--status-danger); }
.bank-balance-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.bank-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-default); }

/* ── Contacts ── */
.ct-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1200px) { .ct-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ct-summary { grid-template-columns: repeat(2, 1fr); } }
.ct-identity { display: flex; align-items: center; gap: 10px; }
.ct-avatar { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11.5px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
.ct-avatar.av-0 { background: #D1FAE5; color: #047857; } .ct-avatar.av-1 { background: #DBEAFE; color: #1E40AF; }
.ct-avatar.av-2 { background: #FEF3C7; color: #92400E; } .ct-avatar.av-3 { background: #FEE2E2; color: #B91C1C; }
.ct-avatar.av-4 { background: #E9D5FF; color: #6B21A8; } .ct-avatar.av-5 { background: #CFFAFE; color: #155E75; }
[data-theme="dark"] .ct-avatar.av-0 { background: rgba(16,185,129,.18); color: #6EE7B7; }
[data-theme="dark"] .ct-avatar.av-1 { background: rgba(59,130,246,.18); color: #93C5FD; }
[data-theme="dark"] .ct-avatar.av-2 { background: rgba(245,158,11,.18); color: #FBBF24; }
[data-theme="dark"] .ct-avatar.av-3 { background: rgba(239,68,68,.18); color: #FCA5A5; }
[data-theme="dark"] .ct-avatar.av-4 { background: rgba(167,139,250,.18); color: #C4B5FD; }
.ct-name { font-weight: 500; color: var(--text-primary); }
.ct-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; }
.ct-role-pills { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Journal ── */
.je-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 900px) { .je-summary { grid-template-columns: repeat(2, 1fr); } }
.je-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: 11px; font-weight: 500; border-radius: 10px; white-space: nowrap; line-height: 1.5; font-family: 'JetBrains Mono', monospace; }
.je-status.st-draft { background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); }
.je-status.st-posted { background: var(--status-success-soft); color: var(--status-success); }
.je-status.st-pending { background: var(--status-warning-soft); color: #B45309; }
.je-status.st-reversed { background: var(--brand-accent-soft); color: var(--brand-accent); }
[data-theme="dark"] .je-status.st-pending { color: #FBBF24; }
.je-num { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.je-narration { font-size: 13px; color: var(--text-primary); }
.je-narration-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.je-bank-flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: 9.5px; font-weight: 500; font-family: 'JetBrains Mono', monospace; border-radius: 8px; background: var(--brand-accent-soft); color: var(--brand-accent); margin-left: 6px; }

/* ── Reconciliation ── */
.rec-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 900px) { .rec-summary { grid-template-columns: repeat(2, 1fr); } }
.pc-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--status-warning-soft); border: 1px solid rgba(245,158,11,.25); border-radius: var(--radius-lg); margin-bottom: 20px; }
.pc-banner.is-green { background: var(--brand-primary-soft); border-color: rgba(46,212,165,.25); }
.pc-banner-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--status-warning); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pc-banner.is-green .pc-banner-icon { background: var(--brand-primary-strong); }
.pc-banner-body { flex: 1; }
.pc-banner-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: var(--text-primary); letter-spacing: -0.01em; }
.pc-banner-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.pc-banner-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .02em; margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; }
.pc-banner-meta .meta-pill { padding: 2px 7px; background: rgba(255,255,255,0.5); border-radius: 8px; }

/* ── Reconciliation workspace ── */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.acct-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: transform .12s, box-shadow .15s, border-color .12s; cursor: pointer; }
.acct-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); }
.acct-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-elevated); border-color: var(--border-strong); }
.acct-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.acct-card-left { display: flex; gap: 12px; min-width: 0; }
.acct-card-logo { width: 38px; height: 38px; border-radius: 9px; background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 500; color: var(--text-primary); flex-shrink: 0; font-size: 13px; }
.acct-card-name { font-size: 15px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.acct-card-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.acct-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px; background: var(--surface-secondary); border-radius: var(--radius-md); }
.acct-stat { display: flex; flex-direction: column; gap: 2px; }
.acct-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.acct-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.acct-card-adj { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: rgba(139,92,246,.08); border-radius: var(--radius-sm); font-size: 11.5px; color: var(--brand-accent); font-family: 'JetBrains Mono', monospace; letter-spacing: .01em; margin-bottom: 2px; }
.acct-card-adj svg { flex-shrink: 0; }
.acct-card-foot { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-default); align-items: center; }
.match-toolbar { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; box-shadow: var(--shadow-card); }
.match-tb-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.match-tb-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.match-tb-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); letter-spacing: .04em; padding-left: 16px; border-left: 1px solid var(--border-default); }
.match-tb-right { display: flex; align-items: center; gap: 8px; }
.match-balance { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 16px; box-shadow: var(--shadow-card); position: sticky; top: var(--top-nav-height); z-index: 15; }
@media (max-width: 1100px) { .match-balance { grid-template-columns: repeat(3, 1fr); row-gap: 14px; } }
.match-bal-cell { padding: 0 14px; border-right: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 4px; }
.match-bal-cell:last-child { border-right: 0; }
.match-bal-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.match-bal-value { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.match-bal-cell.is-positive .match-bal-value { color: var(--brand-primary-strong); }
.match-bal-cell.is-negative .match-bal-value { color: var(--status-danger); }
.match-bal-cell.is-target { background: var(--brand-primary-soft); border-radius: var(--radius-md); padding: 8px 14px; }
.match-bal-cell.is-target .match-bal-label, .match-bal-cell.is-target .match-bal-value { color: var(--brand-primary-strong); }
.match-bal-cell.is-diff-ok { background: var(--status-success-soft); border-radius: var(--radius-md); padding: 8px 14px; }
.match-bal-cell.is-diff-ok .match-bal-value, .match-bal-cell.is-diff-ok .match-bal-label { color: var(--status-success); }
.match-bal-cell.is-diff-bad { background: var(--status-danger-soft); border-radius: var(--radius-md); padding: 8px 14px; }
.match-bal-cell.is-diff-bad .match-bal-value, .match-bal-cell.is-diff-bad .match-bal-label { color: var(--status-danger); }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 960px) { .match-grid { grid-template-columns: 1fr; } }
.match-col { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.match-col-head { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); }
.match-col-title { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: var(--text-primary); letter-spacing: -.01em; }
.match-col-title .col-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-primary); display: flex; align-items: center; justify-content: center; color: var(--brand-primary-strong); border: 1px solid var(--border-default); }
.match-col-title.is-cr .col-icon { color: var(--status-danger); }
.match-col-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; }
.match-col-total { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.match-list { list-style: none; padding: 0; margin: 0; max-height: 520px; overflow-y: auto; }
.match-row { display: grid; grid-template-columns: 30px 90px 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background .08s; }
.match-row:last-child { border-bottom: 0; }
.match-row:hover { background: var(--surface-secondary); }
.match-row.is-cleared { background: var(--brand-primary-soft); }
.match-row-date { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); }
.match-row-desc { font-size: 13px; color: var(--text-primary); line-height: 1.35; }
.match-row-sub { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.match-row-amt { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; white-space: nowrap; text-align: right; }
.match-row.is-cleared .match-row-amt { color: var(--brand-primary-strong); }
.match-empty { padding: 30px 20px; text-align: center; color: var(--text-tertiary); font-size: 12.5px; }
.match-actions { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.match-actions-left { font-size: 12.5px; color: var(--text-secondary); }
.match-actions-left.hint-balanced { color: var(--brand-primary-strong); font-weight: 600; }
.match-actions-left.hint-variance { color: var(--status-danger); font-weight: 600; }
.match-actions-right { display: flex; gap: 8px; }

/* ── Reconciliation — Finished / Report view ── */
.fin-hero { text-align: center; padding: 40px 24px 28px; }
.fin-check { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.fin-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: 6px; }
.fin-sub { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-tertiary); letter-spacing: .02em; }
.report-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 24px; max-width: 780px; margin-left: auto; margin-right: auto; }
.report-head { text-align: center; padding: 28px 32px 20px; border-bottom: 1px solid var(--border-default); margin-bottom: 0; }
.report-brand { font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: var(--brand-primary-strong); letter-spacing: -0.01em; margin-bottom: 4px; }
.report-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: 6px; }
.report-sub { font-size: 12.5px; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; }
.report-section { padding: 20px 24px; border-bottom: 1px solid var(--border-default); }
.report-section:last-child { border-bottom: 0; }
.report-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-bottom: 14px; }
.report-stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.report-stat { display: flex; flex-direction: column; gap: 3px; }
.report-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.report-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.report-balance-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-balance-table td { padding: 5px 0; }
.report-balance-table td:last-child { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.report-balance-table tr.is-total td { font-weight: 700; border-top: 1px solid var(--border-default); padding-top: 8px; margin-top: 4px; }
.report-balance-table tr.is-ok td { color: var(--brand-primary-strong); }
.report-signature { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; }
.report-signature strong { color: var(--text-primary); }
.report-empty { text-align: center; padding: 20px; color: var(--text-tertiary); font-size: 12.5px; }

/* ── Reconciliation — Account card adj strip ── */
.acct-card-adj-strip { padding: 8px 11px; background: var(--brand-accent-soft); border-radius: var(--radius-md); font-size: 11.5px; color: var(--brand-accent); display: flex; align-items: center; gap: 6px; }

/* ── Reconciliation — Workspace adj panel ── */
.adj-panel { background: var(--surface-primary); border: 1px solid var(--brand-accent); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.adj-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.adj-panel-title { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: var(--text-primary); letter-spacing: -0.01em; }
.adj-panel-title .ttl-icon { width: 26px; height: 26px; border-radius: 6px; background: var(--brand-accent-soft); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; }
.adj-panel-total { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--brand-accent); }

/* ── Reconciliation — History table ── */
.duration-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); }
.tl-dur { display: inline-block; }
.tl-dur.fast { background: var(--status-success-soft); color: var(--status-success); }
.tl-dur.slow { background: var(--status-warning-soft); color: #B45309; }
.tl-dur.stuck { background: var(--status-danger-soft); color: var(--status-danger); }
.hist-adj-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; }
.hist-adj-pill.has-adj { background: var(--brand-accent-soft); color: var(--brand-accent); }
.hist-adj-pill.no-adj { background: var(--surface-secondary); color: var(--text-tertiary); }
.hist-acct-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: background 0.08s ease; color: var(--text-primary); }
.hist-acct-item:hover { background: var(--surface-secondary); }
.hist-acct-item .dropdown-item-check { width: 14px; height: 14px; border: 1.5px solid var(--border-strong); border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); }
.hist-acct-item.is-checked .dropdown-item-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.hist-acct-item.is-checked .dropdown-item-check::after { content: ""; width: 7px; height: 4px; border-left: 1.6px solid var(--brand-dark); border-bottom: 1.6px solid var(--brand-dark); transform: rotate(-45deg) translate(1px, -1px); display: block; }

/* ── Reconciliation — History detail report rows ── */
.report-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.report-row.is-total { font-weight: 600; border-top: 1px solid var(--border-default); padding-top: 8px; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
.report-row .lbl { color: var(--text-secondary); }
.report-row .val { font-family: 'JetBrains Mono', monospace; color: var(--text-primary); }
.report-adj-row { padding: 8px 12px; background: var(--brand-accent-soft); border-radius: 6px; margin-bottom: 6px; font-size: 12.5px; }
.report-adj-top { display: flex; justify-content: space-between; color: var(--text-primary); }
.report-adj-reason { color: var(--brand-accent); font-size: 11.5px; margin-top: 2px; font-style: italic; }

/* ── Reconciliation — Adjusting entry drawer ── */
.adj-firm-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: var(--brand-accent-soft); border-radius: var(--radius-md); font-size: 12.5px; color: var(--brand-accent); line-height: 1.5; }
.adj-firm-note svg { flex-shrink: 0; margin-top: 1px; color: var(--brand-accent); }
.adj-reco-row { display: flex; flex-wrap: wrap; gap: 6px; }
.adj-reco-chip { padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border-default); background: var(--surface-secondary); font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: all 0.12s ease; font-family: 'JetBrains Mono', monospace; }
.adj-reco-chip:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.adj-reco-chip.is-active { background: var(--brand-accent-soft); border-color: var(--brand-accent); color: var(--brand-accent); }
.track-preview { padding: 12px 14px; background: var(--surface-secondary); border-radius: var(--radius-md); font-size: 12.5px; }
.track-preview strong { display: block; color: var(--text-primary); margin-bottom: 8px; font-size: 13px; }
.track-preview ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); line-height: 1.5; }
.drawer-section { display: flex; flex-direction: column; gap: 10px; }
.drawer-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; padding-bottom: 6px; border-bottom: 1px solid var(--border-default); }
.drawer-foot-left { flex: 1; }
.drawer-foot-right { display: flex; gap: 8px; }

/* ── Staging (list) ── */
.kpi-bar { display: flex; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.kpi-item { padding: 10px 20px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border-default); }
.kpi-item:last-child { border-right: 0; }
.tab-btn { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); border: 0; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; transition: color .12s; }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--brand-primary-strong); border-bottom-color: var(--brand-primary); }
.tab-count { background: var(--surface-tertiary); color: var(--text-secondary); padding: 1px 7px; border-radius: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; }
.tab-btn.active .tab-count { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.tab-count.warn { background: rgba(239,68,68,.1); color: var(--status-danger); }
.tab-panel.active { display: flex; flex: 1; overflow: hidden; flex-direction: column; }
.search-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 6px 11px; min-width: 200px; }
.search-wrap:focus-within { border-color: var(--brand-primary); }
.search-input { border: 0; background: transparent; font-size: 12.5px; color: var(--text-primary); font-family: inherit; outline: 0; width: 100%; }
.search-input::placeholder { color: var(--text-tertiary); }
.src-btn { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; font-family: inherit; transition: all .12s; }
.src-btn:hover, .src-btn.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); }
.job-table-wrap { flex: 1; overflow-y: auto; }
.job-table-head { display: grid; grid-template-columns: 110px 130px 1fr 70px 100px 110px 120px 110px; gap: 12px; padding: 8px 22px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; position: sticky; top: 0; z-index: 5; }
.job-row { display: grid; grid-template-columns: 110px 130px 1fr 70px 100px 110px 120px 110px; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--border-default); align-items: center; transition: background .08s; cursor: pointer; }
.job-row:hover { background: var(--surface-secondary); }
.job-row:last-child { border-bottom: 0; }
.src-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px; font-size: 11.5px; font-weight: 600; }
.src-chip.wf { background: #DBEAFE; color: #1D4ED8; } .src-chip.chase { background: #FEE2E2; color: #B91C1C; }
.src-chip.stripe { background: #EDE9FE; color: #6D28D9; } .src-chip.csv { background: var(--status-warning-soft); color: #B45309; }
.src-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.status-badge.pending { background: var(--status-warning-soft); color: #B45309; }
.status-badge.ready { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.status-badge.needs-attention { background: rgba(239,68,68,.1); color: var(--status-danger); }
.status-badge.complete { background: var(--status-success-soft); color: var(--status-success); }
.status-badge.processing { background: var(--status-info-soft); color: var(--status-info); }
.confident-wrap { display: flex; align-items: center; gap: 6px; }
.confident-bar { flex: 1; height: 5px; background: var(--surface-tertiary); border-radius: 3px; overflow: hidden; }
.confident-fill { height: 100%; border-radius: 3px; background: var(--status-success); }
.confident-fill.warn { background: var(--status-warning); }
.confident-txt { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.job-desc-main { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.job-desc-sub { font-size: 11.5px; color: var(--text-tertiary); }
.job-date-main { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--text-primary); }
.job-date-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.job-amount { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; }
.job-amount.pos { color: var(--status-success); } .job-amount.neg { color: var(--status-danger); } .job-amount.mix { color: var(--text-primary); }
.job-txns { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.hist-head, .hist-row { display: grid; grid-template-columns: 120px 120px 1fr 80px 110px 120px; gap: 12px; padding: 10px 22px; border-bottom: 1px solid var(--border-default); align-items: center; }
.hist-head { background: var(--surface-secondary); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; position: sticky; top: 0; z-index: 5; }
.hist-row { transition: background .08s; cursor: pointer; }
.hist-row:hover { background: var(--surface-secondary); }

/* ── Connect Accounts ── */
.ca-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
@media (max-width: 900px) { .ca-kpi-strip { grid-template-columns: repeat(2,1fr); } }
.ca-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-card); }
.ca-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 5px; font-weight: 500; }
.ca-kpi-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.ca-kpi-value.ok { color: var(--status-success); } .ca-kpi-value.warn { color: var(--status-warning); } .ca-kpi-value.danger { color: var(--status-danger); }
.ca-kpi-sub { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }
.ca-kpi-sub strong { color: var(--text-primary); }
.ca-section { margin-bottom: 28px; }
.ca-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-default); }
.ca-section-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ca-section-icon.bank { background: #DBEAFE; color: #1D4ED8; } .ca-section-icon.cc { background: #FEF3C7; color: #92400E; }
.ca-section-icon.payment { background: #EDE9FE; color: #5B21B6; } .ca-section-icon.payroll { background: #FEE2E2; color: #991B1B; }
.ca-section-icon.csv { background: var(--surface-tertiary); color: var(--text-secondary); }
[data-theme="dark"] .ca-section-icon.bank { background: rgba(59,130,246,.18); color: #93C5FD; }
[data-theme="dark"] .ca-section-icon.cc { background: rgba(245,158,11,.18); color: #FCD34D; }
[data-theme="dark"] .ca-section-icon.payment { background: rgba(167,139,250,.18); color: #C4B5FD; }
[data-theme="dark"] .ca-section-icon.payroll { background: rgba(239,68,68,.18); color: #FCA5A5; }
.ca-section-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; color: var(--text-primary); letter-spacing: -.01em; }
.ca-section-count { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; padding: 2px 7px; border-radius: 9px; background: var(--surface-secondary); color: var(--text-tertiary); }
.ca-section-action { margin-left: auto; }
.ca-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ca-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow .15s, border-color .15s; }
.ca-card:hover { box-shadow: var(--shadow-elevated); border-color: var(--border-strong); }
.ca-card.is-error { border-color: var(--status-danger); } .ca-card.is-warning { border-color: var(--status-warning); } .ca-card.is-syncing { border-color: var(--brand-primary); }
.ca-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; }
.ca-logo { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.ca-logo.wf { background: #DBEAFE; color: #1D4ED8; } .ca-logo.chase { background: #FEF3C7; color: #92400E; }
.ca-logo.stripe { background: #EDE9FE; color: #5B21B6; } .ca-logo.gusto { background: #FEE2E2; color: #991B1B; }
.ca-logo.amex { background: #DBEAFE; color: #1E40AF; } .ca-logo.csv { background: var(--surface-secondary); color: var(--text-secondary); }
[data-theme="dark"] .ca-logo.wf { background: rgba(59,130,246,.2); color: #93C5FD; }
[data-theme="dark"] .ca-logo.chase { background: rgba(245,158,11,.2); color: #FCD34D; }
[data-theme="dark"] .ca-logo.stripe { background: rgba(167,139,250,.2); color: #C4B5FD; }
[data-theme="dark"] .ca-logo.gusto { background: rgba(239,68,68,.2); color: #FCA5A5; }
.ca-card-info { flex: 1; min-width: 0; }
.ca-card-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.ca-card-mask { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); }
.ca-card-dims { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.ca-dim-tag { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.ca-dim-sep { color: var(--border-strong); font-size: 10px; }
.ca-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.ca-badge.active { background: var(--status-success-soft); color: var(--status-success); }
.ca-badge.syncing { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.ca-badge.error { background: var(--status-danger-soft); color: var(--status-danger); }
.ca-badge.paused { background: var(--surface-secondary); color: var(--text-tertiary); border: 1px solid var(--border-default); }
.ca-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ca-stats { display: flex; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.ca-stat { flex: 1; padding: 10px 14px; text-align: center; border-right: 1px solid var(--border-default); }
.ca-stat:last-child { border-right: none; }
.ca-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1; }
.ca-stat-val.pos { color: var(--brand-primary-strong); } .ca-stat-val.neg { color: var(--status-danger); }
.ca-stat-lbl { font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; font-family: 'JetBrains Mono', monospace; }
.ca-health { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-bottom: 1px solid var(--border-default); }
.ca-health-label { font-size: 10.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.ca-health-dots { display: flex; gap: 3px; flex: 1; }
.hdot { width: 18px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.hdot.ok { background: var(--status-success); } .hdot.warn { background: var(--status-warning); } .hdot.err { background: var(--status-danger); } .hdot.skip { background: var(--border-default); }
.ca-sync-time { font-size: 10.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.ca-alert { margin: 0 18px 10px; padding: 8px 12px; border-radius: 7px; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.ca-alert.danger { background: var(--status-danger-soft); color: var(--status-danger); }
.ca-alert.warn { background: var(--status-warning-soft); color: #92400E; }
[data-theme="dark"] .ca-alert.warn { color: #FCD34D; }
.ca-actions { display: flex; align-items: center; gap: 6px; padding: 10px 14px; flex-wrap: wrap; }
.ca-actions-left { flex: 1; display: flex; gap: 4px; } .ca-actions-right { display: flex; gap: 4px; }
.ca-btn { padding: 6px 11px; border-radius: var(--radius-md); font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .12s; border: 1px solid var(--border-default); background: var(--surface-primary); color: var(--text-secondary); }
.ca-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ca-btn.primary { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); font-weight: 600; }
.ca-btn.primary:hover { background: var(--brand-primary-strong); }
.ca-btn.danger { color: var(--status-danger); border-color: transparent; }
.ca-btn.danger:hover { background: var(--status-danger-soft); border-color: var(--status-danger); }
.ca-btn.warn { color: var(--status-warning); border-color: transparent; }
.ca-btn.warn:hover { background: var(--status-warning-soft); border-color: var(--status-warning); }
.ca-add-card { background: transparent; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 28px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-align: center; transition: all .15s; min-height: 120px; }
.ca-add-card:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.ca-add-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: all .15s; }
.ca-add-card:hover .ca-add-icon { background: var(--brand-primary); color: var(--brand-dark); }
.ca-add-title { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.ca-add-sub { font-size: 12px; color: var(--text-tertiary); }
.ca-add-card:hover .ca-add-title { color: var(--brand-primary-strong); }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; display: inline-block; }

/* ── Staging Detail ── */
.sd-scroll { flex: 1; overflow-y: auto; padding: 22px 24px 100px; display: flex; flex-direction: column; gap: 16px; }
.sd-kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1100px) { .sd-kpi-strip { grid-template-columns: repeat(3,1fr); } }
.sd-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 12px 16px; box-shadow: var(--shadow-card); }
.sd-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; font-weight: 500; }
.sd-kpi-value { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; line-height: 1.1; }
.sd-kpi-value.pos { color: var(--brand-primary-strong); } .sd-kpi-value.neg { color: var(--status-danger); }
.sd-kpi-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.sd-seg { display: inline-flex; padding: 3px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); gap: 2px; }
.sd-seg-btn { padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary); border-radius: 6px; transition: all .12s; display: inline-flex; align-items: center; gap: 6px; }
.sd-seg-btn:hover { color: var(--text-primary); }
.sd-seg-btn.active { background: var(--brand-dark); color: #fff; }
.sd-seg-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 6px; border-radius: 3px; background: var(--surface-secondary); color: var(--text-tertiary); }
.sd-seg-btn.active .sd-seg-count { background: rgba(255,255,255,.12); color: #fff; }
.conf-legend { display: flex; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.conf-legend span { display: inline-flex; align-items: center; gap: 5px; }
.conf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.conf-dot.high { background: var(--status-success); } .conf-dot.med { background: var(--status-warning); } .conf-dot.low { background: var(--status-danger); }
.group-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .15s; box-shadow: var(--shadow-card); }
.group-card.open { border-color: var(--brand-primary); }
.group-card-head { display: grid; grid-template-columns: 20px 1fr auto auto 160px auto; gap: 16px; align-items: center; padding: 14px 20px; cursor: pointer; transition: background .1s; user-select: none; }
.group-card-head:hover { background: var(--surface-secondary); }
.group-acct-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; }
.group-acct-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; color: var(--text-primary); letter-spacing: -.01em; }
.group-card-meta { display: flex; gap: 12px; }
.group-meta-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.group-meta-total { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; }
.group-meta-total.pos { color: var(--brand-primary-strong); } .group-meta-total.neg { color: var(--status-danger); }
.group-toggle-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 12px; font-weight: 500; font-family: inherit; border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-primary); color: var(--text-secondary); cursor: pointer; transition: all .12s; }
.group-toggle-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.txn-table-head { display: grid; grid-template-columns: 32px 80px minmax(180px,1fr) 110px 220px 100px 120px 120px; gap: 12px; padding: 9px 20px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); align-items: center; }
.txn-table-row { display: grid; grid-template-columns: 32px 80px minmax(180px,1fr) 110px 220px 100px 120px 120px; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border-default); align-items: center; font-size: 13px; transition: background .1s; }
.txn-table-row:last-child { border-bottom: none; }
.txn-table-row:hover { background: var(--surface-secondary); }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.row-action { width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: all .12s; flex-shrink: 0; }
.row-action:hover.accept { border-color: var(--status-success); color: var(--status-success); }
.row-action:hover.modify { border-color: var(--brand-accent); color: var(--brand-accent); }
.row-action:hover.reject { border-color: var(--status-danger); color: var(--status-danger); }
.row-action.accept.on { background: var(--status-success); border-color: var(--status-success); color: #fff; }
.row-action.reject.on { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.load-more-row { padding: 10px 20px; text-align: center; font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); background: var(--surface-secondary); border-top: 1px solid var(--border-default); }
.load-more-row a { color: var(--brand-primary-strong); }
.sd-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--surface-primary); border-top: 1px solid var(--border-default); box-shadow: 0 -4px 16px rgba(11,15,30,.06); }
.sd-footer-inner { max-width: 1600px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sd-footer-status { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--text-secondary); }
.sd-footer-status strong { color: var(--text-primary); font-weight: 600; }
.sd-footer-status .sep { color: var(--border-strong); }
.sd-footer-actions { display: flex; gap: 8px; align-items: center; }

/* ── Staging Detail — group cards & transaction rows ── */
.group-head { display: grid; grid-template-columns: 20px 1fr auto auto 160px auto; gap: 16px; align-items: center; padding: 14px 20px; cursor: pointer; transition: background .1s; user-select: none; }
.group-head:hover { background: var(--surface-secondary); }
.group-card.open .group-head { border-bottom: 1px solid var(--border-default); }
.group-chevron { color: var(--text-tertiary); transition: transform .2s; flex-shrink: 0; }
.group-card.open .group-chevron { transform: rotate(90deg); color: var(--brand-primary-strong); }
.group-name-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; }
.group-name-label { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; color: var(--text-primary); letter-spacing: -.01em; }
.group-txn-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.group-total { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; }
.group-total.pos { color: var(--brand-primary-strong); } .group-total.neg { color: var(--status-danger); }
.group-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.group-bulk-actions { display: flex; gap: 6px; justify-content: flex-end; }
.btn-mini { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 12px; font-weight: 500; font-family: inherit; border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-primary); color: var(--text-secondary); cursor: pointer; transition: all .12s; white-space: nowrap; }
.btn-mini:hover { border-color: var(--border-strong); color: var(--text-primary); }
.btn-mini.accept:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.btn-mini.reject:hover { background: var(--status-danger-soft); border-color: var(--status-danger); color: var(--status-danger); }
.group-body { display: none; }
.group-card.open .group-body { display: block; }
.txn-row { display: grid; grid-template-columns: 32px 80px minmax(180px,1fr) 110px 1fr 80px; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border-default); align-items: center; font-size: 13px; transition: background .1s; }
.txn-row:last-child { border-bottom: none; }
.txn-row:hover { background: var(--surface-secondary); }
.txn-row.is-accepted { background: rgba(46,212,165,.05); }
.txn-row.is-rejected { background: rgba(239,68,68,.04); opacity: .6; }
.txn-check { width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 3px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .1s; }
.txn-check.on { background: var(--brand-primary); border-color: var(--brand-primary); }
.txn-date { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.txn-desc-main { font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.txn-desc-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.txn-amount { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }
.txn-amount.pos { color: var(--brand-primary-strong); } .txn-amount.neg { color: var(--status-danger); }
.acct-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--brand-primary); background: var(--brand-primary-soft); border-radius: var(--radius-md); font-size: 12px; color: var(--brand-primary-strong); max-width: 100%; min-width: 0; cursor: default; }
.acct-pill.uncat { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-secondary); }
.acct-pill-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; opacity: .7; flex-shrink: 0; }
.acct-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dup-alert { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--status-warning-soft); border: 1px solid var(--status-warning); border-radius: var(--radius-md); font-size: 13px; color: var(--text-primary); }
.dup-alert svg { flex-shrink: 0; color: var(--status-warning); }

/* ── Staging Detail — filters, sort, bulk, pagination ── */
.sd-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sd-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border-default); }
.sd-filter-group { display: flex; gap: 3px; }
.sd-filter-count { margin-left: auto; font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.sd-date-input { height: 32px; padding: 0 9px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 12.5px; font-family: inherit; background: var(--surface-primary); color: var(--text-primary); outline: none; }
.sd-date-input:focus { border-color: var(--brand-primary); }
.sortable-col { cursor: pointer; user-select: none; white-space: nowrap; transition: color .1s; }
.sortable-col:hover { color: var(--text-primary); }
.sortable-col.sorted { color: var(--brand-primary-strong); }
.sort-arrow { font-size: 10px; }
.txn-row.is-selected { background: var(--brand-primary-soft); }
.sd-bulk-bar { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--brand-primary-soft); border: 1px solid var(--brand-primary); border-radius: var(--radius-md); flex-wrap: wrap; }
.sd-bulk-count { font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.sd-bulk-count strong { color: var(--brand-primary-strong); font-weight: 600; }
.sd-bulk-cat-select { height: 32px; padding: 0 9px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 12.5px; font-family: inherit; background: var(--surface-primary); color: var(--text-primary); outline: none; cursor: pointer; }
.txn-pagination { display: flex; align-items: center; gap: 4px; padding: 10px 16px; background: var(--surface-secondary); }
.pg-btn { min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-secondary); font-size: 12.5px; font-family: 'JetBrains Mono', monospace; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .1s; }
.pg-btn:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary-strong); }
.pg-btn.active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.pg-ellipsis { padding: 0 4px; color: var(--text-tertiary); font-size: 12px; }
.pg-info { margin-left: 8px; font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); white-space: nowrap; }
.conf-legend { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.conf-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ── Period Close ── */
.pc-hero { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 24px; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pc-hero-left { flex: 1; min-width: 0; }
.pc-hero-period { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-primary-strong); margin-bottom: 4px; }
.pc-hero-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: 3px; }
.pc-hero-sub { font-size: 13px; color: var(--text-secondary); }
.pc-hero-metrics { display: flex; gap: 28px; flex-shrink: 0; }
.pc-metric { text-align: center; }
.pc-metric-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: 3px; }
.pc-metric-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px; color: var(--text-primary); }
.pc-metric-value.ok { color: var(--status-success); } .pc-metric-value.warn { color: var(--status-warning); } .pc-metric-value.accent { color: var(--brand-primary-strong); }
.pc-progress-wrap { margin-bottom: 24px; }
.pc-track { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.pc-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 80px; position: relative; cursor: pointer; }
.pc-step-connector { position: absolute; top: 18px; left: 50%; right: -50%; height: 2px; background: var(--border-default); z-index: 0; }
.pc-step:last-child .pc-step-connector { display: none; }
.pc-step-connector.done { background: var(--brand-primary); }
.pc-step-connector.active { background: linear-gradient(90deg, var(--brand-primary), var(--border-default)); }
.pc-step-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; border: 2px solid var(--border-default); background: var(--surface-primary); color: var(--text-tertiary); position: relative; z-index: 1; transition: all .2s; flex-shrink: 0; }
.pc-step.done .pc-step-num { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.pc-step.active .pc-step-num { background: var(--status-warning); border-color: var(--status-warning); color: #fff; box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.pc-step.blocked .pc-step-num { background: var(--status-danger-soft); border-color: var(--status-danger); color: var(--status-danger); }
.pc-step-label { font-size: 11px; color: var(--text-tertiary); text-align: center; margin-top: 6px; line-height: 1.3; max-width: 72px; font-weight: 500; }
.pc-step.done .pc-step-label { color: var(--brand-primary-strong); }
.pc-step.active .pc-step-label { color: var(--status-warning); font-weight: 600; }
.pc-stages { display: flex; flex-direction: column; gap: 12px; }
.pc-stage-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow .15s; }
.pc-stage-card:hover { box-shadow: var(--shadow-elevated); }
.pc-stage-card.is-active { border-color: var(--status-warning); box-shadow: 0 0 0 2px rgba(245,158,11,.1), var(--shadow-card); }
.pc-stage-card.is-done { border-color: rgba(46,212,165,.3); }
.pc-stage-card-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; transition: background .1s; }
.pc-stage-card-head:hover { background: var(--surface-secondary); }
.pc-stage-num { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; background: var(--surface-secondary); color: var(--text-tertiary); }
.pc-stage-card.is-done .pc-stage-num { background: var(--brand-primary); color: var(--brand-dark); }
.pc-stage-card.is-active .pc-stage-num { background: var(--status-warning); color: #fff; }
.pc-stage-body { padding: 12px 20px; }
.pc-stage-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; color: var(--text-primary); margin-bottom: 2px; }
.pc-stage-meta { font-size: 12.5px; color: var(--text-secondary); }
.pc-stage-badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.pc-stage-badge.done { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.pc-stage-badge.active { background: var(--status-warning-soft); color: #92400E; }
.pc-stage-badge.blocked { background: var(--status-danger-soft); color: var(--status-danger); }
.pc-stage-badge.pending { background: var(--surface-secondary); color: var(--text-tertiary); }
[data-theme="dark"] .pc-stage-badge.active { color: #FCD34D; }
.pc-stage-blocking { font-size: 12.5px; color: var(--status-danger); }
.pc-blocking-link { color: var(--brand-primary-strong); text-decoration: none; }
.pc-blocking-link:hover { text-decoration: underline; }
.pc-stage-stats { display: flex; gap: 20px; margin-top: 10px; }
.pc-stage-stat { display: flex; flex-direction: column; gap: 2px; }
.pc-stage-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.pc-stage-stat-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.pc-approval-chain { display: flex; align-items: center; gap: 0; margin-bottom: 16px; overflow-x: auto; }
.pc-approver { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px; text-align: center; flex: 1; min-width: 90px; }
.pc-approver-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.pc-approver-name { font-size: 11.5px; font-weight: 500; color: var(--text-primary); }
.pc-approver-role { font-size: 10.5px; color: var(--text-tertiary); }
.pc-approver-status { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; margin-top: 2px; }
.pc-approver-status.done { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.pc-approver-status.active { background: var(--status-warning-soft); color: #92400E; }
.pc-approver-status.pending { background: var(--surface-secondary); color: var(--text-tertiary); }
[data-theme="dark"] .pc-approver-status.active { color: #FCD34D; }
.pc-chain-arrow { color: var(--text-tertiary); flex-shrink: 0; padding: 0 2px; }
.pc-chain-arrow.done { color: var(--brand-primary); }
.pc-hist-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-card); }
.pc-hist-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 5px; }
.pc-hist-tile-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.pc-hist-tile-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.pc-hist-head { display: grid; grid-template-columns: 110px 100px 100px 60px 120px 120px 100px 1fr; gap: 0; padding: 9px 20px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); align-items: center; }
.pc-hist-row { display: grid; grid-template-columns: 110px 100px 100px 60px 120px 120px 100px 1fr; gap: 0; padding: 12px 20px; border-bottom: 1px solid var(--border-default); align-items: center; font-size: 13px; transition: background .08s; }
.pc-hist-row:last-child { border-bottom: 0; }
.pc-hist-row:hover { background: var(--surface-secondary); }
.pc-hist-period { font-family: 'Fraunces', serif; font-weight: 500; font-size: 14px; color: var(--text-primary); }
.pc-hist-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); }
.pc-hist-days { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pc-hist-days.fast { color: var(--status-success); } .pc-hist-days.slow { color: var(--status-warning); }
.pc-hist-actor { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.pc-hist-av { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pc-hist-status { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.pc-hist-status.locked { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.pc-hist-status.amended { background: var(--status-warning-soft); color: #92400E; }
.pc-hist-reports { display: flex; align-items: center; gap: 6px; }
.pc-hist-report-btn { font-size: 11.5px; color: var(--brand-primary-strong); cursor: pointer; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(46,212,165,.3); background: var(--brand-primary-soft); transition: all .12s; white-space: nowrap; }
.pc-hist-report-btn:hover { background: var(--brand-primary); color: var(--brand-dark); }

/* ── Period Close — stage cards (prototype class names) ── */
.pc-stage { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow .15s; }
.pc-stage:hover { box-shadow: var(--shadow-elevated); }
.pc-stage.is-active { border-color: var(--status-warning); box-shadow: 0 0 0 2px rgba(245,158,11,.1), var(--shadow-card); }
.pc-stage.is-done { border-color: rgba(46,212,165,.3); }
.pc-stage.is-blocked { border-color: var(--status-danger); }
.pc-stage-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; transition: background .1s; }
.pc-stage-head:hover { background: var(--surface-secondary); }
.pc-stage.is-open .pc-stage-head { border-bottom: 1px solid var(--border-default); }
.pc-stage-info { flex: 1; min-width: 0; }
.pc-stage-sub { font-size: 12.5px; color: var(--text-secondary); }
.pc-stage-chevron { color: var(--text-tertiary); transition: transform .15s; flex-shrink: 0; }
.pc-stage.is-open .pc-stage-chevron { transform: rotate(90deg); }
.pc-stage-body { display: none; padding: 16px 20px; }
.pc-stage.is-open .pc-stage-body { display: block; }
.pc-checklist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pc-check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-secondary); transition: background .1s; }
.pc-check-item.is-done { background: var(--status-success-soft); }
.pc-check-box { width: 18px; height: 18px; border: 2px solid var(--border-strong); border-radius: 4px; flex-shrink: 0; cursor: pointer; position: relative; margin-top: 1px; transition: all .12s; }
.pc-check-box::after { content: ''; display: none; position: absolute; left: 3px; top: 0px; width: 6px; height: 10px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(40deg); }
.pc-check-item.is-done .pc-check-box { background: var(--status-success); border-color: var(--status-success); }
.pc-check-item.is-done .pc-check-box::after { display: block; }
.pc-check-body { flex: 1; }
.pc-check-title { font-size: 13.5px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.pc-check-item.is-done .pc-check-title { color: var(--status-success); text-decoration: line-through; text-decoration-color: rgba(16,185,129,.4); }
.pc-check-desc { font-size: 12px; color: var(--text-secondary); }
.pc-task-table { display: flex; flex-direction: column; margin-bottom: 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-primary); }
.pc-task-row { display: grid; grid-template-columns: 2.2fr 110px 1.3fr 1fr 140px; gap: 14px; padding: 10px 14px; align-items: center; border-bottom: 1px solid var(--border-default); font-size: 13px; }
.pc-task-row:last-child { border-bottom: 0; }
.pc-task-row.is-header { background: var(--surface-secondary); padding: 8px 14px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.pc-task-row.is-done .pc-task-name { color: var(--status-success); text-decoration: line-through; text-decoration-color: rgba(16,185,129,.4); }
.pc-task-name { color: var(--text-primary); font-weight: 500; }
.pc-task-cell { color: var(--text-secondary); }
@media (max-width: 900px) {
  /* Narrow: keep Task / Assigned / Status; hide Period + Action. */
  .pc-task-row { grid-template-columns: 1.6fr 1fr 100px; }
  .pc-task-row > :nth-child(2),
  .pc-task-row > :nth-child(5) { display: none; }
  .pc-task-row.is-header > :nth-child(2),
  .pc-task-row.is-header > :nth-child(5) { display: none; }
}
.pc-stage-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-default); margin-top: 12px; flex-wrap: wrap; gap: 8px; }
.pc-owners { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.pc-owner-av { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pc-stage-actions { display: flex; gap: 6px; }
.pc-progress { height: 6px; background: var(--surface-tertiary); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.pc-progress-fill { height: 100%; border-radius: 3px; background: var(--status-warning); transition: width .4s ease; }
.pc-stage.is-done .pc-progress-fill { background: var(--brand-primary); }
.pc-blocker { display: flex; gap: 10px; padding: 10px 14px; background: var(--status-danger-soft); border: 1px solid rgba(239,68,68,.25); border-radius: var(--radius-md); font-size: 12.5px; color: var(--status-danger); margin-bottom: 12px; }
.pc-step-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; border: 2px solid var(--border-default); background: var(--surface-primary); color: var(--text-tertiary); position: relative; z-index: 1; transition: all .2s; flex-shrink: 0; }
.pc-step.done .pc-step-icon { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.pc-step.active .pc-step-icon { background: var(--status-warning); border-color: var(--status-warning); color: #fff; box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.pc-step.blocked .pc-step-icon { background: var(--status-danger-soft); border-color: var(--status-danger); color: var(--status-danger); }
.pc-step.blocked .pc-step-label { color: var(--status-danger); }

/* ── Reports ── */
.rpt-sel { height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; color: var(--text-primary); background: var(--surface-primary); outline: none; cursor: pointer; appearance: auto; }
.rpt-sel:focus { border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.rpt-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 16px; }
.rpt-toolbar-left { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.rpt-toolbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rpt-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; }
.rpt-sum-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-card); }
.rpt-sum-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.rpt-sum-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.rpt-sum-value.is-positive { color: var(--brand-primary-strong); } .rpt-sum-value.is-negative { color: var(--status-danger); }
.rpt-sum-sub { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }
.rpt { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); font-size: 13.5px; }
.rpt-head { padding: 22px 28px 14px; border-bottom: 1px solid var(--border-default); }
.rpt-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; letter-spacing: -.01em; color: var(--text-primary); margin-bottom: 3px; }
.rpt-entity { font-size: 12.5px; color: var(--text-secondary); }
.rpt-period { font-size: 12.5px; color: var(--text-tertiary); margin-top: 1px; }
.rpt-cols-head { display: grid; grid-template-columns: 70px 1fr 130px 130px 80px; gap: 0; padding: 8px 28px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.tb-cols-head { grid-template-columns: 70px 1fr 130px 130px; }
.rpt-cols-head .right { text-align: right; }
.rpt-section-header { padding: 10px 28px 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); background: var(--surface-secondary); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); margin-top: 4px; }
.rpt-line { display: grid; grid-template-columns: 70px 1fr 130px 130px 80px; gap: 0; padding: 8px 28px; border-bottom: 1px solid var(--border-default); transition: background .08s; }
.rpt-line:hover { background: var(--surface-secondary); }
.rpt-line:last-of-type { border-bottom: none; }
.tb-line { grid-template-columns: 70px 1fr 130px 130px; }
.rpt-code { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); padding-top: 1px; }
.rpt-name { color: var(--text-primary); }
.rpt-name.is-indent { padding-left: 14px; color: var(--text-secondary); }
.rpt-amt { font-family: 'JetBrains Mono', monospace; font-size: 13px; text-align: right; color: var(--text-primary); }
.rpt-amt.prev { color: var(--text-tertiary); }
.rpt-delta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; text-align: right; }
.rpt-delta.is-up { color: var(--status-success); } .rpt-delta.is-down { color: var(--status-danger); }
.rpt-subtotal { display: grid; grid-template-columns: 70px 1fr 130px 130px 80px; gap: 0; padding: 9px 28px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); border-top: 1px solid var(--border-strong); font-weight: 600; }
.rpt-total { display: grid; grid-template-columns: 70px 1fr 130px 130px 80px; gap: 0; padding: 11px 28px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); border-top: 2px solid var(--border-strong); font-weight: 700; }
.rpt-total.is-final { background: var(--brand-primary-soft); border-top: 2px solid var(--brand-primary); border-bottom: none; }
.rpt-total.is-final .rpt-name { color: var(--brand-primary-strong); }
.rpt-total.is-final .rpt-amt { color: var(--brand-primary-strong); }
.rpt-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 28px; background: var(--surface-secondary); border-top: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); }
.rpt-index-group-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); padding: 10px 0 6px; font-weight: 600; }
.rpt-index-list { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.rpt-index-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background .1s; }
.rpt-index-row:last-child { border-bottom: 0; }
.rpt-index-row:hover { background: var(--surface-secondary); }
.rpt-index-row:hover .rpt-index-arrow { color: var(--brand-primary-strong); transform: translateX(3px); }
.rpt-index-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rpt-index-body { flex: 1; min-width: 0; }
.rpt-index-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.rpt-index-desc { font-size: 12.5px; color: var(--text-secondary); }
.rpt-index-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.rpt-index-badge { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.rpt-index-badge.ok { background: var(--status-success-soft); color: var(--status-success); }
.rpt-index-badge.warn { background: var(--status-warning-soft); color: #92400E; }
.rpt-index-badge.info { background: var(--status-info-soft); color: var(--status-info); }
[data-theme="dark"] .rpt-index-badge.warn { color: #FCD34D; }
.rpt-index-period { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.rpt-index-arrow { color: var(--text-tertiary); flex-shrink: 0; transition: transform .15s, color .15s; }

/* ── Owner Report ── */
.send-bar { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 20px; display: flex; align-items: center; gap: 12px; margin-bottom: 24px; box-shadow: var(--shadow-card); }
.send-bar-left { flex: 1; min-width: 0; }
.send-bar-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.send-bar-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.send-bar-actions { display: flex; align-items: center; gap: 8px; }
.email-preview { background: var(--surface-secondary); border-radius: var(--radius-xl); padding: 24px; }
.email-frame { max-width: 640px; margin: 0 auto; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 32px rgba(11,15,30,.12); font-family: 'Work Sans', sans-serif; }
[data-theme="dark"] .email-frame { background: #1a2235; box-shadow: 0 4px 32px rgba(0,0,0,.4); }
.email-header { background: linear-gradient(135deg, #0B0F1E 0%, #1a2440 100%); padding: 36px 40px 32px; }
.email-header-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.email-header-logo-text { color: #fff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.email-header-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #2ED4A5; margin-bottom: 8px; }
.email-header-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 28px; letter-spacing: -.02em; color: #fff; line-height: 1.2; margin-bottom: 6px; }
.email-header-sub { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.5; }
.email-score-row { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.email-score-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(46,212,165,.15); border: 1px solid rgba(46,212,165,.3); border-radius: 100px; padding: 8px 16px; }
.email-score-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #2ED4A5; letter-spacing: .06em; text-transform: uppercase; }
.email-score-val { font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; color: #2ED4A5; line-height: 1; }
.email-score-sub { font-size: 13px; color: rgba(255,255,255,.5); }
.email-body { padding: 36px 40px; }
.email-section { margin-bottom: 32px; }
.email-section-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; margin-bottom: 14px; }
.email-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.email-kpi { background: #F8FAFC; border-radius: 12px; padding: 16px 18px; border: 1px solid #E2E8F0; }
[data-theme="dark"] .email-kpi { background: #1F2937; border-color: rgba(255,255,255,.08); }
.email-kpi-label { font-size: 11.5px; color: #64748B; margin-bottom: 5px; font-weight: 500; }
.email-kpi-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: #0B0F1E; letter-spacing: -.02em; line-height: 1; margin-bottom: 3px; }
[data-theme="dark"] .email-kpi-value { color: #F9FAFB; }
.email-kpi-value.green { color: #14B88A; } .email-kpi-value.red { color: #EF4444; }
.email-kpi-change { font-size: 12px; }
.email-kpi-change.up { color: #14B88A; } .email-kpi-change.down { color: #EF4444; } .email-kpi-change.flat { color: #94A3B8; }

/* ── Audit Trail ── */
.audit-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.audit-sel { height: 34px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; color: var(--text-primary); background: var(--surface-primary); outline: none; cursor: pointer; }
.audit-sel:focus { border-color: var(--brand-primary); }
.audit-search { flex: 1; min-width: 200px; height: 34px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; color: var(--text-primary); background: var(--surface-primary); outline: none; }
.audit-search:focus { border-color: var(--brand-primary); }
.audit-tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
.audit-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-card); }
.audit-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 5px; }
.audit-tile-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.audit-tile-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.audit-table-wrap { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.audit-head { display: grid; grid-template-columns: 44px 160px 100px minmax(0,1fr) 120px 140px 120px; gap: 0; padding: 9px 20px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); align-items: center; }
.audit-row { display: grid; grid-template-columns: 44px 160px 100px minmax(0,1fr) 120px 140px 120px; gap: 0; padding: 11px 20px; border-bottom: 1px solid var(--border-default); align-items: center; font-size: 13px; transition: background .08s; cursor: pointer; }
.audit-row:last-child { border-bottom: 0; }
.audit-row:hover { background: var(--surface-secondary); }
.audit-ts { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); }
.audit-actor { display: flex; align-items: center; gap: 7px; }
.audit-actor-av { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; }
.audit-actor-name { font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.audit-event { font-size: 13px; color: var(--text-primary); }
.audit-event-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.audit-entity { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.audit-type { display: inline-flex; align-items: center; gap: 5px; }
.audit-type-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.type-create { color: var(--status-success); } .type-update { color: var(--brand-primary-strong); }
.type-delete { color: var(--status-danger); } .type-review { color: #7C3AED; }
.type-approve { color: #F59E0B; } .type-lock { color: var(--text-secondary); } .type-system { color: var(--text-tertiary); }
.dot-create { background: var(--status-success); } .dot-update { background: var(--brand-primary-strong); }
.dot-delete { background: var(--status-danger); } .dot-review { background: #7C3AED; }
.dot-approve { background: #F59E0B; } .dot-lock { background: var(--text-secondary); } .dot-system { background: var(--text-tertiary); }
.audit-hash { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-tertiary); letter-spacing: .03em; cursor: pointer; }
.audit-hash:hover { color: var(--brand-primary-strong); }
.audit-foot { padding: 10px 20px; background: var(--surface-secondary); border-top: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); }
.audit-pg { display: flex; align-items: center; gap: 6px; }
.audit-pg-btn { width: 28px; height: 28px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all .12s; font-size: 12px; }
.audit-pg-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.audit-pg-btn.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); font-weight: 700; }

/* ── Transaction page layout helpers ── */
/* portal-main may have responsive padding — pull these full-bleed strips out */
.portal-main > .page-toolbar,
.portal-main > .tab-strip,
.portal-main > .bank-strip,
.portal-main > .filter-bar,
.portal-main > .bulk-bar,
.portal-main > .tx-table-wrap {
    margin-left: calc(-1 * var(--portal-main-pad, 0px));
    margin-right: calc(-1 * var(--portal-main-pad, 0px));
}
.page-toolbar { padding: 10px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; background: transparent; flex-shrink: 0; overflow: hidden; }
.page-title-area { flex: 1; min-width: 0; }
.page-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 2px; white-space: nowrap; }
.page-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-bar { padding: 10px 24px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface-secondary); flex-shrink: 0; }
.filter-select { padding: 7px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-secondary); font-family: inherit; cursor: pointer; }
.filter-select:focus { outline: 0; border-color: var(--brand-primary); }
.filter-dot { width: 7px; height: 7px; border-radius: 50%; }
.kpi-item-label { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.kpi-item-value { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.kpi-item-sub { font-size: 10px; color: var(--text-secondary); }
.kpi-item.is-danger .kpi-item-value { color: var(--status-danger); }
.kpi-item.is-warn .kpi-item-value { color: #B45309; }
.kpi-item.is-good .kpi-item-value { color: var(--status-success); }
.bulk-count { font-size: 13px; font-weight: 600; color: var(--brand-primary); font-family: 'JetBrains Mono', monospace; }
.bulk-actions { display: flex; gap: 6px; margin-left: auto; }
.btn-bulk { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); cursor: pointer; font-family: inherit; transition: all .12s; }
.btn-bulk:hover { background: rgba(255,255,255,.2); }
.btn-bulk.is-primary { background: var(--brand-primary); color: var(--brand-dark); border-color: var(--brand-primary); }
.btn-bulk-close { background: transparent; border: 0; color: rgba(255,255,255,.5); cursor: pointer; padding: 4px; display: flex; align-items: center; }
.btn-bulk-close:hover { color: #fff; }

/* ── Transactions — standalone bulk bar (outside .client-portal-page) ── */
.bulk-bar { display: none; align-items: center; padding: 10px 18px; background: var(--brand-dark); color: #fff; border-bottom: 1px solid var(--border-default); flex-shrink: 0; gap: 12px; }
.bulk-bar.visible { display: flex; }

/* ── Bank strip ── */
.bank-strip { display: flex; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); overflow-x: auto; flex-shrink: 0; }
.bk-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; min-width: 185px; cursor: pointer; transition: border-color .12s; flex-shrink: 0; }
.bk-card:hover, .bk-card.active { border-color: var(--brand-primary); }
.bk-card.bwarn { border-left: 3px solid var(--status-warning); }
.bk-card.bdanger { border-left: 3px solid var(--status-danger); }
.bk-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bk-card-ident { display: flex; align-items: center; gap: 8px; }
.bk-card-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 8px; flex-shrink: 0; background: var(--surface-secondary); color: var(--text-secondary); }
.bk-card-icon.wf     { background: #DBEAFE; color: #1D4ED8; }
.bk-card-icon.chase  { background: #FEE2E2; color: #B91C1C; }
.bk-card-icon.stripe { background: #EDE9FE; color: #6D28D9; }
.bk-card-icon.gusto  { background: #FEF3C7; color: #B45309; }
.bk-card-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.bk-card-mask { font-size: 10.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.bk-dot { width: 7px; height: 7px; border-radius: 50%; }
.bk-dot.ok { background: var(--status-success); }
.bk-dot.warn { background: var(--status-warning); }
.bk-dot.danger { background: var(--status-danger); }
.bk-card-amount { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.bk-card-amount.pos { color: var(--status-success); }
.bk-card-amount.neg { color: var(--status-danger); }
.bk-card-txn { font-size: 11px; color: var(--text-tertiary); margin-bottom: 6px; }
.bk-card-stats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.bk-stat { font-size: 11px; color: var(--text-tertiary); }
.bk-stat.ok   { color: var(--status-success); }
.bk-stat.warn { color: #B45309; font-weight: 600; }
.bk-alert { font-size: 11px; font-weight: 600; color: var(--status-warning); margin-top: 4px; }

/* ── Transaction progress bar ── */
.tx-prog { display: flex; align-items: center; gap: 6px; }
.tx-prog-bar { width: 36px; height: 4px; background: var(--surface-tertiary); border-radius: 2px; overflow: hidden; }
.tx-prog-fill { height: 100%; border-radius: 2px; background: var(--brand-primary); }
.tx-prog-fill.done { background: var(--status-success); }
.tx-prog-fill.warn { background: var(--status-warning); }
.tx-prog-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-secondary); }

/* ── Source badge ── */
.src-badge { display: inline-flex; padding: 2px 6px; border-radius: 3px; font-size: 9.5px; font-family: 'JetBrains Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.src-badge.bk { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.src-badge.ai { background: rgba(167,139,250,.15); color: #6D28D9; }
.src-badge.client { background: var(--status-info-soft); color: var(--status-info); }
.src-badge.csv { background: var(--status-warning-soft); color: #B45309; }

/* ── Review check & flag ── */
.review-check { width: 17px; height: 17px; border: 1.5px solid var(--border-strong); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); transition: all .12s; margin: 0 auto; }
.review-check.on { background: var(--status-success); border-color: var(--status-success); }
.review-check.on::after { content: ''; display: block; width: 7px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }
.flag-btn { background: transparent; border: 0; cursor: pointer; color: var(--border-strong); padding: 3px; display: flex; align-items: center; border-radius: 4px; transition: all .12s; }
.flag-btn:hover { color: var(--status-danger); }
.flag-btn.on { color: var(--status-danger); }

/* ── Column picker ── */
.col-picker-wrap { position: relative; }
.col-picker-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); width: 210px; padding: 12px; display: none; }
.col-picker-panel.open { display: block; }
.col-picker-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); font-weight: 700; margin-bottom: 8px; }

/* ── Filter drawer (fd-*) ── */
.fd-overlay { position: fixed; inset: 0; background: rgba(11,15,30,.4); backdrop-filter: blur(2px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s; }
.fd-overlay.open { opacity: 1; pointer-events: auto; }
.fd-drawer { position: fixed; top: 0; right: 0; width: 340px; max-width: 95vw; height: 100vh; background: var(--surface-primary); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-drawer); z-index: 300; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s; }
.fd-drawer.open { transform: translateX(0); }
.fd-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--border-default); display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; }
.fd-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 3px; }
.fd-title { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; }
.fd-close { width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.fd-close:hover { background: var(--surface-secondary); }
.fd-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.fd-section { margin-bottom: 18px; }
.fd-section-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 9px; }
.fd-input { width: 100%; padding: 7px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.fd-input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.fd-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.fd-range-sep { color: var(--text-tertiary); text-align: center; }
.fd-check-list { display: flex; flex-direction: column; gap: 5px; }
.fd-check-item { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--text-primary); padding: 3px 0; }
.fd-check-item input { width: 14px; height: 14px; accent-color: var(--brand-primary); cursor: pointer; }
.fd-foot { padding: 12px 20px; border-top: 1px solid var(--border-default); display: flex; gap: 8px; flex-shrink: 0; }
.fd-foot .btn { flex: 1; justify-content: center; }

/* ── Receipt drawer (rdw-*) ── */
.rdw-overlay { position: fixed; inset: 0; background: rgba(11,15,30,.4); backdrop-filter: blur(2px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s; }
.rdw-overlay.open { opacity: 1; pointer-events: auto; }
.rdw-drawer { position: fixed; top: 0; right: 0; width: 360px; max-width: 95vw; height: 100vh; background: var(--surface-primary); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-drawer); z-index: 300; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s; }
.rdw-drawer.open { transform: translateX(0); }
.rdw-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.rdw-title { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; color: var(--text-primary); }
.rdw-close { width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.rdw-close:hover { background: var(--surface-secondary); }
.rdw-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.rdw-zone { border: 2px dashed var(--border-default); border-radius: var(--radius-md); padding: 28px; text-align: center; cursor: pointer; transition: all .12s; background: var(--surface-secondary); margin-bottom: 14px; }
.rdw-zone:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.rdw-zone-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.rdw-zone-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.rdw-zone-sub { font-size: 12px; color: var(--text-secondary); }
.rdw-foot { padding: 12px 20px; border-top: 1px solid var(--border-default); display: flex; gap: 8px; flex-shrink: 0; }
.rdw-foot .btn { flex: 1; justify-content: center; }

/* ── Transaction detail drawer (prototype pattern: fixed + opacity/translate toggle) ── */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,.4); z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; backdrop-filter: blur(2px); }
.drawer { position: fixed; top: 0; right: 0; width: 900px; max-width: 96vw; height: 100vh; background: var(--surface-primary); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-drawer); z-index: 400; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; }
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 18px 22px 16px; border-bottom: 1px solid var(--border-default); display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; }
.drawer-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 4px; }
.drawer-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; line-height: 1.25; }
.drawer-close { width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; }
.drawer-close:hover { background: var(--surface-secondary); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 0; }
.drawer-section { margin-bottom: 20px; }
.drawer-section-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 10px; }
.drawer-meta-grid { display: grid; grid-template-columns: 100px 1fr; gap: 5px 12px; font-size: 12.5px; }
.drawer-meta-grid dt { color: var(--text-tertiary); font-size: 11.5px; align-self: center; }
.drawer-meta-grid dd { color: var(--text-primary); font-weight: 500; margin: 0; align-self: center; }
.drawer-field { margin-bottom: 12px; }
.drawer-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.drawer-field-input { width: 100%; padding: 8px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.drawer-field-input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.drawer-actions { padding: 14px 22px; border-top: 1px solid var(--border-default); display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.drawer-actions .btn { flex: 1; justify-content: center; }
/* History timeline */
.tx-history { display: flex; flex-direction: column; gap: 0; }
.tx-history-item { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
.tx-history-item:last-child { padding-bottom: 0; }
.tx-history-item::before { content: ''; position: absolute; left: 15px; top: 30px; bottom: 0; width: 1px; background: var(--border-default); }
.tx-history-item:last-child::before { display: none; }
.tx-history-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-secondary); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; color: var(--text-secondary); }
.tx-history-icon.green { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #16A34A; }
.tx-history-icon.blue { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.3); color: #6366F1; }
.tx-history-icon.ai { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.3); color: #7C3AED; }
.tx-history-icon.red { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.3); color: var(--status-danger); }
.tx-history-empty { font-size: 12px; color: var(--text-tertiary); padding: 6px 0; }
.tx-history-content { flex: 1; min-width: 0; }
.tx-history-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tx-history-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.tx-history-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; }
/* Actions panel */
.drawer-action-list { display: flex; flex-direction: column; gap: 2px; }
.drawer-action-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: var(--radius-md); background: transparent; border: 0; font-size: 13px; color: var(--text-primary); cursor: pointer; text-align: left; transition: background 0.12s ease; }
.drawer-action-btn:hover { background: var(--surface-secondary); }
.drawer-action-btn.is-danger { color: var(--status-danger); }
.drawer-action-btn.is-danger:hover { background: rgba(239,68,68,.08); }
.drawer-action-btn svg { flex-shrink: 0; color: var(--text-tertiary); }
.drawer-action-btn.is-danger svg { color: var(--status-danger); }
/* Inline expand row action buttons — bordered card style matching prototype */
.tx-action-list { display: flex; flex-direction: column; gap: 4px; }
.tx-act-btn { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-primary); font-size: 12.5px; font-weight: 500; color: var(--text-primary); cursor: pointer; font-family: inherit; transition: all 0.12s; text-align: left; text-decoration: none; width: 100%; box-sizing: border-box; }
.tx-act-btn:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.tx-act-btn svg { color: var(--text-tertiary); flex-shrink: 0; }
.tx-act-btn:hover svg { color: var(--brand-primary-strong); }
.tx-act-btn.is-danger { color: var(--status-danger); border-color: var(--status-danger-soft); }
.tx-act-btn.is-danger:hover { background: var(--status-danger-soft); border-color: var(--status-danger); }
.tx-act-btn.is-danger svg { color: var(--status-danger); }
/* Notes textarea */
.drawer-notes-area { width: 100%; min-height: 72px; padding: 9px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; resize: vertical; }
.drawer-notes-area:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }

/* ── Modal (prototype pattern: display:none → display:flex toggle) ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,.5); display: none; align-items: center; justify-content: center; z-index: 500; padding: 20px; }
.modal-backdrop.open { display: flex; backdrop-filter: blur(2px); }
.modal { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 26px; width: 100%; max-width: 480px; box-shadow: 0 24px 60px rgba(0,0,0,.18); max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 5px; }
.modal-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; margin-bottom: 8px; }
.modal-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 16px; }
.modal-form-row { margin-bottom: 13px; }
.modal-form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; }
.modal-form-input { width: 100%; padding: 8px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.modal-form-input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-default); }

/* ── COA — Filter dropdown menus ── */
.dropdown-root { position: relative; }
.filter-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: 6px; z-index: 60; display: none; max-height: 340px; overflow-y: auto; }
.dropdown-root.open .filter-dd-menu { display: block; }
.dd-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-primary); cursor: pointer; transition: background .08s; }
.dd-item:hover { background: var(--surface-secondary); }
.dd-check { width: 14px; height: 14px; border: 1.5px solid var(--border-strong); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dd-item.selected .dd-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.dd-item.selected .dd-check::after { content: ''; width: 7px; height: 4px; border-left: 1.5px solid var(--brand-dark); border-bottom: 1.5px solid var(--brand-dark); transform: rotate(-45deg) translate(1px,-1px); display: block; }
.dd-section-head { padding: 6px 10px 3px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.dd-divider { height: 1px; background: var(--border-default); margin: 5px 4px; }
.dd-foot { display: flex; justify-content: space-between; padding: 6px 4px 0; border-top: 1px solid var(--border-default); margin-top: 4px; }
.dd-foot button { padding: 4px 8px; font-size: 12px; color: var(--text-secondary); border-radius: var(--radius-sm); }
.dd-foot button:hover { background: var(--surface-secondary); color: var(--text-primary); }

/* ── COA — Toggle rows ── */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; gap: 16px; }
.toggle-row-label { font-size: 13.5px; color: var(--text-primary); font-weight: 500; }
.toggle-row-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

/* ── COA — Import dropzone ── */
.import-zone { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.import-zone:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.import-zone-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }

/* ── COA — Confirm icon ── */
.confirm-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.confirm-icon.warn { background: var(--status-warning-soft); color: var(--status-warning); }

/* ── Audit Trail — expandable detail rows ── */
.audit-row.is-open { background: var(--surface-secondary); }
.audit-detail { display: none; padding: 14px 20px 14px 40px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-size: 12.5px; }
.audit-detail.is-open { display: block; }
.audit-detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 10px; }
.audit-detail-field { display: flex; flex-direction: column; gap: 3px; }
.audit-detail-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.audit-detail-val { color: var(--text-primary); font-size: 12.5px; }
.audit-diff { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.audit-diff-row { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.audit-diff-field { color: var(--text-tertiary); min-width: 100px; }
.audit-diff-old { color: var(--status-danger); text-decoration: line-through; }
.audit-diff-new { color: var(--status-success); }
.audit-diff-arrow { color: var(--text-tertiary); }
.audit-gap { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 20px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; white-space: nowrap; background: var(--surface-secondary); color: var(--text-tertiary); border: 1px solid var(--border-default); }
.audit-seq { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-align: center; }
.audit-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.audit-mono-sm { font-size: 10px; }

/* ── Contacts — dropdown menu ── */
.dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: 6px; min-width: 220px; z-index: 60; display: none; max-height: 320px; overflow-y: auto; }
.dropdown-root.is-open .dropdown-menu { display: block; }
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: background 0.08s ease; color: var(--text-primary); }
.dropdown-item:hover { background: var(--surface-secondary); }
.dropdown-item-check { width: 14px; height: 14px; border: 1.5px solid var(--border-strong); border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); }
.dropdown-item.is-checked .dropdown-item-check { background: var(--brand-primary); border-color: var(--brand-primary); }
.dropdown-item.is-checked .dropdown-item-check::after { content: ""; width: 7px; height: 4px; border-left: 1.6px solid var(--brand-dark); border-bottom: 1.6px solid var(--brand-dark); transform: rotate(-45deg) translate(1px, -1px); display: block; }
.dropdown-foot { padding: 6px; border-top: 1px solid var(--border-default); margin-top: 6px; display: flex; justify-content: space-between; }
.dropdown-link { padding: 4px 8px; font-size: 12px; color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; background: none; border: 0; }
.dropdown-link:hover { background: var(--surface-secondary); color: var(--text-primary); }

/* ── Contacts — Role cards ── */
.role-card { padding: 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 12px; transition: border-color 0.15s ease, background 0.15s ease; }
.role-card.is-on { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.role-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.role-card-title { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; color: var(--text-primary); }
.role-card-title .icon { color: var(--text-tertiary); }
.role-card.is-on .role-card-title .icon { color: var(--brand-primary-strong); }
.role-card-fields { display: flex; flex-direction: column; gap: 10px; }
.role-card.is-off .role-card-fields { display: none; }

/* ── Contacts — Activity strip ── */
.activity-strip { background: var(--surface-secondary); border-radius: var(--radius-md); padding: 12px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.activity-stat { display: flex; flex-direction: column; gap: 2px; }
.activity-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.activity-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: var(--text-primary); letter-spacing: -0.01em; }

/* ── Contacts — Contact kind toggle ── */
.kind-toggle { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 3px; background: var(--surface-secondary); gap: 2px; }
.kind-btn { padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; transition: all 0.12s ease; background: transparent; border: 0; cursor: pointer; }
.kind-btn.is-on { background: var(--surface-primary); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* ── Drawer extras ── */
.drawer-section-title { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 6px; border-top: 1px dashed var(--border-default); margin-top: 2px; }
.drawer-foot-left { display: flex; gap: 8px; }
.drawer-foot-right { display: flex; gap: 8px; }
.bulk-bar-close { color: rgba(255,255,255,0.7); padding: 6px; border-radius: 6px; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bulk-bar-close:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; }

/* ── Contacts — Identity cell ── */
.ct-identity { display: flex; align-items: center; gap: 10px; }

@media (max-width: 960px) {
    .ct-summary { grid-template-columns: repeat(3,1fr); }
    .audit-tiles { grid-template-columns: repeat(2,1fr); }
    .sd-kpi-strip { grid-template-columns: repeat(3,1fr); }
    .ca-kpi-strip { grid-template-columns: repeat(2,1fr); }
    .rpt-summary { grid-template-columns: repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════
   Transactions — By Account tab  (ba-*)
   ══════════════════════════════════════════════════ */
.ba-summary-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); flex-shrink: 0; overflow-x: auto; }
.ba-sum-item { padding: 10px 18px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border-default); flex-shrink: 0; }
.ba-sum-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.ba-sum-value { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.ba-sum-value.pos { color: var(--status-success); }
.ba-sum-value.neg { color: var(--status-danger); }
.ba-sum-sub { font-size: 10.5px; color: var(--text-secondary); }
.tpill { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; font-family: inherit; transition: all .12s; }
.tpill:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.tpill.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.type-pills { display: flex; gap: 4px; }
.filter-sep { width: 1px; height: 20px; background: var(--border-default); flex-shrink: 0; }
.qf-pills { display: flex; gap: 4px; }
.qf-pill { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; font-family: inherit; transition: all .12s; display: inline-flex; align-items: center; gap: 5px; }
.qf-pill:hover { border-color: var(--brand-primary); }
.qf-pill.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); }
.qf-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; }
.ba-wrap { flex: 1; overflow-y: auto; padding: 14px 18px; }
.ba-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 10px; overflow: hidden; transition: border-color .12s; }
.ba-card:hover { border-color: var(--brand-primary-soft); }
.ba-card.rev .ba-head { border-left: 3px solid var(--status-success); }
.ba-card.exp .ba-head { border-left: 3px solid var(--status-danger); }
.ba-card.asset .ba-head { border-left: 3px solid var(--status-info); }
.ba-card.other .ba-head { border-left: 3px solid var(--text-tertiary); }
.ba-head { padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background .1s; border-bottom: 1px solid transparent; }
.ba-head:hover { background: var(--surface-secondary); }
.ba-card.open .ba-head { border-bottom-color: var(--border-default); background: var(--surface-secondary); }
.ba-chevron { color: var(--text-tertiary); flex-shrink: 0; transition: transform .2s; }
.ba-card.open .ba-chevron { transform: rotate(90deg); }
.ba-head-name { flex: 1; min-width: 0; }
.ba-code { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 2px; }
.ba-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ba-head-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 80px; flex-shrink: 0; }
.ba-head-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ba-head-stat-val.pos { color: var(--status-success); }
.ba-head-stat-val.neg { color: var(--status-danger); }
.ba-head-stat-lbl { font-size: 10.5px; color: var(--text-tertiary); }
.ba-prog-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 100px; flex-shrink: 0; }
.ba-prog-bar { width: 80px; height: 5px; background: var(--surface-tertiary); border-radius: 3px; overflow: hidden; }
.ba-prog-fill { height: 100%; border-radius: 3px; background: var(--status-success); }
.ba-prog-lbl { font-size: 10.5px; color: var(--text-tertiary); }
.ba-review-all-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border-default); font-size: 11.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all .12s; flex-shrink: 0; white-space: nowrap; }
.ba-review-all-btn:hover { background: var(--status-success-soft); border-color: var(--status-success); color: var(--status-success); }
.ba-view-btn { width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border-default); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: all .12s; flex-shrink: 0; }
.ba-view-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary-strong); background: var(--brand-primary-soft); }
.ba-body { display: none; }
.ba-card.open .ba-body { display: block; }
.ba-tx-table { width: 100%; }
/* 9 columns: chk · date · period · description · payee · status · account · amount · flag.
   This file loads after portal.css, so it wins the cascade — it must carry the same 9-column
   template (the by-account/by-description rows have a per-row Account picker the original
   8-column prototype lacked). An 8-column template here drops the flag onto a second line and
   clips Amount. Date/period/status/amount/flag fixed; description + payee absorb remaining width. */
/* Column widths come from --ba-cols on the .ba-wrap[data-resizable] ancestor (set by
   window.zpbColResize), so one shared width set keeps every group's table aligned. The
   value here is the fallback when JS hasn't run / no saved widths. gap:0 — column splits
   are drawn as cell borders so the draggable divider sits flush between columns. */
.ba-tx-head { display: grid; grid-template-columns: var(--ba-cols, 30px 78px 64px minmax(0,1.6fr) minmax(0,1fr) 92px minmax(0,150px) 96px 32px); gap: 0; padding: 0; background: var(--surface-secondary); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); }
.ba-tx-row { display: grid; grid-template-columns: var(--ba-cols, 30px 78px 64px minmax(0,1.6fr) minmax(0,1fr) 92px minmax(0,150px) 96px 32px); gap: 0; padding: 0; border-bottom: 1px solid var(--border-default); align-items: stretch; transition: background .08s; background: var(--surface-primary); }
.ba-tx-row > div { min-width: 0; }
.ba-tx-row .coa-picker, .ba-tx-row .coa-picker-trigger { width: 100%; min-width: 0; max-width: 100%; }

/* gap:0 + per-cell padding so dividers can sit at the exact column edge. Each cell carries
   a left split line; the header's drag handle overlays that same edge. */
.ba-tx-head > div, .ba-tx-row > div { display: flex; align-items: center; padding: 0 8px; min-width: 0; }
.ba-tx-head > div { position: relative; height: 30px; }
.ba-tx-row > div { padding-top: 10px; padding-bottom: 10px; }
/* Visible split line between columns (every cell except the first). */
.ba-tx-head > div + div, .ba-tx-row > div + div { border-left: 1px solid var(--border-subtle, var(--border-default)); }

/* Drag handle straddling a column's RIGHT edge in the header — dragging it resizes that
   column (data-col). Always shows a crisp split line; brightens on hover/active. */
.ba-col-resize { position: absolute; right: -4px; top: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 3; display: flex; justify-content: center; touch-action: none; }
.ba-col-resize::after { content: ''; width: 1px; background: var(--border-strong); opacity: .5; transition: opacity .1s, background .1s, width .1s; }
.ba-col-resize:hover::after, .ba-col-resize.is-dragging::after { opacity: 1; width: 2px; background: var(--brand-primary); }
/* The Amount column (8th cell, nth-child 8) right-aligns; flex cells need justify-content. */
.ba-tx-head > div:nth-child(8), .ba-tx-row > div:nth-child(8) { justify-content: flex-end; }
/* Description cell stacks main + ref vertically; let it own its layout. */
.ba-tx-row > div:nth-child(4) { display: block; }
.ba-tx-row > div:nth-child(4) > * { min-width: 0; }
.ba-tx-row:last-child { border-bottom: 0; }
.ba-tx-row:hover { background: #F0FDF9; }
.ba-tx-row.is-selected { background: var(--brand-primary-soft); }
.ba-chk { width: 15px; height: 15px; border: 1.5px solid var(--border-strong); border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); transition: all .12s; }
.ba-chk.on { background: var(--brand-primary); border-color: var(--brand-primary); }
.ba-chk.on::after { content: ''; display: block; width: 7px; height: 4px; border-left: 1.5px solid var(--brand-dark); border-bottom: 1.5px solid var(--brand-dark); transform: rotate(-45deg) translate(1px,-1px); }
.ba-head-chk { width: 15px; height: 15px; border: 1.5px solid var(--border-strong); border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); transition: all .12s; }
.ba-head-chk.on { background: var(--brand-primary); border-color: var(--brand-primary); }
.ba-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); }
.ba-desc-main { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-desc-ref { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }
.ba-payee { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-prog-chip { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ba-prog-chip.done { background: var(--status-success-soft); color: var(--status-success); }
.ba-prog-chip.ai { background: rgba(167,139,250,.15); color: #6D28D9; }
.ba-prog-chip.review { background: var(--status-warning-soft); color: #B45309; }
.ba-prog-chip.uncat { background: var(--surface-tertiary); color: var(--text-tertiary); }
.ba-amount { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; text-align: right; }
.ba-amount.pos { color: var(--status-success); }
.ba-amount.neg { color: var(--status-danger); }
.ba-flag-btn { width: 24px; height: 24px; border-radius: 4px; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--border-strong); transition: all .12s; }
.ba-flag-btn:hover { color: var(--status-danger); }
.ba-flag-btn.on { color: var(--status-danger); }
.ba-bulk-bar { display: none; padding: 7px 16px; background: var(--brand-dark); align-items: center; gap: 8px; flex-wrap: wrap; }
.ba-bulk-bar.on { display: flex; }
.ba-bulk-count { font-size: 12px; font-weight: 600; color: var(--brand-primary); font-family: 'JetBrains Mono', monospace; }
.bbtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); cursor: pointer; font-family: inherit; transition: all .12s; }
.bbtn:hover { background: rgba(255,255,255,.2); }
.bbtn.teal { background: var(--brand-primary); color: var(--brand-dark); border-color: var(--brand-primary); }
.ba-bulk-close { background: transparent; border: 0; color: rgba(255,255,255,.4); cursor: pointer; margin-left: auto; display: flex; align-items: center; }
.ba-bulk-close:hover { color: #fff; }
.ba-empty { padding: 28px 16px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.period-chip { padding: 3px 7px; border-radius: 4px; background: var(--surface-tertiary); border: 0; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-secondary); cursor: pointer; font-weight: 500; transition: all .12s; }
.period-chip:hover { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* ══════════════════════════════════════════════════
   Transactions — Summary tab  (sum-*, widget, fp-*, etc.)
   ══════════════════════════════════════════════════ */
.sum-scroll { flex: 1; overflow-y: auto; padding: 18px; }
.period-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--brand-primary-soft); border: 1px solid rgba(46,212,165,.25); border-radius: var(--radius-md); margin-bottom: 18px; flex-wrap: wrap; }
.period-banner-text { flex: 1; font-size: 13px; color: var(--text-primary); min-width: 200px; }
.blocker-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; background: rgba(239,68,68,.1); color: var(--status-danger); font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.sum-kpi-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 18px; }
.sum-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; }
.sum-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 8px; }
.sum-kpi-val { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; line-height: 1; margin-bottom: 4px; }
.sum-kpi-val.ok { color: var(--status-success); }
.sum-kpi-val.warn { color: #B45309; }
.sum-kpi-val.danger { color: var(--status-danger); }
.sum-kpi-sub { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 8px; }
.sum-kpi-bar { height: 3px; background: var(--surface-tertiary); border-radius: 2px; overflow: hidden; }
.sum-kpi-bar-fill { height: 100%; border-radius: 2px; }
.stage-grid { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 18px; }
.stage-cell { padding: 14px 16px; border-right: 1px solid var(--border-default); }
.stage-cell:last-child { border-right: 0; }
.stage-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.stage-val { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 3px; }
.stage-sub { font-size: 11px; color: var(--text-tertiary); }
.stage-bar { height: 3px; border-radius: 2px; margin-top: 8px; }
.sum-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.sum-row.wide { grid-template-columns: 2fr 1fr; }
.widget { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.widget-head { padding: 14px 18px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.widget-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 500; color: var(--text-primary); letter-spacing: -.01em; }
.widget-link { font-size: 12px; color: var(--brand-primary-strong); font-weight: 600; text-decoration: none; }
.widget-link:hover { text-decoration: underline; }
.widget-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); }
.widget-body { padding: 14px 18px; }
.sbl-card { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start; padding: 12px 18px; border-bottom: 1px solid var(--border-default); }
.sbl-card:last-child { border-bottom: 0; }
.sbl-card.warn { background: rgba(245,158,11,.03); }
.sbl-card.danger { background: rgba(239,68,68,.03); }
.sbl-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 9px; flex-shrink: 0; background: var(--surface-secondary); color: var(--text-secondary); }
.sbl-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.sbl-mask { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-bottom: 6px; }
.sbl-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.sbl-stat { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.sbl-stat.ok { color: var(--status-success); }
.sbl-stat.warn { color: #B45309; }
.sbl-stat.danger { color: var(--status-danger); }
.sbl-alert { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--status-danger); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-default); }
.sbl-amount { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; text-align: right; }
.sbl-amount.pos { color: var(--status-success); }
.sbl-amount.neg { color: var(--status-danger); }
.sbl-amount-sub { font-size: 11px; color: var(--text-tertiary); text-align: right; margin-top: 2px; }
.blocker-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.blocker-icon.critical { background: rgba(239,68,68,.1); color: var(--status-danger); }
.blocker-icon.warn { background: var(--status-warning-soft); color: #B45309; }
.blocker-fix { padding: 4px 10px; border-radius: var(--radius-md); font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); transition: all .12s; white-space: nowrap; }
.blocker-fix:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.blocker-fix.urgent { border-color: var(--status-danger); color: var(--status-danger); }
.blocker-fix.urgent:hover { background: var(--status-danger); color: #fff; }
.fp-section { margin-bottom: 14px; }
.fp-section-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 8px; }
.fp-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.fp-opt { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; font-family: inherit; transition: all .12s; }
.fp-opt:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.fp-opt.on { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.fp-opt-cnt { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; }
.fp-opt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rev-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rev-bar-label { font-size: 12.5px; color: var(--text-primary); min-width: 120px; }
.rev-bar { flex: 1; height: 8px; background: var(--surface-tertiary); border-radius: 4px; overflow: hidden; }
.rev-bar-fill { height: 100%; border-radius: 4px; }
.rev-bar-val { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--text-primary); min-width: 44px; text-align: right; }
.ai-metric { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-default); }
.ai-metric:last-child { border-bottom: 0; }
.ai-metric-label { font-size: 13px; color: var(--text-primary); }
.ai-metric-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ai-metric-val.good { color: var(--status-success); }
.ai-metric-val.warn { color: #B45309; }
.ai-metric-sub { font-size: 11px; color: var(--text-tertiary); text-align: right; }
.coa-row { display: grid; grid-template-columns: 1fr auto 80px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-default); }
.coa-row:last-child { border-bottom: 0; }
.coa-name { font-size: 12.5px; color: var(--text-primary); }
.coa-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); }
.coa-bar { width: 100%; height: 6px; background: var(--surface-tertiary); border-radius: 3px; overflow: hidden; }
.coa-bar-fill { height: 100%; border-radius: 3px; }
.coa-amount { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600; text-align: right; }
.coa-amount.pos { color: var(--status-success); }
.coa-amount.neg { color: var(--status-danger); }

/* ===== Journal / Ledger screen ===== */
.je-lines-head { display: grid; grid-template-columns: 1fr 1.4fr 1fr 110px 110px 28px; gap: 8px; padding: 8px 10px; background: var(--surface-secondary); border-radius: var(--radius-md); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; }
.je-line { display: grid; grid-template-columns: 1fr 1.4fr 1fr 110px 110px 28px; gap: 8px; padding: 6px 0; align-items: start; }
.je-line .field-input, .je-line .field-select { height: 34px; font-size: 12.5px; padding: 0 10px; }
.je-line .field-select { padding-right: 28px; }
.je-line-amt { text-align: right; font-family: 'JetBrains Mono', monospace; }
.je-line-remove { width: 28px; height: 34px; border-radius: 6px; color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.je-line-remove:hover { background: var(--status-danger-soft); color: var(--status-danger); }
.je-line-bank-note { grid-column: 1 / -1; margin: -2px 0 2px; padding: 5px 10px; background: var(--brand-accent-soft); color: var(--brand-accent); font-size: 11px; border-radius: 6px; display: flex; align-items: center; gap: 6px; }
.je-balance { background: var(--surface-secondary); border-radius: var(--radius-md); padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 8px; border: 1px solid transparent; transition: border-color 0.15s ease, background 0.15s ease; }
.je-balance.is-balanced { background: var(--status-success-soft); border-color: rgba(16,185,129,0.2); }
.je-balance.is-unbalanced { background: var(--status-danger-soft); border-color: rgba(239,68,68,0.3); }
.je-balance-stat { display: flex; flex-direction: column; gap: 2px; }
.je-balance-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.je-balance-value { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; color: var(--text-primary); }
.je-balance.is-balanced .je-balance-value { color: var(--status-success); }
.je-balance.is-unbalanced .je-balance-value.is-diff { color: var(--status-danger); }
.approval-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--status-warning); background: var(--status-warning-soft); border-radius: var(--radius-md); color: #92400E; font-size: 12.5px; line-height: 1.5; }
[data-theme="dark"] .approval-callout { color: #FBBF24; }
.approval-callout-icon { flex-shrink: 0; color: var(--status-warning); }
.report-filters { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--surface-secondary); border-radius: var(--radius-lg); margin-bottom: 14px; flex-wrap: wrap; }
.report-filters .field-select, .report-filters .field-input { height: 32px; font-size: 12.5px; }
.report-filter-label { font-size: 11.5px; color: var(--text-secondary); font-weight: 500; }
.journal-group { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; }
.journal-group-head { padding: 12px 18px; background: var(--surface-secondary); display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-default); }
.journal-group-num { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 13px; }
.journal-group-narr { font-size: 13px; color: var(--text-secondary); flex: 1; margin-left: 12px; }
.journal-group-date { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); }
.journal-group-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.journal-group-table td { padding: 9px 18px; border-bottom: 1px solid var(--border-default); }
.journal-group-table tr:last-child td { border-bottom: 0; }
.journal-group-table tr.totals td { background: var(--surface-secondary); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.journal-group-table .td-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); width: 64px; }
.journal-group-table .td-name { color: var(--text-primary); }
.journal-group-table .td-dr, .journal-group-table .td-cr { text-align: right; font-family: 'JetBrains Mono', monospace; width: 120px; }
.acct-picker { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface-secondary); border-radius: var(--radius-lg); margin-bottom: 14px; }
.acct-picker-label { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.acct-picker .field-select { max-width: 380px; }
.acct-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .acct-summary { grid-template-columns: repeat(2, 1fr); } }
.src-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; padding: 1px 7px; border-radius: 8px; font-weight: 500; letter-spacing: 0.02em; }
.src-pill.src-manual  { background: var(--surface-secondary); color: var(--text-secondary); }
.src-pill.src-invoice { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.src-pill.src-bill    { background: var(--status-warning-soft); color: #B45309; }
.src-pill.src-payment { background: var(--status-info-soft); color: var(--status-info); }
.src-pill.src-recon   { background: var(--brand-accent-soft); color: var(--brand-accent); }
[data-theme="dark"] .src-pill.src-bill { color: #FBBF24; }

/* ── Connect Accounts — modal + KPI err ── */
.ca-kpi-err { color: var(--status-danger) !important; }
.connect-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 700; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .18s; }
.connect-modal-overlay.is-open { opacity: 1; pointer-events: all; }
.connect-modal { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); width: 520px; max-width: 96vw; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,.18); }
.cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-default); }
.cm-title { font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.cm-sub { font-size: 12.5px; color: var(--text-tertiary); }
.cm-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; }
.cm-close:hover { background: var(--surface-secondary); color: var(--text-primary); }
.cm-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.cm-type-label { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 6px; margin-bottom: 4px; }
.cm-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.cm-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s, background .15s; }
.cm-opt:hover { background: var(--surface-secondary); border-color: var(--brand-primary); }
.cm-opt.selected { background: var(--brand-primary-soft); border-color: var(--brand-primary); }
.cm-opt-logo { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.cm-opt-logo.wf    { background: #EF4444; color: #fff; }
.cm-opt-logo.chase { background: #1A56DB; color: #fff; }
.cm-opt-logo.boa   { background: #C41230; color: #fff; }
.cm-opt-logo.plaid { background: #111827; color: #fff; }
.cm-opt-logo.amex  { background: #006FCF; color: #fff; }
.cm-opt-logo.stripe { background: #635BFF; color: #fff; }
.cm-opt-logo.paypal { background: #003087; color: #fff; }
.cm-opt-logo.square { background: #000; color: #fff; }
.cm-opt-logo.gusto  { background: #F45D48; color: #fff; }
.cm-opt-logo.adp    { background: #CC0000; color: #fff; }
.cm-opt-logo.csv    { background: var(--surface-tertiary); color: var(--text-secondary); }
.cm-opt-name { font-size: 12px; font-weight: 500; color: var(--text-primary); text-align: center; }
.cm-opt-sub  { font-size: 10.5px; color: var(--text-tertiary); text-align: center; }
.cm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-default); }

/* ── CSV Import Wizard ── */
.cm-step-indicator { display: flex; align-items: center; gap: 0; }
.cm-step-dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-default); background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.cm-step-dot.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.cm-step-dot.is-done { background: var(--status-success-soft); border-color: var(--status-success); color: var(--status-success); }
.cm-step-connector { width: 20px; height: 1.5px; background: var(--border-default); flex-shrink: 0; }

.upload-drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 24px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-secondary); cursor: pointer; transition: border-color .15s, background .15s; text-align: center; min-height: 160px; }
.upload-drop-zone:hover, .upload-drop-zone.dragover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.upload-drop-icon { color: var(--text-tertiary); }
.upload-drop-title { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.upload-drop-link { color: var(--brand-primary-strong); text-decoration: underline; }
.upload-drop-sub { font-size: 12px; color: var(--text-tertiary); }
.upload-file-info { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.upload-file-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.upload-file-size { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

.wizard-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.wizard-badge.ok { background: var(--status-success-soft); color: var(--status-success); }
.wizard-badge.neutral { background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); }

.wizard-map-grid { display: flex; flex-direction: column; gap: 10px; }
.wizard-map-row { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 12px; }
.wizard-map-label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

.csv-preview-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.csv-preview-table th { padding: 6px 10px; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); font-weight: 600; border-bottom: 1px solid var(--border-default); }
.csv-preview-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }

.import-preview-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.import-preview-table th { padding: 7px 10px; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); font-weight: 600; border-bottom: 1px solid var(--border-default); position: sticky; top: 0; background: var(--surface-primary); }
.import-preview-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); }
.import-preview-table tr.is-duplicate td { opacity: .45; }

.dup-pill { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; background: var(--surface-secondary); color: var(--text-tertiary); border: 1px solid var(--border-default); }

.debit-credit-toggle { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; padding: 7px 12px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-left: auto; }

.wizard-acct-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--text-primary); }

.wizard-error { margin-top: 10px; font-size: 12.5px; color: var(--status-danger); }

.wizard-status-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 24px; text-align: center; }
.wizard-check { display: flex; }
.wizard-status-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.wizard-status-sub { font-size: 13px; color: var(--text-secondary); }
.wizard-spinner { width: 32px; height: 32px; border: 3px solid var(--border-default); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wizard-progress-block { display: flex; flex-direction: column; gap: 24px; padding: 32px 8px; }
.wizard-progress-phases { display: flex; flex-direction: column; gap: 0; }
.wizard-phase-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-default); opacity: 0.4; transition: opacity 0.2s; }
.wizard-phase-row:last-child { border-bottom: none; }
.wizard-phase-row.is-running { opacity: 1; }
.wizard-phase-row.is-done { opacity: 1; }
.wizard-phase-row.is-error { opacity: 1; }
.wizard-phase-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.wizard-phase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.wizard-phase-spinner { width: 16px; height: 16px; border: 2px solid var(--border-default); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin .7s linear infinite; }
.wizard-phase-content { display: flex; flex-direction: column; gap: 2px; }
.wizard-phase-label { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.wizard-phase-detail { font-size: 12px; color: var(--text-secondary); }
.wizard-phase-row.is-error .wizard-phase-label { color: var(--status-danger); }
.wizard-progress-summary { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px 20px; }
.wizard-progress-summary-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.wizard-progress-summary-stats { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-secondary); }
.wizard-progress-summary-stats strong { color: var(--text-primary); }

/* ── AI Categorization badges ── */
.ai-badge { display: inline-flex; align-items: center; padding: 2px 7px; font-size: 11px; font-weight: 600; border-radius: 10px; background: var(--surface-secondary); border: 1px solid var(--border-default); color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; white-space: nowrap; flex-shrink: 0; }
.ai-badge.approved { background: rgba(46,212,165,.12); border-color: var(--status-success); color: var(--status-success); }
.ai-badge.low { background: rgba(239,68,68,.08); border-color: var(--status-danger); color: var(--status-danger); }

/* ── Toggle switch (column picker) ── */
.toggle-sw { display: inline-flex; align-items: center; cursor: pointer; }
.toggle-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track { position: relative; width: 32px; height: 18px; background: var(--border-strong); border-radius: 999px; transition: background .15s; flex-shrink: 0; }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.toggle-sw input:checked ~ .toggle-track { background: var(--brand-primary); }
.toggle-sw input:checked ~ .toggle-track .toggle-knob { transform: translateX(14px); }

/* ── Column picker row layout ── */
.col-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; }
.col-picker-col-name { font-size: 12.5px; color: var(--text-primary); }

/* ── KPI AI suggested variant ── */
.kpi-item.is-ai .kpi-item-value { color: #7C3AED; }


/* ── Inline transaction detail row ── */
.tx-detail-row td { background: var(--surface-secondary); border-top: none !important; }
.tx-detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--border-default); }
.tx-detail-col { padding: 16px 18px; border-right: 1px solid var(--border-default); }
.tx-detail-col:last-child { border-right: none; }
.tx-detail-section-label { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px; }

/* ── Split line card ── */
.split-line { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; }

/* ── Reconciliation Period List ── */
.period-list-head { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.period-list-head-left { display: flex; flex-direction: column; gap: 6px; }
.period-list-head-name { font-size: 18px; font-weight: 600; color: var(--text-primary); font-family: 'Fraunces', serif; }
.period-list-head-meta { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.period-list-table { width: 100%; border-collapse: collapse; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.period-list-table th { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); }
.period-list-table td { font-size: 13px; color: var(--text-primary); padding: 12px 16px; border-bottom: 1px solid var(--border-subtle, var(--border-default)); vertical-align: middle; }
.period-list-table tr:last-child td { border-bottom: none; }
.period-list-table tbody tr:hover td { background: var(--surface-secondary); }
.period-list-table .mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.period-list-table .text-muted { color: var(--text-tertiary); }
.period-status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.period-status-pill.is-never { background: var(--surface-secondary); color: var(--text-tertiary); border: 1px solid var(--border-default); }
.period-status-pill.is-progress { background: rgba(59,130,246,.12); color: #2563EB; border: 1px solid rgba(59,130,246,.25); }
.period-status-pill.is-finished { background: rgba(16,185,129,.12); color: #059669; border: 1px solid rgba(16,185,129,.25); }
.period-status-pill.is-reopened { background: rgba(245,158,11,.12); color: #D97706; border: 1px solid rgba(245,158,11,.25); }

/* ── Reconciliation Match Workspace (QBO-style) ── */
.recon-info-bar { display:flex; align-items:center; gap:16px; background:var(--surface-secondary); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:9px 16px; margin-bottom:12px; font-size:12.5px; color:var(--text-secondary); flex-wrap:wrap; }
.recon-info-bar strong { color:var(--text-primary); font-weight:600; }
.recon-info-sep { color:var(--border-default); }
.recon-filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.recon-tab-group { display:flex; align-items:center; gap:2px; background:var(--surface-secondary); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:3px; }
.recon-tab { background:none; border:none; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--text-secondary); padding:5px 12px; border-radius:calc(var(--radius-md) - 2px); transition:background .15s, color .15s; white-space:nowrap; }
.recon-tab:hover { background:var(--surface-primary); color:var(--text-primary); }
.recon-tab.is-active { background:var(--surface-primary); color:var(--text-primary); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.recon-search { flex:1; min-width:180px; max-width:280px; font-size:12.5px; padding:6px 10px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-primary); color:var(--text-primary); outline:none; }
.recon-search:focus { border-color:var(--brand-primary); box-shadow:0 0 0 2px rgba(var(--brand-primary-rgb,.2),0.15); }
.recon-filter-count { font-size:11.5px; color:var(--text-tertiary); margin-left:auto; white-space:nowrap; }
.recon-bulk-bar { display:flex; align-items:center; gap:10px; background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2); border-radius:var(--radius-md); padding:7px 14px; margin-bottom:10px; font-size:12.5px; }
.recon-bulk-label { font-weight:600; color:#2563EB; margin-right:4px; }
.recon-table-wrap { border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:12px; }
.recon-table { width:100%; border-collapse:collapse; background:var(--surface-primary); }
.recon-table thead { position:sticky; top:0; z-index:2; }
.recon-table thead th { background:var(--surface-secondary); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-tertiary); padding:9px 12px; text-align:left; border-bottom:1px solid var(--border-default); white-space:nowrap; }
.recon-table thead th.is-right { text-align:right; }
.recon-table thead th.is-center { text-align:center; }
.recon-table thead th.sortable { cursor:pointer; user-select:none; }
.recon-table thead th.sortable:hover { color:var(--text-primary); background:var(--surface-primary); }
.recon-table tbody tr { cursor:pointer; border-bottom:1px solid var(--border-subtle, rgba(0,0,0,.05)); }
.recon-table tbody tr:last-child { border-bottom:none; }
.recon-table tbody tr:hover td { background:rgba(var(--brand-primary-rgb,59,130,246),.04); }
.recon-table tbody tr.is-cleared td { background:rgba(16,185,129,.05); }
.recon-table tbody tr.is-selected td { background:rgba(59,130,246,.08); }
.recon-table tbody tr.is-cleared.is-selected td { background:rgba(59,130,246,.12); }
.recon-table td { padding:9px 12px; font-size:13px; color:var(--text-primary); vertical-align:middle; }
.recon-table td.is-right { text-align:right; }
.recon-table td.is-center { text-align:center; }
.recon-table td.cb-cell { width:36px; padding:9px 8px 9px 14px; }
.recon-row-desc { font-size:13px; font-weight:500; color:var(--text-primary); }
.recon-row-sub { font-size:11px; color:var(--text-tertiary); font-family:'JetBrains Mono',monospace; margin-top:1px; }
.recon-type-pill { display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:12px; }
.recon-type-pill.is-deposit { background:rgba(16,185,129,.12); color:#059669; }
.recon-type-pill.is-payment { background:rgba(239,68,68,.10); color:#DC2626; }
.recon-amount { font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:500; }
.recon-amount.is-deposit { color:var(--text-primary); }
.recon-amount.is-payment { color:var(--status-danger,#DC2626); }
.recon-running-bal { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-secondary); }
.recon-status-check { font-size:15px; color:#059669; font-weight:700; line-height:1; }
.recon-status-open { font-size:15px; color:var(--text-tertiary); line-height:1; }
.recon-table tfoot tr { border-top:2px solid var(--border-default); background:var(--surface-secondary); }
.recon-table tfoot td { font-size:12px; color:var(--text-secondary); padding:8px 12px; font-family:'JetBrains Mono',monospace; }
.recon-empty-row td { text-align:center; padding:40px 24px; color:var(--text-tertiary); font-size:13px; }
.recon-prior-section { border:1px solid var(--border-default); border-radius:var(--radius-lg); margin-bottom:12px; overflow:hidden; }
.recon-prior-toggle { display:flex; align-items:center; gap:8px; width:100%; background:var(--surface-secondary); border:none; cursor:pointer; padding:10px 16px; font-size:12.5px; font-weight:600; color:var(--text-secondary); text-align:left; }
.recon-prior-toggle:hover { color:var(--text-primary); }
.recon-prior-toggle svg { transition:transform .2s; }
.recon-prior-toggle.is-open svg { transform:rotate(90deg); }
.recon-prior-body { padding:0; }


/* ═══════════════════════════════════════════════════════
   My Work page styles
   ═══════════════════════════════════════════════════════ */
/* Page wrap */
.portal-main { padding: 0; }
.page-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 28px 80px;
}

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: 4px;
}
.page-title {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.page-greeting {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.page-actions { display: flex; gap: 8px; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.btn-secondary:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.btn-primary {
  background: var(--brand-primary);
  color: var(--brand-dark);
  border: 1px solid var(--brand-primary);
  font-weight: 600;
}
.btn-primary:hover { background: var(--brand-primary-strong); color: #FFFFFF; }
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 500;
}
.btn-ghost:hover { background: var(--surface-tertiary); color: var(--text-primary); }

/* Tabs */
.view-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 24px;
}
.view-tab {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s ease, border-color 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.view-tab:hover { color: var(--text-primary); }
.view-tab.active { color: var(--brand-primary-strong); border-bottom-color: var(--brand-primary); font-weight: 600; }
.view-tab-badge {
  background: var(--surface-tertiary);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}
.view-tab.active .view-tab-badge { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.view-tab.has-urgent .view-tab-badge { background: var(--status-danger-soft); color: var(--status-danger); }

/* KPI strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
  position: relative;
  overflow: hidden;
}
.kpi:hover { border-color: var(--brand-primary); transform: translateY(-1px); }
.kpi-accent {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--border-strong);
}
.kpi.is-danger .kpi-accent { background: var(--status-danger); }
.kpi.is-warning .kpi-accent { background: var(--status-warning); }
.kpi.is-info .kpi-accent { background: var(--status-info); }
.kpi.is-primary .kpi-accent { background: var(--brand-primary); }
.kpi.is-success .kpi-accent { background: var(--status-success); }
.kpi-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 8px;
}
.kpi-value {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.kpi.is-danger .kpi-value { color: var(--status-danger); }
.kpi.is-warning .kpi-value { color: #B45309; }
[data-theme="dark"] .kpi.is-warning .kpi-value { color: var(--status-warning); }
.kpi-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-meta-delta { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.kpi-meta-delta.up { color: var(--status-success); }
.kpi-meta-delta.down { color: var(--status-danger); }

/* Section heading */
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 28px 0 14px;
}
.section-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.section-meta { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }

/* Category cards grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cat-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
  text-align: left;
}
.cat-card:hover { border-color: var(--brand-primary); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.cat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cat-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.cat-card-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--surface-tertiary);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-card.is-danger .cat-card-icon { background: var(--status-danger-soft); color: var(--status-danger); }
.cat-card.is-warning .cat-card-icon { background: var(--status-warning-soft); color: #B45309; }
[data-theme="dark"] .cat-card.is-warning .cat-card-icon { color: var(--status-warning); }
.cat-card.is-info .cat-card-icon { background: var(--status-info-soft); color: var(--status-info); }
.cat-card.is-primary .cat-card-icon { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.cat-card.is-accent .cat-card-icon { background: var(--brand-accent-soft); color: var(--brand-accent); }
.cat-card.is-success .cat-card-icon { background: var(--status-success-soft); color: var(--status-success); }
.cat-card-count {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}
.cat-card-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.cat-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 4px 0;
  border-radius: 4px;
}
.cat-preview-bullet {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}
.cat-card.is-danger .cat-preview-bullet { background: var(--status-danger); }
.cat-card.is-warning .cat-preview-bullet { background: var(--status-warning); }
.cat-preview-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-card-empty {
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: 4px 0;
}
.cat-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-default);
  font-size: 12px;
  color: var(--brand-primary-strong);
  font-weight: 600;
}
.cat-card-foot svg { transition: transform 0.12s ease; }
.cat-card:hover .cat-card-foot svg { transform: translateX(2px); }

/* List view (drilldown from category) */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.list-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  min-width: 280px;
}
.list-search input {
  flex: 1;
  background: none;
  border: 0;
  outline: 0;
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
}
.list-search input::placeholder { color: var(--text-tertiary); }
.list-search svg { color: var(--text-tertiary); }
.list-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-primary);
  transition: all 0.12s ease;
}
.list-filter-pill:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.list-filter-pill.active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.list-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 6px 8px 6px 0;
  margin-bottom: 8px;
}
.list-back:hover { color: var(--text-primary); }
.list-back svg { color: var(--text-tertiary); }

/* Task list rows */
.task-list {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.task-row {
  display: grid;
  grid-template-columns: 32px 1.6fr 1.2fr 1fr 110px 36px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  transition: background 0.1s ease;
}
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--surface-secondary); }
.task-checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-primary);
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.task-checkbox:hover { border-color: var(--brand-primary); }
.task-checkbox.checked { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.task-checkbox.checked::after {
  content: '';
  display: block;
  width: 10px; height: 6px;
  border-left: 2px solid var(--brand-dark);
  border-bottom: 2px solid var(--brand-dark);
  transform: rotate(-45deg) translate(2px, -2px);
}
.task-title-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.task-title { font-size: 13.5px; font-weight: 500; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-subtitle { font-size: 11.5px; color: var(--text-tertiary); }
.task-client { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.task-client-avatar {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 10px;
  flex-shrink: 0;
}
.task-client-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-due { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.task-due.is-overdue { color: var(--status-danger); font-weight: 600; }
.task-due.is-today { color: #B45309; font-weight: 600; }
[data-theme="dark"] .task-due.is-today { color: var(--status-warning); }
.task-due-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); }
.task-due.is-overdue .task-due-dot { background: var(--status-danger); }
.task-due.is-today .task-due-dot { background: var(--status-warning); }
.task-status {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--surface-tertiary);
  color: var(--text-secondary);
  width: fit-content;
}
.task-status.is-blocked { background: var(--status-danger-soft); color: var(--status-danger); }
.task-status.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.task-status.is-waiting { background: var(--status-info-soft); color: var(--status-info); }
.task-status.is-done { background: var(--status-success-soft); color: var(--status-success); }
.task-row-action {
  width: 30px; height: 30px;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.task-row-action:hover { background: var(--surface-tertiary); color: var(--text-primary); }

/* Task detail drawer */
.detail-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 480px;
  max-width: 92vw;
  height: 100vh;
  background: var(--surface-primary);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-drawer);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.detail-drawer.open { transform: translateX(0); }
.detail-backdrop {
  position: fixed; inset: 0;
  background: rgba(11,15,30,0.4);
  backdrop-filter: blur(2px);
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.detail-backdrop.open { opacity: 1; pointer-events: auto; }
.detail-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-close {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
}
.detail-close:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.detail-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.detail-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.detail-body { flex: 1; overflow-y: auto; padding: 16px 24px 100px; }
.detail-section { margin-bottom: 22px; }
.detail-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 10px;
}
.detail-meta-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 14px;
  font-size: 13px;
}
.detail-meta-grid dt { color: var(--text-tertiary); font-size: 12px; }
.detail-meta-grid dd { color: var(--text-primary); font-weight: 500; }
.detail-meta-grid dd .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.detail-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.detail-actions {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--surface-primary);
  border-top: 1px solid var(--border-default);
  padding: 14px 24px;
  display: flex;
  gap: 8px;
}
.detail-actions .btn { flex: 1; justify-content: center; }
.detail-activity { display: flex; flex-direction: column; gap: 12px; }
.activity-row { display: flex; gap: 10px; font-size: 12.5px; }
.activity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  margin-top: 5px;
  flex-shrink: 0;
}
.activity-content { flex: 1; }
.activity-text { color: var(--text-primary); }
.activity-meta { color: var(--text-tertiary); font-size: 11.5px; margin-top: 1px; }

/* Daily view */
.daily-day {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.daily-day-head {
  padding: 14px 18px;
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.daily-day.is-today .daily-day-head { background: var(--brand-primary-soft); }
.daily-day-title {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.daily-day.is-today .daily-day-title { color: var(--brand-primary-strong); }
.daily-day-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.daily-day.is-today .daily-day-date { color: var(--brand-primary-strong); }
.daily-empty { padding: 24px 18px; text-align: center; color: var(--text-tertiary); font-size: 13px; font-style: italic; }

/* Calendar view */
.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.calendar-nav { display: flex; align-items: center; gap: 8px; }
.calendar-month {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.calendar-nav-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--surface-primary);
  transition: border-color 0.12s ease, color 0.12s ease;
}
.calendar-nav-btn:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.calendar-dow {
  background: var(--surface-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  text-align: center;
  padding: 8px 4px;
}
.calendar-cell {
  background: var(--surface-primary);
  min-height: 96px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.calendar-cell:hover { background: var(--surface-secondary); }
.calendar-cell.is-other-month { background: var(--surface-secondary); }
.calendar-cell.is-other-month .calendar-day-num { color: var(--text-tertiary); }
.calendar-cell.is-today { background: var(--brand-primary-soft); }
.calendar-cell.is-today .calendar-day-num {
  background: var(--brand-primary);
  color: var(--brand-dark);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.calendar-day-num {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: 'Work Sans', sans-serif;
}
.calendar-event {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-strong);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 2px solid var(--brand-primary);
}
.calendar-event.is-overdue { background: var(--status-danger-soft); color: var(--status-danger); border-left-color: var(--status-danger); }
.calendar-event.is-today-due { background: var(--status-warning-soft); color: #B45309; border-left-color: var(--status-warning); }
[data-theme="dark"] .calendar-event.is-today-due { color: var(--status-warning); }

/* Plan today drawer */
.plan-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 480px;
  max-width: 92vw;
  height: 100vh;
  background: var(--surface-primary);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-drawer);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.plan-drawer.open { transform: translateX(0); }
.plan-backdrop {
  position: fixed; inset: 0;
  background: rgba(11,15,30,0.4);
  backdrop-filter: blur(2px);
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.plan-backdrop.open { opacity: 1; pointer-events: auto; }
.plan-head {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border-default);
}
.plan-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.plan-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.plan-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.plan-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 4px;
}
.plan-search-bar {
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-default);
}
.plan-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.plan-search-input-wrap:focus-within {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}
.plan-search-input-wrap input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
}
.plan-search-input-wrap input::placeholder { color: var(--text-tertiary); }
.plan-search-input-wrap svg { color: var(--text-tertiary); flex-shrink: 0; }
.plan-body { flex: 1; overflow-y: auto; padding: 0 0 90px; }
.plan-section { padding: 14px 24px 8px; }
.plan-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.plan-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.plan-section-label.is-suggested { color: var(--brand-primary-strong); }
.plan-section-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
.plan-task {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.plan-task:hover { border-color: var(--brand-primary); background: var(--surface-secondary); }
.plan-task.is-added { background: var(--brand-primary-soft); border-color: var(--brand-primary); }
.plan-task-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plan-task-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}
.plan-task-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-task-meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.plan-task-due-overdue { color: var(--status-danger); font-weight: 600; }
.plan-task-due-today { color: #B45309; font-weight: 600; }
[data-theme="dark"] .plan-task-due-today { color: var(--status-warning); }
.plan-task-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'Work Sans', sans-serif;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.plan-task-add:hover { border-color: var(--brand-primary); color: var(--brand-primary-strong); }
.plan-task.is-added .plan-task-add {
  background: var(--brand-primary);
  color: var(--brand-dark);
  border-color: var(--brand-primary);
}
.plan-task.is-added .plan-task-add:hover { background: var(--surface-primary); color: var(--status-danger); border-color: var(--status-danger); }
.plan-empty {
  padding: 32px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
}
.plan-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--surface-primary);
  border-top: 1px solid var(--border-default);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan-foot-meta {
  font-size: 12.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-foot-count {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--brand-primary-strong);
}
.plan-foot-actions { display: flex; gap: 8px; }

/* Toast */
.toast {
  position: fixed;
  top: 70px; left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--brand-dark);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-elevated);
  display: flex; align-items: center; gap: 10px;
  z-index: 600;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { color: var(--brand-primary); }

/* Hide views by default */
.view { display: none; }
.view.active { display: block; }

@@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kpi-strip .kpi:nth-child(4), .kpi-strip .kpi:nth-child(5) { display: none; }
  .task-row { grid-template-columns: 28px 1.4fr 1fr 1fr 36px; }
  .task-row .task-status { display: none; }
}

/* ===== All Tasks List View ===== */
.list-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.list-kpi-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; border-left: 3px solid var(--border-default); }
.list-kpi-tile.is-danger { border-left-color: var(--status-danger); }
.list-kpi-tile.is-warning { border-left-color: var(--status-warning); }
.list-kpi-tile.is-info { border-left-color: var(--status-info); }
.list-kpi-tile.is-success { border-left-color: var(--brand-primary); }
.list-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.list-kpi-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.01em; }
.list-kpi-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 5px; }

.list-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.list-filters { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.list-filter-pill { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
.list-filter-pill:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.list-filter-pill.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.list-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.list-search-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 7px 12px; transition: border-color 0.12s ease; }
.list-search-wrap:focus-within { border-color: var(--brand-primary); }
.list-search { border: 0; background: transparent; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: 0; width: 200px; }
.list-search::placeholder { color: var(--text-tertiary); }
.list-sort-select { padding: 7px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-secondary); font-family: inherit; cursor: pointer; }
.list-sort-select:focus { outline: 0; border-color: var(--brand-primary); }

.list-table { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.list-table-header { display: grid; grid-template-columns: 3fr 1.4fr 1fr 1fr 1fr 36px; gap: 14px; padding: 10px 16px; background: var(--surface-secondary); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); }
.list-task-row { display: grid; grid-template-columns: 3fr 1.4fr 1fr 1fr 1fr 36px; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-default); align-items: center; cursor: pointer; transition: background 0.12s ease; }
.list-task-row:last-child { border-bottom: 0; }
.list-task-row:hover { background: var(--surface-secondary); }
.list-task-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-task-client { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.list-task-client-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.list-task-role { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.list-task-due { font-size: 12px; font-family: 'JetBrains Mono', monospace; font-weight: 500; white-space: nowrap; }
.list-task-due.is-overdue { color: var(--status-danger); font-weight: 700; }
.list-task-due.is-today { color: #B45309; font-weight: 700; }
.list-task-due.is-upcoming { color: var(--text-secondary); }
.list-task-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.list-task-status.is-overdue { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.list-task-status.is-today { background: var(--status-warning-soft); color: #B45309; }
.list-task-status.is-waiting { background: var(--status-info-soft); color: var(--status-info); }
.list-task-status.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.list-task-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; transition: all 0.12s ease; }
.list-task-action:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.list-empty { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }

@@media (max-width: 700px) {
  .list-table-header { display: none; }
  .list-task-row { grid-template-columns: 1fr auto; }
  .list-task-client, .list-task-role, .list-task-due { display: none; }
  .list-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .list-kpi-tile:nth-child(4), .list-kpi-tile:nth-child(5) { display: none; }
}

/* ═══════════════════════════════════════════════════════
   Team Work page styles
   ═══════════════════════════════════════════════════════ */
/* ===== Page header ===== */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-header-left { flex: 1; min-width: 260px; }
.page-eyebrow { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 4px; }
.role-pill { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.page-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 6px; }
.page-greeting { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.page-greeting strong { color: var(--text-primary); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; transition: all 0.12s ease; white-space: nowrap; border: 1px solid transparent; font-family: inherit; cursor: pointer; text-decoration: none; }
.btn-secondary { background: transparent; color: var(--text-secondary); border-color: var(--border-default); }
.btn-secondary:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.btn-primary { background: var(--brand-primary); color: var(--brand-dark); font-weight: 600; }
.btn-primary:hover { background: var(--brand-primary-strong); color: #fff; }
.btn-tertiary { background: transparent; color: var(--text-tertiary); border-color: transparent; }
.btn-tertiary:hover { background: var(--surface-secondary); color: var(--text-primary); }
.btn-danger { background: transparent; color: var(--status-danger); border-color: var(--status-danger); }
.btn-danger:hover { background: var(--status-danger); color: #fff; }

/* ===== KPI strip ===== */
.kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; }
.kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; }
.kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.kpi-value { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 11px; color: var(--text-secondary); margin-top: 5px; }
.kpi.is-danger .kpi-value { color: var(--status-danger); }
.kpi.is-warning .kpi-value { color: #B45309; }
.kpi.is-success .kpi-value { color: var(--status-success); }
.kpi.is-info .kpi-value { color: var(--status-info); }

/* ===== Toolbar ===== */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar-left { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.view-toggle-group { display: flex; background: var(--surface-secondary); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.view-toggle { padding: 5px 12px; border-radius: 5px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; font-family: inherit; transition: all 0.12s ease; }
.view-toggle.active { background: var(--surface-primary); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.search-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 7px 12px; transition: border-color 0.12s; }
.search-wrap:focus-within { border-color: var(--brand-primary); }
.search-wrap svg { color: var(--text-tertiary); flex-shrink: 0; }
.search-input { border: 0; background: transparent; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: 0; width: 180px; }
.search-input::placeholder { color: var(--text-tertiary); }
.filter-select { padding: 7px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-secondary); font-family: inherit; cursor: pointer; }
.filter-select:focus { outline: 0; border-color: var(--brand-primary); }

/* ===== Member card grid view ===== */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.member-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.12s ease; }
.member-card:hover { border-color: var(--brand-primary); }
.member-card.is-overloaded { border-left: 3px solid var(--status-danger); }
.member-card.is-busy { border-left: 3px solid var(--status-warning); }
.member-card.is-ok { border-left: 3px solid var(--status-success); }
.member-card-head { padding: 16px 18px 12px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border-default); }
.member-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.member-role { font-size: 11.5px; color: var(--text-secondary); }
.member-capacity-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.member-capacity-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.member-capacity-label.is-overloaded { color: var(--status-danger); }
.member-capacity-label.is-busy { color: #B45309; }
.member-capacity-label.is-ok { color: var(--status-success); }
.capacity-mini-bar { width: 60px; height: 5px; background: var(--surface-tertiary); border-radius: 3px; overflow: hidden; }
.capacity-mini-fill { height: 100%; border-radius: 3px; }
.capacity-mini-fill.is-overloaded { background: var(--status-danger); }
.capacity-mini-fill.is-busy { background: var(--status-warning); }
.capacity-mini-fill.is-ok { background: var(--status-success); }

.member-status-summary { display: grid; grid-template-columns: repeat(5, 1fr); padding: 14px 16px; gap: 8px; border-bottom: 1px solid var(--border-default); }
.member-status-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: var(--radius-sm); }
.member-status-item.is-danger .member-status-count { color: var(--status-danger); }
.member-status-item.is-warning .member-status-count { color: #B45309; }
.member-status-count { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); line-height: 1; }
.member-status-label { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; text-align: center; }
.member-task-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.member-task-dot.is-overdue { background: var(--status-danger); }
.member-task-dot.is-today { background: var(--status-warning); }
.member-task-dot.is-normal { background: var(--brand-primary); }
.member-task-info { flex: 1; min-width: 0; }
.member-task-title { font-size: 12.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-task-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.member-task-due { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; flex-shrink: 0; padding-top: 2px; }
.member-task-due.is-overdue { color: var(--status-danger); }
.member-task-due.is-today { color: #B45309; }
.member-task-due.is-normal { color: var(--text-tertiary); }
.member-card-footer { padding: 10px 18px; border-top: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.member-card-footer-link { font-size: 12px; color: var(--brand-primary-strong); font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; }
.member-card-footer-link:hover { text-decoration: underline; }

/* ===== Engagement table view ===== */
.eng-section { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; }
.eng-section-head { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); cursor: pointer; user-select: none; }
.eng-section-head:hover { background: var(--surface-tertiary); }
.eng-section-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.eng-stage-pill { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.eng-section-meta { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 12px; }
.eng-section-meta strong { color: var(--text-primary); font-weight: 600; }
.eng-task-table { width: 100%; }
.eng-task-header { display: grid; grid-template-columns: 3fr 1.4fr 1fr 1fr 1.2fr 1fr 1.4fr; gap: 12px; padding: 8px 18px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); }
.eng-task-row { display: grid; grid-template-columns: 3fr 1.4fr 1fr 1fr 1.2fr 1fr 1.4fr; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border-default); align-items: center; cursor: pointer; transition: background 0.1s; }
.eng-task-row:last-child { border-bottom: 0; }
.eng-task-row:hover { background: var(--surface-secondary); }
.eng-task-name { font-size: 13px; font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.eng-task-assignee { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); }
.eng-assignee-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.eng-task-kind { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.eng-task-due { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; }
.eng-task-due.is-overdue { color: var(--status-danger); }
.eng-task-due.is-today { color: #B45309; }
.eng-task-due.is-normal { color: var(--text-secondary); }
.status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.status-pill.is-overdue { background: rgba(239,68,68,0.1); color: var(--status-danger); }
.status-pill.is-today { background: var(--status-warning-soft); color: #B45309; }
.status-pill.is-waiting { background: var(--status-info-soft); color: var(--status-info); }
.status-pill.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.expedited-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; background: rgba(167,139,250,0.15); color: #6D28D9; }

/* ===== Modals ===== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 800; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 500px; box-shadow: 0 24px 60px rgba(0,0,0,0.18); max-height: calc(100vh - 40px); overflow-y: auto; }
[data-theme="dark"] .modal { box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
.modal-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.modal-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 8px; }
.modal-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 18px; }
.modal-form-row { margin-bottom: 14px; }
.modal-form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.modal-form-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 13px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.modal-form-input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.modal-warning-box { background: var(--status-warning-soft); border-left: 3px solid var(--status-warning); padding: 12px 14px; border-radius: var(--radius-md); font-size: 12.5px; color: #92400E; line-height: 1.55; margin-bottom: 18px; }
[data-theme="dark"] .modal-warning-box { color: var(--status-warning); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border-default); }

.toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-20px); background: var(--brand-dark); color: #fff; padding: 12px 20px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-elevated); display: flex; align-items: center; gap: 10px; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { color: var(--brand-primary); }

@@media (max-width: 900px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kpi:nth-child(4), .kpi:nth-child(5), .kpi:nth-child(6) { display: none; }
  .member-grid { grid-template-columns: repeat(2, 1fr); }
  .eng-task-header, .eng-task-row { grid-template-columns: 2fr 1fr 1fr; }
  .eng-task-row > :nth-child(3), .eng-task-row > :nth-child(4),
  .eng-task-header > :nth-child(3), .eng-task-header > :nth-child(4) { display: none; }
}

/* ===== Task detail drawer ===== */
.detail-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,0.4); backdrop-filter: blur(2px); z-index: 190; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.detail-backdrop.open { opacity: 1; pointer-events: auto; }
.detail-drawer { position: fixed; top: 0; right: 0; width: 480px; max-width: 92vw; height: 100vh; background: var(--surface-primary); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-drawer); z-index: 200; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; }
.detail-drawer.open { transform: translateX(0); }
.detail-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 6px; }
.detail-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-close { width: 32px; height: 32px; border-radius: var(--radius-md); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s ease; background: transparent; border: 0; cursor: pointer; }
.detail-close:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.detail-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.detail-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.25; }
.detail-head-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.detail-body { flex: 1; overflow-y: auto; padding: 18px 24px 20px; }
.detail-section { margin-bottom: 20px; }
.detail-section-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 10px; }
.detail-meta-grid { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: 13px; }
.detail-meta-grid dt { color: var(--text-tertiary); font-size: 12px; }
.detail-meta-grid dd { color: var(--text-primary); font-weight: 500; margin: 0; }
.detail-description { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.detail-activity { display: flex; flex-direction: column; gap: 14px; }
.activity-row { display: flex; gap: 10px; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); flex-shrink: 0; margin-top: 5px; }
.activity-text { font-size: 13px; color: var(--text-primary); line-height: 1.45; }
.activity-meta { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.detail-actions { padding: 16px 24px; border-top: 1px solid var(--border-default); display: flex; gap: 8px; flex-wrap: wrap; }
.detail-actions .btn { flex: 1; justify-content: center; }

/* ===== Bulk reassign overlay ===== */
.bulk-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,0.65); z-index: 900; display: none; align-items: flex-start; justify-content: center; padding: 32px 20px; overflow-y: auto; }
.bulk-backdrop.open { display: flex; }
.bulk-panel { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); width: 100%; max-width: 860px; box-shadow: 0 32px 80px rgba(0,0,0,0.3); display: flex; flex-direction: column; min-height: 0; }
.bulk-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--border-default); }
.bulk-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; }
.bulk-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 4px; }
.bulk-desc { font-size: 13px; color: var(--text-secondary); }
.bulk-table-head { display: grid; grid-template-columns: 2.5fr 1.6fr 1.4fr; gap: 12px; padding: 10px 26px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.bulk-task-row { display: grid; grid-template-columns: 2.5fr 1.6fr 1.4fr; gap: 12px; padding: 12px 26px; border-bottom: 1px solid var(--border-default); align-items: center; transition: background 0.1s; }
.bulk-task-row:last-child { border-bottom: 0; }
.bulk-task-row:hover { background: var(--surface-secondary); }
.bulk-task-info { min-width: 0; }
.bulk-task-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.bulk-task-meta { font-size: 11.5px; color: var(--text-tertiary); }
.bulk-task-meta .is-overdue { color: var(--status-danger); font-weight: 600; }
.bulk-form-select { width: 100%; padding: 7px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-primary); font-family: inherit; cursor: pointer; box-sizing: border-box; }
.bulk-form-select:focus { outline: 0; border-color: var(--brand-primary); }
.bulk-form-date { width: 100%; padding: 7px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.bulk-form-date:focus { outline: 0; border-color: var(--brand-primary); }
.bulk-body { overflow-y: auto; max-height: 50vh; }
.bulk-footer { padding: 16px 26px; border-top: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface-secondary); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.bulk-footer-meta { font-size: 12.5px; color: var(--text-secondary); }
.bulk-footer-actions { display: flex; gap: 8px; }

/* ===== All Tasks List View ===== */
.list-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.list-kpi-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; border-left: 3px solid var(--border-default); }
.list-kpi-tile.is-danger { border-left-color: var(--status-danger); }
.list-kpi-tile.is-warning { border-left-color: var(--status-warning); }
.list-kpi-tile.is-info { border-left-color: var(--status-info); }
.list-kpi-tile.is-success { border-left-color: var(--brand-primary); }
.list-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 6px; }
.list-kpi-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1; letter-spacing: -0.01em; }
.list-kpi-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 5px; }

.list-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.list-filters { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.list-filter-pill { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); cursor: pointer; transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
.list-filter-pill:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.list-filter-pill.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-color: var(--brand-primary); font-weight: 600; }
.list-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.list-search-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 7px 12px; transition: border-color 0.12s ease; }
.list-search-wrap:focus-within { border-color: var(--brand-primary); }
.list-search { border: 0; background: transparent; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: 0; width: 200px; }
.list-search::placeholder { color: var(--text-tertiary); }
.list-sort-select { padding: 7px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); font-size: 12.5px; color: var(--text-secondary); font-family: inherit; cursor: pointer; }
.list-sort-select:focus { outline: 0; border-color: var(--brand-primary); }

.list-table { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.list-table-header { display: grid; grid-template-columns: 1.4fr 1.2fr 2fr 1.6fr 1.2fr 1fr 1fr 1.2fr 1.4fr 36px; gap: 12px; padding: 10px 16px; background: var(--surface-secondary); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; border-bottom: 1px solid var(--border-default); }
.list-task-row { display: grid; grid-template-columns: 3fr 1.4fr 1fr 1fr 1fr 36px; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-default); align-items: center; cursor: pointer; transition: background 0.12s ease; }
.list-task-row:last-child { border-bottom: 0; }
.list-task-row:hover { background: var(--surface-secondary); }
.list-task-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-task-client { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.list-task-client-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.list-task-role { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.list-task-due { font-size: 12px; font-family: 'JetBrains Mono', monospace; font-weight: 500; white-space: nowrap; }
.list-task-due.is-overdue { color: var(--status-danger); font-weight: 700; }
.list-task-due.is-today { color: #B45309; font-weight: 700; }
.list-task-due.is-upcoming { color: var(--text-secondary); }
.list-task-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.list-task-status.is-overdue { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.list-task-status.is-today { background: var(--status-warning-soft); color: #B45309; }
.list-task-status.is-waiting { background: var(--status-info-soft); color: var(--status-info); }
.list-task-status.is-active { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.list-task-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; transition: all 0.12s ease; }
.list-task-action:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.list-empty { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }

@@media (max-width: 700px) {
  .list-table-header { display: none; }
  .list-task-row { grid-template-columns: 1fr auto; }
  .list-task-client, .list-task-role, .list-task-due { display: none; }
  .list-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .list-kpi-tile:nth-child(4), .list-kpi-tile:nth-child(5) { display: none; }
}


/* ===== Reassign type pill ===== */
.type-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.type-pill.is-regular  { background: var(--surface-tertiary); color: var(--text-secondary); }
.type-pill.is-in       { background: var(--status-info-soft); color: var(--status-info); border: 1px solid rgba(96,165,250,0.3); }
.type-pill.is-out      { background: rgba(239,68,68,0.1); color: var(--status-danger); border: 1px solid rgba(239,68,68,0.25); }


.stage-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; background: var(--surface-tertiary); color: var(--text-secondary); }
.stage-pill.is-bookkeeping    { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.stage-pill.is-review         { background: rgba(167,139,250,0.15); color: #6D28D9; }
.stage-pill.is-client         { background: var(--status-info-soft); color: var(--status-info); }
.stage-pill.is-ingestion      { background: var(--status-warning-soft); color: #B45309; }
.stage-pill.is-close          { background: var(--status-success-soft); color: var(--status-success); }


/* ===== Loading spinner ===== */
.loading-spinner, .btn-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(46,212,165,.25);
    border-top-color: var(--brand-primary-strong, #2ED4A5);
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
.btn-spinner { width: 13px; height: 13px; margin-right: 5px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ===== Statement Import Wizard ===== */

.client-portal-page .cm-step-dot.is-pending { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-tertiary); }

.client-portal-page .card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.client-portal-page .table-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }

.client-portal-page .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.client-portal-page .kv-grid > div { display: flex; flex-direction: column; gap: 4px; }
.client-portal-page .kv-label { font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.client-portal-page .kv-val { font-size: 14px; font-weight: 500; color: var(--text-primary); }

.client-portal-page .thumbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 8px; }
.client-portal-page .thumbcard { position: relative; display: block; padding: 6px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.client-portal-page .thumbcard:hover { border-color: var(--brand-primary); }
.client-portal-page .thumbcard.is-selected { border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.client-portal-page .thumbcard input[type="checkbox"] { position: absolute; top: 8px; right: 8px; z-index: 2; }
.client-portal-page .thumbcard img { width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--surface-secondary); display: block; }
.client-portal-page .thumb-label { margin-top: 6px; font-size: 11.5px; font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); text-align: center; }

.client-portal-page .progress-track { width: 100%; height: 8px; background: var(--surface-secondary); border-radius: 999px; overflow: hidden; }
.client-portal-page .progress-bar { height: 100%; background: var(--brand-primary); transition: width .25s ease-out; }
.client-portal-page .progress-bar.indeterminate { width: 40% !important; animation: zpb-indeterminate 1.4s ease-in-out infinite; }
@keyframes zpb-indeterminate {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

.client-portal-page .confchip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.client-portal-page .confchip.high { background: var(--status-success-soft); color: var(--status-success); }
.client-portal-page .confchip.mid  { background: var(--status-warning-soft, #FFF4E0); color: var(--status-warning, #B45309); }
.client-portal-page .confchip.low  { background: var(--status-danger-soft); color: var(--status-danger); }

.client-portal-page .warnchip { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-right: 4px; margin-bottom: 2px; border-radius: 4px; background: var(--status-warning-soft, #FFF4E0); color: var(--status-warning, #B45309); font-size: 10.5px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }

.client-portal-page .ledger-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.client-portal-page .ledger-table thead th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); position: sticky; top: 0; }
.client-portal-page .ledger-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); }
.client-portal-page .ledger-table tbody tr:hover { background: var(--surface-secondary); cursor: pointer; }
.client-portal-page .ledger-table tbody tr.is-rejected td { color: var(--text-tertiary); text-decoration: line-through; }

.client-portal-page .ca-kpi-warn { color: var(--status-warning, #B45309); }

.client-portal-page .rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 24px; }
.client-portal-page .rec-lbl { font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.client-portal-page .rec-val { font-size: 15px; font-weight: 600; color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.client-portal-page .rec-val.ok { color: var(--status-success); }
.client-portal-page .rec-val.danger { color: var(--status-danger); }

.client-portal-page .page-progress { display: flex; flex-direction: column; gap: 4px; }
.client-portal-page .pp-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 6px; font-size: 13px; background: var(--surface-primary); }
.client-portal-page .pp-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 700; }
.client-portal-page .pp-label { font-weight: 500; color: var(--text-primary); }
.client-portal-page .pp-meta { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.client-portal-page .pp-done { background: var(--status-success-soft); border-color: var(--status-success); }
.client-portal-page .pp-done .pp-icon { background: var(--status-success); color: #fff; }
.client-portal-page .pp-done .pp-meta { color: var(--status-success); }
.client-portal-page .pp-inflight { background: var(--brand-primary-soft); border-color: var(--brand-primary); }
.client-portal-page .pp-inflight .pp-icon { background: var(--brand-primary); color: #fff; animation: zpb-pulse 1.2s ease-in-out infinite; }
.client-portal-page .pp-pending .pp-icon { background: var(--surface-secondary); color: var(--text-tertiary); border: 1px solid var(--border-default); }
@keyframes zpb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }


/* ===== Print styles ===== */
@@media print {
    /* Hide all chrome — only the report block prints */
    .portal-nav,
    .portal-sidebar,
    .portal-topbar,
    .bk-page-header,
    .page-tabs,
    .rpt-toolbar,
    .rpt-summary,
    .page-actions,
    .btn,
    .alert { display: none !important; }

    body, .portal-main, .client-portal-page { background: #fff !important; margin: 0; padding: 0; }
    .portal-main { padding: 0 !important; }

    .rpt {
        box-shadow: none !important;
        border: none !important;
        color: #000 !important;
        font-size: 11pt;
    }
    .rpt-head { color: #000 !important; border-bottom: 1px solid #ccc; }
    .rpt-title { color: #000 !important; font-size: 14pt; }
    .rpt-entity, .rpt-period { color: #444 !important; }
    .rpt-cols-head { background: #f5f5f5 !important; color: #000 !important; border-bottom: 1px solid #ccc; }
    .rpt-section-header { background: #fafafa !important; color: #000 !important; border-bottom: 1px solid #ddd; }
    .rpt-line { color: #000 !important; border-bottom: 1px solid #eee; }
    .rpt-subtotal, .rpt-total { color: #000 !important; border-top: 1px solid #ccc; }
    .rpt-foot { color: #666 !important; font-size: 9pt; border-top: 1px solid #ddd; }
    .rpt-name a { color: #000 !important; text-decoration: none; border-bottom: none !important; }

    /* Ensure page breaks don't split section headers from their rows */
    .rpt-section-header { page-break-after: avoid; }
    .rpt-subtotal, .rpt-total { page-break-before: avoid; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Statement extraction pipeline — source-to-portal token alias map.
   Every .bx-* component CSS file under Components/Shared/Extractions/ uses
   these aliases so the source's --ink / --paper / --ochre / --sage / --crimson
   tokens resolve to the right ZiePieBooks portal values. This is the ONLY
   extraction CSS in portal.css; everything else lives in scoped .razor.css.
   ───────────────────────────────────────────────────────────────────────── */
.client-portal-page {
    --bx-ink: var(--text-primary);
    --bx-ink-soft: var(--text-secondary);
    --bx-mute: var(--text-tertiary);
    --bx-mute-soft: var(--text-tertiary);
    --bx-paper: var(--surface-secondary);
    --bx-paper-deep: var(--surface-tertiary);
    --bx-card: var(--surface-primary);
    --bx-rule: var(--border-default);
    --bx-rule-soft: var(--border-default);
    --bx-rule-faint: var(--border-default);
    --bx-ochre: var(--brand-primary);
    --bx-ochre-deep: var(--brand-primary-strong, var(--brand-primary));
    --bx-ochre-soft: var(--brand-primary-soft, var(--surface-secondary));
    --bx-sage: var(--status-success);
    --bx-sage-soft: rgba(34, 197, 94, 0.10);
    --bx-crimson: var(--status-danger);
    --bx-crimson-soft: rgba(239, 68, 68, 0.10);
    --bx-gold: #b45309;
    --bx-gold-soft: rgba(245, 158, 11, 0.15);
    --bx-radius-sm: 2px;
    --bx-radius: var(--radius-md);
    --bx-radius-lg: var(--radius-md);
    --bx-font-display: inherit;
    --bx-font-ui: inherit;
    --bx-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --bx-s-1: 0.25rem;
    --bx-s-2: 0.5rem;
    --bx-s-3: 0.75rem;
    --bx-s-4: 1rem;
    --bx-s-5: 1.5rem;
    --bx-s-6: 2rem;
    --bx-s-7: 3rem;
}

/* ─── Extraction shared primitives — buttons, eyebrows, tags, etc.
   These are unscoped so every Components/Shared/Extractions/*.razor can use them.
   Tokens above (--bx-*) drive everything; no fixed colors. ─────────────────── */

.client-portal-page .bx-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--bx-s-2);
    padding: 0.7rem 1.2rem;
    font-family: var(--bx-font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--bx-ink);
    background: var(--bx-ink);
    color: var(--bx-card);
    border-radius: var(--bx-radius-sm);
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
    cursor: pointer;
}
.client-portal-page .bx-btn:hover:not(:disabled) { background: var(--bx-ochre); border-color: var(--bx-ochre); color: var(--bx-card); transform: translateY(-1px); }
.client-portal-page .bx-btn:disabled { background: var(--bx-paper-deep); border-color: var(--bx-rule-soft); color: var(--bx-mute-soft); cursor: not-allowed; transform: none; }

.client-portal-page .bx-btn--ghost { background: transparent; color: var(--bx-ink); border-color: var(--bx-rule); }
.client-portal-page .bx-btn--ghost:hover:not(:disabled) { background: var(--bx-ink); color: var(--bx-card); }

.client-portal-page .bx-btn--ochre { background: var(--bx-ochre); border-color: var(--bx-ochre); color: var(--bx-card); }
.client-portal-page .bx-btn--ochre:hover:not(:disabled) { background: var(--bx-ochre-deep); border-color: var(--bx-ochre-deep); }

.client-portal-page .bx-btn--small { padding: 0.45rem 0.85rem; font-size: 0.72rem; }

.client-portal-page .bx-eyebrow {
    font-family: var(--bx-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--bx-ochre);
}
.client-portal-page .bx-eyebrow--mute { color: var(--bx-mute); }

.client-portal-page .bx-num {
    font-family: var(--bx-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Tag pills */
.client-portal-page .bx-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    font-family: var(--bx-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--bx-rule);
    border-radius: 999px;
    background: transparent;
    color: var(--bx-ink);
}
.client-portal-page .bx-tag--debit   { color: var(--bx-crimson); border-color: var(--bx-crimson); }
.client-portal-page .bx-tag--credit  { color: var(--bx-sage); border-color: var(--bx-sage); }
.client-portal-page .bx-tag--pending { color: var(--bx-gold); border-color: var(--bx-gold); background: var(--bx-gold-soft); }
.client-portal-page .bx-tag--posted  { color: var(--bx-mute); border-color: var(--bx-rule-soft); }

/* Rules and dividers */
.client-portal-page .bx-rule { border: 0; border-top: 1px solid var(--bx-rule); margin: var(--bx-s-5) 0; }
.client-portal-page .bx-rule--soft { border: 0; border-top: 1px solid var(--bx-rule-soft); margin: var(--bx-s-4) 0; }

/* Eyebrow row with trailing rule */
.client-portal-page .bx-eyebrow-row {
    display: flex;
    align-items: center;
    gap: var(--bx-s-3);
    margin-bottom: var(--bx-s-3);
}
.client-portal-page .bx-eyebrow-row::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bx-rule);
}

/* Confidence bar shared by InspectView and TransactionsTable */
.client-portal-page .bx-confbar {
    display: inline-block;
    width: 36px;
    height: 6px;
    background: var(--bx-rule-faint);
    border-radius: 1px;
    position: relative;
    vertical-align: middle;
}
.client-portal-page .bx-confbar::before {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--bx-w, 0%);
    background: currentColor;
    border-radius: 1px;
}
.client-portal-page .bx-confbar--high { color: var(--bx-sage); }
.client-portal-page .bx-confbar--mid  { color: var(--bx-gold); }
.client-portal-page .bx-confbar--low  { color: var(--bx-crimson); }

/* Extract page shell (orchestrator-only) */
.client-portal-page .bx-extract-shell { max-width: 1240px; margin: 0 auto; padding: var(--bx-s-6) var(--bx-s-5); display: flex; flex-direction: column; gap: var(--bx-s-5); }
.client-portal-page .bx-page-title { font-family: var(--bx-font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--bx-ink); }

/* Initial load placeholder on /extract/{id} (prevents Upload-state flash) */
.client-portal-page .bx-loading { display: flex; align-items: center; justify-content: center; gap: var(--bx-s-3); padding: var(--bx-s-6); color: var(--bx-mute); font-family: var(--bx-font-ui); font-size: 0.95rem; }
.client-portal-page .bx-spinner { width: 1.1rem; height: 1.1rem; border: 2px solid var(--bx-rule); border-top-color: var(--bx-ochre); border-radius: 50%; animation: bx-spin 0.7s linear infinite; }
@keyframes bx-spin { to { transform: rotate(360deg); } }

/* Resume in-progress card on /extract */
.client-portal-page .bx-resume { background: var(--bx-card); border: 1px solid var(--bx-rule); border-left: 4px solid var(--bx-ochre); padding: var(--bx-s-4) var(--bx-s-5); display: flex; flex-direction: column; gap: var(--bx-s-3); }
.client-portal-page .bx-resume__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bx-s-3); }
.client-portal-page .bx-resume__row { display: grid; grid-template-columns: 120px 1fr auto auto; gap: var(--bx-s-3); align-items: center; padding: var(--bx-s-2) var(--bx-s-3); border: 1px solid var(--bx-rule-soft); border-radius: var(--bx-radius-sm); text-decoration: none; color: var(--bx-ink); }
.client-portal-page .bx-resume__row:hover { background: var(--bx-paper); border-color: var(--bx-rule); }
.client-portal-page .bx-resume__chip { display: inline-flex; align-items: center; padding: 0.14rem 0.55rem; font-family: var(--bx-font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; border: 1px solid var(--bx-rule-soft); background: var(--bx-paper); color: var(--bx-mute); }
.client-portal-page .bx-resume__chip--active { color: var(--bx-ochre-deep); border-color: var(--bx-ochre); background: var(--bx-ochre-soft); }
.client-portal-page .bx-resume__chip--review { color: var(--bx-gold); border-color: var(--bx-gold); background: var(--bx-gold-soft); }
.client-portal-page .bx-resume__chip--failed { color: var(--bx-crimson); border-color: var(--bx-crimson); background: var(--bx-crimson-soft); }
.client-portal-page .bx-resume__name { font-weight: 600; }
.client-portal-page .bx-resume__meta { color: var(--bx-mute); font-size: 0.78rem; }
.client-portal-page .bx-resume__cta { color: var(--bx-ochre-deep); font-weight: 600; font-size: 0.85rem; }

/* ───── Reports → Charts tab ───── */
.rpt-charts { display: flex; flex-direction: column; gap: 16px; }
.rpt-charts-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.rpt-charts-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-card); }
.rpt-charts-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.rpt-charts-kpi-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.rpt-charts-kpi-value.ok { color: var(--status-success); }
.rpt-charts-kpi-value.danger { color: var(--status-danger); }
.rpt-charts-kpi-sub { font-size: 11.5px; margin-top: 6px; font-weight: 500; }
.rpt-charts-kpi-sub.ok { color: var(--status-success); }
.rpt-charts-kpi-sub.danger { color: var(--status-danger); }
.rpt-chart-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.rpt-chart-head { padding: 16px 20px 8px; border-bottom: 1px solid var(--border-default); }
.rpt-chart-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; letter-spacing: -.01em; color: var(--text-primary); }
.rpt-chart-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.rpt-chart-canvas-wrap { padding: 16px 20px 20px; position: relative; }

/* ───── Cash Flow Forecast (Owner Report) ───── */
.fc-wrap { display: flex; flex-direction: column; gap: 16px; }
.fc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.fc-tile { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-card); }
.fc-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.fc-tile-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.fc-tile-value.ok { color: var(--status-success); }
.fc-tile-value.danger { color: var(--status-danger); }
.fc-tile-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 6px; }
.fc-alert { display: flex; gap: 12px; padding: 14px 18px; border-radius: var(--radius-md); border-left: 4px solid; align-items: flex-start; }
.fc-alert.danger { background: rgba(239, 68, 68, 0.06); border-left-color: var(--status-danger); color: var(--status-danger); }
.fc-alert.ok     { background: rgba(34, 197, 94, 0.08); border-left-color: var(--status-success); color: var(--status-success); }
.fc-alert-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.fc-alert-body { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.fc-chart-card,
.fc-table-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.fc-chart-head { padding: 16px 20px 8px; border-bottom: 1px solid var(--border-default); }
.fc-chart-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; letter-spacing: -.01em; color: var(--text-primary); }
.fc-chart-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.fc-chart-canvas-wrap { padding: 16px 20px 20px; position: relative; }
.fc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fc-table th { padding: 10px 16px; text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); background: var(--surface-secondary); }
.fc-table th.right, .fc-table td.right { text-align: right; font-family: 'JetBrains Mono', monospace; }
.fc-table td { padding: 10px 16px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); }
.fc-table td.ok { color: var(--status-success); }
.fc-table td.danger { color: var(--status-danger); }
.fc-table tr.is-forecast td { color: var(--text-tertiary); font-style: italic; background: var(--surface-secondary); }
.fc-table tr.is-forecast td.danger { color: var(--status-danger); font-style: italic; }
.fc-source { display: inline-block; padding: 1px 8px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fc-source.actual   { background: rgba(34, 197, 94, 0.12); color: var(--status-success); }
.fc-source.forecast { background: var(--surface-tertiary); color: var(--text-tertiary); }
.fc-method { font-size: 12px; color: var(--text-tertiary); padding: 12px 16px; background: var(--surface-secondary); border-radius: var(--radius-md); line-height: 1.55; }

/* ───── Period Close landing ───── */
.pc-landing-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 16px 24px 0; }
.pc-landing-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-card); }
.pc-landing-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.pc-landing-kpi-value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.pc-landing-kpi-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 6px; }

.pc-landing-toolbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px 8px; }
.pc-landing-toolbar-left { display: flex; align-items: center; gap: 10px; }
.pc-landing-toolbar-right { margin-left: auto; }

.pc-landing-table-wrap { padding: 0 24px 24px; }
.pc-landing-table { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.pc-landing-table thead th { background: var(--surface-secondary); padding: 10px 14px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); text-align: left; }
.pc-landing-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-default); vertical-align: middle; font-size: 13px; color: var(--text-primary); }
.pc-landing-table tbody tr:last-child td { border-bottom: 0; }
.pc-landing-row.state-locked td { background: var(--surface-secondary); }
.pc-landing-row.state-inprogress { background: rgba(46, 212, 165, 0.04); }
.pc-landing-period { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.pc-landing-activity { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }

.pc-locked-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin: 12px 0; background: var(--surface-secondary); border: 1px solid var(--border-default); border-left: 4px solid var(--brand-primary-strong); border-radius: var(--radius-md); font-size: 12.5px; color: var(--text-secondary); }
.pc-locked-banner svg { color: var(--brand-primary-strong); flex-shrink: 0; }

/* ==========================================================================
   Customer / Business prototype additions (Phase 1)
   ========================================================================== */

/* --- Bulk action bar children --- */
.bulk-bar-info { display: flex; align-items: center; gap: 12px; flex: 1; font-size: 13px; }
.bulk-bar-count { background: rgba(255,255,255,0.18); color: #fff; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; }
.bulk-bar-clear { color: rgba(255,255,255,0.75); font-size: 12.5px; padding: 4px 8px; border-radius: 6px; background: transparent; border: 0; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.bulk-bar-clear:hover { background: rgba(255,255,255,0.1); color: #fff; }
.bulk-bar-actions { display: flex; align-items: center; gap: 8px; }
.bulk-bar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.bulk-bar-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.35); }
.bulk-bar-btn.is-danger { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.4); color: #FCA5A5; }
.bulk-bar-btn.is-danger:hover { background: rgba(239,68,68,0.3); color: #FFE4E6; }

/* --- Bulk row checkbox --- */
.bulk-checkbox { width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--surface-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.12s ease; color: transparent; }
.bulk-checkbox:hover { border-color: var(--brand-primary); }
.bulk-checkbox.is-checked { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); }
.bulk-checkbox.is-checked svg { color: var(--brand-dark); }
.bulk-checkbox svg { width: 11px; height: 11px; }
.table-row.is-bulk-selected { background: var(--brand-primary-soft); }
.table-row.is-bulk-selected:hover { background: var(--brand-primary-soft); }

/* --- Row 3-dot dropdown menu --- */
.row-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.row-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: 4px; display: none; z-index: 60; }
.row-menu.open { display: block; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text-primary); background: transparent; border: 0; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.12s ease, color 0.12s ease; }
.menu-item:hover { background: var(--surface-secondary); }
.menu-item svg { width: 14px; height: 14px; color: var(--text-tertiary); flex-shrink: 0; }
.menu-item:hover svg { color: var(--text-secondary); }
.menu-item.is-danger { color: var(--status-danger); }
.menu-item.is-danger svg { color: var(--status-danger); }
.menu-item.is-danger:hover { background: rgba(239,68,68,0.08); }
.menu-section { padding: 8px 10px 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.menu-divider { height: 1px; background: var(--border-default); margin: 4px 2px; }

/* --- Modal extensions used by Customers/Businesses prototypes --- */
.modal-eyebrow.is-warning { color: #B45309; }
.modal-eyebrow.is-danger { color: var(--status-danger); }
.modal-danger-box { background: rgba(239,68,68,0.08); border-left: 3px solid var(--status-danger); padding: 12px 14px; border-radius: var(--radius-md); font-size: 12.5px; color: var(--status-danger); line-height: 1.55; margin-bottom: 18px; }
.modal-danger-box strong { color: var(--status-danger); }
[data-theme="dark"] .modal-danger-box { color: #FCA5A5; }
[data-theme="dark"] .modal-danger-box strong { color: #FECACA; }
.modal-form-row.is-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
[data-theme="dark"] .modal-warning-box { color: #FBBF24; }
[data-theme="dark"] .modal-warning-box strong { color: #FDE68A; }

/* --- Sticky form footer (Add flows) --- */
.form-footer { position: sticky; bottom: 0; left: 0; right: 0; background: var(--surface-primary); border-top: 1px solid var(--border-default); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 50; margin-top: 24px; }
.form-footer-meta { font-size: 12px; color: var(--text-tertiary); flex: 1; min-width: 0; }
.form-footer-meta strong { color: var(--text-primary); }
.form-footer-actions { display: flex; gap: 8px; align-items: center; }

/* --- Form sections / cards used by Add flows --- */
.form-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 18px; }
.form-card-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 4px; }
.form-card-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 16px; }
.form-section { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 16px; }
.form-section-header { margin-bottom: 14px; }
.form-section-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 16.5px; color: var(--text-primary); letter-spacing: -0.005em; margin-bottom: 4px; }
.form-section-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-row.cols-1 { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.form-label .required, .form-label .req { color: var(--status-danger); margin-left: 2px; font-weight: 600; }
.form-help { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; margin-top: 4px; }
.form-error { font-size: 11.5px; color: var(--status-danger); display: none; margin-top: 4px; }
.form-error.is-visible { display: block; }
.form-input.has-error, .form-select.has-error { border-color: var(--status-danger); box-shadow: var(--shadow-focus-danger); }
.form-input { height: 36px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-size: 13.5px; font-family: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease; width: 100%; }
.form-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.form-select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 34px 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-size: 13.5px; font-family: inherit; cursor: pointer; width: 100%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 3.5L5 6.5L8 3.5' stroke='%2394A3B8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.form-select:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
textarea.form-input { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; line-height: 1.5; }

/* --- Toggle switch (button variant used by Add forms) --- */
.toggle-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 0; gap: 18px; border-top: 1px solid var(--border-default); }
.toggle-row:first-child { border-top: 0; padding-top: 0; }
.toggle-info { flex: 1; min-width: 0; }
.toggle-name, .toggle-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.toggle-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.toggle-switch { position: relative; width: 36px; height: 20px; background: var(--border-strong); border-radius: 10px; cursor: pointer; transition: background 0.15s ease; flex-shrink: 0; padding: 0; border: 0; }
.toggle-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.toggle-switch.on { background: var(--brand-primary); }
.toggle-switch.on::after { transform: translateX(16px); }

/* --- Customer hero / business hero (alias to entity-hero with role classes) --- */
/* Existing .entity-hero already covers most of this; add role-specific avatar tones */
.entity-hero .entity-hero-avatar.is-customer { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); }
.entity-hero .entity-hero-avatar.is-business { background: var(--brand-dark); color: var(--brand-primary); }

/* --- Page back link (used on Add flows) --- */
/* Existing .page-back is already defined */

/* --- Add-Customer post-save modal extras --- */
.modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); margin: 0 auto 14px; }
.modal-customer-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin: 16px 0 18px; }
.modal-customer-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.modal-customer-info { flex: 1; min-width: 0; }
.modal-customer-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.modal-customer-email { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.modal-helper { font-size: 11.5px; color: var(--text-tertiary); text-align: center; margin-top: 12px; }

/* --- Page header eyebrow alias used by some prototype copy --- */
.page-greeting { font-size: 13.5px; color: var(--text-secondary); margin-top: 6px; line-height: 1.55; max-width: 720px; }

/* --- Connected Accounts pill variants used by Business detail (Phase 3 stubs but
       the pills also appear inline in some other surfaces) --- */
.invite-status.is-connected, .status-pill.is-connected { background: var(--status-success-soft); color: var(--status-success); }
.invite-status.is-expiring, .status-pill.is-expiring { background: var(--status-warning-soft); color: var(--status-warning); }

/* --- Typeahead (Add-Business customer picker) --- */
.typeahead-wrap { position: relative; }
/* The .fade-up cards each get `transform`, which makes every .form-section its own
   stacking context. That traps the typeahead dropdown (z-index:70) inside the Customer
   card, so the next card (Business details) paints over it in DOM order. Lift the card
   that currently has an open dropdown above its siblings while it's open. */
.form-section:has(.typeahead-dropdown.open) { position: relative; z-index: 5; }
.typeahead-wrap.has-selection .typeahead-input,
.typeahead-wrap.has-selection .typeahead-icon,
.typeahead-wrap.has-selection .typeahead-dropdown { display: none; }
.typeahead-input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-size: 13.5px; font-family: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.typeahead-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.typeahead-icon { position: absolute; left: 14px; top: 13px; color: var(--text-tertiary); pointer-events: none; }
.typeahead-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: 6px; display: none; z-index: 70; max-height: 320px; overflow-y: auto; }
.typeahead-dropdown.open { display: block; }
.typeahead-section-label { padding: 8px 10px 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.typeahead-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background 0.1s ease; }
.typeahead-option:hover { background: var(--surface-secondary); }
.typeahead-option-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.typeahead-option-info { flex: 1; min-width: 0; }
.typeahead-option-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.typeahead-option-meta { font-size: 11.5px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.typeahead-option-meta .biz-count { font-family: 'JetBrains Mono', monospace; padding: 0 6px; background: var(--surface-tertiary); border-radius: 8px; color: var(--text-secondary); }
.typeahead-empty { padding: 12px; font-size: 12.5px; color: var(--text-tertiary); text-align: center; }
.typeahead-create { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 4px; border-top: 1px solid var(--border-default); cursor: pointer; color: var(--brand-primary-strong); font-weight: 600; font-size: 13px; }
.typeahead-create:hover { background: var(--brand-primary-soft); }
.typeahead-create-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary-soft); display: inline-flex; align-items: center; justify-content: center; }

/* --- Customer chip (after typeahead select) --- */
.customer-chip { display: none; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-top: 8px; }
.customer-chip.visible { display: flex; }
.customer-chip-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.customer-chip-info { flex: 1; min-width: 0; }
.customer-chip-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.customer-chip-meta { font-size: 11.5px; color: var(--text-tertiary); }
.customer-chip-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--surface-tertiary); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.customer-chip-tag.is-new { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.customer-chip-clear { width: 28px; height: 28px; border-radius: 6px; color: var(--text-tertiary); background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s ease, color 0.12s ease; }
.customer-chip-clear:hover { background: var(--surface-tertiary); color: var(--text-primary); }

/* --- Add-Business invite-section helper --- */
.invite-section { display: none; padding-top: 12px; }
.invite-section.visible { display: block; }
.invite-helper { display: flex; gap: 10px; padding: 12px 14px; background: var(--brand-primary-soft); border-left: 3px solid var(--brand-primary); border-radius: var(--radius-md); margin-bottom: 10px; }
.invite-helper-icon { color: var(--brand-primary-strong); flex-shrink: 0; margin-top: 2px; }
.invite-helper-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.invite-helper-text strong { color: var(--text-primary); }

/* --- Notes section --- */
.notes-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.notes-helper { font-size: 11.5px; color: var(--text-tertiary); }
.notes-empty { text-align: center; padding: 20px 16px; color: var(--text-tertiary); }
.notes-empty svg { color: var(--text-tertiary); }

/* --- Portal-status icon variants --- */
.portal-status-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-status-icon.is-accepted { background: var(--status-success-soft); color: var(--status-success); }
.portal-status-icon.is-sent { background: var(--status-info-soft); color: var(--status-info); }
.portal-status-icon.is-not-invited { background: var(--surface-tertiary); color: var(--text-tertiary); }
.portal-status-info { flex: 1; min-width: 0; }
.portal-status-headline { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.portal-status-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.portal-status-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* --- Portal history rows --- */
.portal-history-list { padding: 8px 16px 16px; }
.portal-history-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-default); }
.portal-history-row:last-child { border-bottom: 0; }
.portal-history-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-history-icon.is-info { background: var(--status-info-soft); color: var(--status-info); }
.portal-history-icon.is-success { background: var(--status-success-soft); color: var(--status-success); }
.portal-history-info { flex: 1; min-width: 0; }
.portal-history-action { font-size: 13px; color: var(--text-primary); }
.portal-history-meta { font-size: 11.5px; color: var(--text-tertiary); }
.portal-history-time { font-size: 11.5px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }

/* --- Activity timeline --- */
.timeline { padding: 4px 16px 16px; }
.timeline-item { display: flex; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-default); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-tertiary); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-icon.is-info { background: var(--status-info-soft); color: var(--status-info); }
.timeline-icon.is-success { background: var(--status-success-soft); color: var(--status-success); }
.timeline-icon.is-warning { background: var(--status-warning-soft); color: var(--status-warning); }
.timeline-content { flex: 1; min-width: 0; }
.timeline-action { font-size: 13px; color: var(--text-primary); }
.timeline-action strong { font-weight: 600; }
.timeline-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

/* ── Customer transactions: compact icon action buttons ── */
.cp-row-actions { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.cp-iconbtn {
    width: 26px; height: 26px; padding: 0; flex: 0 0 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-default); border-radius: 6px;
    background: var(--surface-primary); color: var(--text-secondary); cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.cp-iconbtn svg { width: 15px; height: 15px; }
.cp-iconbtn:hover:not(:disabled) { background: var(--bg-subtle, #F3F4F6); color: var(--text-primary); }
.cp-iconbtn:disabled { opacity: .45; cursor: default; }
.cp-iconbtn.is-approve { color: var(--status-success, #047857); border-color: var(--status-success, #047857); }
.cp-iconbtn.is-approve:hover:not(:disabled) { background: var(--status-success, #047857); color: #fff; }
.cp-iconbtn.is-reject { color: var(--status-danger, #B42318); }
.cp-iconbtn.is-reject:hover:not(:disabled) { background: var(--status-danger, #B42318); color: #fff; border-color: var(--status-danger, #B42318); }

/* category-group (By account) */
.cp-cat-group { border: 1px solid var(--border-subtle); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.cp-cat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; background: var(--surface-primary); }
.cp-cat-head:hover { background: var(--bg-subtle, #F8F9FB); }
.cp-cat-title { font-weight: 600; font-size: 13px; flex: 1; }
.cp-cat-code { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); margin-right: 6px; }
.cp-cat-actions { display: inline-flex; gap: 6px; align-items: center; }
.cp-cat-body { border-top: 1px solid var(--border-subtle); }

/* ==================== connect-accounts-v2.css ==================== */
/* connect-accounts-v2.css — GLOBAL styles for the Connect Accounts V2 screen
   (BkConnectAccountsV2.razor + BkConnectAccountCardV2.razor), from
   design_handoff_connect_accounts/. Global rather than CSS-isolated so the page and its
   card child component share the cav2- classes. Rides the app's existing tokens +
   [data-theme="dark"] overrides (identical var names). Prefix: cav2-. */

.cav2-loading { padding: 40px; font-size: 13px; color: var(--text-tertiary); }
.cav2-wrap { padding: 26px 28px 80px; display: flex; flex-direction: column; gap: 28px; }
.cav2-mono { font-family: 'JetBrains Mono', monospace; }
.num { text-align: right; }

/* ── Header ── */
.cav2-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cav2-head-titles { flex: 1; min-width: 260px; }
.cav2-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 6px; }
.cav2-h1 { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 6px; }
.cav2-sub { font-size: 13.5px; color: var(--text-secondary); }
.cav2-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Buttons ── */
.cav2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap; }
.cav2-btn:disabled { opacity: .55; cursor: default; }
.cav2-btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.cav2-btn-lg { height: 42px; padding: 0 22px; font-size: 14px; }
.cav2-btn-block { flex: 1; width: 100%; }
.cav2-btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-dark); font-weight: 600; }
.cav2-btn-primary:hover { background: var(--brand-primary-strong); }
.cav2-btn-secondary { background: var(--surface-primary); border-color: var(--border-default); color: var(--text-primary); }
.cav2-btn-secondary:hover { background: var(--surface-secondary); }
.cav2-btn-danger { background: var(--status-danger); border-color: var(--status-danger); color: #fff; font-weight: 600; }
.cav2-btn-danger-text { color: var(--status-danger); }
.cav2-btn-ghost-danger { background: transparent; border-color: transparent; color: var(--status-danger); }
.cav2-btn-ghost-danger:hover { background: var(--status-danger-soft); }

.cav2-field-error { font-size: 12px; color: var(--status-danger); background: var(--status-danger-soft); border-radius: 7px; padding: 8px 10px; }

/* ── KPI strip ── */
.cav2-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .cav2-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.cav2-kpi { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow-card); }
.cav2-kpi-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; font-weight: 500; }
.cav2-kpi-val { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; letter-spacing: -.02em; line-height: 1; color: var(--text-primary); }
.cav2-kpi-val-sm { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; }
.cav2-kpi-err { color: var(--status-danger); }

/* ── Section ── */
.cav2-section { display: flex; flex-direction: column; gap: 14px; }
.cav2-section-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-default); }
.cav2-section-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cav2-ico-bank { background: var(--status-info-soft); color: var(--status-info); }
.cav2-ico-cc { background: var(--status-warning-soft); color: #92400E; }
.cav2-section-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.cav2-count { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; padding: 2px 7px; border-radius: 9px; background: var(--surface-secondary); color: var(--text-tertiary); }
.cav2-section-add { margin-left: auto; height: 30px; padding: 0 10px; font-size: 12px; font-weight: 500; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--brand-primary-strong); cursor: pointer; }
.cav2-section-add:hover { background: var(--brand-primary-soft); }

/* ── Grid + cards ── */
.cav2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cav2-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.cav2-card.is-error { border-color: var(--status-danger); }
.cav2-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; cursor: pointer; }

.cav2-logo { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.cav2-logo-lg { width: 44px; height: 44px; font-size: 13px; border-radius: 10px; }
.cav2-logo-wf { background: var(--status-info-soft); color: #1D4ED8; }
.cav2-logo-chase { background: var(--status-warning-soft); color: #92400E; }
.cav2-logo-amex { background: var(--status-info-soft); color: #1E40AF; }
.cav2-logo-generic { background: var(--surface-tertiary); color: var(--text-secondary); }

.cav2-card-info { flex: 1; min-width: 0; }
.cav2-card-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.cav2-card-mask { font-size: 11.5px; color: var(--text-tertiary); }
.cav2-card-gl { font-size: 11px; color: var(--text-tertiary); margin-top: 5px; }
.cav2-card-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

/* badges + pills */
.cav2-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.cav2-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cav2-badge-active { background: var(--status-success-soft); color: var(--status-success); }
.cav2-badge-err { background: var(--status-danger-soft); color: var(--status-danger); }
.cav2-badge-sync { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.cav2-badge-paused { background: var(--surface-tertiary); color: var(--text-secondary); }

.cav2-card-alert { margin: 0 18px 10px; padding: 8px 12px; border-radius: 7px; font-size: 12px; display: flex; align-items: center; gap: 8px; background: var(--status-danger-soft); color: var(--status-danger); }

.cav2-card-stats { display: flex; border-top: 1px solid var(--border-default); }
.cav2-card-stats-num { border-bottom: 1px solid var(--border-default); }
.cav2-card-stat { flex: 1; padding: 10px 14px; }
.cav2-card-stat + .cav2-card-stat { border-left: 1px solid var(--border-default); }
.cav2-tc { text-align: center; }
.cav2-card-stat-lbl { font-size: 9.5px; font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; }
.cav2-card-stat-val { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.cav2-card-stat-num { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 600; line-height: 1; }
.cav2-card-stats-num .cav2-card-stat-lbl { margin-top: 4px; margin-bottom: 0; text-transform: none; letter-spacing: 0; font-size: 10.5px; }
.cav2-card-behind { font-size: 11px; font-weight: 500; margin-top: 1px; }
.is-fresh { color: var(--brand-primary-strong); }
.is-warn { color: var(--status-warning); }
.is-danger { color: var(--status-danger); }

.cav2-card-health { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-bottom: 1px solid var(--border-default); }
.cav2-card-health-lbl { font-size: 10.5px; color: var(--text-tertiary); flex-shrink: 0; }
.cav2-card-health-dots { display: flex; gap: 3px; flex: 1; }
.cav2-hdot { width: 18px; height: 8px; border-radius: 3px; flex-shrink: 0; background: var(--border-default); }
.cav2-hdot.is-ok { background: var(--status-success); }
.cav2-hdot.is-err { background: var(--status-danger); }

.cav2-card-actions { display: flex; align-items: center; gap: 6px; padding: 10px 14px; flex-wrap: wrap; }
.cav2-card-actions-left { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }

.cav2-add-card { border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-align: center; min-height: 120px; }
.cav2-add-card:hover { border-color: var(--brand-primary); }
.cav2-add-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); }
.cav2-add-title { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.cav2-add-sub { font-size: 12px; color: var(--text-tertiary); }

/* ── Customer connectable band ── */
.cav2-connectable { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 8px; }
.cav2-connectable-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cav2-connectable-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.cav2-connectable-err { padding: 8px 10px; background: var(--status-warning-soft); border-radius: 6px; font-size: 12px; color: #92400E; }
.cav2-connectable-actions { display: flex; }

/* ── Empty state ── */
.cav2-empty { max-width: 560px; margin: 40px auto; text-align: center; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 16px; padding: 48px 40px; box-shadow: var(--shadow-card); }
.cav2-empty-icon { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 20px; background: var(--brand-primary-soft); display: flex; align-items: center; justify-content: center; color: var(--brand-primary-strong); }
.cav2-empty-title { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 8px; }
.cav2-empty-sub { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 28px; }
.cav2-empty-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 22px; font-size: 12px; color: var(--text-tertiary); }

/* ══════════ FULL-SCREEN PER-ACCOUNT VIEW ══════════ */
.cav2-fs { position: fixed; inset: 0; z-index: 600; background: var(--surface-secondary); display: flex; flex-direction: column; animation: cav2-fs-in .22s ease; font-family: 'Work Sans', sans-serif; color: var(--text-primary); }
@keyframes cav2-fs-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.cav2-fs-head { flex-shrink: 0; background: var(--surface-primary); border-bottom: 1px solid var(--border-default); }
.cav2-fs-head-inner { max-width: 1160px; margin: 0 auto; width: 100%; padding: 14px 28px 0; }
.cav2-fs-head-row { display: flex; align-items: center; gap: 16px; }
.cav2-fs-divider { width: 1px; height: 30px; background: var(--border-default); flex-shrink: 0; }
.cav2-fs-titlebox { min-width: 0; }
.cav2-fs-title-row { display: flex; align-items: center; gap: 10px; }
.cav2-fs-title { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
.cav2-fs-submeta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; }
.cav2-fs-spacer { flex: 1; }
.cav2-fs-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.cav2-fs-fresh { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; padding: 16px 0 14px; }
.cav2-fresh-lbl { font-size: 9.5px; font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 3px; }
.cav2-fresh-val { font-size: 14px; font-weight: 600; }
.cav2-behind { font-weight: 500; font-size: 12px; }
.cav2-fresh-spacer { flex: 1; min-width: 120px; }
.cav2-fresh-note { max-width: 360px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; display: flex; gap: 6px; }
.cav2-fresh-note svg { flex-shrink: 0; margin-top: 1px; }

.cav2-fs-tabs { display: flex; gap: 0; }
.cav2-tab { padding: 11px 4px; margin-right: 24px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-tertiary); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cav2-tab.is-active { border-bottom-color: var(--brand-primary); color: var(--text-primary); }

.cav2-fs-body { flex: 1; min-height: 0; overflow-y: auto; }
.cav2-fs-body-inner { max-width: 1160px; margin: 0 auto; width: 100%; padding: 22px 28px 64px; }

/* panels */
.cav2-panel { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
.cav2-panel-narrow { max-width: 760px; }
.cav2-panel-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.cav2-search { display: flex; align-items: center; gap: 8px; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: 8px; padding: 8px 12px; min-width: 240px; flex: 1; max-width: 340px; }
.cav2-search input { border: none; background: transparent; outline: none; font-size: 12.5px; width: 100%; color: var(--text-primary); font-family: inherit; }
.cav2-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cav2-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; background: var(--surface-primary); color: var(--text-secondary); border: 1px solid var(--border-default); }
.cav2-chip.is-active { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.cav2-chip-count { font-size: 10.5px; opacity: .7; }
.cav2-panel-range { margin-left: auto; font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; }

.cav2-panel-head { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--border-default); }
.cav2-panel-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 500; }

/* transactions table */
.cav2-tx-head, .cav2-tx-row { display: grid; grid-template-columns: 84px 1fr 168px 132px 132px; gap: 14px; padding: 13px 22px; border-bottom: 1px solid var(--border-default); align-items: center; }
.cav2-tx-head { padding: 10px 22px; font-size: 10px; font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; background: var(--surface-secondary); }
.cav2-tx-date { font-size: 12px; color: var(--text-tertiary); }
.cav2-tx-desc { min-width: 0; }
.cav2-tx-desc-main { font-size: 13.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cav2-tx-cat-badge { display: inline-block; margin-top: 3px; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 600; padding: 1px 7px; border-radius: 9px; }
.cav2-tx-cat-badge.is-auto { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.cav2-tx-cat-badge.is-review { background: var(--status-warning-soft); color: #92400E; }
.cav2-tx-cat { font-size: 12.5px; color: var(--text-secondary); }
.cav2-tx-amt { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.cav2-tx-amt.is-pos { color: var(--status-success); }

.cav2-wf { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; }
.cav2-wf.is-staging { background: var(--surface-tertiary); color: var(--text-secondary); }
.cav2-wf.is-review { background: var(--status-warning-soft); color: #92400E; }
.cav2-wf.is-complete { background: var(--status-success-soft); color: var(--status-success); }
.cav2-wf.is-closed { background: var(--status-info-soft); color: var(--status-info); }

.cav2-tx-empty { padding: 44px 24px; text-align: center; }
.cav2-tx-empty-icon { width: 44px; height: 44px; border-radius: 11px; margin: 0 auto 14px; background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); }
.cav2-tx-empty-title { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.cav2-tx-empty-sub { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5; max-width: 320px; margin: 0 auto; }

/* sync history */
.cav2-hist-row { display: flex; gap: 13px; padding: 14px 22px; border-bottom: 1px solid var(--border-default); align-items: flex-start; }
.cav2-hist-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--text-tertiary); }
.cav2-hist-dot.is-ok { background: var(--status-success); }
.cav2-hist-dot.is-err { background: var(--status-danger); }
.cav2-hist-dot.is-run { background: var(--brand-primary); }
.cav2-hist-body { flex: 1; }
.cav2-hist-type { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.cav2-hist-result { font-size: 11.5px; font-weight: 600; }
.cav2-hist-result.is-ok { color: var(--status-success); }
.cav2-hist-result.is-err { color: var(--status-danger); }
.cav2-hist-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.cav2-hist-time { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

/* ══════════ SCRIMS / DIALOGS / MODAL ══════════ */
.cav2-scrim { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cav2-scrim-dark { background: rgba(11, 15, 30, .5); }

.cav2-dialog { width: 430px; max-width: 96vw; background: var(--surface-primary); border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .32); overflow: hidden; animation: cav2-modal-in .2s ease; z-index: 750; }
@keyframes cav2-modal-in { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.cav2-dialog-body { padding: 26px 24px 0; }
.cav2-dialog-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--status-danger-soft); color: var(--status-danger); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.cav2-dialog-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 8px; }
.cav2-dialog-text { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.cav2-dialog-callout { margin: 18px 24px; padding: 12px 14px; border-radius: 9px; background: var(--status-warning-soft); display: flex; gap: 10px; align-items: flex-start; color: #92400E; }
.cav2-dialog-callout svg { flex-shrink: 0; margin-top: 1px; }
.cav2-dialog-callout div { font-size: 12px; line-height: 1.5; }
.cav2-dialog-actions { display: flex; gap: 10px; padding: 0 24px 22px; }

.cav2-modal { width: 420px; max-width: 96vw; max-height: 88vh; background: var(--surface-primary); border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .32); display: flex; flex-direction: column; overflow: hidden; animation: cav2-modal-in .2s ease; z-index: 700; }
.cav2-modal-topbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.cav2-modal-brand { display: flex; align-items: center; gap: 7px; flex: 1; }
.cav2-modal-brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--brand-dark); display: flex; align-items: center; justify-content: center; }
.cav2-modal-brand-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--brand-primary); }
.cav2-modal-brand-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.cav2-modal-brand-via { font-size: 11px; color: var(--text-tertiary); }
.cav2-modal-close { width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 15px; line-height: 1; }
.cav2-modal-body { flex: 1; overflow-y: auto; }
.cav2-modal-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border-top: 1px solid var(--border-default); font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }

.cav2-consent { padding: 26px 24px; text-align: center; }
.cav2-consent-icon { width: 56px; height: 56px; border-radius: 14px; margin: 6px auto 18px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); display: flex; align-items: center; justify-content: center; color: #fff; }
.cav2-consent-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 8px; }
.cav2-consent-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 18px; }
.cav2-consent-rows { text-align: left; display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.cav2-consent-row { display: flex; gap: 12px; }
.cav2-consent-row-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cav2-consent-row-h { font-size: 13px; font-weight: 600; }
.cav2-consent-row-p { font-size: 12px; color: var(--text-tertiary); line-height: 1.45; }
.cav2-consent-pickerlbl { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px; }
.cav2-consent-picker { display: flex; flex-direction: column; gap: 10px; }
.cav2-consent-pick { justify-content: flex-start; gap: 10px; height: 44px; }

/* ── Toast + spinners ── */
.cav2-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 800; background: var(--brand-dark); color: #fff; font-size: 13px; font-weight: 500; padding: 11px 18px; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); display: flex; align-items: center; gap: 9px; animation: cav2-toast-in .22s ease; }
@keyframes cav2-toast-in { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.cav2-toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); }

.cav2-spin { width: 12px; height: 12px; border: 2px solid var(--border-default); border-top-color: var(--brand-primary); border-radius: 50%; display: inline-block; animation: cav2-spin .7s linear infinite; }
.cav2-spin-dot { animation: cav2-spin .7s linear infinite; }
@keyframes cav2-spin { to { transform: rotate(360deg); } }

/* ==================== support.css ==================== */
/* support.css — Help Center + Support Ticketing.
   Translated from design_handoff_support/*.dc.html (the styling source of truth).
   The Help Center is a distinct light microsite (its own header/shell), not the bookkeeping
   portal chrome, so these styles are self-contained and use the design's literal palette. */

.sup-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #F7F8FA;
    color: #0B0F1E;
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sup-shell a { text-decoration: none; color: inherit; }
.sup-shell button { font-family: inherit; cursor: pointer; }
.sup-shell input, .sup-shell textarea, .sup-shell select { font-family: inherit; }
.sup-shell textarea { resize: vertical; }

@keyframes sup-spin { to { transform: rotate(360deg); } }
@keyframes sup-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes sup-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes sup-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.sup-shim { background: linear-gradient(90deg,#EEF1F5 0%,#F7F9FB 45%,#EEF1F5 90%); background-size: 840px 100%; animation: sup-shimmer 1.3s linear infinite; }
.sup-rise { animation: sup-rise .35s ease both; }

/* ── Header ── */
.sup-header {
    height: 60px; flex: none; background: #fff; border-bottom: 1px solid #E2E8F0;
    display: flex; align-items: center; gap: 24px; padding: 0 28px;
    position: sticky; top: 0; z-index: 40;
}
.sup-logo { display: flex; align-items: center; gap: 11px; }
.sup-logo-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg,#2ED4A5,#A78BFA); flex: none; }
.sup-brand { font-family: 'Fraunces', serif; font-weight: 600; font-size: 15.5px; color: #0B0F1E; }
.sup-brand-tag { font: 600 9px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #94A3B8; }
.sup-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.sup-nav-link { padding: 7px 12px; border: none; background: none; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #475569; display: inline-flex; align-items: center; gap: 7px; }
.sup-nav-link:hover { background: #F7F8FA; }
.sup-nav-link.is-active { font-weight: 600; color: #0B0F1E; background: #F1F3F6; }
.sup-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ED4A5; }
.sup-header-spacer { flex: 1; }
.sup-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #475569; border: 1px solid #E2E8F0; border-radius: 9px; padding: 8px 14px; }
.sup-back:hover { border-color: #CBD5E1; }
.sup-headcount { font: 700 10px 'JetBrains Mono', monospace; background: #2ED4A5; color: #0B0F1E; border-radius: 9px; padding: 1px 7px; }

/* ── Hero ── */
.sup-hero { position: relative; overflow: hidden; background: #0B0F1E; padding: 66px 24px 78px; }
.sup-hero-glow-a { position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 760px; height: 420px; background: radial-gradient(closest-side, rgba(46,212,165,.20), transparent 70%); pointer-events: none; }
.sup-hero-glow-b { position: absolute; top: -60px; right: 8%; width: 380px; height: 340px; background: radial-gradient(closest-side, rgba(167,139,250,.17), transparent 70%); pointer-events: none; }
.sup-hero-grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size: 46px 46px; pointer-events: none; }
.sup-hero-inner { position: relative; max-width: 680px; margin: 0 auto; text-align: center; }
.sup-kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #2ED4A5; margin-bottom: 18px; }
.sup-kicker-dot { width: 5px; height: 5px; border-radius: 50%; background: #2ED4A5; }
.sup-h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 44px; line-height: 1.08; letter-spacing: -.02em; color: #fff; margin: 0 0 14px; }
.sup-lead { font-size: 16px; line-height: 1.55; color: #94A3B8; margin: 0 auto 30px; max-width: 480px; }

.sup-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #fff; border-radius: 15px; padding: 8px 8px 8px 18px; box-shadow: 0 18px 50px -16px rgba(0,0,0,.55), 0 0 0 4px rgba(46,212,165,.08); }
.sup-search svg { color: #94A3B8; flex: none; }
.sup-search input { flex: 1; min-width: 0; border: none; outline: none; font-size: 16px; color: #0B0F1E; background: transparent; padding: 6px 0; }
.sup-kbd { display: inline-flex; align-items: center; gap: 1px; font: 600 11px 'JetBrains Mono', monospace; color: #94A3B8; background: #F1F3F6; border: 1px solid #E2E8F0; border-radius: 6px; padding: 4px 7px; flex: none; }
.sup-ask { display: inline-flex; align-items: center; gap: 7px; background: #2ED4A5; color: #0B0F1E; border: none; border-radius: 11px; padding: 11px 16px; font-size: 14px; font-weight: 600; flex: none; }
.sup-ask:hover { background: #14B88A; }
.sup-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.sup-chips-label { font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #64748B; align-self: center; margin-right: 2px; }
.sup-chip { font-size: 12.5px; font-weight: 500; color: #CBD5E1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; padding: 7px 13px; }
.sup-chip:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Main containers ── */
.sup-main { flex: 1; padding: 0 24px 88px; }
.sup-container { max-width: 920px; margin: 0 auto; }
.sup-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: 0 12px 36px -18px rgba(11,15,30,.25); }

/* response region overlap */
.sup-response { margin-top: -38px; position: relative; z-index: 5; margin-bottom: 40px; }

/* loading */
.sup-loading-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sup-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #E2E8F0; border-top-color: #2ED4A5; display: inline-block; animation: sup-spin .7s linear infinite; flex: none; }
.sup-spinner-sm { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #E2E8F0; border-top-color: #2ED4A5; display: inline-block; animation: sup-spin .9s linear infinite; }
.sup-dots { display: inline-flex; gap: 4px; margin-left: 2px; }
.sup-dots span { width: 5px; height: 5px; border-radius: 50%; background: #2ED4A5; animation: sup-pulse 1s ease-in-out infinite; }
.sup-dots span:nth-child(2) { animation-delay: .2s; }
.sup-dots span:nth-child(3) { animation-delay: .4s; }

/* answer */
.sup-answer-head { display: flex; align-items: center; gap: 11px; padding: 16px 26px; border-bottom: 1px solid #EEF1F5; background: #FBFCFD; }
.sup-aibadge { display: inline-flex; align-items: center; gap: 6px; font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #0F9C77; background: #E5FAF2; border-radius: 7px; padding: 4px 9px; }
.sup-answer-q { flex: 1; min-width: 0; font-size: 13px; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-pillbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #475569; background: #fff; border: 1px solid #E2E8F0; border-radius: 8px; padding: 6px 11px; flex: none; }
.sup-pillbtn:hover { border-color: #CBD5E1; }
.sup-answer-body { padding: 22px 28px; font-size: 14px; line-height: 1.7; color: #334155; }
.sup-srclabel { display: flex; align-items: center; gap: 8px; font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; margin: 0 0 12px; }
.sup-srcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* source / deflection card */
.sup-srccard { display: block; border: 1px solid #E2E8F0; border-radius: 12px; padding: 14px 16px; background: #fff; }
.sup-srccard:hover { border-color: #2ED4A5; background: #FBFEFD; }
.sup-srccard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sup-srctag { font: 600 8.5px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #0F9C77; background: #E5FAF2; border-radius: 5px; padding: 2px 7px; }
.sup-srccard-title { font-size: 14px; font-weight: 600; color: #0B0F1E; line-height: 1.3; margin-bottom: 4px; }
.sup-srccard-snip { font-size: 12.5px; line-height: 1.5; color: #94A3B8; }
.sup-arrow { color: #CBD5E1; flex: none; }

/* no results */
.sup-empty { padding: 34px 30px; text-align: center; }
.sup-empty-ico { width: 52px; height: 52px; border-radius: 14px; background: #F1F3F6; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: #94A3B8; }
.sup-empty-title { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 600; color: #0B0F1E; margin-bottom: 7px; }
.sup-empty-text { font-size: 14px; line-height: 1.6; color: #475569; max-width: 420px; margin: 0 auto 22px; }
.sup-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #2ED4A5; color: #0B0F1E; border: none; border-radius: 10px; padding: 11px 18px; font-size: 13.5px; font-weight: 600; }
.sup-btn-primary:hover { background: #14B88A; }
.sup-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #475569; border: 1px solid #E2E8F0; border-radius: 10px; padding: 11px 18px; font-size: 13.5px; font-weight: 600; }
.sup-btn-ghost:hover { border-color: #CBD5E1; }
.sup-actions-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* topics */
.sup-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sup-h2 { font-family: 'Fraunces', serif; font-size: 23px; font-weight: 600; color: #0B0F1E; margin: 0; letter-spacing: -.01em; }
.sup-link-mint { font-size: 13px; font-weight: 600; color: #0F9C77; }
.sup-topics { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.sup-topic { display: block; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 18px 20px; }
.sup-topic:hover { border-color: #2ED4A5; box-shadow: 0 8px 24px -14px rgba(46,212,165,.4); }
.sup-topic-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sup-topic-ico { width: 38px; height: 38px; border-radius: 10px; background: #F2FBF8; color: #0F9C77; display: flex; align-items: center; justify-content: center; }
.sup-topic-count { font: 600 10px 'JetBrains Mono', monospace; color: #94A3B8; }
.sup-topic-title { font-size: 15px; font-weight: 600; color: #0B0F1E; line-height: 1.3; margin-bottom: 5px; }
.sup-topic-desc { font-size: 12.5px; line-height: 1.5; color: #94A3B8; }

/* faq */
.sup-faq-head { text-align: center; margin-bottom: 26px; }
.sup-faq-wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.sup-faq-catlabel { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; padding-left: 2px; font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.sup-faq-catlabel .ic { color: #0F9C77; }
.sup-faq-group { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; }
.sup-faq-item { border-top: 1px solid #EEF1F5; }
.sup-faq-item:first-child { border-top: none; }
.sup-faq-q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: #fff; border: none; text-align: left; }
.sup-faq-q:hover { background: #FBFCFD; }
.sup-faq-q-text { flex: 1; font-size: 14.5px; font-weight: 600; color: #0B0F1E; line-height: 1.4; }
.sup-faq-caret { width: 22px; height: 22px; flex: none; border-radius: 6px; background: #F1F3F6; color: #64748B; display: flex; align-items: center; justify-content: center; font: 600 15px 'JetBrains Mono', monospace; line-height: 1; }
.sup-faq-a { padding: 0 20px 18px; font-size: 13.5px; line-height: 1.7; color: #475569; max-width: 600px; }

/* still need help / cta */
.sup-cta { max-width: 760px; margin: 34px auto 0; background: #0B0F1E; border-radius: 16px; padding: 26px 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sup-cta-title { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; color: #fff; margin-bottom: 5px; }
.sup-cta-sub { font-size: 13.5px; line-height: 1.55; color: #94A3B8; }
.sup-cta-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.07); color: #E2E8F0; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 11px 17px; font-size: 13.5px; font-weight: 600; }

/* ── Page-level (list / create / detail) ── */
.sup-page { max-width: 940px; margin: 0 auto; padding-top: 34px; }
.sup-page-narrow { max-width: 760px; margin: 0 auto; padding-top: 26px; }
.sup-page-detail { max-width: 780px; margin: 0 auto; padding-top: 26px; }
.sup-page-confirm { max-width: 560px; margin: 0 auto; padding-top: 54px; }
.sup-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sup-eyebrow { display: flex; align-items: center; gap: 7px; font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #0F9C77; margin-bottom: 9px; }
.sup-h1-page { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 500; color: #0B0F1E; letter-spacing: -.01em; margin: 0; }
.sup-newbtn { display: inline-flex; align-items: center; gap: 8px; background: #2ED4A5; color: #0B0F1E; border: none; border-radius: 11px; padding: 11px 17px; font-size: 13.5px; font-weight: 600; flex: none; }
.sup-newbtn:hover { background: #14B88A; }

.sup-scope { display: inline-flex; background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.sup-scope button { border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; background: transparent; color: #64748B; }
.sup-scope button.is-active { background: #0B0F1E; color: #fff; }

.sup-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sup-search-sm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; padding: 9px 13px; }
.sup-search-sm svg { color: #94A3B8; flex: none; }
.sup-search-sm input { flex: 1; min-width: 0; border: none; outline: none; font-size: 14px; color: #0B0F1E; background: transparent; }
.sup-select { border: 1px solid #E2E8F0; background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #475569; font-weight: 500; }

.sup-list { display: flex; flex-direction: column; gap: 12px; }
.sup-skel-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 18px 20px; }

/* list row */
.sup-row { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid #E2E8F0; border-left: 3px solid transparent; border-radius: 14px; padding: 16px 20px; }
.sup-row:hover { border-color: #CBD5E1; box-shadow: 0 10px 30px -20px rgba(11,15,30,.45); }
.sup-row.is-awaiting { border-left-color: #F59E0B; }
.sup-row.is-unread { border-left-color: #2ED4A5; }
.sup-row-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.sup-row-num { font: 600 11px 'JetBrains Mono', monospace; color: #94A3B8; }
.sup-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ED4A5; flex: none; }
.sup-cat-pill { font: 600 9px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #64748B; background: #F1F3F6; border-radius: 6px; padding: 3px 8px; }
.sup-row-subject { font-size: 15px; color: #0B0F1E; line-height: 1.35; margin-bottom: 4px; font-weight: 600; }
.sup-row-subject.is-unread { font-weight: 700; }
.sup-row-foot { display: flex; align-items: center; gap: 10px; }
.sup-requester { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sup-rq-avatar { width: 20px; height: 20px; border-radius: 50%; background: #EEF1F5; color: #475569; font: 700 8.5px 'JetBrains Mono', monospace; display: flex; align-items: center; justify-content: center; }
.sup-rq-name { font-size: 12px; font-weight: 600; color: #475569; }
.sup-snippet { flex: 1; min-width: 0; font-size: 13px; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-lastact { font: 500 11.5px 'JetBrains Mono', monospace; color: #94A3B8; flex: none; }

/* status badge */
.sup-badge { display: inline-flex; align-items: center; gap: 6px; font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; border-radius: 7px; padding: 4px 9px; color: var(--bc); background: var(--bbg); }
.sup-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bc); animation: sup-pulse 1.4s ease-in-out infinite; }

/* empty states (list) */
.sup-emptybox { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 54px 30px; text-align: center; }
.sup-emptybox-sm { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 44px 30px; text-align: center; }
.sup-emptybox-ico { width: 62px; height: 62px; border-radius: 16px; background: #F2FBF8; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: #0F9C77; }

/* ── Create form ── */
.sup-backlink { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: #64748B; margin-bottom: 18px; }
.sup-backlink:hover { color: #0B0F1E; }
.sup-create-sub { font-size: 15px; line-height: 1.55; color: #475569; margin: 0 0 28px; }
.sup-block { margin-bottom: 24px; }
.sup-label { font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #94A3B8; margin-bottom: 10px; }
.sup-input { width: 100%; box-sizing: border-box; border: 1px solid #E2E8F0; background: #fff; border-radius: 12px; padding: 13px 14px; font-size: 14.5px; color: #0B0F1E; outline: none; }
.sup-input:focus { border-color: #2ED4A5; box-shadow: 0 0 0 3px rgba(46,212,165,.12); }
.sup-textarea { width: 100%; box-sizing: border-box; border: 1px solid #E2E8F0; background: #fff; border-radius: 12px; padding: 13px 14px; font-size: 14.5px; line-height: 1.6; color: #0B0F1E; outline: none; }
.sup-textarea:focus { border-color: #2ED4A5; box-shadow: 0 0 0 3px rgba(46,212,165,.12); }
.sup-select-full { width: 100%; box-sizing: border-box; border: 1px solid #E2E8F0; background: #fff; border-radius: 12px; padding: 13px 14px; font-size: 14.5px; font-weight: 500; }
.sup-fielderr { font-size: 12px; color: #DC2626; margin-top: 7px; }

/* submitting as / identity */
.sup-identity { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid #E2E8F0; border-radius: 13px; padding: 15px 18px; }
.sup-id-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#2ED4A5,#A78BFA); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 13px 'JetBrains Mono', monospace; flex: none; }
.sup-id-name { font-size: 14.5px; font-weight: 600; color: #0B0F1E; }
.sup-id-sub { font-size: 12.5px; color: #94A3B8; }
.sup-id-readonly { display: inline-flex; align-items: center; gap: 6px; font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }

/* context chip (from search) */
.sup-ctxchip { display: flex; align-items: center; gap: 11px; background: #F2FBF8; border: 1px solid #C9EFE2; border-radius: 11px; padding: 11px 14px; margin-bottom: 24px; }
.sup-ctxchip svg { color: #0F9C77; flex: none; }
.sup-ctxchip-text { flex: 1; min-width: 0; font-size: 13px; color: #0B5C45; }
.sup-ctxchip-label { font: 600 9px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #0F9C77; margin-right: 6px; }

/* caution notes */
.sup-caution { display: flex; gap: 9px; margin-top: 10px; padding: 11px 13px; background: #FFFBEB; border: 1px solid #FEF3C7; border-radius: 10px; }
.sup-caution svg { color: #B45309; flex: none; margin-top: 1px; }
.sup-caution-text { font-size: 12.5px; line-height: 1.55; color: #7A5212; }

/* attachments */
.sup-dropzone { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1.5px dashed #CBD5E1; border-radius: 12px; padding: 22px; color: #94A3B8; }
.sup-dropzone:hover { border-color: #2ED4A5; background: #FBFEFD; }
.sup-dropzone-title { font-size: 13.5px; font-weight: 600; color: #475569; }
.sup-dropzone-hint { font: 500 11px 'JetBrains Mono', monospace; color: #94A3B8; }
.sup-chips-wrap { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.sup-filechip { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; padding: 8px 10px 8px 11px; }
.sup-filechip.is-thread { background: #FAFBFC; }
.sup-filechip .fc-ico { color: #0F9C77; flex: none; display: inline-flex; }
.sup-filechip .fc-name { font-size: 12.5px; font-weight: 600; color: #0B0F1E; }
.sup-filechip .fc-size { font: 500 10.5px 'JetBrains Mono', monospace; color: #94A3B8; }
.sup-filechip .fc-remove { display: flex; width: 18px; height: 18px; border: none; background: #F1F3F6; border-radius: 5px; align-items: center; justify-content: center; color: #64748B; }
.sup-encnote { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11.5px; color: #94A3B8; }

/* deflection panel */
.sup-deflect { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 18px 20px; margin-bottom: 24px; }
.sup-deflect-head { display: flex; align-items: center; gap: 8px; font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #0F9C77; margin-bottom: 13px; }
.sup-deflect-foot { font-size: 12.5px; color: #64748B; margin-top: 13px; }

/* cc teammate */
.sup-linkbtn { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: #64748B; }
.sup-linkbtn:hover { color: #0B0F1E; }
.sup-cc-hint { font-size: 11.5px; color: #94A3B8; margin-top: 7px; }

/* diagnostics */
.sup-diag { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; }
.sup-diag-toggle { width: 100%; display: flex; align-items: center; gap: 11px; background: #fff; border: none; padding: 14px 16px; text-align: left; }
.sup-diag-toggle svg { color: #94A3B8; }
.sup-diag-toggle .lbl { flex: 1; font-size: 13.5px; font-weight: 600; color: #475569; }
.sup-diag-toggle .caret { font: 500 11px 'JetBrains Mono', monospace; color: #94A3B8; }
.sup-diag-body { padding: 4px 16px 16px; }
.sup-diag-grid { background: #FAFBFC; border: 1px solid #EEF1F5; border-radius: 9px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; }
.sup-diag-k { font: 600 10.5px 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: #94A3B8; }
.sup-diag-v { font: 500 12px 'JetBrains Mono', monospace; color: #475569; }

.sup-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #2ED4A5; color: #0B0F1E; border: none; border-radius: 12px; padding: 15px; font-size: 15px; font-weight: 600; }
.sup-submit:hover { background: #14B88A; }
.sup-submit:disabled { opacity: .6; cursor: default; }

/* ── Confirmation ── */
.sup-confirm-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 18px; box-shadow: 0 18px 50px -24px rgba(11,15,30,.4); padding: 40px 34px; text-align: center; }
.sup-confirm-check { width: 62px; height: 62px; border-radius: 50%; background: #E5FAF2; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #0F9C77; }
.sup-confirm-title { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: #0B0F1E; margin-bottom: 8px; }
.sup-confirm-num { font: 600 22px 'JetBrains Mono', monospace; letter-spacing: .04em; color: #0F9C77; background: #E5FAF2; display: inline-block; border-radius: 10px; padding: 7px 16px; margin-bottom: 16px; }
.sup-confirm-text { font-size: 14.5px; line-height: 1.6; color: #475569; margin-bottom: 24px; }
.sup-confirm-summary { text-align: left; background: #FAFBFC; border: 1px solid #EEF1F5; border-radius: 12px; padding: 15px 17px; margin-bottom: 24px; }
.sup-confirm-row { display: flex; gap: 14px; }
.sup-confirm-row + .sup-confirm-row { margin-top: 10px; }
.sup-confirm-k { font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; width: 74px; flex: none; }
.sup-confirm-v { font-size: 13.5px; font-weight: 600; color: #0B0F1E; }
.sup-confirm-actions { display: flex; gap: 10px; }
.sup-confirm-actions > * { flex: 1; padding: 13px; font-size: 14px; }

/* ── Detail ── */
.sup-detail-head { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 20px 22px; margin-bottom: 18px; }
.sup-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sup-detail-title { font-family: 'Fraunces', serif; font-size: 23px; font-weight: 600; color: #0B0F1E; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 12px; }
.sup-detail-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid #EEF1F5; }
.sup-detail-rq { display: inline-flex; align-items: center; gap: 7px; }
.sup-detail-rq-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg,#2ED4A5,#A78BFA); color: #fff; font: 700 9px 'JetBrains Mono', monospace; display: flex; align-items: center; justify-content: center; }
.sup-detail-rq-name { font-size: 12.5px; font-weight: 600; color: #475569; }
.sup-detail-time { font: 500 11.5px 'JetBrains Mono', monospace; color: #94A3B8; }
.sup-dot-sep { color: #E2E8F0; }

.sup-banner { display: flex; align-items: center; gap: 12px; border-radius: 11px; padding: 13px 16px; margin-bottom: 18px; }
.sup-banner-awaiting { background: #FEF3E2; border: 1px solid #FAD9A8; border-left: 3px solid #B45309; }
.sup-banner-awaiting svg { color: #B45309; flex: none; }
.sup-banner-awaiting .txt { font-size: 13px; color: #7A5212; }
.sup-banner-awaiting strong { color: #7A3E09; }

.sup-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.sup-msg { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 16px 18px; }
.sup-msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.sup-msg-avatar { width: 30px; height: 30px; border-radius: 50%; font: 700 10px 'JetBrains Mono', monospace; display: flex; align-items: center; justify-content: center; flex: none; }
.sup-msg-avatar.is-agent { background: #0B0F1E; color: #2ED4A5; }
.sup-msg-avatar.is-requester { background: #EEF1F5; color: #475569; }
.sup-msg-author { font-size: 13.5px; font-weight: 600; color: #0B0F1E; }
.sup-msg-agentbadge { font: 700 8px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #0F9C77; background: #E5FAF2; border-radius: 5px; padding: 2px 7px; }
.sup-msg-time { font: 500 11px 'JetBrains Mono', monospace; color: #94A3B8; }
.sup-msg-body { font-size: 14px; line-height: 1.65; color: #334155; white-space: pre-line; }
.sup-msg-atts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }

.sup-system { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.sup-system .line { flex: 1; height: 1px; background: #EEF1F5; }
.sup-system .lbl { display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px 'JetBrains Mono', monospace; color: #94A3B8; white-space: nowrap; }
.sup-system .lbl .sep { color: #CBD5E1; }

.sup-firstresp { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 12.5px; color: #94A3B8; margin-bottom: 18px; }

.sup-resolved { background: #F2FBF8; border: 1px solid #C9EFE2; border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sup-resolved svg { color: #0F9C77; flex: none; }
.sup-resolved .body { flex: 1; min-width: 180px; }
.sup-resolved .t1 { font-size: 14.5px; font-weight: 600; color: #0B5C45; }
.sup-resolved .t2 { font-size: 12.5px; color: #0F9C77; margin-top: 2px; }
.sup-resolved .reopen { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #0F9C77; border: 1px solid #C9EFE2; border-radius: 10px; padding: 9px 15px; font-size: 13px; font-weight: 600; }

.sup-closed { background: #F1F3F6; border: 1px solid #E2E8F0; border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sup-closed svg { color: #64748B; flex: none; }
.sup-closed .body { flex: 1; min-width: 160px; }
.sup-closed .t1 { font-size: 14px; font-weight: 600; color: #334155; }
.sup-closed .t2 { font-size: 12.5px; color: #94A3B8; margin-top: 2px; }
.sup-closed .reopen { display: inline-flex; align-items: center; gap: 7px; background: #0B0F1E; color: #fff; border: none; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; }

/* composer */
.sup-composer { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 14px 16px; }
.sup-composer.is-awaiting { border-color: #F0B86E; }
.sup-composer textarea { width: 100%; box-sizing: border-box; border: none; outline: none; font-size: 14px; line-height: 1.6; color: #0B0F1E; background: transparent; resize: vertical; }
.sup-composer-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 11px; border-top: 1px solid #EEF1F5; }
.sup-composer-attach { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #E2E8F0; border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: #475569; }
.sup-composer-attach:hover { border-color: #CBD5E1; }
.sup-composer-note { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #94A3B8; }
.sup-composer-send { display: inline-flex; align-items: center; gap: 7px; background: #2ED4A5; color: #0B0F1E; border: none; border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 600; }
.sup-composer-send:hover { background: #14B88A; }

/* portal sidebar nav badge (in-app entry point) reuses the portal's nav-item;
   this badge mirrors the existing .nav-item-badge but in mint for support unread. */
.nav-item-support-badge { margin-left: auto; min-width: 18px; padding: 0 6px; height: 18px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; background: rgba(46,212,165,.18); color: #2ED4A5; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

@media (max-width: 820px) {
    .sup-nav { display: none; }
    .sup-srcgrid { grid-template-columns: 1fr; }
    .sup-topics { grid-template-columns: 1fr 1fr; }
    .sup-controls { flex-direction: column; align-items: stretch; }
}
@media (max-width: 520px) {
    .sup-topics { grid-template-columns: 1fr; }
}

/* ==================== my-work-v2.css ==================== */
/* my-work-v2.css — GLOBAL styles for the My Work V2 screen (MyWork.razor), from
   design_handoff_my_work/. Full V1 replacement — no legacy my-work classes remain.
   Rides the app's tokens + [data-theme="dark"] overrides. Prefix: mw2-.

   Layout contract: .mw2-root fills the viewport below the top nav and never scrolls;
   only .mw2-scroll (the phase list) scrolls. Grid column template is the handoff's:
   168px 92px 124px minmax(150px,1fr) 160px 130px, gap 12px, card min-width 820px. */

.mw2-root {
    /* Design-handoff palette values with no direct token — dark overrides below. */
    --mw2-amber-text: #B45309;
    --mw2-amber-soft: #FEF3C7;
    --mw2-amber-border: #FADFA0;
    --mw2-amber-dot: #F59E0B;
    --mw2-red-text: #DC2626;
    --mw2-red: #EF4444;
    --mw2-red-soft: #FEE2E2;
    --mw2-red-border: #F6C6C6;
    --mw2-done-text: #0F9F6E;
    --mw2-done-soft: #ECFDF5;
    --mw2-done-dot: #10B981;
    --mw2-pending-text: #64748B;
    --mw2-pending-dot: #94A3B8;
    --mw2-pending-soft: #EEF1F5;
    --mw2-muted: #94A3B8;
    --mw2-slate-soft: #F1F5F9;
    --mw2-slate-text: #475569;
    --mw2-row-border: #F1F3F6;
    --mw2-peek-bg: #FBFCFE;
    --mw2-kpi-active: #F7FEFB;
    --mw2-kpi-hover: #FAFBFC;
    --mw2-banner-bg: #FFF7ED;
    --mw2-banner-border: #FED7AA;
    --mw2-banner-strong: #9A3412;
    --mw2-banner-text: #B45309;
    --mw2-banner-x: #C2703A;
    --mw2-banner-x-hover: #FDE4C8;

    height: calc(100vh - var(--top-nav-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 22px;
    background: var(--surface-secondary);
}

[data-theme="dark"] .mw2-root {
    --mw2-amber-text: #FBBF24;
    --mw2-amber-soft: rgba(245, 158, 11, 0.16);
    --mw2-amber-border: rgba(245, 158, 11, 0.35);
    --mw2-red-text: #F87171;
    --mw2-red-soft: rgba(239, 68, 68, 0.16);
    --mw2-red-border: rgba(239, 68, 68, 0.4);
    --mw2-done-text: #34D399;
    --mw2-done-soft: rgba(16, 185, 129, 0.16);
    --mw2-pending-text: #B6BECB;
    --mw2-pending-soft: var(--surface-tertiary);
    --mw2-slate-soft: var(--surface-tertiary);
    --mw2-slate-text: var(--text-secondary);
    --mw2-row-border: rgba(255, 255, 255, 0.06);
    --mw2-peek-bg: rgba(255, 255, 255, 0.02);
    --mw2-kpi-active: rgba(46, 212, 165, 0.06);
    --mw2-kpi-hover: var(--surface-secondary);
    --mw2-banner-bg: rgba(245, 158, 11, 0.08);
    --mw2-banner-border: rgba(245, 158, 11, 0.3);
    --mw2-banner-strong: #FDBA74;
    --mw2-banner-text: #FBBF24;
    --mw2-banner-x: #FDBA74;
    --mw2-banner-x-hover: rgba(245, 158, 11, 0.2);
}

.mw2-mono { font-family: 'JetBrains Mono', monospace; }
.mw2-loading { padding: 30px 0; font-size: 13px; color: var(--text-tertiary); }

@keyframes mw2-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Header + scope toggle ─────────────────────────────────────────────── */
.mw2-head { padding: 16px 0 12px; display: flex; align-items: flex-end; gap: 16px; flex-shrink: 0; }
.mw2-head-titles { flex: 1; min-width: 0; }
.mw2-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 5px; }
.mw2-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 27px; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; margin: 0; }

.mw2-scope { display: inline-flex; background: var(--surface-tertiary); border-radius: 9px; padding: 3px; flex-shrink: 0; }
.mw2-scope-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 13px; border-radius: 7px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; border: 0; background: transparent; color: var(--mw2-pending-text); }
.mw2-scope-btn.is-on { background: var(--surface-primary); color: var(--text-primary); box-shadow: 0 1px 3px rgba(11, 15, 30, 0.12); }
.mw2-scope-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: var(--border-default); color: var(--mw2-muted); }
.mw2-scope-btn.is-on .mw2-scope-count { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* ── KPI strip (doubles as the status filter) ──────────────────────────── */
.mw2-kpis { display: flex; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.mw2-kpi { position: relative; padding: 12px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1; min-width: 116px; background: var(--surface-primary); border-right: 1px solid var(--border-default); cursor: default; }
.mw2-kpi:last-child { border-right: 0; }
.mw2-kpi.is-click { cursor: pointer; }
.mw2-kpi.is-click:not(.is-active):hover { background: var(--mw2-kpi-hover); }
.mw2-kpi.is-active { background: var(--mw2-kpi-active); }
.mw2-kpi-top { display: flex; align-items: center; gap: 6px; }
.mw2-kpi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mw2-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mw2-muted); font-weight: 600; }
.mw2-kpi-num { font-family: 'Fraunces', serif; font-size: 25px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mw2-kpi-num.t-mint { color: var(--brand-primary-strong); }
.mw2-kpi-num.t-amber { color: var(--mw2-amber-text); }
.mw2-kpi-num.t-red { color: var(--mw2-red-text); }
.mw2-kpi-sub { font-size: 11px; color: var(--mw2-muted); line-height: 1.3; }
.mw2-kpi-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: transparent; }
.mw2-kpi.is-active .mw2-kpi-bar { background: currentColor; }

/* ── Views row ─────────────────────────────────────────────────────────── */
.mw2-views { padding: 13px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.mw2-views-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mw2-muted); font-weight: 600; margin-right: 2px; }
.mw2-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid var(--border-default); background: var(--surface-primary); color: var(--mw2-slate-text); }
.mw2-chip.is-on { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.mw2-chip.is-warn.is-on { border-color: var(--mw2-red-border); background: var(--mw2-red-soft); color: var(--mw2-red-text); }
.mw2-chip-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 7px; background: var(--mw2-pending-soft); color: var(--mw2-muted); }
.mw2-chip.is-on .mw2-chip-count { background: rgba(20, 184, 138, 0.16); color: var(--brand-primary-strong); }
.mw2-chip.is-warn.is-on .mw2-chip-count { background: rgba(220, 38, 38, 0.14); color: var(--mw2-red-text); }
.mw2-views-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mw2-collapse-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; background: var(--surface-primary); color: var(--mw2-slate-text); border: 1px solid var(--border-default); }
.mw2-collapse-btn:hover { background: var(--surface-secondary); border-color: var(--border-strong); }
.mw2-collapse-chev { display: flex; transition: transform .18s; }
.mw2-collapse-chev.is-flip { transform: rotate(-90deg); }
.mw2-sort { display: flex; align-items: center; gap: 6px; }
.mw2-sort-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mw2-muted); font-weight: 600; }
.mw2-sort-select { padding: 6px 9px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-primary); font-size: 12.5px; color: var(--mw2-slate-text); font-family: inherit; cursor: pointer; outline: 0; }
.mw2-viscount { font-size: 12px; color: var(--mw2-muted); white-space: nowrap; }

/* ── Filter row ────────────────────────────────────────────────────────── */
.mw2-filters { padding: 10px 0 12px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; flex-shrink: 0; }
.mw2-search { display: flex; align-items: center; gap: 8px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 8px; padding: 6px 11px; width: 180px; color: var(--mw2-muted); }
.mw2-search input { border: 0; background: transparent; font-size: 12.5px; color: var(--text-primary); font-family: inherit; outline: 0; width: 100%; }
.mw2-search input::placeholder { color: var(--mw2-muted); }

.mw2-drop { position: relative; }
.mw2-drop-trigger { display: flex; align-items: center; justify-content: space-between; gap: 7px; height: 32px; padding: 0 11px; border-radius: 8px; background: var(--surface-primary); font-size: 12.5px; color: var(--mw2-slate-text); font-weight: 500; font-family: inherit; cursor: pointer; border: 1px solid var(--border-default); max-width: 160px; }
.mw2-drop-trigger.is-open { border-color: var(--brand-primary); }
.mw2-drop-trigger > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw2-drop-panel { position: absolute; top: calc(100% + 5px); left: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 10px; box-shadow: 0 12px 32px rgba(11, 15, 30, 0.14); padding: 6px; z-index: 80; animation: mw2-drop .16s ease; max-height: 320px; overflow-y: auto; }
.mw2-drop-actions { display: flex; gap: 6px; padding: 2px 4px 7px; border-bottom: 1px solid var(--mw2-pending-soft); margin-bottom: 5px; }
.mw2-drop-actions button { flex: 1; height: 26px; border-radius: 6px; border: 1px solid var(--border-default); background: var(--surface-primary); font-size: 11.5px; font-weight: 600; font-family: inherit; color: var(--mw2-slate-text); cursor: pointer; }
.mw2-opt { display: flex; gap: 9px; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text-primary); }
.mw2-opt:hover { background: var(--surface-secondary); }
.mw2-check { width: 17px; height: 17px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid var(--border-strong); background: var(--surface-primary); }
.mw2-check.is-on { border-color: var(--brand-primary); background: var(--brand-primary); }
.mw2-opt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mw2-opt-label { flex: 1; }
.mw2-opt-count { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--mw2-muted); font-weight: 600; }
.mw2-backdrop { position: fixed; inset: 0; z-index: 70; background: transparent; }

/* ── Filtered-view banner ──────────────────────────────────────────────── */
.mw2-banner { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 14px; margin-bottom: 12px; background: var(--mw2-banner-bg); border: 1px solid var(--mw2-banner-border); border-radius: 10px; flex-shrink: 0; }
.mw2-banner > svg { flex-shrink: 0; }
.mw2-banner-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mw2-banner-title { font-size: 13px; font-weight: 700; color: var(--mw2-banner-strong); }
.mw2-banner-sub { font-size: 12.5px; color: var(--mw2-banner-text); }
.mw2-banner-sep { width: 1px; height: 14px; background: var(--mw2-banner-border); }
.mw2-banner-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-primary); border: 1px solid var(--mw2-banner-border); color: var(--mw2-banner-strong); white-space: nowrap; }
.mw2-banner-chip button { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--mw2-banner-x); cursor: pointer; border-radius: 50%; padding: 0; }
.mw2-banner-chip button:hover { background: var(--mw2-banner-x-hover); color: var(--mw2-banner-strong); }
.mw2-banner-clear { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 8px; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; background: var(--brand-dark); color: #fff; border: 0; white-space: nowrap; flex-shrink: 0; }
.mw2-banner-clear:hover { background: #1E293B; }

/* ── Phase list card ───────────────────────────────────────────────────── */
.mw2-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: auto; padding-bottom: 14px; }
.mw2-card { border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; background: var(--surface-primary); min-width: 820px; }

.mw2-grid-head,
.mw2-row { display: grid; grid-template-columns: 168px 92px 124px minmax(150px, 1fr) 160px 130px; gap: 12px; align-items: center; }
.mw2-grid-head { padding: 9px 18px; background: var(--surface-primary); border-bottom: 1px solid var(--border-default); }
.mw2-col-h { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mw2-muted); font-weight: 700; }
.mw2-col-h.is-right { text-align: right; }

/* Group headers */
.mw2-group-head { display: flex; align-items: center; gap: 9px; padding: 9px 18px; background: var(--surface-secondary); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); cursor: pointer; }
.mw2-card > div:first-child .mw2-group-head { border-top: 0; }
.mw2-group-head:hover { background: var(--mw2-slate-soft); }
.mw2-group-chev { display: flex; transition: transform .18s; }
.mw2-group-chev.is-open { transform: rotate(90deg); }
.mw2-group-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.mw2-group-client { font-size: 12px; color: var(--mw2-muted); }
.mw2-group-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.mw2-group-blocked { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--mw2-red-soft); color: var(--mw2-red-text); }
.mw2-group-meta { display: flex; align-items: center; gap: 8px; }
.mw2-group-eng-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--mw2-muted); font-weight: 600; }
.mw2-group-tasks { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--mw2-muted); }
.mw2-group-count { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--mw2-muted); font-weight: 600; }

/* % pill — shared by group headers (11.5px) and rows (13px via .is-lg) */
.mw2-pct { display: inline-flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; color: var(--mw2-pending-dot); background: var(--mw2-pending-soft); }
.mw2-pct.is-lg { font-size: 13px; }
.mw2-pct.is-mint { color: var(--brand-primary-strong); background: var(--brand-primary-soft); }
.mw2-pct.is-red { color: var(--mw2-red-text); background: var(--mw2-red-soft); }
.mw2-pct.is-done { color: var(--mw2-done-text); background: var(--mw2-done-soft); }

/* Phase rows */
.mw2-row { padding: 13px 18px; background: var(--surface-primary); border-bottom: 1px solid var(--mw2-row-border); cursor: pointer; }
.mw2-row:hover { background: var(--surface-secondary); }
.mw2-row.is-overdue { box-shadow: inset 3px 0 0 var(--mw2-red); }
.mw2-phase-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mw2-avatar { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.mw2-avatar.tone-mint { background: #E5FAF2; color: #14B88A; }
.mw2-avatar.tone-violet { background: #EDE9FE; color: #6D28D9; }
.mw2-avatar.tone-blue { background: #DBEAFE; color: #1D4ED8; }
.mw2-avatar.tone-amber { background: #FEF3C7; color: #B45309; }
.mw2-avatar.tone-red { background: #FEE2E2; color: #B91C1C; }
[data-theme="dark"] .mw2-avatar.tone-mint { background: rgba(46, 212, 165, 0.14); color: #2ED4A5; }
[data-theme="dark"] .mw2-avatar.tone-violet { background: rgba(167, 139, 250, 0.16); color: #C4B5FD; }
[data-theme="dark"] .mw2-avatar.tone-blue { background: rgba(59, 130, 246, 0.16); color: #93C5FD; }
[data-theme="dark"] .mw2-avatar.tone-amber { background: rgba(245, 158, 11, 0.16); color: #FBBF24; }
[data-theme="dark"] .mw2-avatar.tone-red { background: rgba(239, 68, 68, 0.16); color: #FCA5A5; }
.mw2-phase-info { min-width: 0; }
.mw2-phase-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw2-phase-owner { font-size: 11px; color: var(--mw2-muted); white-space: nowrap; }
.mw2-period { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--mw2-slate-text); }

.mw2-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.mw2-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.mw2-status.is-ready { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.mw2-status.is-inprogress { background: var(--mw2-amber-soft); color: var(--mw2-amber-text); }
.mw2-status.is-blocked { background: var(--mw2-red-soft); color: var(--mw2-red-text); }
.mw2-status.is-pending { background: var(--mw2-pending-soft); color: var(--mw2-pending-text); }
.mw2-status.is-complete { background: var(--mw2-done-soft); color: var(--mw2-done-text); }

.mw2-stage { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--mw2-slate-soft); color: var(--mw2-slate-text); }

.mw2-progress { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.mw2-progress-sub { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--mw2-muted); white-space: nowrap; }

.mw2-action { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.mw2-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 13px; border-radius: 7px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; }
.mw2-btn.is-start { background: var(--brand-primary); color: var(--brand-dark); border: 1px solid var(--brand-primary); }
.mw2-btn.is-resume { background: var(--mw2-amber-soft); color: var(--mw2-amber-text); border: 1px solid var(--mw2-amber-border); }
.mw2-btn.is-open { background: var(--surface-primary); color: var(--mw2-red-text); border: 1px solid var(--mw2-red-border); }
.mw2-btn.is-neutral { background: var(--surface-primary); color: var(--mw2-slate-text); border: 1px solid var(--border-default); }
.mw2-btn.is-ghost { background: transparent; color: var(--mw2-muted); border: 1px solid var(--border-default); padding: 0 12px; }
.mw2-btn.is-ghost:hover { background: var(--mw2-pending-soft); color: var(--text-primary); }
.mw2-row-chev { display: flex; transition: transform .18s; }
.mw2-row-chev.is-open { transform: rotate(90deg); }

/* ── Row task peek ─────────────────────────────────────────────────────── */
.mw2-peek { padding: 2px 18px 14px; background: var(--mw2-peek-bg); border-bottom: 1px solid var(--mw2-row-border); animation: mw2-drop .18s ease; }
.mw2-peek-head { display: flex; justify-content: space-between; align-items: center; margin: 10px 2px 8px; }
.mw2-peek-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mw2-muted); font-weight: 700; }
.mw2-peek-due { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; white-space: nowrap; }
.mw2-peek-due.is-muted { color: var(--mw2-pending-text); }
.mw2-peek-due.is-soon { color: var(--mw2-amber-text); }
.mw2-peek-due.is-late { color: var(--mw2-red-text); }
.mw2-peek-list { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; }
.mw2-step { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 84px; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--mw2-row-border); }
.mw2-step:last-child { border-bottom: 0; }
.mw2-step-disc { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface-primary); border: 1.5px solid var(--border-strong); }
.mw2-step-disc.is-done { background: var(--brand-primary); border: 0; }
.mw2-step-disc.is-active { border-color: var(--mw2-amber-dot); }
.mw2-step-name { font-size: 12.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw2-step-name.is-done { color: var(--mw2-muted); text-decoration: line-through; }
.mw2-step-who { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--mw2-pending-soft); color: var(--mw2-pending-text); justify-self: start; }
.mw2-step-who.is-you { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.mw2-step-status { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; text-align: right; }
.mw2-step-status.is-done { color: var(--mw2-done-dot); }
.mw2-step-status.is-active { color: var(--mw2-amber-text); }
.mw2-step-status.is-todo { color: var(--mw2-muted); }
.mw2-step-status.is-blocked { color: var(--mw2-red-text); }

/* ── Empty states ──────────────────────────────────────────────────────── */
.mw2-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 24px; text-align: center; }
.mw2-empty-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.mw2-empty-icon.is-neutral { width: 46px; height: 46px; border-radius: 12px; background: var(--mw2-pending-soft); color: var(--mw2-muted); margin-bottom: 14px; }
.mw2-empty-title { font-family: 'Fraunces', serif; font-size: 22px; color: var(--text-primary); margin-bottom: 5px; }
.mw2-empty-title.is-sm { font-size: 18px; margin-bottom: 4px; }
.mw2-empty-sub { font-size: 13px; color: var(--mw2-muted); max-width: 340px; line-height: 1.5; }
.mw2-empty .mw2-clear-btn { margin-top: 16px; height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--border-default); }

/* ==================== clients-v2.css ==================== */
/* clients-v2.css — GLOBAL styles for the Clients & Engagements V2 module
   (Customers / Businesses / Engagements — list, detail, add), from
   design_handoff_clients_engagements/. Full V1 replacement — no legacy
   customers/businesses/engagements page classes remain in use.
   Rides the app's tokens + [data-theme="dark"] overrides. Prefix: cv-.

   Mirrors the my-work-v2.css contract: local CSS vars carry the handoff's exact
   palette (values with no direct token), a [data-theme="dark"] block relaxes them,
   and every screen sits inside a .cv-page wrapper below the top nav. Fonts already
   loaded in App.razor: Fraunces (titles/KPI numbers/hero), Work Sans (body),
   JetBrains Mono (eyebrows/IDs/counts/column headers). */

.cv-page {
    /* Handoff palette — no direct token; dark overrides below. */
    --cv-mint: #2ED4A5;
    --cv-mint-strong: #14B88A;
    --cv-mint-soft: #E5FAF2;
    --cv-mint-dot: #2ED4A5;
    --cv-amber-text: #B45309;
    --cv-amber-soft: #FEF3C7;
    --cv-amber-border: #FADFA0;
    --cv-amber-dot: #F59E0B;
    --cv-red-text: #DC2626;
    --cv-red: #EF4444;
    --cv-red-soft: #FEE2E2;
    --cv-red-border: #F6C6C6;
    --cv-slate-text: #64748B;
    --cv-slate-soft: #EEF1F5;
    --cv-slate-dot: #94A3B8;
    --cv-blue-text: #2563EB;
    --cv-blue-soft: #EEF5FF;
    --cv-violet: #7C3AED;
    --cv-violet-soft: #EDE9FE;
    --cv-muted: #94A3B8;
    --cv-faint: #94A3B8;
    --cv-row-border: #F1F3F6;
    --cv-inner-divider: #EEF1F5;
    --cv-kpi-active: #F7FEFB;
    --cv-kpi-hover: #FAFBFC;
    --cv-head-bg: #FBFCFD;
    --cv-banner-bg: #FFF7ED;
    --cv-banner-border: #FED7AA;
    --cv-banner-strong: #9A3412;
    --cv-banner-text: #B45309;
    --cv-banner-x: #C2703A;
    --cv-banner-x-hover: #FDE4C8;
    --cv-hero-violet-a: #A78BFA;
    --cv-hero-violet-b: #7C3AED;

    min-height: calc(100vh - var(--top-nav-height));
    padding: 0 22px 24px;
    background: var(--surface-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .cv-page {
    --cv-mint-soft: rgba(46, 212, 165, 0.14);
    --cv-amber-text: #FBBF24;
    --cv-amber-soft: rgba(245, 158, 11, 0.16);
    --cv-amber-border: rgba(245, 158, 11, 0.35);
    --cv-red-text: #F87171;
    --cv-red-soft: rgba(239, 68, 68, 0.16);
    --cv-red-border: rgba(239, 68, 68, 0.4);
    --cv-slate-text: #B6BECB;
    --cv-slate-soft: var(--surface-tertiary);
    --cv-blue-text: #93C5FD;
    --cv-blue-soft: rgba(59, 130, 246, 0.16);
    --cv-violet-soft: rgba(124, 58, 237, 0.22);
    --cv-row-border: rgba(255, 255, 255, 0.06);
    --cv-inner-divider: rgba(255, 255, 255, 0.06);
    --cv-kpi-active: rgba(46, 212, 165, 0.10);
    --cv-kpi-hover: rgba(255, 255, 255, 0.03);
    --cv-head-bg: var(--surface-secondary);
    --cv-banner-bg: rgba(245, 158, 11, 0.10);
    --cv-banner-border: rgba(245, 158, 11, 0.32);
    --cv-banner-strong: #FBBF24;
    --cv-banner-text: #FBBF24;
}

/* ─────────────────────────── page header ─────────────────────────── */
.cv-head { padding: 16px 0 12px; display: flex; align-items: flex-end; gap: 16px; }
.cv-head-titles { flex: 1; min-width: 0; }
.cv-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--cv-mint-strong); font-weight: 600; margin-bottom: 5px;
}
.cv-title {
    font-family: 'Fraunces', serif; font-weight: 500; font-size: 27px; letter-spacing: -0.02em;
    color: var(--text-primary); line-height: 1; margin: 0;
}
.cv-subtitle { margin: 6px 0 0; font-size: 13px; color: var(--cv-slate-text); }
.cv-breadcrumb {
    padding: 14px 0 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px;
    color: var(--cv-muted);
}
.cv-breadcrumb a { color: var(--cv-slate-text); }
.cv-breadcrumb a:hover { color: var(--cv-mint-strong); text-decoration: none; }

/* ─────────────────────────── buttons ─────────────────────────── */
.cv-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px;
    border-radius: 9px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap; text-decoration: none; transition: background .14s, border-color .14s;
}
.cv-btn:hover { text-decoration: none; }
.cv-btn.is-primary { background: var(--cv-mint); color: #0B0F1E; border-color: var(--cv-mint); }
.cv-btn.is-primary:hover { background: var(--cv-mint-strong); border-color: var(--cv-mint-strong); }
.cv-btn.is-ghost { background: var(--surface-primary); color: var(--text-secondary); border-color: var(--border-default); }
.cv-btn.is-ghost:hover { background: var(--surface-secondary); border-color: var(--border-strong); }
.cv-btn.is-danger { background: var(--surface-primary); color: var(--cv-red-text); border-color: var(--cv-red-border); }
.cv-btn.is-danger:hover { background: var(--cv-red-soft); }
.cv-btn.is-dark { background: #0B0F1E; color: #fff; border-color: #0B0F1E; }
.cv-btn.is-dark:hover { background: #1E293B; }
.cv-btn.is-sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 7px; }
.cv-btn.is-warn { background: var(--cv-amber-soft); color: var(--cv-amber-text); border-color: var(--cv-amber-border); }
.cv-btn:disabled { opacity: .55; cursor: default; }
.cv-btn.is-disabled-look { background: var(--surface-tertiary); color: var(--cv-muted); border-color: var(--border-default); cursor: default; }

/* ─────────────────────────── KPI filter bar (list screens) ─────────────────────────── */
/* Customers/Businesses: single white rounded bar, cells divided by borders. */
.cv-kpibar {
    display: flex; background: var(--surface-primary); border: 1px solid var(--border-default);
    border-radius: 12px; overflow: hidden;
}
.cv-kpi {
    position: relative; padding: 12px 18px; display: flex; flex-direction: column;
    justify-content: center; gap: 4px; flex: 1; min-width: 132px;
    border-right: 1px solid var(--border-default);
}
.cv-kpi:last-child { border-right: 0; }
.cv-kpi.is-click { cursor: pointer; }
.cv-kpi.is-click:hover { background: var(--cv-kpi-hover); }
.cv-kpi.is-active { background: var(--cv-kpi-active); }
.cv-kpi-top { display: flex; align-items: center; gap: 6px; }
.cv-kpi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cv-kpi-label {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--cv-muted); font-weight: 600;
}
.cv-kpi-num {
    font-family: 'Fraunces', serif; font-size: 25px; font-weight: 500; line-height: 1.05;
    letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.cv-kpi-sub { font-size: 11px; color: var(--cv-muted); line-height: 1.3; }
.cv-kpi-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: transparent; }
.cv-kpi.is-active .cv-kpi-bar { background: var(--_dot, var(--cv-mint)); }

/* Engagements: 5 separate cards with a left accent bar. */
.cv-kpicards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.cv-kpicards.is-4 { grid-template-columns: repeat(4, 1fr); }
.cv-kpicard {
    position: relative; background: var(--surface-primary); border: 1px solid var(--border-default);
    border-radius: 12px; padding: 13px 15px 12px; overflow: hidden;
}
.cv-kpicard.is-click { cursor: pointer; }
.cv-kpicard.is-click:hover { border-color: var(--border-strong); }
.cv-kpicard.is-active { border-color: var(--cv-mint); box-shadow: 0 0 0 3px rgba(46, 212, 165, .14); }
.cv-kpicard-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--_accent, var(--cv-mint)); }
.cv-kpicard-label {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cv-muted); font-weight: 600;
}
.cv-kpicard-num {
    font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; line-height: 1.1;
    letter-spacing: -0.02em; color: var(--text-primary); margin: 5px 0 2px;
}
.cv-kpicard-num.is-metric { font-size: 20px; }
.cv-kpicard-meta { font-size: 11px; color: var(--cv-muted); }

/* ─────────────────────────── toolbar + search ─────────────────────────── */
.cv-toolbar { padding: 13px 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-search {
    display: flex; align-items: center; gap: 8px; background: var(--surface-primary);
    border: 1px solid var(--border-default); border-radius: 8px; padding: 6px 11px; height: 34px;
}
.cv-search svg { color: var(--cv-muted); flex-shrink: 0; }
.cv-search input {
    border: 0; background: transparent; font-size: 12.5px; color: var(--text-primary);
    font-family: inherit; outline: 0; width: 100%;
}
.cv-search.is-w230 { width: 230px; }
.cv-search.is-w290 { width: 290px; }
.cv-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cv-sort-label {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cv-muted); font-weight: 600;
}
.cv-select {
    padding: 6px 9px; border: 1px solid var(--border-default); border-radius: 8px;
    background: var(--surface-primary); font-size: 12.5px; color: var(--text-secondary);
    font-family: inherit; cursor: pointer; outline: 0; height: 34px;
}
.cv-count { font-size: 12px; color: var(--cv-muted); white-space: nowrap; }

/* filter pills (Engagements) */
.cv-pillrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-fpill {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px;
    border-radius: 9px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
    background: var(--surface-primary); color: var(--text-secondary); border: 1px solid var(--border-default);
}
.cv-fpill:hover { border-color: var(--border-strong); }
.cv-fpill.is-active { background: #0B0F1E; color: #fff; border-color: #0B0F1E; }
.cv-fpill-count {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 1px 6px;
    border-radius: 7px; background: var(--cv-slate-soft); color: var(--cv-muted);
}
.cv-fpill.is-active .cv-fpill-count { background: rgba(255, 255, 255, .16); color: #fff; }

/* ─────────────────────────── multi-select dropdown ─────────────────────────── */
.cv-drop { position: relative; }
.cv-drop-backdrop { position: fixed; inset: 0; z-index: 70; }
.cv-drop-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 7px; height: 32px;
    padding: 0 11px; border-radius: 8px; background: var(--surface-primary); font-size: 12.5px;
    color: var(--text-secondary); font-weight: 500; font-family: inherit; cursor: pointer;
    border: 1px solid var(--border-default); max-width: 200px;
}
.cv-drop-trigger.is-open { border-color: var(--cv-mint); }
.cv-drop-trigger > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-drop-panel {
    position: absolute; top: calc(100% + 5px); left: 0; background: var(--surface-primary);
    border: 1px solid var(--border-default); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(11, 15, 30, .14); padding: 6px; z-index: 80;
    animation: cv-drop .16s ease; max-height: 300px; overflow-y: auto;
}
.cv-drop-actions { display: flex; gap: 6px; padding: 2px 4px 7px; border-bottom: 1px solid var(--cv-inner-divider); margin-bottom: 5px; }
.cv-drop-actions button {
    flex: 1; height: 26px; border-radius: 6px; border: 1px solid var(--border-default);
    background: var(--surface-primary); font-size: 11.5px; font-weight: 600; font-family: inherit;
    color: var(--text-secondary); cursor: pointer;
}
.cv-opt {
    display: flex; gap: 9px; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer;
    font-size: 12.5px; color: var(--text-primary);
}
.cv-opt:hover { background: var(--surface-secondary); }
.cv-opt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cv-opt-label { flex: 1; }
.cv-opt-count { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--cv-muted); font-weight: 600; }

/* checkbox */
.cv-check {
    width: 17px; height: 17px; border-radius: 5px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; cursor: pointer; border: 1.5px solid var(--border-strong);
    background: var(--surface-primary);
}
.cv-check.is-on { border-color: var(--cv-mint); background: var(--cv-mint); }

/* ─────────────────────────── filtered-view banner + chips ─────────────────────────── */
.cv-banner {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 14px; margin-bottom: 12px;
    background: var(--cv-banner-bg); border: 1px solid var(--cv-banner-border); border-radius: 10px;
}
.cv-banner-icon { color: var(--cv-amber-text); flex-shrink: 0; }
.cv-banner-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-banner-title { font-size: 13px; font-weight: 700; color: var(--cv-banner-strong); }
.cv-banner-sub { font-size: 12.5px; color: var(--cv-banner-text); }
.cv-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; background: var(--surface-primary);
    border: 1px solid var(--cv-banner-border); color: var(--cv-banner-strong); white-space: nowrap;
}
.cv-chip-x {
    width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border: 0;
    background: transparent; color: var(--cv-banner-x); cursor: pointer; border-radius: 50%;
}
.cv-chip-x:hover { background: var(--cv-banner-x-hover); color: var(--cv-banner-strong); }
.cv-banner-clear {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; background: #0B0F1E;
    color: #fff; border: 0; white-space: nowrap; flex-shrink: 0;
}
.cv-banner-clear:hover { background: #1E293B; }
/* Engagements banner variant (single line) */
.cv-banner.is-inline { border-radius: 11px; padding: 9px 14px; }
.cv-banner.is-inline .cv-banner-sub strong { color: var(--cv-amber-text); }

/* ─────────────────────────── bulk bar ─────────────────────────── */
.cv-bulk {
    display: flex; align-items: center; gap: 12px; padding: 9px 14px; margin-bottom: 12px;
    background: #0B0F1E; border-radius: 10px;
}
.cv-bulk-count { font-size: 13px; font-weight: 600; color: #fff; }
.cv-bulk-sep { width: 1px; height: 16px; background: #334155; }
.cv-bulk-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px;
    font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; background: #1E293B;
    color: #E2E8F0; border: 0;
}
.cv-bulk-btn:hover { background: #334155; }
.cv-bulk-btn.is-danger { background: transparent; color: #FCA5A5; border: 1px solid #7F1D1D; }
.cv-bulk-btn.is-danger:hover { background: #7F1D1D; color: #fff; }
.cv-bulk-clear {
    margin-left: auto; height: 30px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 600;
    font-family: inherit; cursor: pointer; background: transparent; color: #94A3B8; border: 0;
}

/* ─────────────────────────── list table ─────────────────────────── */
/* No overflow-x here: any non-visible overflow value makes this a scroll
   container in BOTH axes, which clips the row (⋮) menu. Narrow viewports get
   horizontal scrolling from the media query at the end of this section. */
.cv-list { padding-bottom: 14px; }
.cv-table {
    border: 1px solid var(--border-default); border-radius: 12px; overflow: visible;
    background: var(--surface-primary);
}
.cv-thead {
    display: grid; gap: 12px; padding: 9px 14px; align-items: center; background: var(--cv-head-bg);
    border-bottom: 1px solid var(--border-default);
}
.cv-th {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--cv-muted); font-weight: 700;
}
.cv-row {
    display: grid; gap: 12px; align-items: center; padding: 11px 14px; background: var(--surface-primary);
    border-bottom: 1px solid var(--cv-row-border);
}
/* Rows have an opaque background, so the row with an open (⋮) menu must sit
   above its siblings or they paint over the menu. */
.cv-row.has-menu-open { position: relative; z-index: 20; }
/* The table can't use overflow:hidden to clip these corners (it would cut off
   the row menu), so the last row matches the table's radius itself. */
.cv-row:last-child { border-bottom: 0; border-radius: 0 0 12px 12px; }
.cv-row.is-click { cursor: pointer; }
.cv-row.is-click:hover { background: var(--surface-secondary); }
.cv-cellclick { cursor: pointer; display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Grid column templates per screen */
.cv-grid-customers { grid-template-columns: 40px minmax(220px,2.4fr) 118px 128px minmax(150px,1.3fr) 150px 44px; }
.cv-grid-businesses { grid-template-columns: minmax(220px,2.2fr) minmax(180px,1.6fr) 130px 150px 110px 44px; }
.cv-grid-engagements { grid-template-columns: 2.4fr 1fr 1fr 1.7fr 1.4fr 40px; }
.cv-cell-strong { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-cell-mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--cv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-cell-num { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cv-cell-num.is-muted { color: var(--cv-muted); }
.cv-cell-sub { font-size: 11px; color: var(--cv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-cell-meta { font-size: 12.5px; color: var(--text-secondary); }
.cv-menucell { position: relative; display: flex; align-items: center; justify-content: center; }
.cv-iconbtn {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0;
    background: transparent; color: var(--cv-muted); cursor: pointer; border-radius: 7px;
}
.cv-iconbtn:hover { background: var(--cv-slate-soft); color: var(--text-primary); }

/* row context (⋮) menu */
.cv-menu {
    position: absolute; top: calc(100% + 4px); right: 0; width: 210px; background: var(--surface-primary);
    border: 1px solid var(--border-default); border-radius: 10px; box-shadow: 0 12px 32px rgba(11, 15, 30, .16);
    padding: 5px; z-index: 90; animation: cv-drop .16s ease;
}
/* Opens upward when the row is near the bottom of the list. */
.cv-menu.is-up { top: auto; bottom: calc(100% + 4px); }
.cv-menu-item {
    display: flex; align-items: center; justify-content: flex-start; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 6px;
    border: 0; background: transparent; font-size: 12.5px; font-weight: 500; font-family: inherit;
    cursor: pointer; color: var(--text-primary); text-decoration: none;
}
.cv-menu-item:hover { background: var(--surface-secondary); }
.cv-menu-item.is-danger { color: var(--cv-red-text); }
.cv-menu-item.is-danger:hover { background: var(--cv-red-soft); }
.cv-menu-div { height: 1px; background: var(--cv-inner-divider); margin: 4px 2px; }

/* ─────────────────────────── status pills ─────────────────────────── */
.cv-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.cv-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.cv-pill.is-green { background: var(--cv-mint-soft); color: var(--cv-mint-strong); }
.cv-pill.is-amber { background: var(--cv-amber-soft); color: var(--cv-amber-text); }
.cv-pill.is-red { background: var(--cv-red-soft); color: var(--cv-red-text); }
.cv-pill.is-slate { background: var(--cv-slate-soft); color: var(--cv-slate-text); }
.cv-pill.is-blue { background: var(--cv-blue-soft); color: var(--cv-blue-text); }
.cv-pill.is-violet { background: var(--cv-violet-soft); color: var(--cv-violet); }
.cv-statusmeta { font-size: 11px; color: var(--cv-muted); margin-top: 3px; }

/* type badge */
.cv-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.cv-badge.is-blue { background: var(--cv-blue-soft); color: var(--cv-blue-text); }
.cv-badge.is-green { background: #F0FBF6; color: var(--cv-mint-strong); }

/* ─────────────────────────── avatars ─────────────────────────── */
.cv-avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700;
    width: 34px; height: 34px; border-radius: 9px; font-size: 12.5px;
}
.cv-avatar.is-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 20px; }
.cv-avatar.is-hero { width: 54px; height: 54px; border-radius: 14px; font-size: 18px;
    background: linear-gradient(135deg, var(--cv-hero-violet-a), var(--cv-hero-violet-b)); color: #fff;
    font-family: 'Fraunces', serif; }
.cv-avatar.tone-0 { background: #E5FAF2; color: #14B88A; }
.cv-avatar.tone-1 { background: #EDE9FE; color: #6D28D9; }
.cv-avatar.tone-2 { background: #DBEAFE; color: #1D4ED8; }
.cv-avatar.tone-3 { background: #FEF3C7; color: #B45309; }
.cv-avatar.tone-4 { background: #FEE2E2; color: #B91C1C; }
.cv-avatar.tone-5 { background: #E2E8F0; color: #475569; }
/* engagement small square icon */
.cv-eicon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center;
    justify-content: center; font-size: 12.5px; font-weight: 700; }
/* overlapping team avatar stack */
.cv-teamstack { display: flex; }
.cv-teamav {
    width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 700; border: 2px solid var(--surface-primary); margin-left: -6px;
}
.cv-teamav:first-child { margin-left: 0; }

/* ─────────────────────────── detail: hero + tabs + stat strip ─────────────────────────── */
.cv-hero {
    display: flex; align-items: flex-start; gap: 16px; background: var(--surface-primary);
    border: 1px solid var(--border-default); border-radius: 14px; padding: 18px 20px; margin: 12px 0 4px;
}
.cv-hero-body { flex: 1; min-width: 0; }
.cv-hero-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--cv-muted); font-weight: 600; margin-bottom: 4px;
}
.cv-hero-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 23px; letter-spacing: -0.01em;
    color: var(--text-primary); line-height: 1.1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-hero-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--cv-muted); }
.cv-hero-meta { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); }
.cv-hero-meta .sep { color: var(--cv-faint); }
.cv-hero-meta a { color: var(--cv-mint-strong); font-weight: 600; }
.cv-hero-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.cv-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border-default); margin: 14px 0 16px; }
.cv-tab {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 4px; margin-right: 16px;
    border: 0; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--cv-slate-text); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cv-tab:hover { color: var(--text-primary); }
.cv-tab.is-active { color: var(--cv-mint-strong); border-bottom-color: var(--cv-mint); }
.cv-tab-count {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 0 6px; height: 16px;
    display: inline-flex; align-items: center; border-radius: 7px; background: var(--cv-slate-soft); color: var(--cv-muted);
}
.cv-tab-count.is-red { background: var(--cv-red-soft); color: var(--cv-red-text); }

.cv-statstrip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--surface-primary);
    border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; margin-bottom: 16px;
}
.cv-statstrip.is-3 { grid-template-columns: repeat(3, 1fr); }
.cv-stat { padding: 14px 18px; border-right: 1px solid var(--border-default); }
.cv-stat:last-child { border-right: 0; }
.cv-stat-label {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--cv-muted); font-weight: 600; margin-bottom: 6px;
}
.cv-stat-value { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); line-height: 1; }
.cv-stat-sub { font-size: 11px; color: var(--cv-muted); margin-top: 4px; }
/* engagement KPI accent-bar cards reuse .cv-kpicards but 3-up */
.cv-kpicards.is-3 { grid-template-columns: repeat(3, 1fr); }

/* ─────────────────────────── section cards + key/value ─────────────────────────── */
.cv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cv-grid2.is-wide-left { grid-template-columns: 1.5fr 1fr; }
.cv-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.cv-colstack { display: flex; flex-direction: column; gap: 16px; }
.cv-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 12px; padding: 16px 18px; }
.cv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cv-card-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.cv-card-link { font-size: 12.5px; font-weight: 600; color: var(--cv-mint-strong); cursor: pointer; background: none; border: 0; font-family: inherit; }
.cv-kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; }
.cv-kv.is-2col { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.cv-kv-k { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--cv-muted); font-weight: 600; }
.cv-kv-v { font-size: 13px; color: var(--text-primary); }
.cv-kv-block .cv-kv-k { margin-bottom: 4px; }

/* clickable list rows inside cards (businesses/engagements/team) */
.cv-linkrow {
    display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--cv-inner-divider);
    cursor: pointer; text-decoration: none; color: inherit;
}
.cv-linkrow:last-child { border-bottom: 0; }
.cv-linkrow:hover { text-decoration: none; }
.cv-linkrow-body { flex: 1; min-width: 0; }
.cv-linkrow-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cv-linkrow-sub { font-size: 11.5px; color: var(--cv-muted); }
.cv-linkrow-chev { color: var(--cv-faint); flex-shrink: 0; }

/* ─────────────────────────── timeline ─────────────────────────── */
.cv-timeline { display: flex; flex-direction: column; }
.cv-tl-row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cv-inner-divider); }
.cv-tl-row:last-child { border-bottom: 0; }
.cv-tl-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--cv-slate-soft); color: var(--cv-slate-text);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cv-tl-body { flex: 1; min-width: 0; }
.cv-tl-action { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cv-tl-meta { font-size: 11.5px; color: var(--cv-muted); margin-top: 2px; }
.cv-tl-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--cv-muted); white-space: nowrap; }

/* ─────────────────────────── progress bar (engagement list + detail) ─────────────────────────── */
.cv-progress { display: flex; align-items: center; gap: 9px; }
.cv-progress-main { flex: 1; min-width: 0; }
.cv-progress-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cv-progress-pct { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; color: var(--text-secondary); }
.cv-progress-track { height: 5px; border-radius: 999px; background: var(--cv-slate-soft); overflow: hidden; }
.cv-progress-fill { height: 100%; border-radius: 999px; background: var(--cv-mint); }
.cv-progress-fill.is-blocked { background: linear-gradient(90deg, #F59E0B, #EF4444); }
.cv-blockchip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px;
    font-weight: 700; background: var(--cv-red-soft); color: var(--cv-red-text); white-space: nowrap;
}
.cv-due { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.cv-due.is-overdue { color: var(--cv-red-text); }
.cv-due.is-muted { color: var(--cv-muted); }

/* stage pill (engagement) */
.cv-stage { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cv-stage-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cv-stage.is-active { background: var(--cv-violet-soft); color: var(--cv-violet); }
.cv-stage.is-active .cv-stage-dot { background: #A78BFA; }
.cv-stage.is-paused { background: var(--cv-amber-soft); color: var(--cv-amber-text); }
.cv-stage.is-paused .cv-stage-dot { background: #F59E0B; }
.cv-stage.is-draft { background: var(--cv-slate-soft); color: var(--cv-slate-text); }
.cv-stage.is-draft .cv-stage-dot { background: #94A3B8; }

/* ─────────────────────────── forms (Add screens) ─────────────────────────── */
/* Form column width — shared by the form AND the sticky action footer so the
   primary button lines up with the right edge of the form cards above it.
   (Previously the footer stretched the full page width while the form was
   capped/left-aligned, so Save/Next flew out to the far page edge.) */
.cv-page { --cv-form-col: 720px; }
.cv-page:has(.cv-form.is-narrow) { --cv-form-col: 560px; }
/* Center the form column instead of pinning it hard-left — a lone narrow column
   floating against the far-left of a wide viewport read as unfinished. The
   sticky action footer below is centered to the same track so Save/Next stay
   aligned with the form's right edge. */
.cv-form { max-width: var(--cv-form-col); margin: 8px auto 0; }
.cv-form.is-narrow { max-width: 560px; }
.cv-formcard { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; }
.cv-formcard-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.cv-formcard-desc { font-size: 12.5px; color: var(--cv-slate-text); margin-bottom: 16px; }
.cv-fieldrow { display: flex; gap: 12px; }
.cv-field { margin-bottom: 14px; flex: 1; min-width: 0; }
.cv-field.is-half { max-width: 50%; }
.cv-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.cv-help { font-size: 11.5px; color: var(--cv-muted); margin-top: 5px; }
.cv-input, .cv-textarea {
    width: 100%; padding: 0 11px; border-radius: 8px; border: 1px solid var(--border-default);
    background: var(--surface-primary); font-size: 13px; font-family: inherit; color: var(--text-primary); outline: none;
}
.cv-input { height: 38px; }
.cv-textarea { padding: 9px 11px; min-height: 84px; resize: vertical; line-height: 1.5; }
.cv-input:focus, .cv-textarea:focus { border-color: var(--cv-mint); box-shadow: var(--shadow-focus); }
.cv-field.is-error .cv-input, .cv-field.is-error .cv-textarea { border-color: #F6A5A5; }
.cv-field.is-error .cv-input:focus, .cv-field.is-error .cv-textarea:focus { box-shadow: var(--shadow-focus-danger); }
.cv-error { font-size: 11.5px; color: var(--cv-red-text); margin-top: 5px; }
.cv-formfooter {
    display: flex; align-items: center; gap: 12px; padding: 14px 0 0; border-top: 1px solid var(--border-default); margin-top: 4px;
}
/* In the row-form footer (.cv-formfooter) the meta fills the row and pushes
   buttons right; in the sticky .cv-wizard-footer it sits just left of the
   buttons (a spacer does the pushing), so it must NOT flex there. */
.cv-formfooter-meta { flex: 1; font-size: 12.5px; color: var(--cv-muted); }
.cv-wizard-footer .cv-formfooter-meta { flex: 0 1 auto; text-align: right; }
.cv-formfooter-meta.is-ready { display: inline-flex; align-items: center; gap: 6px; color: var(--cv-mint-strong); font-weight: 500; }
.cv-formfooter-meta.is-ready::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cv-mint); flex-shrink: 0;
}

/* custom (non-native) select — anchors under trigger regardless of transforms */
.cv-cselect { position: relative; }
.cv-cselect-trigger {
    width: 100%; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 11px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--surface-primary);
    font-size: 13px; font-family: inherit; color: var(--text-primary); cursor: pointer;
}
.cv-cselect-trigger.is-open { border-color: var(--cv-mint); }
.cv-cselect-trigger.is-placeholder { color: var(--cv-muted); }
.cv-cselect-panel {
    position: absolute; top: calc(100% + 5px); left: 0; right: 0; background: var(--surface-primary);
    border: 1px solid var(--border-default); border-radius: 10px; box-shadow: 0 12px 32px rgba(11, 15, 30, .14);
    padding: 5px; z-index: 80; animation: cv-drop .16s ease; max-height: 260px; overflow-y: auto;
}
.cv-cselect-opt { padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.cv-cselect-opt:hover { background: var(--surface-secondary); }
.cv-cselect-opt.is-sel { color: var(--cv-mint-strong); font-weight: 600; }

/* typeahead (customer picker) */
.cv-typeahead { position: relative; }
.cv-typeahead-panel {
    position: absolute; top: calc(100% + 5px); left: 0; right: 0; background: var(--surface-primary);
    border: 1px solid var(--border-default); border-radius: 10px; box-shadow: 0 12px 32px rgba(11, 15, 30, .14);
    padding: 5px; z-index: 80; animation: cv-drop .16s ease; max-height: 300px; overflow-y: auto;
}
.cv-ta-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 7px; cursor: pointer; }
.cv-ta-row:hover { background: var(--surface-secondary); }
.cv-ta-footer { border-top: 1px solid var(--cv-inner-divider); margin-top: 4px; padding-top: 4px; }
.cv-ta-create { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 7px; cursor: pointer; color: var(--cv-mint-strong); font-weight: 600; font-size: 13px; }
.cv-ta-create:hover { background: var(--cv-mint-soft); }
/* selected customer confirmation chip */
.cv-selchip {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
    background: var(--cv-mint-soft); border: 1px solid rgba(46, 212, 165, .35);
}
.cv-selchip-body { flex: 1; min-width: 0; }
.cv-selchip-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.cv-selchip-sub { font-size: 11.5px; color: var(--cv-slate-text); }
.cv-selchip-x { width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--cv-slate-text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cv-selchip-x:hover { background: rgba(46, 212, 165, .16); }

/* toggle switch */
.cv-switchcard { display: flex; align-items: center; gap: 14px; }
.cv-switchcard-body { flex: 1; min-width: 0; }
.cv-switch { width: 40px; height: 23px; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; border: 0; flex-shrink: 0; transition: background .16s; }
.cv-switch.is-on { background: var(--cv-mint); }
.cv-switch-knob { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left .16s; }
.cv-switch.is-on .cv-switch-knob { left: 20px; }

/* segmented control */
.cv-seg { display: inline-flex; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: 8px; padding: 3px; gap: 3px; }
.cv-seg-btn { padding: 6px 14px; border-radius: 6px; border: 0; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.cv-seg-btn.is-on { background: var(--surface-primary); color: var(--text-primary); box-shadow: var(--shadow-card); }

/* data-source chips (multi-select) */
.cv-srcchip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-primary); font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.cv-srcchip.is-on { border-color: var(--cv-mint); background: var(--cv-mint-soft); color: var(--cv-mint-strong); }

/* ─────────────────────────── wizard (Add Engagement) ─────────────────────────── */
.cv-wizard { display: flex; flex-direction: column; min-height: calc(100vh - var(--top-nav-height)); }
.cv-rail { display: flex; align-items: center; gap: 0; padding: 14px 0 18px; }
.cv-rail-step { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.cv-rail-num {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0; border: 1.5px solid var(--border-strong); color: var(--cv-muted); background: var(--surface-primary);
}
.cv-rail-step.is-done .cv-rail-num { background: var(--cv-mint); border-color: var(--cv-mint); color: #0B0F1E; }
.cv-rail-step.is-current .cv-rail-num { background: #0B0F1E; border-color: #0B0F1E; color: #fff; }
.cv-rail-label { font-size: 12.5px; font-weight: 600; color: var(--cv-muted); white-space: nowrap; }
.cv-rail-step.is-current .cv-rail-label, .cv-rail-step.is-done .cv-rail-label { color: var(--text-primary); }
.cv-rail-conn { flex: 1; height: 1.5px; background: var(--border-default); margin: 0 12px; min-width: 20px; }
.cv-rail-conn.is-done { background: var(--cv-mint); }
.cv-wizard-body { flex: 1; min-height: 0; }
.cv-wizard-footer {
    position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 0;
    background: var(--surface-secondary); border-top: 1px solid var(--border-default); margin-top: 16px;
    /* Constrain + center to the same track as the form column so the action
       buttons sit under the form's right edge and the ready/blocked meta stays
       within ~one column of the buttons (was ~full-page-width apart). */
    max-width: var(--cv-form-col, 720px); margin-left: auto; margin-right: auto;
}
.cv-page:has(.cv-form.is-narrow) .cv-wizard-footer { max-width: 560px; }
.cv-wizard-step-label { font-size: 12.5px; color: var(--cv-slate-text); font-weight: 600; }
.cv-wizard-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cv-amber-text); }
.cv-wizard-spacer { flex: 1; }
/* Blocked-state meta reads as an actionable amber cue (not muted grey the user
   ignores); ready-state is mint. Sits just left of the buttons via the spacer. */
.cv-formfooter-meta:not(.is-ready) {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; color: var(--cv-amber-text);
    font-weight: 500;
}
.cv-formfooter-meta:not(.is-ready)::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cv-amber-dot); flex-shrink: 0;
}
.cv-radio-card {
    border: 1.5px solid var(--border-default); border-radius: 10px; padding: 12px 14px; cursor: pointer;
    display: flex; align-items: flex-start; gap: 10px; background: var(--surface-primary);
}
.cv-radio-card.is-sel { border-color: var(--cv-mint); box-shadow: 0 0 0 3px rgba(46, 212, 165, .12); }
.cv-wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cv-wf-card {
    border: 1.5px solid var(--border-default); border-radius: 12px; padding: 16px; cursor: pointer; background: var(--surface-primary);
}
.cv-wf-card.is-sel { border-color: var(--cv-mint); box-shadow: 0 0 0 3px rgba(46, 212, 165, .12); }
.cv-wf-name { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.cv-wf-desc { font-size: 12px; color: var(--cv-slate-text); margin-bottom: 12px; }
.cv-wf-stats { display: flex; gap: 14px; font-size: 11.5px; color: var(--cv-muted); }
.cv-wf-stat b { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; }
.cv-draftpill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--cv-slate-soft); color: var(--cv-slate-text); }

/* review + activate */
.cv-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cv-activate {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; margin-top: 16px;
    background: var(--cv-mint-soft); border: 1px solid rgba(46, 212, 165, .35);
}
.cv-activate-icon { color: var(--cv-mint-strong); flex-shrink: 0; }

/* accounts editor rows */
.cv-acct-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border-default); border-radius: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cv-acct-name { flex: 1; min-width: 160px; }
.cv-people-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cv-inner-divider); }
.cv-addlink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cv-mint-strong); background: none; border: 0; font-family: inherit; cursor: pointer; padding: 8px 0; }

/* locked notice */
.cv-locked { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--surface-tertiary); color: var(--cv-slate-text); font-size: 12.5px; margin-bottom: 16px; }

/* connected accounts row */
.cv-acctline { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--cv-inner-divider); }
.cv-acctline:last-child { border-bottom: 0; }
.cv-acctline-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--cv-slate-soft); color: var(--cv-slate-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cv-acctline-body { flex: 1; min-width: 0; }
.cv-acctline-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cv-acctline-meta { font-size: 11.5px; color: var(--cv-muted); }

/* danger zone */
.cv-danger { border: 1px solid var(--cv-red-border); border-radius: 12px; padding: 16px 18px; }
.cv-danger-title { font-size: 13.5px; font-weight: 700; color: var(--cv-red-text); margin-bottom: 4px; }
.cv-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--cv-inner-divider); }
.cv-danger-row:last-child { border-bottom: 0; }

/* progress-by-period table (engagement detail) */
.cv-ptable { width: 100%; border-collapse: collapse; }
.cv-ptable th {
    text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cv-muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border-default);
}
.cv-ptable td { padding: 12px; border-bottom: 1px solid var(--cv-row-border); font-size: 13px; color: var(--text-primary); }
.cv-ptable td.is-num { font-family: 'JetBrains Mono', monospace; }

/* ─────────────────────────── modal ─────────────────────────── */
.cv-modal-backdrop {
    position: fixed; inset: 0; background: rgba(11, 15, 30, .45); z-index: 300; display: flex;
    align-items: center; justify-content: center; padding: 24px; animation: cv-overlay .16s ease;
}
.cv-modal { width: 100%; max-width: 460px; background: var(--surface-primary); border-radius: 16px;
    box-shadow: 0 24px 64px rgba(11, 15, 30, .3); padding: 22px; animation: cv-card .2s ease; }
.cv-modal.is-wide { max-width: 520px; }
.cv-modal-eyebrow {
    display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px;
}
.cv-modal-eyebrow.is-green { color: var(--cv-mint-strong); }
.cv-modal-eyebrow.is-amber { color: var(--cv-amber-text); }
.cv-modal-eyebrow.is-red { color: var(--cv-red-text); }
.cv-modal-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
.cv-modal-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 16px; }
.cv-modal-warn { background: var(--cv-red-soft); border: 1px solid var(--cv-red-border); border-radius: 10px; padding: 11px 13px; font-size: 12px; color: var(--cv-red-text); line-height: 1.55; margin-bottom: 14px; }
.cv-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
/* success modal (centered icon) */
.cv-modal.is-success { text-align: center; max-width: 420px; }
.cv-modal-successicon { width: 48px; height: 48px; border-radius: 14px; background: var(--cv-mint-soft); color: var(--cv-mint-strong); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }

/* ─────────────────────────── empty state ─────────────────────────── */
.cv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; }
.cv-empty-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--cv-slate-soft); color: var(--cv-muted); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cv-empty-title { font-family: 'Fraunces', serif; font-size: 18px; color: var(--text-primary); margin-bottom: 4px; }
.cv-empty-sub { font-size: 13px; color: var(--cv-muted); margin-bottom: 16px; }

.cv-loading { font-size: 13px; color: var(--cv-muted); padding: 24px 0; }

/* ─────────────────────────── animations ─────────────────────────── */
@keyframes cv-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes cv-overlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes cv-card { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ─────────────────────────── responsive ─────────────────────────── */
@media (max-width: 1100px) {
    .cv-kpicards, .cv-kpicards.is-3 { grid-template-columns: repeat(2, 1fr); }
    .cv-grid2, .cv-grid2.is-wide-left, .cv-grid3, .cv-review-grid { grid-template-columns: 1fr; }
    .cv-statstrip, .cv-statstrip.is-3 { grid-template-columns: repeat(2, 1fr); }
    /* Tables are min-width:920px, so they need to scroll once the viewport
       nears that. This clips the row (⋮) menu, which is why the menu drops
       upward on the last rows — see .cv-menu.is-up. */
    .cv-list { overflow-x: auto; }
}

/* ==================== workflow-template-v2.css ==================== */
/* ============================================================
   Zie Pie Books — Workflow Templates V2 (list + detail)
   Ported from design_handoff workflow-template/ onto app tokens.
   Scoped under the `wft-` prefix. Theme-aware (light + dark) via
   tokens.css; the handoff itself was light-only.
   Fonts (already loaded in App.razor): Fraunces / Work Sans / JetBrains Mono.
   ============================================================ */

/* ---------- Shared: page header ---------- */
.wft-breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-tertiary); padding: 2px 0 0; }
.wft-breadcrumb a { color: var(--brand-primary-strong); font-weight: 600; text-decoration: none; }
.wft-breadcrumb a:hover { text-decoration: underline; }
.wft-breadcrumb .wft-breadcrumb__sep { color: var(--text-tertiary); }
.wft-breadcrumb .wft-breadcrumb__current { color: var(--text-secondary); }

.wft-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-tertiary); font-weight: 600;
    margin-bottom: 4px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.wft-eyebrow__meta { text-transform: none; letter-spacing: 0; color: var(--text-tertiary); font-weight: 500; white-space: nowrap; }

.wft-page-head { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0 16px; }
.wft-page-head__icon {
    width: 54px; height: 54px; flex-shrink: 0; border-radius: var(--radius-lg);
    background: var(--brand-accent-soft); color: #6D28D9;
    display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .wft-page-head__icon { color: #C4B5FD; }
.wft-page-head__body { flex: 1; min-width: 0; }
.wft-page-title {
    font-family: 'Fraunces', serif; font-weight: 500; font-size: 25px;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--text-primary);
}
.wft-page-head__actions { display: flex; gap: 9px; flex-shrink: 0; flex-wrap: wrap; }

.wft-default-badge {
    display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-sm);
    font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    background: var(--brand-primary-soft); color: var(--brand-primary-strong);
}

/* ---------- Shared: buttons ---------- */
.wft-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 14px; border-radius: var(--radius-md);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.wft-btn--ghost { background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--border-default); }
.wft-btn--ghost:hover { background: var(--surface-secondary); border-color: var(--border-strong); text-decoration: none; }
.wft-btn--primary { background: var(--brand-primary); color: var(--brand-dark); border: 0; }
.wft-btn--primary:hover { background: var(--brand-primary-strong); text-decoration: none; }

/* ---------- Shared: tabs ---------- */
.wft-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-default); margin-bottom: 18px; }
.wft-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 4px; margin-right: 18px; margin-bottom: -1px;
    background: none; border: 0; border-bottom: 2px solid transparent;
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--text-tertiary); cursor: pointer;
}
.wft-tab:hover { color: var(--text-primary); }
.wft-tab.is-active { color: var(--text-primary); border-bottom-color: var(--brand-primary-strong); }
.wft-tab__count {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; background: var(--surface-tertiary); color: var(--text-tertiary);
}
.wft-tab.is-active .wft-tab__count { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }

/* ---------- Shared: KPI strip ---------- */
.wft-kpis {
    display: flex; background: var(--surface-primary); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px;
}
.wft-kpi {
    position: relative; flex: 1; min-width: 124px;
    padding: 12px 16px 12px 18px;
    display: flex; flex-direction: column; gap: 4px;
    border-right: 1px solid var(--border-default);
}
.wft-kpi:last-child { border-right: 0; }
.wft-kpi__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.wft-kpi__label {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-tertiary); font-weight: 600;
}
.wft-kpi__value {
    font-family: 'Fraunces', serif; font-size: 25px; font-weight: 500;
    line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.wft-kpi__meta { font-size: 11px; color: var(--text-tertiary); line-height: 1.3; }

/* Accent-bar color helpers (handoff used inline colors; use tokens instead) */
.wft-accent-dark   { background: var(--brand-dark); }
.wft-accent-mint   { background: var(--brand-primary); }
.wft-accent-mint-ink { background: var(--brand-primary-strong); }
.wft-accent-amber  { background: var(--status-warning); }
.wft-accent-violet { background: var(--brand-accent); }
.wft-accent-blue   { background: var(--status-info); }
.wft-accent-slate  { background: var(--text-tertiary); }
[data-theme="dark"] .wft-accent-dark { background: var(--border-strong); }

/* ---------- Shared: pills ---------- */
.wft-pill {
    display: inline-flex; align-items: center; padding: 3px 10px;
    border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.wft-pill--recurring { background: var(--status-info-soft); color: var(--status-info); }
.wft-pill--fresh { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.wft-pill--iter  { background: var(--status-warning-soft); color: #B45309; }
.wft-pill--final { background: var(--brand-accent-soft); color: #6D28D9; }
.wft-pill--seq   { background: var(--surface-tertiary); color: var(--text-tertiary); }
[data-theme="dark"] .wft-pill--iter  { color: var(--status-warning); }
[data-theme="dark"] .wft-pill--final { color: #C4B5FD; }

/* Participant on/off chips */
.wft-part {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-sm);
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.wft-part.is-on  { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.wft-part.is-off { background: var(--surface-tertiary); color: var(--text-tertiary); text-decoration: line-through; opacity: .6; }

/* Source/data chips */
.wft-chip { background: var(--surface-tertiary); color: var(--text-secondary); font-weight: 500; border-radius: var(--radius-sm); padding: 3px 9px; font-size: 11px; display: inline-flex; align-items: center; }

/* ============================================================
   DETAIL VIEW
   ============================================================ */
.wft-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.wft-col { display: flex; flex-direction: column; gap: 16px; }

.wft-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px 18px; }
.wft-card--flush { padding: 0; overflow: hidden; }
.wft-card__title { font-size: 14px; font-weight: 600; margin: 0 0 14px; color: var(--text-primary); }
.wft-card__head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.wft-card__head .wft-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); }
.wft-card--flush .wft-card__head { padding: 14px 18px; border-bottom: 1px solid var(--border-default); margin-bottom: 0; }

/* Basics field grid */
.wft-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.wft-field__label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 5px; }
.wft-field__chips { display: flex; gap: 5px; flex-wrap: wrap; }

/* Used-by list */
.wft-used { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.wft-used__row { display: flex; align-items: center; gap: 11px; cursor: pointer; text-decoration: none; color: inherit; }
.wft-used__row:hover { text-decoration: none; }
.wft-used__row:hover .wft-used__name { color: var(--brand-primary-strong); }
.wft-used__icon {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.wft-used__name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wft-used__meta { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wft-link-btn {
    margin-top: 13px; background: none; border: 0; padding: 0;
    color: var(--brand-primary-strong); font-family: inherit; font-size: 12.5px;
    font-weight: 600; cursor: pointer; text-align: left; text-decoration: none;
}
.wft-link-btn:hover { text-decoration: underline; }
.wft-empty-note { font-size: 13px; color: var(--text-tertiary); }

/* Activity */
.wft-activity__row { display: flex; gap: 11px; padding-bottom: 14px; }
.wft-activity__row:last-child { padding-bottom: 0; }
.wft-activity__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.wft-activity__dot.tone-brand { background: var(--brand-primary); }
.wft-activity__dot.tone-info { background: var(--status-info); }
.wft-activity__dot.tone-success { background: var(--status-success); }
.wft-activity__dot.tone-neutral { background: var(--text-tertiary); }
.wft-activity__action { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--text-primary); }
.wft-activity__meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* Stage flow — vertical stepper */
.wft-flow__row { display: flex; gap: 13px; }
.wft-flow__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.wft-flow__circle {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
}
.wft-flow__circle--seq   { background: var(--brand-accent-soft); color: #6D28D9; }
.wft-flow__circle--iter  { background: var(--status-warning-soft); color: #B45309; border: 2px dashed var(--status-warning); }
.wft-flow__circle--final { background: var(--brand-dark); color: #fff; }
[data-theme="dark"] .wft-flow__circle--seq  { color: #C4B5FD; }
[data-theme="dark"] .wft-flow__circle--iter { color: var(--status-warning); }
[data-theme="dark"] .wft-flow__circle--final { background: var(--surface-tertiary); color: var(--text-primary); }
.wft-flow__connector { width: 2px; flex: 1; min-height: 20px; background: var(--border-default); margin: 4px 0; }
.wft-flow__content { flex: 1; min-width: 0; padding-top: 5px; padding-bottom: 18px; }
.wft-flow__content--last { padding-bottom: 0; }
.wft-flow__name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wft-flow__name { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text-primary); }
.wft-flow__tasks { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; }
.wft-flow__kind { font-size: 9.5px; }

/* Tasks tab */
.wft-task-stage { border-bottom: 1px solid var(--border-default); }
.wft-task-stage:last-child { border-bottom: 0; }
.wft-task-stage__head {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 18px; background: var(--surface-secondary);
}
.wft-task-stage__num {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
    background: var(--brand-accent-soft); color: #6D28D9;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
}
[data-theme="dark"] .wft-task-stage__num { color: #C4B5FD; }
.wft-task-stage__name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.wft-task-stage__count { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); }
.wft-task-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 18px 9px 42px; border-top: 1px solid var(--border-default);
}
.wft-task-row__name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-primary); }
.wft-task-row__role { width: 96px; flex-shrink: 0; justify-content: center; font-size: 11px; }
.wft-task-row__trigger { width: 128px; flex-shrink: 0; font-size: 11.5px; color: var(--text-tertiary); text-align: right; }

/* Task role pills */
.wft-role { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.wft-role--client { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.wft-role--system { background: var(--surface-tertiary); color: var(--text-tertiary); }
.wft-role--super  { background: var(--status-warning-soft); color: #B45309; }
.wft-role--bk     { background: var(--status-info-soft); color: var(--status-info); }
[data-theme="dark"] .wft-role--super { color: var(--status-warning); }

/* ============================================================
   LIST VIEW
   ============================================================ */
.wft-list-head { padding: 6px 0 12px; display: flex; align-items: flex-end; gap: 16px; }
.wft-list-head__body { flex: 1; min-width: 0; }
.wft-list-head .wft-eyebrow { color: var(--brand-primary-strong); }
.wft-list-head__title {
    font-family: 'Fraunces', serif; font-weight: 500; font-size: 27px;
    letter-spacing: -0.02em; line-height: 1; margin: 0 0 6px; color: var(--text-primary);
}
.wft-list-head__sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; max-width: 640px; }

.wft-scope-tabs { margin-bottom: 14px; }

/* Toolbar */
.wft-toolbar { padding: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wft-search {
    display: flex; align-items: center; gap: 8px; width: 250px;
    background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 6px 11px;
}
.wft-search svg { color: var(--text-tertiary); flex-shrink: 0; }
.wft-search input { border: 0; background: transparent; font-family: inherit; font-size: 12.5px; color: var(--text-primary); outline: 0; width: 100%; }
.wft-search input::placeholder { color: var(--text-tertiary); }
.wft-chip-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px;
    border-radius: var(--radius-sm); font-family: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; background: var(--surface-primary); color: var(--text-secondary); border: 1px solid var(--border-default);
}
.wft-chip-btn:hover { border-color: var(--border-strong); }
.wft-chip-btn.is-active { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
[data-theme="dark"] .wft-chip-btn.is-active { background: var(--surface-tertiary); color: var(--text-primary); border-color: var(--border-strong); }
.wft-chip-btn__count {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: var(--radius-sm); background: var(--surface-tertiary); color: var(--text-tertiary);
}
.wft-chip-btn.is-active .wft-chip-btn__count { background: rgba(255,255,255,.16); color: #fff; }
[data-theme="dark"] .wft-chip-btn.is-active .wft-chip-btn__count { background: rgba(255,255,255,.1); }
.wft-toolbar__count { margin-left: auto; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }

/* Info banner */
.wft-info-banner {
    display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; margin-bottom: 12px;
    background: var(--status-info-soft); border: 1px solid var(--status-info-soft); border-radius: 11px;
}
.wft-info-banner svg { flex-shrink: 0; margin-top: 1px; color: var(--status-info); }
.wft-info-banner p { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

/* Table */
.wft-table-scroll { overflow-x: auto; padding-bottom: 14px; }
.wft-table { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); min-width: 940px; }
.wft-table__head, .wft-row {
    display: grid;
    grid-template-columns: minmax(240px,2.4fr) 108px minmax(180px,1.5fr) minmax(180px,1.5fr) 128px 44px;
    gap: 12px; align-items: center;
}
.wft-table__head {
    padding: 9px 14px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.wft-table__head span {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-tertiary); font-weight: 700;
}
.wft-row { padding: 12px 14px; border-bottom: 1px solid var(--border-default); }
.wft-row:last-child { border-bottom: 0; }
.wft-row:hover { background: var(--surface-secondary); }
.wft-row__main { display: flex; align-items: center; gap: 11px; min-width: 0; cursor: pointer; text-decoration: none; color: inherit; }
.wft-row__main:hover { text-decoration: none; }
.wft-row__icon {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-md);
    background: var(--brand-accent-soft); color: #6D28D9;
    display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .wft-row__icon { color: #C4B5FD; }
.wft-row__name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wft-row__name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wft-row__sub { font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.wft-row__cell { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wft-row__usage { font-size: 12.5px; color: var(--text-secondary); }
.wft-row__usage.is-idle { color: var(--text-tertiary); }

/* Row badges + tags + mini-chips */
.wft-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.wft-badge--default { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.wft-badge--draft   { background: var(--status-warning-soft); color: #B45309; }
.wft-badge--system  { background: var(--status-info-soft); color: var(--status-info); }
[data-theme="dark"] .wft-badge--draft { color: var(--status-warning); }
.wft-type-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.wft-type-tag--monthly { background: var(--status-info-soft); color: var(--status-info); }
.wft-type-tag--catchup { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.wft-type-tag--other { background: var(--surface-tertiary); color: var(--text-tertiary); }
.wft-mini-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; background: var(--surface-tertiary); color: var(--text-secondary); white-space: nowrap; }
.wft-mini-chip--setup { background: var(--surface-tertiary); color: var(--text-tertiary); }

/* Row action menu */
.wft-row__actions { position: relative; display: flex; align-items: center; justify-content: center; }
.wft-icon-btn {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-sm);
}
.wft-icon-btn:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.wft-menu {
    position: absolute; top: calc(100% + 4px); right: 0; width: 210px; z-index: 90;
    background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 10px;
    box-shadow: var(--shadow-elevated); padding: 5px;
}
.wft-menu__item {
    display: flex; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
    border: 0; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 500;
    cursor: pointer; color: var(--text-primary); text-decoration: none;
}
.wft-menu__item:hover { background: var(--surface-secondary); text-decoration: none; }
.wft-menu__item--danger { color: var(--status-danger); }
.wft-menu__item--danger:hover { background: var(--status-danger-soft); }
.wft-menu__divider { height: 1px; background: var(--border-default); margin: 4px 2px; }

/* Empty state */
.wft-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; }
.wft-empty__title { font-family: 'Fraunces', serif; font-size: 18px; margin-bottom: 4px; color: var(--text-primary); }
.wft-empty__sub { font-size: 13px; color: var(--text-tertiary); margin-bottom: 16px; }

/* Toast */
.wft-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 400;
    background: var(--brand-dark); color: #fff; padding: 11px 16px; border-radius: 10px;
    box-shadow: var(--shadow-elevated); font-size: 13px;
}
[data-theme="dark"] .wft-toast { background: var(--surface-tertiary); color: var(--text-primary); border: 1px solid var(--border-strong); }

@media (max-width: 980px) {
    .wft-grid { grid-template-columns: 1fr; }
    .wft-fields, .wft-used { grid-template-columns: 1fr; }
}

/* ==================== add-engagement-v2.css ==================== */
/* ============================================================
   Zie Pie Books — Add Engagement wizard (V2)
   Ported from design_handoff add-engagement/styles.css.
   ALL classes prefixed `ae-` to avoid colliding with the
   global portal.css primitives (.card/.input/.seg/.btn/…).
   Shell (sidebar/topbar) is owned by PortalLayout — this file
   styles only the content region inside .portal-main, and the
   wizard fills that region as a flex column with a sticky footer.
   ============================================================ */

.ae-wizard {
  /* tokens (design_handoff) — light values; dark overrides below */
  --ae-bg-app: #F7F8FA;
  --ae-bg-surface: #FFFFFF;
  --ae-bg-sidebar: #0B0F1E;
  --ae-bg-subtle: #FAFBFC;
  --ae-bg-muted: #F1F3F6;

  --ae-text: #0B0F1E;
  --ae-text-muted: #475569;
  --ae-text-faint: #94A3B8;

  --ae-border: #E2E8F0;
  --ae-border-soft: #EEF1F5;
  --ae-border-faint: #F1F3F6;

  --ae-brand: #2ED4A5;
  --ae-brand-ink: #14B88A;
  --ae-brand-deep: #0F8F6C;
  --ae-brand-tint: #E5FAF2;
  --ae-brand-tint-line: #CFEDE3;

  --ae-violet: #7C3AED;
  --ae-violet-soft: #EDE9FE;
  --ae-blue: #2563EB;
  --ae-blue-soft: #EEF5FF;
  --ae-amber: #B45309;
  --ae-amber-line: #FED7AA;
  --ae-amber-soft: #FFF7ED;
  --ae-amber-bg: #FEF9EC;
  --ae-danger: #EF4444;
  --ae-danger-ink: #B42318;
  --ae-danger-soft: #FEECEC;
  --ae-danger-row: #FEF6F6;
  --ae-req: #DC2626;

  --ae-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ae-r-sm: 7px;
  --ae-r-md: 9px;
  --ae-r-lg: 10px;
  /* 14px cards to match .cv-formcard on the Add Customer / Business screens so the
     wizard reads as the same product (was 16px). */
  --ae-r-xl: 14px;

  /* Shared content-column width for the step body AND the footer action row, so
     content and buttons align on one left origin across every step. */
  --ae-content-col: 760px;

  /* Fill the portal-main region and lay out header / scrolling body / footer. */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--ae-bg-app);
  color: var(--ae-text);
}

.ae-wizard *, .ae-wizard *::before, .ae-wizard *::after { box-sizing: border-box; }
.ae-wizard [hidden] { display: none !important; }

/* ============================================================
   Header + step rail
   ============================================================ */
/* Header, step panel and footer all share one centered track (--ae-shell-col)
   so the wizard reads as a centered document instead of a narrow column pinned
   to the far-left of a wide viewport. The inner content columns still cap at
   --ae-content-col within that track. */
.ae-wizard { --ae-shell-col: 1000px; }
.ae-header { flex-shrink: 0; padding: 14px 26px 0; width: 100%; max-width: var(--ae-shell-col); margin-inline: auto; }
.ae-breadcrumb {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ae-text-faint); margin-bottom: 6px;
}
.ae-breadcrumb a { color: var(--ae-brand-ink); text-decoration: none; font-weight: 600; }
.ae-breadcrumb .ae-cur { color: var(--ae-text-muted); }
.ae-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
/* Mono eyebrow matches .cv-eyebrow on the Add Customer / Business screens. */
.ae-eyebrow {
  font-family: var(--ae-font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ae-brand-ink); font-weight: 600; margin-bottom: 5px;
}
/* Fraunces title matches .cv-title on the Add Customer / Business screens (was
   Work Sans 700) so the three add-flows share one heading voice. */
.ae-title { margin: 0; font-family: 'Fraunces', serif; font-size: 27px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.ae-sub { margin: 6px 0 0; font-size: 13px; color: #64748B; }
.ae-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #EEF1F5; color: #64748B;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.ae-status-pill .ae-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ae-text-faint); }

.ae-rail { display: flex; align-items: center; gap: 0; margin-top: 14px; }
.ae-rail-step { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; }
.ae-rail-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  background: #EEF1F5; color: var(--ae-text-faint);
}
.ae-rail-step.is-done .ae-rail-num { background: var(--ae-brand-tint); color: var(--ae-brand-ink); border: 1px solid var(--ae-brand-tint-line); }
.ae-rail-step.is-current .ae-rail-num { background: var(--ae-bg-sidebar); color: #fff; }
.ae-rail-label { font-size: 12.5px; font-weight: 500; color: var(--ae-text-faint); white-space: nowrap; }
.ae-rail-step.is-done .ae-rail-label { color: var(--ae-text-muted); }
.ae-rail-step.is-current .ae-rail-label { font-weight: 600; color: var(--ae-text); }
.ae-rail-connector { flex: 1; min-width: 6px; height: 1.5px; background: var(--ae-border); margin: 0 5px; }

/* ============================================================
   Step panel (scroll host) + steps
   ============================================================ */
.ae-panel {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 26px 24px; display: flex; flex-direction: column;
  align-items: center;
}
/* Center the panel's content column to the shell track. The step still caps at
   --ae-content-col but sits centered within the wider centered shell. */
.ae-panel > .ae-step { margin-inline: auto; }
/* Every step shares one left-aligned content column so the layout doesn't jump
   between centered (steps 1–2) and left-aligned (steps 3–6) as you advance, and
   so the sticky footer's buttons line up with the content's right edge.
   --ae-content-col is the widest step content (the 760px review grid); narrower
   steps just cap tighter within the same left origin. */
.ae-step { width: 100%; max-width: var(--ae-content-col); }
.ae-step--narrow { max-width: 560px; }
.ae-step--mid { max-width: 680px; display: flex; flex-direction: column; gap: 16px; }

/* ---- Card ---- */
.ae-card {
  background: var(--ae-bg-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-r-xl);
  padding: 24px 26px;
}
.ae-card--tight { padding: 20px 22px; }
.ae-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.ae-card-title { font-size: 14px; font-weight: 600; }
.ae-card-title .ae-muted { font-weight: 400; font-size: 11.5px; color: var(--ae-text-faint); }

/* ---- Form primitives ---- */
.ae-label {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--ae-text-muted); margin-bottom: 6px;
}
.ae-req { color: var(--ae-req); }
.ae-input {
  width: 100%; height: 42px; padding: 0 13px;
  border: 1px solid var(--ae-border); border-radius: var(--ae-r-lg);
  font-size: 13px; outline: none; color: var(--ae-text); background: var(--ae-bg-surface);
  font-family: inherit;
}
.ae-input:focus { border-color: var(--ae-brand-ink); box-shadow: 0 0 0 3px rgba(20,184,138,.12); }
/* Read-only affordance (e.g. Monthly "Ongoing — no end date"): looks like a field
   but is muted + non-interactive so it doesn't invite input. */
.ae-input--readonly {
  display: flex; align-items: center; background: var(--ae-bg-muted);
  color: var(--ae-text-faint); cursor: default; border-style: dashed;
}
.ae-field { margin-bottom: 20px; }
.ae-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* segmented control */
.ae-seg-group { display: flex; gap: 8px; }
.ae-seg {
  height: 30px; padding: 0 11px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--ae-border); background: #fff; color: #64748B;
  font-family: inherit;
}
.ae-seg.is-active { border-color: var(--ae-brand-ink); background: var(--ae-brand-tint); color: var(--ae-brand-deep); }

/* toggle chip (data sources) — SINGLE-select: an account provides data via
   exactly one of PDF / Plaid / CSV, so the chips behave like radios. Active
   state keeps a SOLID mint fill to stay distinct from the .ae-seg buttons next
   to it (segments use a light outline-tint). Inactive chips are dashed to read
   as "not yet chosen", so an account with a type but no feed looks incomplete. */
.ae-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 7px; border-radius: 7px; font-size: 11px; font-weight: 600;
  cursor: pointer; border: 1px dashed var(--ae-border); background: #fff; color: var(--ae-text-faint);
  transition: background .12s, border-color .12s, color .12s;
}
.ae-chip::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid #CBD5E1; background: #fff;
  transition: background .12s, border-color .12s;
}
.ae-chip:hover { border-color: #CBD5E1; }
.ae-chip.is-active {
  border-style: solid; border-color: var(--ae-brand-ink);
  background: var(--ae-brand-ink); color: #0B0F1E;
}
.ae-chip.is-active::before {
  border-color: #0B0F1E; background-color: #0B0F1E;
  /* white dot on the filled radio */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.4' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

.ae-icon-btn {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ae-text-faint);
  cursor: pointer; border-radius: 7px;
}
.ae-icon-btn:hover { background: #EEF1F5; color: var(--ae-text); }
.ae-icon-btn--faint { color: #CBD5E1; }

.ae-link-btn {
  background: transparent; border: 0; color: var(--ae-brand-ink);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit;
}

/* ---- Business select (step 1) ---- */
.ae-biz-selected {
  display: flex; align-items: center; gap: 11px;
  background: #F7FBFA; border: 1px solid var(--ae-brand-tint-line);
  border-radius: var(--ae-r-lg); padding: 10px 12px; margin-bottom: 20px;
}
.ae-biz-avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  background: var(--ae-brand-tint); color: var(--ae-brand-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.ae-biz-name { font-size: 13.5px; font-weight: 600; }
.ae-biz-meta { font-size: 11.5px; color: var(--ae-text-faint); }
.ae-biz-search-wrap { position: relative; margin-bottom: 20px; }
.ae-biz-search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--ae-border);
  border-radius: var(--ae-r-lg); padding: 10px 12px;
}
.ae-biz-search input { border: 0; background: transparent; outline: none; flex: 1; font-size: 13px; color: var(--ae-text); font-family: inherit; }

/* dropdown menu (shared: business + member) */
.ae-dropdown {
  position: absolute; left: 0; right: 0;
  background: #fff; border: 1px solid var(--ae-border);
  border-radius: var(--ae-r-lg); box-shadow: 0 12px 32px rgba(11,15,30,.16);
  padding: 5px; z-index: 60; max-height: 220px; overflow-y: auto;
}
.ae-dropdown--down { top: calc(100% + 5px); }
.ae-dropdown--up { bottom: calc(100% + 5px); }
.ae-dropdown-backdrop { position: fixed; inset: 0; z-index: 50; }
.ae-dropdown-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 12.5px;
}
.ae-dropdown-opt:hover { background: var(--ae-bg-app); }
.ae-dropdown-opt.is-selected { color: var(--ae-brand-deep); font-weight: 600; background: #F0FBF6; }
.ae-dropdown-opt-avatar {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px;
  background: #EEF1F5; color: var(--ae-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
}
.ae-dropdown-opt-name { font-size: 12.5px; font-weight: 600; }
.ae-dropdown-opt-meta { font-size: 11px; color: var(--ae-text-faint); }
.ae-dropdown-empty { padding: 10px; font-size: 12.5px; color: var(--ae-text-faint); }

/* ---- Accounts (step 2) ---- */
.ae-acct-colhead {
  display: flex; align-items: flex-end; gap: 12px; padding: 2px 0 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ae-text-faint);
}
.ae-acct-colhead .ae-grow { flex: 1; min-width: 0; text-align: left; }
.ae-acct-colhead .ae-c-type { width: 120px; flex-shrink: 0; text-align: center; }
.ae-acct-colhead .ae-c-sep { width: 1px; flex-shrink: 0; }
.ae-acct-colhead .ae-c-src { width: 176px; flex-shrink: 0; text-align: center; }
.ae-acct-colhead .ae-c-x { width: 28px; flex-shrink: 0; }
.ae-acct-item { border-top: 1px solid var(--ae-border-faint); }
.ae-acct-item.is-incomplete { border-left: 2px solid var(--ae-amber, #F59E0B); padding-left: 10px; margin-left: -12px; }
.ae-acct-hint { font-size: 11px; color: #B45309; padding: 0 0 10px 1px; margin-top: -2px; }
.ae-acct-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
}
.ae-acct-name {
  flex: 1; min-width: 0; height: 36px; padding: 0 11px;
  border: 1px solid var(--ae-border); border-radius: var(--ae-r-md);
  font-size: 12.5px; outline: none; font-family: inherit; color: var(--ae-text); background: #fff;
}
.ae-acct-name:focus { border-color: var(--ae-brand-ink); box-shadow: 0 0 0 3px rgba(20,184,138,.12); }
.ae-acct-type { display: flex; justify-content: center; gap: 5px; width: 120px; flex-shrink: 0; }
.ae-acct-vsep { width: 1px; height: 26px; flex-shrink: 0; background: var(--ae-border); }
.ae-acct-src { display: flex; justify-content: center; gap: 8px; width: 176px; flex-shrink: 0; }

/* ---- People (step 2) ---- */
.ae-people-check {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-size: 12.5px; cursor: pointer; color: var(--ae-text-muted);
}
.ae-checkbox {
  width: 17px; height: 17px; flex-shrink: 0; border-radius: 5px;
  border: 1px solid #CBD5E1; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ae-people-check.is-on .ae-checkbox { border-color: var(--ae-brand-ink); background: var(--ae-brand-ink); }
.ae-people-list { display: flex; flex-direction: column; gap: 9px; }
.ae-person-row { display: flex; align-items: center; gap: 9px; }
.ae-member-select { position: relative; flex: 1; min-width: 0; }
.ae-member-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; height: 30px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--ae-border); background: #fff;
  font-size: 12px; font-weight: 500; color: var(--ae-text); cursor: pointer; font-family: inherit;
}
.ae-member-trigger.is-open { border-color: var(--ae-brand-ink); }
.ae-member-trigger.is-empty { color: var(--ae-text-faint); }
.ae-member-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-person-roles { display: flex; gap: 5px; flex-shrink: 0; }

/* ---- Workflow templates (step 3) ---- */
.ae-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 720px; }
.ae-tpl-card {
  background: #fff; border: 1.5px solid var(--ae-border);
  border-radius: var(--ae-r-lg); padding: 15px 16px; cursor: pointer;
}
.ae-tpl-card.is-selected { border-color: var(--ae-brand-ink); box-shadow: 0 0 0 3px rgba(20,184,138,.1); }
.ae-tpl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ae-tpl-name { font-size: 13.5px; font-weight: 600; }
.ae-tpl-badge {
  padding: 2px 8px; border-radius: 999px;
  background: var(--ae-brand-tint); color: var(--ae-brand-ink);
  font-size: 10.5px; font-weight: 600;
}
.ae-tpl-desc { font-size: 11.5px; color: var(--ae-text-faint); margin-bottom: 12px; }
.ae-tpl-meta { display: flex; gap: 16px; font-size: 12px; color: var(--ae-text-muted); }
.ae-tpl-meta strong { color: var(--ae-text); }

/* ---- Tasks (step 4) ---- */
.ae-task-stage {
  border: 1px solid var(--ae-border); border-radius: 12px;
  margin-bottom: 12px; overflow: hidden;
}
.ae-task-head {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; background: var(--ae-bg-subtle);
  border-bottom: 1px solid var(--ae-border-soft);
}
.ae-task-num {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--ae-violet-soft); color: var(--ae-violet);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ae-task-stage-name { flex: 1; font-size: 13px; font-weight: 600; }
.ae-task-count { font-size: 11.5px; color: var(--ae-text-faint); }
.ae-task-assignall { display: flex; align-items: center; gap: 8px; }
.ae-task-assignall-label { font-size: 11.5px; color: var(--ae-text-faint); }
.ae-task-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--ae-border-faint);
}
.ae-task-row:last-child { border-bottom: 0; }
.ae-task-row.is-unassigned { background: var(--ae-danger-row); }
.ae-task-row-name { flex: 1; min-width: 0; font-size: 12.5px; }
.ae-task-row-role { width: 90px; flex-shrink: 0; font-size: 11.5px; color: var(--ae-text-muted); }
.ae-task-row-assignee { width: 150px; flex-shrink: 0; font-size: 12px; font-weight: 500; }
.ae-task-row-assignee.is-unassigned { color: var(--ae-danger); font-weight: 600; }
.ae-task-row-override { width: 200px; flex-shrink: 0; }

/* small select that fits inside a task row / assign-all — themed like a member-trigger */
.ae-select {
  height: 30px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--ae-border); background: #fff; color: var(--ae-text);
  font-size: 12px; font-family: inherit; cursor: pointer; width: 100%;
}
.ae-select:focus { outline: none; border-color: var(--ae-brand-ink); box-shadow: 0 0 0 3px rgba(20,184,138,.12); }
.ae-select--stage { min-width: 190px; width: auto; }

/* ---- License (step 5) ---- */
.ae-license-card { background: #fff; border: 1px solid var(--ae-border); border-radius: var(--ae-r-lg); padding: 18px 20px; max-width: 640px; }
.ae-license-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ae-license-head-title { font-size: 13px; font-weight: 600; }
.ae-license-head-usage { font-size: 12.5px; color: #64748B; }
.ae-license-head-usage strong { color: #0B0F1E; }
.ae-progress { height: 8px; border-radius: 999px; background: #EEF1F5; overflow: hidden; margin-bottom: 14px; }
.ae-progress-fill { height: 100%; background: var(--ae-brand-ink); border-radius: 999px; }
.ae-license-active {
  display: flex; align-items: center; gap: 11px;
  background: #F0FBF6; border: 1px solid var(--ae-brand-tint-line);
  border-radius: 12px; padding: 13px 15px;
}
.ae-license-active-title { font-size: 13px; font-weight: 600; }
.ae-license-active-sub { font-size: 12px; color: #5B7A6B; margin-top: 2px; }

/* ---- Review (step 6) ---- */
.ae-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; }
.ae-review-card { background: #fff; border: 1px solid var(--ae-border); border-radius: 12px; padding: 14px 16px; }
.ae-review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ae-review-title { font-size: 12.5px; font-weight: 600; }
.ae-review-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12px; }
.ae-review-row .ae-k { color: var(--ae-text-faint); }
.ae-review-row .ae-v { color: var(--ae-text); font-weight: 500; text-align: right; }

/* ---- Banners ---- */
.ae-banner { display: flex; gap: 9px; align-items: flex-start; border-radius: var(--ae-r-md); }
.ae-banner svg { flex-shrink: 0; margin-top: 1px; }
.ae-banner-text { line-height: 1.45; }
.ae-banner--warn { margin-top: 14px; padding: 11px 14px; background: var(--ae-amber-bg); border-left: 3px solid #F59E0B; }
.ae-banner--warn .ae-banner-text { font-size: 12px; color: #7C5A16; }
.ae-banner--info { padding: 11px 13px; background: var(--ae-blue-soft); border-left: 3px solid var(--ae-blue); }
.ae-banner--info .ae-banner-text { font-size: 12.5px; color: #334155; }
.ae-banner--danger {
  align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 9px 13px; background: var(--ae-danger-soft);
  border-left: 3px solid var(--ae-danger); font-size: 12.5px; color: var(--ae-danger-ink);
}
.ae-banner--success {
  gap: 11px; margin-top: 14px; padding: 13px 15px;
  background: #F0FBF6; border: 1px solid var(--ae-brand-tint-line); border-radius: 12px;
}
.ae-banner-badge {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  background: var(--ae-brand-tint); color: var(--ae-brand-ink);
  display: flex; align-items: center; justify-content: center;
}
.ae-banner--success .ae-banner-title { font-size: 13px; font-weight: 600; }
.ae-banner--success .ae-banner-desc { font-size: 12px; color: #5B7A6B; line-height: 1.45; margin-top: 2px; }

/* step-3/4/5 section headings */
.ae-heading { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.ae-heading-sub { margin: 0 0 14px; font-size: 12.5px; color: #64748B; }

/* ============================================================
   Footer
   ============================================================ */
.ae-footer {
  flex-shrink: 0; border-top: 1px solid #E9EDF2; background: #fff;
  padding: 11px 26px; display: flex; align-items: center; gap: 12px;
}
/* Full-width bar (border spans the page), but its action row is centered to the
   same shell track as the header + step body, so Back/Next sit under the content
   column's right edge on both sides of a wide viewport. Side padding = the gutter
   left of the centered shell. */
.ae-footer { padding-inline: max(26px, calc((100% - var(--ae-shell-col, 1000px)) / 2 + 0px)); }
.ae-footer-step { font-size: 12.5px; color: #64748B; }
.ae-footer-step strong { color: var(--ae-text); }
.ae-footer-spacer { flex: 1; }
.ae-footer-hint {
  display: flex; align-items: center; gap: 6px; margin-left: 14px;
  padding: 5px 11px; background: var(--ae-amber-soft);
  border: 1px solid var(--ae-amber-line); border-radius: 8px;
  font-size: 11.5px; color: var(--ae-amber); font-weight: 500;
}

.ae-btn {
  height: 38px; padding: 0 15px; border-radius: var(--ae-r-md);
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; border: 0; font-family: inherit;
}
.ae-btn--sec { background: #fff; color: var(--ae-text-muted); border: 1px solid var(--ae-border); }
.ae-btn--sec:hover { background: var(--ae-bg-app); border-color: #CBD5E1; }
.ae-btn--ghost { background: transparent; color: var(--ae-text-faint); }
.ae-btn--ghost:hover { background: #EEF1F5; color: var(--ae-text); }
.ae-btn--dark { padding: 0 18px; background: var(--ae-bg-sidebar); color: #fff; }
.ae-btn--dark:hover { background: #1E293B; }
.ae-btn--dark:disabled { background: var(--ae-border); color: var(--ae-text-faint); cursor: not-allowed; }
/* Primary "Create & activate" matches .cv-btn.is-primary: mint fill, dark-navy
   ink (was brand-ink green on white). Same accent the two add-forms use. */
.ae-btn--primary { padding: 0 18px; background: var(--ae-brand); color: #0B0F1E; }
.ae-btn--primary:hover { background: var(--ae-brand-ink); }
.ae-btn--primary:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Toast ---- */
.ae-toast {
  /* Sit clear of the footer bar (and any OS/browser chrome at the viewport edge) so the
     message is never clipped, and stay above the wizard's own stacking with a high z-index. */
  position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); text-align: center;
  background: var(--ae-bg-sidebar); color: #fff;
  padding: 11px 18px; border-radius: var(--ae-r-lg);
  font-size: 13px; font-weight: 500;
  box-shadow: 0 12px 32px rgba(11,15,30,.3); z-index: 4000;
}

/* ============================================================
   Dark theme — the portal toggles [data-theme="dark"] on :root.
   Map the ae- surfaces onto the dark palette so the wizard
   matches the rest of the portal in dark mode.
   ============================================================ */
:root[data-theme="dark"] .ae-wizard {
  --ae-bg-app: #0B0F1E;
  --ae-bg-surface: #131829;
  --ae-bg-subtle: #0F1424;
  --ae-bg-muted: #1B2233;
  --ae-text: #E2E8F0;
  --ae-text-muted: #94A3B8;
  --ae-text-faint: #64748B;
  --ae-border: #263149;
  --ae-border-soft: #1E2740;
  --ae-border-faint: #1A2236;
  --ae-brand-tint: rgba(46,212,165,.14);
  --ae-brand-tint-line: rgba(46,212,165,.30);
  --ae-brand-deep: #4FE0BB;
  --ae-violet-soft: rgba(124,58,237,.20);
  --ae-blue-soft: rgba(37,99,235,.16);
  --ae-amber-bg: rgba(245,158,11,.12);
  --ae-amber-soft: rgba(245,158,11,.14);
  --ae-danger-soft: rgba(239,68,68,.16);
  --ae-danger-row: rgba(239,68,68,.08);
}
:root[data-theme="dark"] .ae-input,
:root[data-theme="dark"] .ae-acct-name,
:root[data-theme="dark"] .ae-seg:not(.is-active),
:root[data-theme="dark"] .ae-chip:not(.is-active),
:root[data-theme="dark"] .ae-member-trigger,
:root[data-theme="dark"] .ae-select,
:root[data-theme="dark"] .ae-dropdown,
:root[data-theme="dark"] .ae-tpl-card,
:root[data-theme="dark"] .ae-card,
:root[data-theme="dark"] .ae-license-card,
:root[data-theme="dark"] .ae-review-card,
:root[data-theme="dark"] .ae-footer,
:root[data-theme="dark"] .ae-checkbox { background: var(--ae-bg-surface); }
:root[data-theme="dark"] .ae-biz-selected { background: var(--ae-bg-subtle); }
/* Keep the active feed chip's solid-mint fill in dark mode (the base dark rule
   above only repaints INACTIVE chips/segments now). Dark mint fill uses light
   ink so the label + dot stay legible. background-color (not the shorthand)
   so the white radio-dot image from the base rule survives. */
:root[data-theme="dark"] .ae-chip.is-active {
  background: var(--ae-brand); border-color: var(--ae-brand); color: #0B0F1E;
}
:root[data-theme="dark"] .ae-chip.is-active::before { background-color: #0B0F1E; border-color: #0B0F1E; }
:root[data-theme="dark"] .ae-seg.is-active {
  background: var(--ae-brand-tint); border-color: var(--ae-brand-tint-line); color: var(--ae-brand-deep);
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .ae-grid-2, .ae-tpl-grid, .ae-review-grid { grid-template-columns: 1fr; }
  .ae-rail-label { display: none; }
}

/* ==================== app.css ==================== */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==================== consolidation.css ==================== */
/* CONSOLIDATION LAYER — appended during the design-system reconciliation.
   Locks the reconciled baseline for all 68 emitted screens WITHOUT rewriting the verbatim
   App.razor bundle above. Normalizes drift the static emit introduced (inconsistent widths,
   reinvented components, hard-coded status text). Screens should use these canonical classes
   instead of per-screen scoped variants (e.g. .segmented instead of .rptv2-segment / .pc-vtoggle). */

/* --- Token: amber text for AA contrast on -soft backgrounds (was hard-coded #B45309 / #FBBF24) --- */
:root { --status-warning-text: #B45309; }
[data-theme="dark"] { --status-warning-text: #FBBF24; }
.portal-page .pill-warning,
.client-portal-page .pill-warning { color: var(--status-warning-text); }
.portal-page .kpi.is-warning .kpi-value,
.bk-dashboard .kpi-strip .kpi.is-warn .kpi-value,
.client-portal-page .kpi.is-warning .kpi-value { color: var(--status-warning-text); }

/* --- Content width: lock the fluid main column to the canonical 1180px cap everywhere.
       (Drift: shell defined .page-wrap at 1320px while bk/reports content pages used 1180px.) --- */
.portal-page .page-wrap,
.client-portal-page .page-wrap { max-width: 1180px; }

/* --- Canonical Segmented control (screens reinvented this as .rptv2-segment / .pc-vtoggle).
       House style: mono label, active segment lifts onto surface-primary with the card shadow. --- */
.segmented { display: inline-flex; align-items: center; background: var(--surface-tertiary); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.seg-btn {
    border: none; background: transparent; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
    color: var(--text-secondary); padding: 5px 12px; border-radius: 6px; line-height: 1;
    transition: background 0.12s ease, color 0.12s ease;
}
.seg-btn:hover:not(.is-on) { color: var(--text-primary); }
.seg-btn.is-on { background: var(--surface-primary); color: var(--brand-primary-strong); box-shadow: var(--shadow-card); }
.segmented-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); padding: 0 8px 0 4px; }

/* --- Leak guards: bare/unscoped page-scoped rules (scoped-CSS artifacts emitted without their
       wrapper — e.g. tx/general-ledger .page-title at 16px nowrap+ellipsis, and auth's
       .btn{width:100%}) were overriding un-set properties on the canonical portal components.
       Re-assert the canonical values so the shell header + buttons render correctly everywhere. --- */
.portal-page .btn, .client-portal-page .btn { width: auto; }
.portal-page .page-header .page-title,
.client-portal-page .page-header .page-title {
    font-size: 28px; white-space: normal; overflow: visible; text-overflow: clip;
}

/* --- Overlay stacking: guarantee the drawer panel / modal card sit ABOVE the scrim, so the
       page behind dims but the opened surface itself stays fully opaque (never dimmed). --- */
.portal-page .drawer-root .drawer-backdrop,
.client-portal-page .drawer-root .drawer-backdrop,
.portal-page .modal-backdrop,
.client-portal-page .modal-backdrop { z-index: 0; }
.portal-page .drawer-panel,
.client-portal-page .drawer-panel,
.portal-page .modal-card,
.client-portal-page .modal-card { z-index: 1; }

/* ==================== overlays.css (consolidation) ==================== */
/* GENERIC OVERLAY HARDENING. The static emit dumped every modal/drawer/dropdown state into one
   file, many left open, and some modals sit OUTSIDE .portal-page so the scoped positioning never
   applied (rendering as full-width flow blocks). Normalize globally: closed by default; correctly
   positioned with the panel/card above a flat scrim when .is-open; works inside or outside .portal-page. */
.modal-root, .drawer-root, .cv-modal-backdrop { display: none; }
.modal-root.is-open { display: flex; position: fixed; inset: 0; z-index: 220; align-items: center; justify-content: center; padding: 20px; }
.modal-root.is-open > .modal-backdrop { position: fixed; inset: 0; background: rgba(11,15,30,.45); z-index: 0; }
.modal-root.is-open > .modal-card { position: relative; z-index: 1; width: 100%; max-width: 480px; background: var(--surface-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); overflow: hidden; max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal-root.is-open > .modal-card.is-wide { max-width: 640px; }
.drawer-root.is-open { display: block; position: fixed; inset: 0; z-index: 200; }
.drawer-root.is-open > .drawer-backdrop { position: absolute; inset: 0; background: rgba(11,15,30,.4); }
.drawer-root.is-open > .drawer-panel { position: absolute; top: 0; right: 0; height: 100vh; width: 100%; max-width: 520px; z-index: 1; background: var(--surface-primary); box-shadow: var(--shadow-drawer); display: flex; flex-direction: column; }
.cv-modal-backdrop.is-open { display: flex; }

/* Filter dropdown (.cv-drop): panel + fixed click-catch backdrop were always rendered by the
   static emit. Gate them behind .is-open (toggled by mockup.js). */
.cv-drop-panel { display: none; }
.cv-drop.is-open .cv-drop-panel { display: block; }
.cv-drop-backdrop { display: none; }
.cv-drop.is-open .cv-drop-backdrop { display: block; }

/* Sidebar section labels: a leaked bare rule pins height:18px + overflow:hidden while border-box
   padding is 12+6px, clipping the label text. Restore auto height in the expanded state; keep the
   intentional collapsed-state override. */
.portal-page .sidebar-section-label,
.client-portal-page .sidebar-section-label,
.portal-sidebar .sidebar-section-label,
.sidebar .sidebar-section-label { height: auto; overflow: visible; }
[data-sidebar="collapsed"] .portal-page .sidebar-section-label,
[data-sidebar="collapsed"] .client-portal-page .sidebar-section-label,
[data-sidebar="collapsed"] .portal-sidebar .sidebar-section-label { height: 6px; padding: 0; overflow: hidden; opacity: 0; }