/* 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; 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: var(--brand-dark); color: #FFFFFF; }
.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(255, 255, 255, 0.14); color: #FFFFFF; }
[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; }
.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; }
/* 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; }

/* ------------------------------ 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: absolute; 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; }

/* 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-mywork { grid-template-columns: 1.6fr 1.4fr 1fr 1.2fr 140px 80px; cursor: default; }
.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-mywork-phase { grid-template-columns: 1.8fr 1fr 1fr 1.8fr 130px; cursor: default; }
.mywork-progress { display: flex; flex-direction: column; gap: 4px; }
.mywork-progress-track { height: 6px; border-radius: 999px; background: var(--surface-tertiary); overflow: hidden; }
.mywork-progress-fill { height: 100%; background: var(--brand-primary); border-radius: 999px; transition: width .2s ease; }
.mywork-progress-label { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .table-row.is-mywork-phase { grid-template-columns: 1.6fr 1fr 130px; }
  .table-row.is-mywork-phase > :nth-child(3), .table-row.is-mywork-phase > :nth-child(4) { display: none; }
}
.table-row.is-group-header { display: flex; align-items: baseline; gap: 10px; padding: 10px 18px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); cursor: default; }
.table-row.is-group-header .group-engagement { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.table-row.is-group-header .group-period { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); }
.table-row.is-group-header .group-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; background: var(--surface-tertiary); color: var(--text-secondary); padding: 1px 6px; border-radius: 999px; margin-left: auto; }
.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-mywork { grid-template-columns: 2fr 1fr 140px 60px; }
  .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-mywork > :nth-child(2), .table-row.is-mywork > :nth-child(3) { 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 .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; }
.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; }
/* 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; }
.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%; }
.ba-tx-head { display: grid; grid-template-columns: 30px 64px 90px 1fr 130px 100px 90px 32px; gap: 10px; padding: 7px 16px; 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: 30px 64px 90px 1fr 130px 100px 90px 32px; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-default); align-items: center; transition: background .08s; background: var(--surface-primary); }
.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 ===== */

.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; }
.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; }