/* ================================================
   KITA - Bank Document Processing UI
   Modern, Professional Design System

   Performance Optimizations:
   - Simplified animations for bulk document processing
   - Reduced infinite animations to minimize resource usage
   - Streamlined transitions for faster rendering
   - Maintained elegant UI while prioritizing responsiveness
   ================================================ */

/* ========== Splash Screen (light, with kita wordmark) ========== */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: #FAFAFA;
    opacity: 1;
    transition: opacity 0.35s ease-in-out;
}

.splash-screen.splash-exit {
    opacity: 0;
    pointer-events: none;
}

.splash-swoosh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    animation: splashSwoosh 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.splash-swoosh-inner {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 25%, rgba(65,141,98,0.06) 40%, rgba(65,141,98,0.12) 50%, rgba(65,141,98,0.06) 60%, transparent 75%);
}

@keyframes splashSwoosh {
    0%   { clip-path: inset(0 100% 0 0); }
    35%  { clip-path: inset(0 0% 0 0); }
    60%  { clip-path: inset(0 0% 0 0); }
    100% { clip-path: inset(0 0 0 100%); }
}

.splash-glow {
    position: absolute;
    z-index: 1;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(65,141,98,0.18) 0%, rgba(65,141,98,0.04) 50%, transparent 75%);
    animation: splashGlow 1.2s ease-in-out forwards;
}

@keyframes splashGlow {
    0%   { opacity: 0; transform: scale(0.85); }
    15%  { opacity: 1; transform: scale(1.05); }
    70%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(0.95); }
}

.splash-logo {
    position: relative;
    z-index: 2;
    width: 84px;
    height: auto;
    animation: splashLogoFade 1.2s ease-in-out forwards;
}

@keyframes splashLogoFade {
    0%   { opacity: 0; transform: translateY(2px) scale(0.98); }
    20%  { opacity: 1; transform: translateY(0) scale(1); }
    80%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0.7; transform: translateY(0) scale(1); }
}

.splash-spinner {
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(65, 141, 98, 0.15);
    border-top-color: #418D62;
    border-radius: 50%;
    opacity: 0;
    animation: splashSpinnerIn 0.3s ease-in 0.6s forwards, spin 0.9s linear 0.6s infinite;
}

@keyframes splashSpinnerIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* CSS Variables */
:root {
    /* Colors - Light theme */
    --color-primary: #418D62;
    --color-primary-rgb: 65, 141, 98;
    --color-primary-dark: #367a53;
    --color-primary-light: #e8f5ec;
    --color-primary-glow: rgba(65, 141, 98, 0.2);

    /* Accent color - Yellow */
    --color-highlight: #d4a835;
    --color-highlight-dark: #b8922e;
    --color-highlight-light: #f5e6b8;
    --color-highlight-glow: rgba(212, 168, 53, 0.2);

    /* Background - Light theme */
    --bg-primary: #ffffff;
    --bg-dark: #FAFAFA;
    --bg-secondary: #FAFAFA;
    --bg-hover: #F5F5F4;
    --bg-card: #ffffff;
    --bg-card-hover: #F5F5F4;
    --bg-sidebar: #ffffff;
    --bg-input: #FAFAFA;

    /* Text colors - Dark for light background */
    --text-primary: #18181B;
    --text-secondary: #3F3F46;
    --text-muted: #737373;

    /* Status colors */
    --color-success: #418D62;
    --color-success-bg: rgba(65, 141, 98, 0.12);
    --color-error: #dc2626;
    --color-error-bg: rgba(220, 38, 38, 0.1);
    --color-warning: #d97706;
    --color-warning-bg: rgba(217, 119, 6, 0.1);
    --color-info: #d4a835;
    --color-info-bg: rgba(212, 168, 53, 0.1);

    /* Borders - Light theme */
    --border-color: #E7E5E4;
    --border-color-light: #F5F5F4;

    /* Shadows - Light theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 30px var(--color-primary-glow);
    
    /* Typography */
    --font-heading: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Geist Mono', monospace;
    
    /* Spacing */
    --sidebar-width: 280px;
    --header-height: 70px;
    --content-max-width: 1200px;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
    
    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Panel widths — kept in sync by JS */
    --pdf-panel-width: 0px;
    --ai-agent-drawer-width: 0px;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Background - Dark theme */
    --bg-dark: #0f1419;
    --bg-card: #1a1f26;
    --bg-card-hover: #242b33;
    --bg-sidebar: #151a21;
    --bg-input: #1a1f26;
    --bg-subtle: #242b33;
    --bg-secondary: #1a1f26;

    /* Text colors - Light for dark background */
    --text-primary: #e7e9ea;
    --text-secondary: #a1a7ad;
    --text-muted: #6e7681;

    /* Hover - Dark theme */
    --bg-hover: #242b33;

    /* Borders - Dark theme */
    --border-color: #30363d;
    --border-color-light: #21262d;

    /* Colors - Dark theme overrides */
    --color-primary-light: #1a3a2a;
    --color-primary-glow: rgba(65, 141, 98, 0.3);
    --color-highlight-light: #3a3020;
    --color-highlight-glow: rgba(212, 168, 53, 0.3);
    --bg-primary: #1a1f26;

    /* Shadows - Dark theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Always reserve space for the page-level vertical scrollbar so layouts
     * don't shift horizontally when content overflow changes (e.g. switching
     * between Extract / Fraud Check / Analysis tabs where one tab is short
     * enough to not need a scrollbar and the others do). */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    /* `clip` (not `hidden`) so body doesn't become its own scroll container —
     * that would steal scroll from <html> and break position: sticky on the
     * top nav (header flickers / disappears as you scroll). */
    overflow-x: clip;
}

/* Results section scrolls naturally like every other top-level page —
 * the page-level scrollbar lives on <html> (which has scrollbar-gutter:
 * stable), so switching between Extract / Fraud Check / Analysis can't
 * shift content left/right as section heights change. */
body.results-active {
    overflow-x: clip;
}

/* Background Pattern - light theme (intentionally neutral; no tint overlay) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: -1;
}

/* App Layout */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    /* Reserve space for the fixed .app-top-nav (height 56px) so page
     * content doesn't slide under it. */
    padding-top: 56px;
    transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.24s cubic-bezier(0.22, 1, 0.36, 1), flex-basis 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sidebar (legacy — hidden by top nav redesign) */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 2px solid var(--border-color-light);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
    transition: width var(--transition-normal);
}

/* Sidebar Toggle Button */
.sidebar-toggle {
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
    transition: all var(--transition-fast);
    padding: 0;
    color: var(--text-secondary);
}

.sidebar-toggle:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.sidebar-toggle svg {
    transition: transform var(--transition-fast);
}

/* Nav item with icon */
.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.nav-text {
    white-space: nowrap;
}

/* Collapsed Sidebar State */
.sidebar.collapsed {
    width: 88px;
}

.sidebar.collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

.sidebar.collapsed .logo-container {
    padding: 16px 8px;
}

.sidebar.collapsed .logo {
    width: 36px;
}

.sidebar.collapsed .nav-text {
    display: none;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 14px;
}

.sidebar.collapsed .nav-icon {
    margin-right: 0;
}

.sidebar.collapsed .sidebar-footer {
    display: none;
}

/* Main content adjustment for collapsed sidebar (legacy — sidebar hidden) */
.app-container.sidebar-collapsed .main-content {
    margin-left: 0;
    width: 100%;
}

.logo-container {
    padding: 24px;
    border-bottom: 2px solid var(--border-color-light);
    background: var(--bg-sidebar);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    width: 110px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(65, 141, 98, 0.2));
}

.nav-menu {
    padding: 16px 12px;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
    margin-bottom: 4px;
}

.nav-item:hover {
    background: rgba(65, 141, 98, 0.1);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(65, 141, 98, 0.3);
}

.nav-icon {
    font-size: 0.6rem;
    color: inherit;
    margin-right: 8px;
}



/* Main Content */
.main-content {
    flex: 1;
    margin-left: 0;
    padding: 32px 48px;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    /* `clip` (not `hidden`) — `hidden` would make main-content its own scroll
     * container, stealing the page scroll from <html> and breaking the sticky
     * top nav. */
    overflow-x: clip;
    /* Reserve the vertical scrollbar gutter so switching between Results
     * tabs (Extract / Fraud Check / Analysis) with different content heights
     * doesn't shift the page horizontally as the scrollbar appears/disappears.
     * Without this, the nav username + Results subtitle + everything else
     * moves by the scrollbar width when one tab fits and another overflows. */
    scrollbar-gutter: stable;
    transition:
        margin-left 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        max-width 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        flex-basis 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        padding-left 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Content Sections */
.content-section {
    display: none;
    animation: fadeIn var(--transition-normal);
}

.content-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Section Header (Paper style) */
.section-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
    border-bottom: none;
}

.section-header .header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.section-header h1 {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    color: #111827;
}

.subtitle {
    color: #9CA3AF;
    font-size: 13px;
    line-height: 16px;
    margin: 0;
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* File Document Type Dropdown (per file in queue) */
.file-doc-type {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-primary);
    cursor: pointer;
    min-width: 140px;
    transition: all var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.file-doc-type:hover {
    border-color: var(--color-primary);
}

.file-doc-type:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-glow);
}

.file-doc-type option {
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 8px;
}

.file-doc-type option:disabled {
    color: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Document Type Picker Popup */
.doc-type-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-primary);
    cursor: pointer;
    min-width: 140px;
    max-width: 180px;
    transition: all var(--transition-fast);
}

.doc-type-picker-trigger:hover {
    border-color: var(--color-primary);
    background: var(--bg-card-hover);
}

.doc-type-picker-trigger .doc-type-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-type-picker-trigger .doc-type-arrow {
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.doc-type-picker-trigger.open .doc-type-arrow {
    transform: rotate(180deg);
}

/* Classifying state */
.doc-type-picker-trigger.classifying {
    opacity: 0.7;
    cursor: default;
    border-style: dashed;
}

.doc-type-picker-trigger.classifying:hover {
    border-color: var(--border-color);
    background: var(--bg-input);
}

.classify-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: classify-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes classify-spin {
    to { transform: rotate(360deg); }
}

/* Popup overlay */
.doc-type-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.doc-type-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Popup container */
.doc-type-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.doc-type-popup.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Popup header */
.doc-type-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.doc-type-popup-header h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.doc-type-popup-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-type-popup-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Search input */
.doc-type-search {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
}

.doc-type-search input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px 10px 38px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

.doc-type-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-glow);
}

.doc-type-search input::placeholder {
    color: var(--text-muted);
}

/* Options container */
.doc-type-options {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    max-height: 400px;
}

/* Category group */
.doc-type-category {
    padding: 0 8px;
}

.doc-type-category-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
}

.doc-type-category-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.doc-type-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.doc-type-category-icon svg {
    width: 14px;
    height: 14px;
}

/* Option item */
.doc-type-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 2px 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.doc-type-option:hover {
    background: var(--bg-secondary);
}

.doc-type-option.selected {
    background: var(--color-primary-light);
}

.doc-type-option.selected .doc-type-option-name {
    color: var(--color-primary);
    font-weight: 500;
}

.doc-type-option-name {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.doc-type-option-check {
    color: var(--color-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.doc-type-option.selected .doc-type-option-check {
    opacity: 1;
}

/* No results */
.doc-type-no-results {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 520px) {
    .doc-type-popup {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 48px);
    }

    .doc-type-picker-trigger {
        min-width: 100px;
        max-width: 140px;
        padding: 5px 10px;
        font-size: 0.75rem;
    }
}

/* When the quota block is active, the entire Capture page hides everything
   else — heading, mode toolbar, dropzone, queue, progress. Only the banner
   remains. */
#home-section.quota-blocked > *:not(#limit-banner) { display: none !important; }
#home-section.quota-blocked { padding-top: 48px; }

/* === Free-tier quota block (replaces dropzone when 100/100 credits used) === */
.quota-block {
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 16px;
    overflow: hidden;
    max-width: 760px;
    margin: 0 auto 32px;
}

.quota-block-accent {
    height: 3px;
    background: linear-gradient(90deg, #ECFDF5 0%, #418D62 50%, #ECFDF5 100%);
}

.quota-block-body {
    padding: 48px 56px;
}

.quota-block-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.quota-block-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: #ECFDF5;
    border: 1px solid rgba(65, 141, 98, 0.18);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    color: #418D62;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quota-block-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #418D62;
    flex-shrink: 0;
}

.quota-block-counter {
    font-family: var(--font-body);
    font-size: 13px;
    color: #737373;
    font-variant-numeric: tabular-nums;
}

.quota-block-title {
    font-family: var(--font-body);
    font-size: 32px;
    line-height: 38px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #18181B;
    margin: 0 0 12px 0;
}

.quota-block-title-muted {
    color: #737373;
    margin-bottom: 20px;
}

.quota-block-sub {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 22px;
    color: #525252;
    max-width: 560px;
    margin: 0 0 32px 0;
}

.quota-block-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}

.quota-block-feature {
    padding: 14px 16px;
    background: #FAFAFA;
    border: 1px solid #E7E5E4;
    border-radius: 10px;
}

.quota-block-feature-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: #418D62;
}

.quota-block-feature-head span {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: #18181B;
}

.quota-block-feature p {
    font-family: var(--font-body);
    font-size: 12px;
    color: #737373;
    line-height: 16px;
    margin: 0;
}

.quota-block-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quota-block-cta-primary,
.quota-block-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.quota-block-cta-primary {
    background: #18181B;
    color: #FFFFFF;
    border: 1px solid #18181B;
}
.quota-block-cta-primary:hover {
    background: #27272A;
    border-color: #27272A;
    transform: translateY(-1px);
}

.quota-block-cta-secondary {
    background: #FFFFFF;
    color: #18181B;
    border: 1px solid #E7E5E4;
}
.quota-block-cta-secondary:hover {
    background: #F5F5F4;
    border-color: #D4D4D8;
}

.quota-block-reset {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: #A3A3A3;
}

/* Dark mode */
[data-theme="dark"] .quota-block {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] .quota-block-title { color: #E7E9EA; }
[data-theme="dark"] .quota-block-title-muted { color: #A1A7AD; }
[data-theme="dark"] .quota-block-sub { color: #C9CDD2; }
[data-theme="dark"] .quota-block-counter,
[data-theme="dark"] .quota-block-feature p { color: #A1A7AD; }
[data-theme="dark"] .quota-block-feature {
    background: #242B33;
    border-color: #30363D;
}
[data-theme="dark"] .quota-block-feature-head span { color: #E7E9EA; }
[data-theme="dark"] .quota-block-cta-primary {
    background: #FAFAFA;
    color: #18181B;
    border-color: #FAFAFA;
}
[data-theme="dark"] .quota-block-cta-primary:hover { background: #FFFFFF; }
[data-theme="dark"] .quota-block-cta-secondary {
    background: #1A1F26;
    color: #E7E9EA;
    border-color: #30363D;
}
[data-theme="dark"] .quota-block-cta-secondary:hover { background: #242B33; }
[data-theme="dark"] .quota-block-reset { color: #6E7681; }

@media (max-width: 768px) {
    .quota-block-body { padding: 32px 24px; }
    .quota-block-title { font-size: 26px; line-height: 32px; }
    .quota-block-features { grid-template-columns: 1fr; }
    .quota-block-actions { flex-wrap: wrap; }
    .quota-block-reset { margin-left: 0; width: 100%; }
}

/* Upload Area */
.upload-area-container {
    margin-bottom: var(--spacing-md);
}

/* Studio Layout (single-column centered) */
.studio-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Constructor Link (replaces full card) */
.constructor-link {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 640px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 14px 20px;
    gap: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.constructor-link:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
}

.constructor-link-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    padding: 0;
    transition: all var(--transition-fast);
}

.constructor-link-btn:hover {
    color: var(--text-primary);
    background: none;
}

.constructor-link-btn svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.constructor-link-hint {
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Legacy constructor header kept for backward compat */
.constructor-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.constructor-header svg {
    color: var(--color-primary);
    width: 24px;
    height: 24px;
}

.constructor-header h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.info-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    margin-left: auto;
    position: relative;
}

.info-tooltip svg {
    width: 16px !important;
    height: 16px !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.info-tooltip:hover svg {
    opacity: 1;
    color: var(--color-primary) !important;
}


.constructor-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.btn-block {
    width: 100%;
}

/* Dropzone - centered single-column */
.dropzone {
    border: 2px dashed #D1D5DB;
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 280px;
    max-width: 640px;
    width: 100%;
}

.dropzone.collapsed {
    display: none;
}

/* Format badges row */
.dropzone-format-badges {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.format-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    background: #F3F4F6;
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-body);
    letter-spacing: 0;
    border: 1px solid #E5E7EB;
}

.dropzone:hover,
.dropzone.drag-over {
    border-color: var(--color-primary);
    background: #FAFFFE;
}

.dropzone.drag-over {
    border-color: var(--color-primary);
    background: rgba(65, 141, 98, 0.04);
}

.dropzone-icon {
    color: var(--color-primary);
    margin-bottom: 10px;
    opacity: 0.85;
    transition: all var(--transition-normal);
}

.dropzone:hover .dropzone-icon,
.dropzone.drag-over .dropzone-icon {
    opacity: 1;
}

.dropzone-text {
    font-size: 16px;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 0;
    line-height: 20px;
}

.dropzone-subtext {
    color: #6B7280;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 0;
}

.browse-link {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.browse-link:hover {
    text-decoration: underline;
}

.dropzone-formats {
    margin-top: 0;
    font-size: 12px;
    color: #9CA3AF;
    font-family: var(--font-body);
    letter-spacing: 0.3px;
}

.dropzone-hint {
    margin-top: 0;
    font-size: 12px;
    color: var(--color-primary);
    font-family: var(--font-body);
}

/* === Capture page (renamed from Studio) ============================== */

/* Scoped to .active so it doesn't override .content-section { display: none } when inactive */
.capture-section.active {
    padding: 40px 64px 64px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.capture-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.capture-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.015em;
    color: #18181B;
    margin: 0;
}

.capture-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #737373;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toolbar row: mode toolbar on the left, demo-documents disclosure right-aligned */
.capture-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.capture-mode-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: #F5F5F4;
    border: 1px solid #E7E5E4;
    border-radius: 12px;
    align-self: flex-start;
}

.capture-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    color: #737373;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.capture-mode-btn:hover {
    color: #18181B;
}

.capture-mode-btn svg {
    stroke: currentColor;
    flex-shrink: 0;
}

.capture-mode-btn.selected {
    background: #FFFFFF;
    border-color: #E7E5E4;
    color: #18181B;
    box-shadow: 0 1px 2px rgba(31, 36, 33, 0.06);
}

/* Capture dropzone — overrides legacy .dropzone visuals on the home page */
.capture-dropzone {
    min-height: 320px;
    padding: 64px 32px;
    border: 1.5px dashed #D4D4D8;
    border-radius: 16px;
    background: #FFFFFF;
    max-width: none;
    gap: 14px;
}

.capture-dropzone.drag-over,
.capture-dropzone:hover {
    border-color: #418D62;
    background: #FAFAFA;
}

.capture-dropzone .dropzone-icon {
    color: #18181B;
    opacity: 1;
    margin-bottom: 0;
}

.capture-dropzone .dropzone-text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #18181B;
}

.capture-dropzone .dropzone-formats {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 20px;
    color: #737373;
    max-width: 520px;
    text-align: center;
    letter-spacing: 0;
}

.capture-dropzone .dropzone-format-badges {
    margin-top: 8px;
    gap: 6px;
}

.capture-dropzone .format-badge {
    padding: 3px 8px;
    border-radius: 5px;
    background: #F5F5F4;
    border: none;
    color: #737373;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.capture-limit-hint {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 18px;
    color: #737373;
    margin: -4px 0 0 0;
    padding-left: 2px;
}

.capture-limit-hint strong {
    color: #18181B;
    font-weight: 600;
}

.capture-limit-link {
    color: #418D62;
    font-weight: 600;
    text-decoration: none;
}

.capture-limit-link:hover {
    text-decoration: underline;
}

/* === Shared section page heading (used by History, Batch, API) ============= */

/* Scoped to .active so they don't override .content-section { display: none } when inactive */
.history-section.active,
.batch-section.active,
.api-section.active,
.settings-section.active,
.results-section.active {
    padding: 40px 64px 64px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Results page is a wide data viewer — opt out of the 1200px max-width
 * cap but keep a comfortable page gutter so the box doesn't crash into
 * the window edges. */
.results-section.active {
    max-width: none;
    padding: 24px 32px 48px;
    margin: 0;
}
@media (min-width: 1600px) {
    .results-section.active {
        padding: 24px 48px 48px;
    }
}

.section-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.section-page-heading-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.section-page-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.015em;
    color: #18181B;
    margin: 0;
}

.section-page-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #737373;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-page-meta {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 18px;
    color: #A3A3A3;
    margin: 4px 0 0 0;
}

.section-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Compact ghost / primary buttons used in section headings */
.btn-ghost-sm,
.btn-primary-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    line-height: 16px;
}

.btn-ghost-sm {
    background: transparent;
    border: 1px solid #E7E5E4;
    color: #18181B;
}

.btn-ghost-sm:hover {
    background: #F5F5F4;
}

.btn-primary-sm {
    background: #418D62;
    border: 1px solid #418D62;
    color: #FFFFFF;
}

.btn-primary-sm:hover {
    background: #2C6845;
    border-color: #2C6845;
}

/* File Queue - redesigned */
.file-queue-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    overflow: hidden;
}

.file-queue-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.file-queue-header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.file-queue-header h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.file-queue-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Add more strip */
.add-more-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px dashed var(--border-color);
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.add-more-strip:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.add-more-strip svg {
    opacity: 0.6;
}

/* Sticky process bar */
.process-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-sidebar, var(--bg-card));
    position: sticky;
    bottom: 0;
}

.process-bar-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.process-bar-count {
    font-weight: 600;
    color: var(--text-primary);
}

.process-bar-size {
    color: var(--text-muted);
}

.process-bar-blockers {
    color: var(--color-warning);
    font-size: 0.78rem;
}

.upload-options {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-queue-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-selector {
    display: flex;
    align-items: center;
    gap: 4px;
}

.account-select {
    font-size: 12px;
    padding: 5px 24px 5px 8px;
    min-width: 0;
    max-width: 160px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.account-select:has(option:checked:not([value=""])) {
    color: var(--text-primary);
}

.btn-icon {
    padding: 4px;
    min-width: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: opacity var(--transition-fast);
}

.checkbox-label:hover {
    opacity: 0.85;
}

.checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-input);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.checkbox-input:checked + .checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-input:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-input:focus + .checkbox-custom {
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.1);
}

.checkbox-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.info-icon-inline {
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.checkbox-label:hover .info-icon-inline {
    opacity: 1;
}

.file-list {
    list-style: none;
    max-height: 400px;
    overflow-y: auto;
}

.file-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
}

.file-list-item:last-child {
    border-bottom: none;
}

.file-list-item:hover {
    background: var(--bg-card-hover);
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.file-info > div {
    min-width: 0;
    flex: 1;
}

/* Neutral gray file icon */
.file-icon-neutral {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-input, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-icon-neutral svg {
    color: #9CA3AF;
    width: 18px;
    height: 18px;
}

/* Legacy emoji icon */
.file-icon {
    font-size: 1.4rem;
    display: none; /* Hidden, replaced by SVG icon */
}

/* Status badges */
.auto-classified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.auto-classified-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    flex-shrink: 0;
}

.classifying-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-input, #1a1a1a);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.password-required-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}


.file-name {
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.file-source {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.file-source.direct {
    background: var(--color-info-bg);
    color: var(--color-info);
}



.file-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.file-remove:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* File Actions Container */
.file-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

/* Password Protected File Styling */
.file-list-item.password-protected {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
    border-left: 3px solid var(--color-warning);
    margin-left: -3px;
    padding-left: calc(20px - 3px);
}

.password-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    padding: 2px 8px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-radius: 999px;
    font-weight: 600;
    margin-left: 8px;
    /* Removed infinite animation for better performance with many files */
}

.password-checking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    padding: 2px 8px;
    background: var(--color-info-bg);
    color: var(--color-info);
    border-radius: 999px;
    font-weight: 500;
    margin-left: 8px;
    animation: checkingPulse 1.5s ease-in-out infinite;
}

@keyframes checkingPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Password Input Container */
.password-input-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.password-input {
    background: var(--bg-input);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-primary);
    width: 140px;
    transition: all var(--transition-fast);
    flex: 0 0 auto;
}

.password-input::placeholder {
    color: var(--text-muted);
    font-family: var(--font-body);
}

.password-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.password-input.has-password {
    border-color: var(--color-warning);
    background: rgba(245, 158, 11, 0.1);
}

.password-input.has-password:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.password-input.password-valid {
    border-color: var(--color-success);
    background: rgba(65, 141, 98, 0.15);
}

.password-input.password-valid:focus {
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.3);
}

.password-input.password-invalid {
    border-color: var(--color-error);
    background: rgba(239, 68, 68, 0.15);
}

.password-input.password-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

.password-input-container.has-error .password-input {
    border-color: var(--color-error);
}

.password-input-container.has-valid .password-input {
    border-color: var(--color-success);
}

.password-check {
    color: var(--color-success);
    font-size: 0.9rem;
    font-weight: bold;
    animation: checkAppear 0.3s ease-out;
    flex-shrink: 0;
}

/* Validate Password Button */
.btn-validate-password {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-body);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-validate-password:hover:not(:disabled) {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(65, 141, 98, 0.3);
}

.btn-validate-password:disabled,
.btn-validate-password.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #555555;
}

.btn-validate-password:disabled:hover,
.btn-validate-password.disabled:hover {
    transform: none;
    box-shadow: none;
    background: #555555;
}

@keyframes checkAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Password from CSV styling */
.file-list-item.password-from-csv {
    background: linear-gradient(90deg, rgba(65, 141, 98, 0.08) 0%, transparent 100%);
    border-left: 3px solid var(--color-success);
    margin-left: -3px;
    padding-left: calc(20px - 3px);
}

.password-badge.csv-found {
    background: var(--color-success-bg);
    color: var(--color-success);
    animation: none;
}

.password-badge.manual {
    background: var(--color-info-bg);
    color: var(--color-info);
    animation: none;
}

.password-input-container.from-csv {
    position: relative;
}

.csv-indicator {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    background: var(--color-success);
    color: white;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.password-input.csv-password {
    border-color: var(--color-success);
    background: rgba(65, 141, 98, 0.08);
}

.password-input.csv-password:focus {
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.2);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    text-decoration: none;
}

.btn-icon {
    display: none; /* Hide icon placeholders for cleaner look */
}

.btn-primary {
    background: #418D62;
    color: white;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 500;
}

.btn-primary:hover:not(:disabled) {
    background: #367553;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #cbd5e1;
    box-shadow: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

/* Limit reached state - grayed out button */
.btn.limit-reached,
.btn-primary.limit-reached {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9ca3af !important;
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    color: #6b7280 !important;
    pointer-events: none;
}

.btn-secondary {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-sidebar);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* Multi-Image Upload Section */
.multi-image-upload-section {
    margin-top: 16px;
    text-align: center;
}

#multi-image-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
}

#multi-image-btn svg {
    flex-shrink: 0;
}

.multi-image-help-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 8px;
    font-family: var(--font-body);
}

.btn-danger {
    background: var(--color-error);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-danger:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: #dc2626;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #cbd5e1;
    box-shadow: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.btn-warning {
    background: #ff9800;
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-warning:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: #f57c00;
}

.btn-warning:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #cbd5e1;
    box-shadow: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

/* Dropdown Component */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.dropdown-arrow {
    font-size: 0.8em;
    transition: transform var(--transition-fast);
    display: inline-block;
}

.dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 150px;
    display: none;
    z-index: 1000;
    overflow: hidden;
}

.dropdown.active .dropdown-menu,
.dropdown-inline.active .dropdown-menu {
    display: block;
    animation: dropdownSlideIn 0.15s ease;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    display: block;
    padding: 10px 16px;
    cursor: pointer;
    transition: background var(--transition-fast);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color-light);
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: var(--bg-card-hover);
    color: var(--color-highlight);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

.dropdown-header {
    padding: 8px 16px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-inline {
    display: inline-block;
}

.dropdown-inline .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.dropdown-inline .btn-primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    box-shadow: 0 1px 3px rgba(65, 141, 98, 0.3);
}

.dropdown-inline .btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 2px 6px rgba(65, 141, 98, 0.4);
    transform: translateY(-1px);
}

.dropdown-inline .dropdown-menu {
    min-width: 120px;
}

/* Document actions container (for individual download buttons) */
.document-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    margin-right: 12px;
}

/* Remove document button */
.btn-remove-doc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-remove-doc:hover {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
}

.btn-remove-doc svg {
    flex-shrink: 0;
}

/* Download icon button */
.btn-download-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px !important;
    min-width: auto;
}

.btn-download-icon svg {
    flex-shrink: 0;
}

.btn-download-icon .dropdown-arrow {
    font-size: 0.65rem;
    margin-left: 2px;
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-ghost:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color-light);
}

.btn-small, .btn-sm {
    font-size: 0.75rem;
    padding: 4px 8px;
    min-height: auto;
}

.btn-large {
    padding: 16px 32px;
    font-size: 1rem;
}

.action-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

/* Progress */
.progress-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 32px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.progress-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-status {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.progress-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg-input, #1a1a1a);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.progress-timer {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-primary);
    letter-spacing: 0.5px;
}

/* Processing timer - legacy, kept for compatibility */
.processing-timer {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-primary);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Progress bar for processing documents */
.processing-progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.processing-progress-track {
    width: 80px;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.processing-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-success) 100%);
    border-radius: 3px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.processing-timer {
    font-size: 0.7rem;
    color: var(--color-primary);
    font-weight: 500;
    min-width: 28px;
    text-align: right;
}

/* Shimmer overlay — present on every progress bar but only animates while
 * the doc is actively processing. Once the bar's parent gets `is-processing`
 * removed (phase becomes done/failed), the shine stops and the overlay is
 * hidden so the bar doesn't keep glowing after completion. */
.processing-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    opacity: 0;
}
.processing-progress-bar.is-processing::after {
    opacity: 1;
    animation: progressShimmer 1.5s infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/* Stronger pulse when the bar is mostly pinned (past 85% of estimate).
 * Only applied while still processing — see is-processing gate above. */
.processing-progress-bar.is-shimmering.is-processing {
    box-shadow: 0 0 8px rgba(65, 141, 98, 0.45);
    animation: barPulse 1.6s ease-in-out infinite;
}
@keyframes barPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(65, 141, 98, 0.35); }
    50% { box-shadow: 0 0 12px rgba(65, 141, 98, 0.6); }
}

/* Reassurance banner shown when a doc passes 2× its estimated time. */
.proc-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fef9c3;
    border: 1px solid #fde68a;
    color: #854d0e;
    border-radius: 8px;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 6px;
    animation: procBannerIn 220ms ease-out;
}
.proc-banner[hidden] { display: none; }
.proc-banner-icon { color: #b45309; flex-shrink: 0; }
.proc-banner-text { font-weight: 500; }
@keyframes procBannerIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
[data-theme="dark"] .proc-banner {
    background: rgba(180, 83, 9, 0.12);
    border-color: rgba(253, 230, 138, 0.25);
    color: #fde68a;
}

/* "Notify me when it's done" button — appears past 3× estimate. */
.proc-notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--color-primary, #418d62);
    color: var(--color-primary, #418d62);
    border-radius: 8px;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 4px;
    transition: background 0.12s, color 0.12s;
}
.proc-notify-btn[hidden] { display: none; }
.proc-notify-btn:hover {
    background: var(--color-primary, #418d62);
    color: #ffffff;
}
[data-theme="dark"] .proc-notify-btn {
    background: var(--bg-card);
}

/* Processing time badge for completed documents */
.processing-time-badge {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Reducto tables container - collapsible section */
.reducto-tables-container {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 2000px;
    opacity: 1;
    overflow: hidden;
}

.reducto-tables-container.collapsed {
    max-height: 0;
    opacity: 0;
}

.progress-status::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-highlight);
    border-radius: 50%;
    margin-left: 8px;
    /* Removed infinite pulse for better performance */
}

.progress-count {
    color: var(--text-secondary);
    font-family: var(--font-body);
}

.progress-bar {
    height: 8px;
    background: var(--bg-input);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: 999px;
    width: 0%;
    transition: width var(--transition-normal);
    box-shadow: 0 0 10px rgba(65, 141, 98, 0.4);
}

.progress-file {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-family: var(--font-body);
}

/* Tabs */
.tabs-container {
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border-color-light);
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tab {
    padding: 14px 24px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tab:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.tab.active {
    color: var(--color-primary);
    background: var(--bg-card);
    font-weight: 600;
}

.tab.active::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: var(--color-highlight);
    border-radius: 2px;
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
}

.tab.tab-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.tab.tab-disabled:hover {
    color: var(--text-secondary);
    background: none;
}

/* Info Icon */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    position: relative;
    transition: color var(--transition-fast);
    vertical-align: middle;
}

.info-icon:hover {
    color: var(--color-primary);
}

/* Prevent tooltip from being cut off */
.tab {
    overflow: visible;
}

.tabs-container {
    overflow: visible;
}

/* Tab Panels */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeIn var(--transition-normal);
}

/* ================================================
   Master-Detail Layout for Results
   ================================================ */

/* ── Global top nav bar (Paper design) ── */
.app-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 24px;
    border-bottom: 1px solid #E7E5E4;
    background: #FFFFFF;
    flex-shrink: 0;
    /* `fixed` not `sticky` — sticky was bobbing slightly with momentum scroll
     * because of the transitions on this element and ancestors, and the
     * scrollbar-gutter / overflow-clip combination on html/body. Fixed pins
     * it absolutely to the viewport; `.app-container` adds top padding to
     * make room. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000; /* Above floating elements like #ai-agent-fab (z 9998) so the avatar dropdown wins */
    transition: padding-right 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.app-top-nav-left {
    display: flex;
    align-items: center;
    gap: 0;
}
.app-nav-logo {
    height: 24px;
    width: auto;
    margin-right: 24px;
}
.app-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
.app-nav-link {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 400;
    color: #737373;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background-color 0.15s, color 0.15s;
}
.app-nav-link:hover { color: #18181B; background: #F5F5F4; }
.app-nav-link.active {
    color: #18181B;
    font-weight: 500;
    background: #F5F5F4;
}
.app-top-nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.app-nav-pages {
    font-size: 12px;
    color: #737373;
    font-weight: 500;
}
.app-nav-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    line-height: 1;
}
.app-nav-user-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: #18181B;
    line-height: 16px;
}
.app-nav-user-org {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 400;
    color: #A3A3A3;
    line-height: 14px;
}
.app-nav-avatar-wrap {
    position: relative;
}
.app-nav-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #418D62;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.app-nav-avatar:hover { background: #2C6845; }
.app-nav-avatar:active { transform: scale(0.96); }

/* Avatar dropdown */
.app-nav-dropdown {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 10001; /* Lives in .app-top-nav stacking context (z 10000); covers anything floating below it */
}
.app-nav-dropdown.open { display: block; }
.app-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.1s;
}
.app-nav-dropdown-item:hover { background: var(--bg-hover); }
.app-nav-dropdown-item svg { color: var(--text-muted); flex-shrink: 0; }
.app-nav-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}
.app-nav-logout { color: #EF4444; }
.app-nav-logout:hover { background: #FEF2F2; }
.app-nav-logout svg { color: #EF4444; }

/* Results section padding/layout is defined via .results-section.active alongside the other top-level pages */
/* Results Download All button */
#results-section .section-header .btn-primary {
    background: #418D62;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

/* Master-detail container */
.results-layout {
    display: flex;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    background: #fff;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

/* Sidebar */
.documents-sidebar {
    width: 300px;
    flex-shrink: 0;
    min-height: 0;
    background: #fff;
    border-right: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header {
    padding: 12px 16px;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sidebar-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.sidebar-count {
    background: #F3F4F6;
    color: #6B7280;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.btn-clear-all {
    background: transparent;
    border: none;
    color: #9CA3AF;
    padding: 4px 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.15s;
}

.btn-clear-all:hover {
    color: #EF4444;
}

/* Total processing time badge */
.sidebar-total-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 8px;
}

.documents-list-sidebar {
    flex: 0 1 auto;
    overflow-y: auto;
    min-height: 60px;
    max-height: 40%;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #2a2a2a) transparent;
}

.documents-list-sidebar::-webkit-scrollbar {
    width: 5px;
}

.documents-list-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.documents-list-sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color, #2a2a2a);
    border-radius: 3px;
}

.documents-list-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, #666);
}


/* Raw Parse formatted output */
.raw-parse-formatted {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-height: 500px;
    overflow-y: auto;
    padding: 12px;
    background: var(--bg-primary, #141414);
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #2a2a2a) transparent;
}

.raw-parse-table {
    /* Size purely to content — each column ends at its longest entry,
     * Description doesn't pick up trailing whitespace. Container scrolls
     * horizontally when total content is wider than the panel. */
    width: auto;
    border-collapse: collapse;
    font-size: 0.78rem;
    background: var(--bg-primary, #141414);
    border-radius: 6px;
    overflow: hidden;
    table-layout: auto;
}

.raw-parse-table th {
    background: var(--bg-secondary, #1a1a1a);
    color: var(--text-primary);
    font-weight: 600;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    white-space: nowrap;
}

.raw-parse-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color, #1e1e1e);
    color: var(--text-secondary);
    vertical-align: middle;
    white-space: nowrap;
}

/* Date column — wide enough for the long-date format without wrapping. */
.raw-parse-table th:first-child,
.raw-parse-table td:first-child {
    min-width: 140px;
    white-space: nowrap;
}

.raw-parse-table tr:last-child td {
    border-bottom: none;
}

.raw-parse-table tr:hover td {
    background: var(--bg-hover, #1c1c1c);
}

/* AI correction highlight on table cells */
.raw-parse-table td.cell-corrected {
    background: rgba(245, 158, 11, 0.08);
    border-left: 2px solid #f59e0b;
}

/* Inline before/after diff in corrected cells */
.cell-diff {
    display: inline;
    font-size: 0.78rem;
}
.cell-diff-old {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.7;
    font-size: 0.74rem;
}
.cell-diff-arrow {
    color: #f59e0b;
    margin: 0 3px;
    font-size: 0.7rem;
}
.cell-diff-new {
    color: var(--text-primary);
    font-weight: 500;
}

/* AI Corrections summary line */
.ai-corrections-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    border: 1px solid var(--border-color-light, rgba(0,0,0,0.06));
}
.ai-corrections-summary-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary, #418D62);
    white-space: nowrap;
}
.ai-corrections-summary-items {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Empty state for sidebar */
.empty-sidebar-state {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
}

.empty-sidebar-state p {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
}

.empty-sidebar-state a {
    color: var(--color-primary);
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
}

.empty-sidebar-state a:hover {
    text-decoration: underline;
}

/* Sidebar document item */
.sidebar-doc-item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s;
    position: relative;
}

.sidebar-doc-item:hover {
    background: #F9FAFB;
}

.sidebar-doc-item:hover .sidebar-remove-btn {
    opacity: 1;
}

.sidebar-doc-item.selected {
    background: color-mix(in srgb, var(--doc-color, #10B981) 8%, transparent);
    border-left: 3px solid var(--doc-color, #10B981);
    padding-left: 13px;
}

.sidebar-doc-item .status-icon {
    display: none; /* replaced by SVG icons */
}

.sidebar-doc-item .status-icon-svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar-doc-item .doc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-doc-item .doc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    line-height: 16px;
}

.sidebar-doc-item .doc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6B7280;
    line-height: 14px;
}

.sidebar-doc-item .doc-type-badge,
.sidebar-doc-item .doc-type-pill {
    font-size: 11px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #6B7280;
    font-weight: 400;
}

.sidebar-doc-item .doc-time {
    color: #9CA3AF;
    font-size: 11px;
}

.sidebar-doc-item .doc-time.uploading {
    color: var(--color-info);
    font-size: 0.65rem;
    font-weight: 500;
    background: var(--color-info-bg);
    padding: 2px 6px;
    border-radius: 4px;
}

.sidebar-doc-item .doc-time.queued {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 500;
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Processing timer in sidebar */
.sidebar-doc-item .processing-timer {
    font-size: 0.7rem;
    color: var(--color-primary);
    font-weight: 500;
}

/* Remove button in sidebar */
.sidebar-remove-btn {
    opacity: 0;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.sidebar-remove-btn:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* Detail panel */
.document-detail-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.detail-tabs-container {
    border-bottom: 1px solid #E5E7EB;
    padding: 0;
    background: #fff;
    flex-shrink: 0;
    min-height: 43px;
    /* Tabs on the left, View-pages on the right. Allow children to shrink so
       the button never overlaps the tab strip when space is tight. */
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    overflow: hidden;
}
.detail-tabs-container > .tabs,
#results-section .detail-tabs-container > .tabs {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.detail-tabs-container > .tabs::-webkit-scrollbar,
#results-section .detail-tabs-container > .tabs::-webkit-scrollbar { display: none; }

/* View pages button — opens the left-side PDF panel for the selected doc */
.view-pages-btn {
    align-self: center;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    margin-right: 12px;
    border: 1px solid #E7E5E4;
    border-radius: 8px;
    background: #FFFFFF;
    color: #18181B;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
    white-space: nowrap;
}
.view-pages-btn:hover {
    background: #F5F5F4;
    border-color: #D4D4D8;
}
.view-pages-btn:hover .view-pages-btn-arrow svg { transform: translateX(-2px); }
.view-pages-btn[aria-pressed="true"] {
    background: #ECFDF5;
    border-color: rgba(65, 141, 98, 0.35);
    color: #18181B;
}
.view-pages-btn[aria-pressed="true"] svg { color: #418D62; }
.view-pages-btn-arrow svg { color: #737373; transition: transform 0.12s; }

/* Slim inline hint strip inside the PDF panel — sits between header and
   thumbnails, dismissible via the × on the right. */
.pdf-panel-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 10px;
    background: #FAFAFA;
    border-bottom: 1px solid #F4F4F5;
    font-family: var(--font-body);
    font-size: 11px;
    color: #737373;
}
.pdf-panel-hint kbd {
    display: inline-block;
    margin: 0 2px;
    padding: 0 4px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 3px;
    color: #525252;
    font-family: var(--font-body);
    font-size: 10.5px;
    line-height: 14px;
}
.pdf-panel-hint-dismiss {
    background: transparent;
    border: none;
    color: #A3A3A3;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.pdf-panel-hint-dismiss:hover { color: #525252; }
.pdf-panel-hint[hidden] { display: none !important; }

[data-theme="dark"] .view-pages-btn {
    background: #1A1F26;
    border-color: #30363D;
    color: #E7E9EA;
}
[data-theme="dark"] .view-pages-btn:hover {
    background: #242B33;
    border-color: #3A4148;
}
[data-theme="dark"] .view-pages-btn[aria-pressed="true"] {
    background: rgba(65, 141, 98, 0.16);
    border-color: rgba(65, 141, 98, 0.40);
}
[data-theme="dark"] .view-pages-btn-arrow svg { color: #A1A7AD; }
[data-theme="dark"] .pdf-panel-hint {
    background: rgba(65, 141, 98, 0.12);
    border-color: rgba(65, 141, 98, 0.30);
    color: #6EE7A7;
}

.detail-tabs-container .tabs {
    display: flex !important;
    width: auto !important;
    gap: 0 !important;
    overflow: visible;
    flex-wrap: nowrap !important;
}

.detail-tabs-container .tab {
    flex: none !important;
    text-align: left;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #9CA3AF;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    min-width: 0;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font-family: var(--font-body);
    transition: color 0.15s;
}

.detail-tabs-container .tab:hover {
    color: #374151;
}

.detail-tabs-container .tab.active {
    color: #111827;
    font-weight: 600;
    border-bottom-color: #111827;
}

.detail-tabs-container .tab.active::before {
    display: none;
}

.detail-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.detail-content .document-content-inner {
    max-width: 100%;
}

/* Document type header in detail panel */
.detail-doc-type-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.detail-doc-type-badge {
    background: var(--color-primary);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-doc-filename {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Detail panel content styling */
.detail-content .section-title {
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.detail-content .visual-layout-section .section-title {
    font-size: 0.85rem;
}

.detail-content .table-count-badge {
    font-size: 0.7rem;
}

.no-selection-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    text-align: center;
}

.no-selection-placeholder svg {
    opacity: 0.3;
}

.no-selection-placeholder p {
    font-size: 0.9rem;
}

/* Processing message in detail panel */
.detail-processing-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    gap: var(--spacing-md);
}

.detail-processing-message .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* === Processing detail view v2 — instrument-panel feel === */
.detail-processing-v2 {
    display: flex;
    flex-direction: column;
    padding: 28px 32px;
    gap: 0;
}

.detail-proc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border-color);
}

.detail-proc-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.detail-proc-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.detail-proc-filename {
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.detail-proc-subtitle {
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: var(--text-muted);
}

.detail-proc-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.detail-proc-timer {
    font-family: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.detail-proc-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.detail-proc-cancel-btn:hover {
    background: var(--bg-elevated, #F3F4F6);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Stage timeline */
.detail-proc-stages {
    display: flex;
    align-items: center;
    padding: 28px 0 24px;
    gap: 0;
}

.detail-proc-stage {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.detail-proc-stage-dot {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    flex-shrink: 0;
}

.detail-proc-stage-label {
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
    transition: color 200ms ease, font-weight 200ms ease;
}

.detail-proc-stage.pending .detail-proc-stage-dot {
    background: #FFFFFF;
    border: 2px solid var(--border-color);
}

.detail-proc-stage.pending .detail-proc-stage-label {
    color: var(--text-muted);
}

.detail-proc-stage.active .detail-proc-stage-dot {
    background: #FFFFFF;
    border: 2px solid #3B82F6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
    animation: detailStagePulse 2s ease-in-out infinite;
}

.detail-proc-stage.active .detail-proc-stage-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #3B82F6;
}

.detail-proc-stage.active .detail-proc-stage-label {
    font-weight: 600;
    color: var(--text-primary);
}

.detail-proc-stage.done .detail-proc-stage-dot {
    background: #10B981;
}

.detail-proc-stage.done .detail-proc-stage-dot svg {
    width: 12px;
    height: 12px;
}

@keyframes detailStagePulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.10); }
}

.detail-proc-stage-connector {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    margin: 0 16px;
    transition: background 200ms ease;
    min-width: 24px;
}

.detail-proc-stage-connector.done {
    background: #10B981;
}

/* Progress bar block */
.detail-proc-bar-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 24px;
}

.detail-proc-bar-block .processing-progress-track {
    width: 100%;
    height: 6px;
    background: #F3F4F6;
    border-radius: 999px;
}

.detail-proc-bar-block .processing-progress-bar {
    background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
    border-radius: 999px;
}

.detail-proc-bar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.detail-proc-warm-copy {
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
    transition: opacity 200ms ease;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-proc-eta {
    font-family: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Long-running banner */
.detail-proc-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #B45309;
    font-family: inherit;
    font-size: 13px;
}

.detail-proc-banner svg {
    flex-shrink: 0;
    color: #D97706;
}

.detail-proc-notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-family: inherit;
    font-weight: 500;
    font-size: 12px;
    color: #B45309;
    background: transparent;
    border: 1px solid #FCD34D;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease;
}

.detail-proc-notify-btn:hover {
    background: #FEF3C7;
}

/* Skeleton preview block */
.detail-proc-skeleton {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    background: var(--bg-elevated, #FAFBFC);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.detail-proc-skeleton-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detail-proc-skeleton-label {
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detail-proc-skeleton-hint {
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.detail-proc-skeleton-row {
    display: flex;
    gap: 12px;
}

.detail-proc-skeleton-bar {
    height: 11px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ECEEF2 0%, #F3F4F6 50%, #ECEEF2 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 2.4s ease-in-out infinite;
}

.detail-proc-skeleton-bar.lighter {
    background: linear-gradient(90deg, #F1F2F5 0%, #F7F8FA 50%, #F1F2F5 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 2.8s ease-in-out infinite;
}

@keyframes skeletonShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.detail-proc-skeleton-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.sidebar-doc-item.processing {
    background: #F8FAFF;
    border: 1px solid #BFDBFE;
}

/* Selected document header in detail panel - simplified */
.selected-doc-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.selected-doc-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.selected-doc-actions {
    display: flex;
    gap: 6px;
}

/* Verification modal - improved */
#verification-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#verification-modal .modal-content {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    max-width: 800px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

#verification-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

#verification-modal .modal-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

#verification-modal .modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

#verification-modal .modal-close:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

#verification-modal .modal-body {
    overflow-y: auto;
    padding: 20px;
    flex: 1;
}

/* Verification status styling */
.verification-status-box {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.verification-status-box.success {
    background: var(--color-success-bg);
    border: 1px solid rgba(65, 141, 98, 0.3);
    color: var(--color-success);
}

.verification-status-box.error {
    background: var(--color-error-bg);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: var(--color-error);
}

.verification-status-box .status-icon {
    font-size: 1.2rem;
}

/* Verification button color based on status */
#verification-btn.has-conflicts {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
}

#verification-btn.no-conflicts {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}

/* Responsive: Stack on mobile */
@media (max-width: 900px) {
    .app-top-nav { padding: 0 16px; }
    .app-nav-links { gap: 0; }
    .app-nav-link { padding: 6px 10px; font-size: 12px; }
    #results-section.active {
        min-height: auto;
        height: auto;
        overflow: visible;
    }
    .results-layout {
        flex-direction: column;
        height: auto;
        padding: 0 16px 16px;
    }

    .documents-sidebar {
        width: 100%;
        max-height: 180px;
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
    }

    .documents-list-sidebar {
        max-height: none;
    }

    .document-detail-panel {
        min-height: 400px;
    }

    .detail-tabs-container .tab {
        padding: 10px 14px;
        font-size: 12px;
    }
}

/* ================================================
   End Master-Detail Layout
   ================================================ */

/* Document Cards */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.document-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    width: 100%;
    max-width: 100%;
}

.document-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.document-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-card);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px solid transparent;
}

.document-header:hover {
    background: rgba(65, 141, 98, 0.08);
}

.document-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    overflow: hidden;
}

.document-title > span {
    flex-shrink: 0;
    white-space: nowrap;
}

.document-icon {
    display: none; /* Hide icon placeholders for cleaner look */
}

.document-toggle {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.document-content {
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-top: 1px solid var(--border-color-light);
    display: none;
    background: var(--bg-card);
    width: 100%;
    overflow-x: hidden;
}

.document-card.expanded .document-content {
    display: block;
}

/* Collapsible Sections (Visual Layout, etc.) */
.collapsible-section {
    margin-bottom: 16px;
}

.collapsible-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 12px 0;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.collapsible-header:hover {
    background: rgba(65, 141, 98, 0.05);
    margin: 0 -8px;
    padding: 12px 8px;
}

.collapsible-toggle {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.collapsible-content {
    display: none;
    padding-top: 8px;
}

.collapsible-section.expanded .collapsible-content {
    display: block;
}

/* Tables */
.data-table-container {
    overflow-x: auto;
    overflow-y: visible;
    margin: 16px 0;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color-light);
    box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    position: relative;
}


.data-table {
    width: max-content;
    border-collapse: collapse;
    font-size: 0.9rem;
    table-layout: auto;
}

.data-table th {
    background: var(--bg-sidebar);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color-light);
    white-space: nowrap;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-primary);
    white-space: nowrap;
    min-width: fit-content;
    vertical-align: middle;
}

/* Date column — wide enough for the full long-date format. */
.data-table th:first-child,
.data-table td:first-child {
    min-width: 140px;
    white-space: nowrap;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: rgba(65, 141, 98, 0.05);
}

.data-table .tampered {
    background: rgba(148, 163, 184, 0.15) !important;
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border-left: 2px solid rgba(148, 163, 184, 0.4);
    opacity: 0.6;
    text-decoration: line-through;
}

.data-table .bounced-row {
    background: rgba(220, 53, 69, 0.06) !important;
}

.data-table .reversed-row {
    background: rgba(253, 126, 20, 0.06) !important;
}

/* Metadata Display */
.metadata-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.metadata-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metadata-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metadata-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Beautiful Metadata Section Styling (Canonical 9 Fields) */
.metadata-section {
    margin-bottom: 24px;
}

.metadata-grid-beautiful {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.metadata-item-beautiful {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: all var(--transition-normal);
}

.metadata-item-beautiful:hover {
    border-color: var(--color-primary);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}

.metadata-label-beautiful {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.metadata-value-beautiful {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}

.metadata-value-beautiful.currency {
    font-family: var(--font-mono);
    color: var(--color-primary);
    font-weight: 600;
}

.metadata-value-beautiful.date {
    color: var(--color-highlight);
}

.metadata-null {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.95rem;
    opacity: 0.6;
}

/* Verification Results */
.verification-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.verification-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.verification-card.conflict {
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

.verification-card.success {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.verification-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.verification-icon {
    display: none; /* Hide icon placeholders for cleaner look */
}

.verification-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
}

.verification-values {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.verification-value {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.verification-filename {
    color: var(--text-muted);
}

/* Summary Stats */
.summary-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 100%;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    width: 100%;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-align: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    min-width: 0;
    width: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metric-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.metric-card.metric-unavailable {
    background: #f9fafb;
    border-color: #d1d5db;
    opacity: 0.7;
}

.metric-card.metric-unavailable .metric-value {
    color: #9ca3af;
    font-style: italic;
}

.metric-card.metric-unavailable:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: #d1d5db;
}

.metric-value {
    font-size: clamp(0.9rem, 1.8vw, 1.4rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-family: var(--font-heading);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.metric-card:hover .metric-value {
    color: var(--text-primary);
}

.metric-label {
    font-size: clamp(0.8rem, 1.2vw, 0.9rem);
    color: var(--text-secondary);
    font-weight: 500;
    word-wrap: break-word;
}

.metric-delta {
    font-size: 0.8rem;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-block;
}

.metric-delta.positive {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    font-weight: 600;
}

.metric-delta.negative {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* Time Period */
.time-period-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.time-period-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
}

.time-period-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.time-period-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-highlight-dark);
}

/* Toast Notifications — pinned below the 56px sticky top nav */
.toast-container {
    position: fixed;
    top: 72px;
    right: 24px;
    z-index: 9999; /* Below the top nav (z 10000) so the nav always wins on overlap */
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; /* Allow clicks to pass through container */
}

.toast-container .toast {
    pointer-events: auto; /* But toasts themselves are clickable */
}

.toast {
    padding: 12px 16px;
    border-radius: 10px;
    background: #FFFFFF;
    border-left: 3px solid #6B7280;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideIn var(--transition-normal);
    min-width: 320px;
    max-width: 420px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast.success { border-left-color: #418D62; }
.toast.error   { border-left-color: #B91C1C; }
.toast.warning { border-left-color: #92400E; }
.toast.info    { border-left-color: #18181B; }

.toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.toast.success .toast-icon { background: #ECFDF5; color: #418D62; }
.toast.error .toast-icon   { background: #FEE2E2; color: #B91C1C; }
.toast.warning .toast-icon { background: #FEF3C7; color: #92400E; }
.toast.info .toast-icon    { background: #F5F5F4; color: #18181B; }

.toast-icon svg {
    width: 14px;
    height: 14px;
}

.toast-message {
    flex: 1;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-primary, #1A1A1A);
}

.toast-dismiss {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    color: #9CA3AF;
    transition: background 0.15s ease;
}
.toast-dismiss:hover {
    background: rgba(0,0,0,0.05);
}

/* Error Fallback Screen */
.error-fallback-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #ffffff);
    animation: errorFadeIn 0.3s ease;
}

@keyframes errorFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.error-fallback-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 420px;
    padding: 48px 32px;
}

.error-fallback-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--color-error-bg, rgba(220, 38, 38, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.error-fallback-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin-bottom: 8px;
    line-height: 1.3;
}

.error-fallback-message {
    font-size: 14px;
    color: var(--text-muted, #6b7280);
    line-height: 1.6;
    margin-bottom: 28px;
}

.error-fallback-message a {
    color: var(--color-primary, #418D62);
    text-decoration: none;
    font-weight: 500;
}

.error-fallback-message a:hover {
    text-decoration: underline;
}

.error-fallback-actions {
    display: flex;
    gap: 12px;
}

.error-fallback-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.error-fallback-btn-primary {
    background: var(--color-primary, #418D62);
    color: #ffffff;
}

.error-fallback-btn-primary:hover {
    background: var(--color-primary-dark, #367a53);
    box-shadow: 0 2px 8px rgba(65, 141, 98, 0.25);
}

.error-fallback-btn-secondary {
    background: var(--bg-hover, #f0ede6);
    color: var(--text-primary, #1a1a2e);
}

.error-fallback-btn-secondary:hover {
    background: var(--border-color, #e2e8f0);
}

/* Inline error fallback (for sections/panels) */
.error-fallback-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    gap: 8px;
}

.error-fallback-inline .error-fallback-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    margin-bottom: 16px;
}

.error-fallback-inline .error-fallback-title {
    font-size: 14px;
}

.error-fallback-inline .error-fallback-message {
    font-size: 13px;
    margin-bottom: 20px;
}

/* Section Divider */
.section-divider {
    height: 1px;
    background: var(--border-color);
    margin: 24px 0;
}

/* Section Title */
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    word-wrap: break-word;
    width: 100%;
}

/* Formula Tooltip Styles */
.formula-tooltip {
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.formula-tooltip::-webkit-scrollbar {
    width: 6px;
}

.formula-tooltip::-webkit-scrollbar-track {
    background: var(--bg-input);
    border-radius: 3px;
}

.formula-tooltip::-webkit-scrollbar-thumb {
    background: var(--border-color-light);
    border-radius: 3px;
}

.formula-tooltip::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.info-icon-wrapper {
    position: relative;
}

.info-icon:hover + .formula-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Keep tooltip visible when hovering over it */
.formula-tooltip:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Validation Flag Tooltip */
.validation-flag {
    position: relative;
}

.validation-flag::after {
    content: attr(data-explanation);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
    max-width: 300px;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1000;
    pointer-events: none;
    text-align: left;
    line-height: 1.4;
}

.validation-flag:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Arrow for validation tooltip */
.validation-flag::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--border-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1001;
}

.validation-flag:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Raw Text Display */
.raw-text-toggle {
    margin: 16px 0;
}

.raw-text-toggle summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    position: relative;
    padding-left: 20px;
}

.raw-text-toggle summary::-webkit-details-marker {
    display: none;
}

/* Add arrow indicator - right when closed, down when open */
.raw-text-toggle summary::before {
    content: '▶';
    position: absolute;
    left: 0;
    transition: transform var(--transition-fast);
    display: inline-block;
}

.raw-text-toggle[open] summary::before {
    transform: rotate(90deg);
}

/* Tables toggle (for bills) */
.tables-toggle summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    position: relative;
    padding-left: 20px;
}

.tables-toggle summary::-webkit-details-marker {
    display: none;
}

/* Add arrow indicator - right when closed, down when open */
.tables-toggle summary::before {
    content: '▶';
    position: absolute;
    left: 0;
    transition: transform var(--transition-fast);
    display: inline-block;
}

.tables-toggle[open] summary::before {
    transform: rotate(90deg);
}

.raw-text-block {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
}

.raw-text-block h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}

.raw-text-block h3:first-child {
    margin-top: 0;
}

.raw-text-block table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.raw-text-block table th {
    background: var(--bg-sidebar);
    color: var(--text-primary);
    font-weight: 600;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.raw-text-block table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.raw-text-block table tr:last-child td {
    border-bottom: none;
}

.raw-text-block table tr:hover {
    background: var(--bg-card-hover);
}

.raw-text-block table tr:hover td {
    color: var(--text-primary);
}

.raw-text-table-container {
    margin: 20px 0;
    overflow-x: auto;
}

.raw-text-table-container table {
    min-width: 100%;
}

/* Raw Transcription Output - for non-transaction documents */
.raw-text-output {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    max-height: 800px;
    overflow-y: auto;
}

.raw-text-output::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.raw-text-output::-webkit-scrollbar-track {
    background: var(--bg-input);
    border-radius: 4px;
}

.raw-text-output::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.raw-text-output::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.raw-transcription-section {
    margin-top: var(--spacing-lg);
}

.raw-transcription-section .section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Standardized Transcription Styles */
.standardized-transcription-content {
    width: 100%;
}

.standardized-heading {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
}

.standardized-heading:first-child {
    margin-top: 0;
}

.standardized-table-container {
    margin: 16px 0 32px 0;
    /* Horizontal scroll for wide tables instead of squeezing columns. */
    overflow-x: auto;
    overflow-y: auto;
    max-height: 600px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.standardized-table {
    /* Size purely to content so each column ends at its longest cell —
     * no trailing whitespace inside the Description column. The container
     * scrolls horizontally if the total exceeds the panel. */
    width: auto;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.875rem;
    table-layout: auto;
}

.standardized-table th {
    background: var(--bg-sidebar);
    color: var(--text-primary);
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.standardized-table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    /* Every column stays on one line — bank-statement style. The container
     * scrolls horizontally when content overflows. */
    white-space: nowrap;
    vertical-align: middle;
}

/* Description column — single line, sized to its longest entry only. */
.standardized-table th:nth-child(2),
.standardized-table td:nth-child(2) {
    white-space: nowrap;
    width: 1px;
}

/* Date column — wide enough for full "September 30, 2025" without wrapping. */
.standardized-table th:first-child,
.standardized-table td:first-child {
    min-width: 140px;
    white-space: nowrap;
}

.standardized-table tr:last-child td {
    border-bottom: none;
}

.standardized-table tr:hover {
    background: var(--bg-card-hover);
}

.standardized-table tr:hover td {
    color: var(--text-primary);
}

/* Structural marker rows (page breaks, starting/ending balances) */
.standardized-table tr.structural-marker {
    background: rgba(255, 255, 255, 0.03);
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.standardized-table tr.structural-marker td {
    font-weight: 600;
    color: var(--text-primary);
    padding: 12px 16px;
}

.standardized-table tr.starting-balance {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
}

.standardized-table tr.ending-balance {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}

.standardized-table tr.final-balance {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
}

.standardized-table tr.structural-marker:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Make numeric columns right-aligned */
.standardized-table td:nth-child(n+4) {
    text-align: right;
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

/* Description + reference columns stay single-line, matching the rest. */
.standardized-table td:nth-child(2),
.standardized-table td:nth-child(3) {
    white-space: nowrap;
}

/* Metadata table specific styling (2 columns: Field, Value) */
.standardized-table-container:first-of-type .standardized-table th:first-child,
.standardized-table-container:first-of-type .standardized-table td:first-child {
    width: 200px;
    font-weight: 600;
    white-space: nowrap;
}

.standardized-table-container:first-of-type .standardized-table td:nth-child(2) {
    text-align: left;
    white-space: normal;
    max-width: none;
}

/* Parsed Images Display */
.parsed-images-container {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Document Pages with Bounding Boxes */
.document-pages-container {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Paginated Visual Layout */
.visual-layout-section {
    margin-bottom: 24px;
}

.visual-layout-viewer {
    margin-top: 16px;
}

/* Swipeable container */
.document-pages-container-paginated.swipeable {
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
}

.document-pages-container-paginated.swipeable:active {
    cursor: grabbing;
}

/* Inline pagination arrows */
.pagination-arrow {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.25rem;
    padding: 4px 12px;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.pagination-arrow:hover:not(:disabled) {
    background: var(--bg-card-hover);
    color: var(--color-primary);
    transform: scale(1.1);
}

.pagination-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Page info inline with arrows */
.page-info-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.page-count-inline {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.current-page-inline {
    color: var(--color-primary);
    font-weight: 600;
}

.document-pages-container-paginated {
    margin: 0;
}

.document-page-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    overflow: hidden;
}

.document-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
}

.document-page-number {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.document-page-blocks {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 4px 8px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.document-page-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 200px;
}

.document-page-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* Loading label above spinner */
.document-page-wrapper::before {
    content: 'Loading page\2026';
    position: absolute;
    top: calc(50% - 32px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
    pointer-events: none;
    z-index: 1;
}

.document-page-wrapper.loaded::before {
    display: none;
}

/* Spinner centered in wrapper while page image loads */
.document-page-wrapper::after {
    content: '';
    position: absolute;
    top: calc(50% + 4px);
    left: 50%;
    margin-left: -14px;
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--color-primary, #6366f1);
    border-radius: 50%;
    animation: page-spin 0.7s linear infinite;
    pointer-events: none;
}

.document-page-wrapper.loaded::after {
    display: none;
}

@keyframes page-spin {
    to { transform: rotate(360deg); }
}

.document-page-image {
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.page-preview-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-color);
    max-width: 600px;
    width: 100%;
}

.bounding-box-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.parsed-image-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    overflow: hidden;
}

.parsed-image-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.parsed-image-type {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
    padding: 4px 12px;
    background: var(--bg-sidebar);
    border-radius: var(--radius-sm);
}

.parsed-image-page {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 4px 8px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.parsed-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 200px;
}

.parsed-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.parsed-image-error {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.section-subtitle {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* All headings use Sora */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

/* Table Count Badge (in document header) */
.table-count-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    background: var(--color-info-bg);
    color: var(--color-info);
    border-radius: 999px;
    margin-left: 12px;
}

/* Table Type Badge (color-coded by type) */
.table-type-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    margin-right: 8px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    transition: all var(--transition-fast);
}

.table-type-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.table-type-badge.success {
    background-color: #10b981;
    color: white;
}

.table-type-badge.warning {
    background-color: #f59e0b;
    color: white;
}

.document-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    margin-right: 8px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.document-badge.success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

/* Prevent horizontal overflow in validation data */
.validation-data-display {
    width: 100%;
    overflow-x: auto;
    max-width: 100%;
}

.validation-data-display .metadata-grid,
.validation-data-display .table-container {
    max-width: 100%;
    overflow-x: auto;
}

/* Table Meta Info (rows x cols) */
.table-meta {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: auto;
}

/* Tables Summary Bar */
.tables-summary {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.summary-item {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Table Section Styling */
.table-section {
    margin-bottom: 8px;
}

/* Fraud Summary Box */
.fraud-summary-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.fraud-summary-box.clean {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
}

.fraud-summary-box.has-issues {
    background: rgba(252, 211, 77, 0.5);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1), 
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.fraud-icon {
    display: none; /* Hide icon placeholders for cleaner look */
}

.fraud-summary-text {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.fraud-summary-text strong {
    font-weight: 600;
}

/* Fraud Table Section */
.fraud-table-section {
    margin-bottom: 16px;
}

/* Tamper Badge */
.tamper-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 12px;
}

.tamper-badge.warning {
    background: rgba(252, 211, 77, 0.6);
    backdrop-filter: blur(10px) saturate(170%);
    -webkit-backdrop-filter: blur(10px) saturate(170%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #92400e;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.tamper-badge.success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

/* Light section divider */
.section-divider.light {
    background: var(--border-color);
    opacity: 0.5;
    margin: 16px 0;
}

/* ================================================
   LOGIN PAGE
   ================================================ */

.login-page {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 100vh;
    background: #FFFFFF;
}

/* Left panel: form column, half-width on desktop, full width on mobile */
.login-left-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 50%;
    min-width: 0;
    padding: 32px 64px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.login-left-top {
    display: flex;
    align-items: center;
}

.login-left-center {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 432px;
    margin: 0 auto;
    align-self: center;
}

.login-left-bottom {
    display: flex;
    justify-content: center;
}

.login-footer-legal {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 18px;
    color: #A3A3A3;
    text-align: center;
}

.login-legal-link {
    color: #18181B;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-legal-link:hover {
    color: #418D62;
}

/* Right panel: visual composition, hidden on narrow viewports */
.login-right-panel {
    flex: 1 1 50%;
    min-width: 0;
    background: #FAFAF7;
    border-left: 1px solid #E7E5E4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.login-visual {
    display: flex;
    align-items: center;
    gap: 48px;
}

/* Document mock */
.login-visual-doc {
    width: 280px;
    padding: 32px 28px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 36, 33, 0.06), 0 2px 6px rgba(31, 36, 33, 0.04);
    transform: rotate(-3deg);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.login-visual-doc-title {
    width: 160px;
    height: 14px;
    background: #18181B;
    border-radius: 3px;
}
.login-visual-doc-sub {
    width: 90px;
    height: 8px;
    background: #A3A3A3;
    border-radius: 2px;
    opacity: 0.5;
}
.login-visual-doc-line {
    height: 6px;
    background: #E7E5E4;
    border-radius: 2px;
}
.login-visual-doc-spacer { height: 12px; }
.login-visual-doc-spacer-sm { height: 8px; }
.login-visual-doc-row {
    display: flex;
    gap: 10px;
}
.login-visual-doc-cell {
    flex: 1;
    height: 32px;
    background: #FAFAFA;
    border: 1px solid #E7E5E4;
    border-radius: 4px;
}

/* Data card — extracted output */
.login-visual-data {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 260px;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(31, 36, 33, 0.08), 0 2px 8px rgba(31, 36, 33, 0.04);
    transform: rotate(2deg);
}
.login-visual-data-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.login-visual-data-dot {
    width: 6px;
    height: 6px;
    background: #418D62;
    border-radius: 50%;
}
.login-visual-data-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11.5px;
    color: #A3A3A3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.login-visual-data-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.login-visual-data-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px solid #F5F5F4;
}
.login-visual-data-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.login-visual-data-key {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: #737373;
}
.login-visual-data-value {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: #18181B;
    letter-spacing: -0.005em;
}
.login-visual-data-value--accent {
    color: #418D62;
}

/* Below 900px viewport: hide the right panel; left panel fills the screen */
@media (max-width: 900px) {
    .login-right-panel {
        display: none;
    }
    .login-left-panel {
        width: 100%;
        padding: 32px 32px;
    }
}

/* Heading group — title + subtitle stacked, centered text */
.login-heading-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    padding-bottom: 4px;
}

/* Card Entrance Animation */
@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-card-animated {
    animation: cardEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.login-logo-wrapper {
    display: flex;
    justify-content: flex-start;
}

.login-logo {
    width: 70px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/* Header — sentence-style headline + warm subhead, centered to match heading group */
.login-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.login-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: #18181B;
    margin: 0;
}

.login-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    color: #737373;
    font-size: 15px;
    line-height: 22px;
    margin: 0;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Readonly Email Field */
.login-input.readonly-field {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: default;
    border-color: var(--border-color);
}

.login-input.readonly-field:focus {
    box-shadow: none;
    transform: none;
}

/* Change Email Button */
.change-email-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s;
    font-family: var(--font-secondary);
}

.change-email-btn:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Progressive Fields Animation */
#auth-fields-container {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#auth-fields-container.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Label row — label + forgot link side by side */
.login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forgot-password {
    font-size: 0.75rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 400;
}

.forgot-password:hover {
    text-decoration: underline;
}

.login-label {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 18px;
    color: #18181B;
    font-weight: 500;
}

/* Input Wrapper for Icons */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Password input needs extra right padding for toggle button */
#login-password {
    padding-right: 44px;
}

.login-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #E7E5E4;
    background: #FFFFFF;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 22px;
    color: #18181B;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-input::placeholder {
    color: #A3A3A3;
}

.login-input:focus {
    outline: none;
    border-color: #418D62;
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.12);
}

/* Field Error Messages */
.field-error {
    font-size: 0.75rem;
    color: var(--color-error);
    display: block;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.field-error:empty {
    display: none;
}

.field-error:not(:empty) {
    margin-top: -4px;
    opacity: 1;
    transform: translateY(0);
}

/* Checkbox Field (Remember Me) */
.checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin-top: 2px;
}

.checkbox-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.checkbox-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.login-button {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border-radius: 10px;
    background: #418D62;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.005em;
    color: #FFFFFF;
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.login-button:hover {
    box-shadow: 0 4px 12px rgba(65, 141, 98, 0.25);
}

.login-button:active {
    box-shadow: none;
}

/* Email Verification Code Inputs */
.verification-container {
    margin: 20px 0;
    padding: 20px;
    background: var(--bg-input);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.verification-code-inputs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.code-input {
    width: 45px;
    height: 56px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.code-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.2);
    transform: scale(1.05);
}

.code-input:not(:placeholder-shown) {
    border-color: var(--color-primary);
}

.verification-timer {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.verification-timer #timer-display {
    font-weight: 600;
    color: var(--color-primary);
}

.resend-code-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.resend-code-btn:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.resend-code-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.verification-email-notice {
    text-align: center;
    padding: 10px 0;
}

.resend-link-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.resend-link-btn:hover:not(:disabled) {
    color: var(--color-primary-dark, #367a53);
}

.resend-link-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    text-decoration: none;
}

/* Error Container */
/* `display: contents` makes the wrapper transparent to the card's flex flow,
   so when the inner .login-error is hidden no gap is contributed. */
.login-error-container {
    display: contents;
}

.login-error {
    display: none !important;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    width: 100%;
    background: #FBEDE9;
    border: 1px solid #EDD0C7;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 18px;
    color: #B53D2E;
    text-align: left;
    margin: -19px 0 0 0;
}

.login-error[style*="display: flex"],
.login-error[style*="display:flex"] {
    display: flex !important;
}

.error-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.error-text {
    flex: 1;
    line-height: 18px;
}

@keyframes errorSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Terms of Service */
.login-terms {
    margin-top: 16px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    opacity: 0.8;
}

.terms-link {
    color: var(--text-muted);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.terms-link:hover {
    color: var(--color-primary);
}

.login-help {
    margin-top: 12px;
    text-align: center;
    font-size: 0.85rem;
}

.login-help-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.login-help-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Footer Toggle (Login/Signup switch) */
.login-footer-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #737373;
    margin: 0;
}

.login-footer-link {
    color: #418D62;
    font-weight: 700;
    text-decoration: none;
    margin-left: 0;
}

.login-footer-link:hover {
    text-decoration: underline;
}

/* OR Separator */
.login-separator {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 12px;
}

.login-separator-line {
    flex: 1;
    height: 1px;
    background: #E7E5E4;
}

.login-separator-text {
    font-family: var(--font-body);
    color: #A3A3A3;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Google Sign-In Wrapper */
.google-signin-wrapper {
    margin-top: 0;
    display: flex;
    justify-content: center;
}

/* Google Sign-In Button Container */
#google-signin-btn {
    width: 100%;
    height: 46px;
    border: 1px solid #E7E5E4;
    border-radius: 10px;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
    padding: 0;
    background: #FFFFFF;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: #18181B;
}

#google-signin-btn:hover {
    background: #FAFAFA;
    border-color: #D4D4D8;
}

#google-signin-btn:active {
    background: #F5F5F4;
}

/* Style the Google button iframe inside */
#google-signin-btn > div {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

#google-signin-btn iframe {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: var(--radius-md);
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force Google button content to fill width */
#google-signin-btn > div > div {
    width: 100% !important;
}

#google-signin-btn button {
    width: 100% !important;
    min-width: 100% !important;
}

/* ================================================
   MICRO-INTERACTIONS & ANIMATIONS
   ================================================ */

/* Password Toggle Button */
.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-muted);
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    z-index: 10;
}

.password-toggle:hover {
    color: var(--color-primary);
    background: rgba(65, 141, 98, 0.1);
}

.password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

.password-toggle:focus {
    outline: 2px solid var(--color-primary-glow);
    outline-offset: 2px;
}

/* Input Validation Icons */
.input-validation-icon {
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    pointer-events: none;
}

.input-validation-icon::after {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-success);
    font-weight: bold;
    font-size: 16px;
}

.input-valid .input-validation-icon {
    opacity: 1;
    transform: scale(1);
}

.input-invalid .login-input {
    border-color: var(--color-error);
    background: rgba(239, 68, 68, 0.05);
}

.input-invalid .login-input:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Button Loading State */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
}

.btn-loading .btn-text {
    opacity: 0;
}

.btn-loading .btn-spinner {
    display: flex !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-spinner {
    display: none;
    align-items: center;
    justify-content: center;
}

/* Spinner Animation */
.spinner-icon {
    animation: spin 1.2s linear infinite;
    /* Slowed down for smoother performance */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner-icon circle {
    stroke: currentColor;
}

.spinner-icon path {
    stroke: currentColor;
}

/* Enhanced Input Focus Animation */
.login-input:focus {
    animation: inputFocusPulse 0.3s ease-out;
}

@keyframes inputFocusPulse {
    0% {
        box-shadow: 0 0 0 0 var(--color-primary-glow);
    }
    50% {
        box-shadow: 0 0 0 4px var(--color-primary-glow);
    }
    100% {
        box-shadow: 0 0 0 3px var(--color-primary-glow);
    }
}

/* Button Press Animation */
.btn-primary:active:not(.btn-loading) {
    animation: buttonPress 0.2s ease-out;
}

@keyframes buttonPress {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

/* Responsive Styles */
@media (max-width: 480px) {
    .login-card {
        padding: 36px 24px;
        gap: 28px;
        border-radius: 14px;
        max-width: 100%;
    }

    .login-title {
        font-size: 22px;
        line-height: 28px;
    }
}

@media (max-width: 360px) {
    .login-card {
        padding: 24px 20px 20px;
    }
    
    .field-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Sidebar footer + logout button */
.sidebar-footer {
    padding: 16px 20px;
    border-top: 2px solid var(--border-color-light);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-footer .nav-item {
    margin-bottom: 4px;
    padding: 14px 16px;
}

.sidebar-footer .nav-item.support-link {
    color: var(--text-secondary);
}

.sidebar-footer .nav-item.support-link:hover {
    background: rgba(65, 141, 98, 0.1);
    color: var(--text-primary);
}

.settings-button {
    width: 100%;
    justify-content: center;
    font-size: 0.85rem;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    margin-top: 8px;
}

.settings-button:hover {
    background: var(--bg-hover);
    border-color: var(--color-highlight);
}

/* Settings Panel */
.settings-panel {
    position: fixed;
    bottom: 70px;
    left: 20px;
    width: calc(var(--sidebar-width) - 40px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    animation: slideUp 0.15s ease-out;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-logout-btn {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.settings-logout-btn:hover {
    background: #fee;
    border-color: #fcc;
    color: #c33;
}

.settings-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-hover);
    border-radius: 6px;
}

.settings-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.settings-value {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 600;
}

.settings-value.admin {
    color: var(--color-highlight);
}

.settings-value.enterprise {
    color: #9333ea;
}

/* Theme Toggle Switch */
.theme-toggle {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
    cursor: pointer;
}

.theme-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 28px;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}

.theme-toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 2px;
    background: var(--color-primary);
    border-radius: 50%;
    transition: all var(--transition-fast);
    z-index: 2;
}

.theme-toggle input:checked + .theme-toggle-slider::before {
    transform: translateX(26px);
    background: var(--color-highlight);
}

.theme-icon {
    font-size: 12px;
    z-index: 1;
    transition: opacity var(--transition-fast);
}

.theme-icon.light {
    opacity: 1;
}

.theme-icon.dark {
    opacity: 0.4;
}

.theme-toggle input:checked + .theme-toggle-slider .theme-icon.light {
    opacity: 0.4;
}

.theme-toggle input:checked + .theme-toggle-slider .theme-icon.dark {
    opacity: 1;
}

/* ================================================
   STREAMING / PROGRESSIVE LOADING STYLES
   ================================================ */

/* Live processing indicator */
.live-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Sidebar stage label pulse — used while a doc is actively processing so
 * the colored "Uploading" / "Processing" / "Extracting" text breathes,
 * making it visible at a glance which doc the worker is on. */
.doc-stage-shortform {
    color: #1D4ED8;
    font-weight: 500;
}
.doc-stage-shortform.doc-stage-blinking {
    animation: docStagePulse 1.4s ease-in-out infinite;
}
@keyframes docStagePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
[data-theme="dark"] .doc-stage-shortform { color: #60A5FA; }

@keyframes dotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* Animated "..." dots for uploading/queued states */
.dot-animation::after {
    content: '';
    animation: dotCycle 1.5s steps(1) infinite;
}

@keyframes dotCycle {
    0%      { content: ''; }
    25%     { content: '.'; }
    50%     { content: '..'; }
    75%     { content: '...'; }
}

.success-text { color: var(--color-success); }
.error-text { color: var(--color-error); }
.warning-text { color: var(--color-warning); }

/* Status badges for cards */
.status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.uploading {
    background: var(--color-info-bg);
    color: var(--color-info);
    border: 1px solid var(--color-info);
    animation: processingPulse 1.5s ease-in-out infinite;
}

.status-badge.pending {
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.status-badge.processing {
    background: var(--color-info-bg);
    color: var(--color-info);
    animation: processingPulse 1.5s ease-in-out infinite;
}

@keyframes processingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.status-badge.failed {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.status-badge.cancelled {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* Card states */
.document-card.pending {
    opacity: 0.6;
    border-style: dashed;
}

.document-card.processing {
    border-color: var(--color-info);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}

.document-card.processing .document-header {
    background: linear-gradient(90deg, var(--bg-sidebar) 0%, rgba(59, 130, 246, 0.1) 100%);
}

.document-card.failed {
    border-color: #d1d5db;
    opacity: 0.85;
}

.document-card.cancelled {
    border-color: var(--color-warning);
    opacity: 0.7;
}

/* Cancel button for processing/pending documents */
.cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin-left: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cancel-btn:hover {
    color: var(--color-error);
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

.cancel-btn svg {
    flex-shrink: 0;
}

.document-card.completed {
    animation: cardComplete 0.4s ease-out;
}

@keyframes cardComplete {
    from {
        opacity: 0.5;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spinning icon */
.spinning {
    display: inline-block;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Skeleton Loader */
.skeleton-loader {
    padding: 20px;
}

.skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-color) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 12px;
}

.skeleton-line.wide { width: 80%; }
.skeleton-line.medium { width: 60%; }
.skeleton-line.narrow { width: 40%; }

/* Activity Skeleton Items */
.activity-skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
}
.activity-skeleton-item .skeleton-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-color) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.activity-skeleton-item .skeleton-details {
    flex: 1;
    min-width: 0;
}
.activity-skeleton-item .skeleton-line {
    margin-bottom: 0;
}
.activity-skeleton-item .skeleton-title {
    height: 16px;
    width: 55%;
    margin-bottom: 8px;
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-color) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}
.activity-skeleton-item .skeleton-meta {
    height: 12px;
    width: 35%;
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-color) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}
.activity-skeleton-item .skeleton-badge {
    width: 64px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-color) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Page Loading Bar */
.page-loading-bar {
    margin-bottom: 1rem;
}

.page-loading-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.page-loading-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    background: var(--color-info-bg);
    color: var(--color-info);
    border-radius: 999px;
    min-width: 32px;
    height: 24px;
    transition: all 0.3s ease;
}

.page-loading-pill.loading {
    background: var(--color-info-bg);
    opacity: 0.8;
    /* Simplified - no animation for better performance */
}

.page-loading-pill.pulse {
    opacity: 0.6;
    /* Simplified - no animation for better performance */
}

.skeleton-table {
    margin-top: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.skeleton-row {
    height: 40px;
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-color) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-bottom: 1px solid var(--border-color);
}

.skeleton-row:last-child {
    border-bottom: none;
}

@keyframes shimmer {
    to { background-position: 200% 0; }
    /* Simplified for better performance */
}

/* Info Box */
.info-box {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    color: var(--color-info);
    font-size: 0.95rem;
}

.success-box {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    color: var(--color-success);
    font-size: 0.95rem;
}

.error-box {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    color: var(--color-error);
    font-size: 0.95rem;
}

.info-box.muted {
    background: rgba(107, 114, 128, 0.08);
    border: 1px solid #d1d5db;
    color: #6b7280;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-input);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color-light);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Responsive */
@media (max-width: 1200px) {
    /* metrics-grid now uses auto-fit, no override needed */
    
    .metadata-grid {
        grid-template-columns: 1fr;
    }
    
    .main-content {
        padding: 32px 40px;
    }
}

@media (max-width: 900px) {
    .sidebar {
        width: 70px;
    }
    
    .logo-container,
    .sidebar-footer {
        display: none;
    }
    
    .nav-item span:not(.nav-icon) {
        display: none;
    }
    
    .nav-item {
        justify-content: center;
        padding: 14px;
    }
    
    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 24px 32px;
    }

    .upload-methods {
        grid-template-columns: 1fr;
    }
    
    /* metrics-grid now uses auto-fit with min 220px, will auto-collapse */
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    /* Layout adjustments */
    .app-container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        flex-direction: row;
        border-right: none;
        border-bottom: 2px solid var(--border-color-light);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .logo-container {
        display: flex;
        padding: 12px 16px;
        border-bottom: none;
        border-right: 2px solid var(--border-color-light);
    }
    
    .logo {
        width: 100px;
    }
    
    .nav-menu {
        flex: 1;
        display: flex;
        flex-direction: row;
        padding: 8px;
        gap: 4px;
    }
    
    .nav-item {
        flex: 1;
        justify-content: center;
        padding: 12px 8px;
        font-size: 0.85rem;
        margin-bottom: 0;
    }
    
    .nav-item span:not(.nav-icon) {
        display: inline;
    }
    
    .sidebar-footer {
        display: none;
    }
    
    .main-content {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        padding: 24px 24px;
        min-height: calc(100vh - 60px);
    }

    /* Typography */
    .section-header h1 {
        font-size: 1.5rem;
    }
    
    .subtitle {
        font-size: 0.9rem;
    }
    
    .upload-mode-toggle {
        width: 100%;
        max-width: 100%;
    }

    .mode-toggle-btn {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    /* Studio Layout */
    .studio-layout {
        gap: 12px;
        width: 100%;
    }

    /* Dropzone */
    .dropzone {
        padding: 24px 16px;
        border-radius: var(--radius-lg);
        min-height: 200px;
    }

    .dropzone-text {
        font-size: 0.85rem;
    }

    .dropzone-subtext {
        font-size: 0.75rem;
    }

    .constructor-link-hint {
        display: none;
    }

    .constructor-header h4 {
        font-size: 0.9rem;
    }

    .constructor-desc {
        font-size: 0.8rem;
    }

    /* File queue */
    .file-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        display: flex;
    }
    
    .file-info {
        width: 100%;
    }
    
    .file-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .file-doc-type {
        width: 100%;
        min-width: auto;
    }
    
    /* Buttons */
    .btn {
        padding: 14px 20px;
        font-size: 0.9rem;
        min-height: 44px; /* Touch-friendly */
    }
    
    .btn-large {
        padding: 16px 24px;
        font-size: 1rem;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .action-buttons .btn {
        width: 100%;
    }
    
    /* Section header */
    .section-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .header-actions {
        width: 100%;
    }
    
    .header-actions .btn {
        width: 100%;
    }
    
    /* Tabs */
    .tabs {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .tab {
        flex: 1;
        min-width: calc(50% - 2px);
        padding: 12px 16px;
        font-size: 0.85rem;
    }
    
    /* Tables */
    .data-table-container {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
    
    .data-table {
        font-size: 0.85rem;
        min-width: 100%;
        width: max-content;
    }
    
    .data-table th,
    .data-table td {
        padding: 10px 12px;
        white-space: nowrap;
    }
    
    /* Metadata grid */
    .metadata-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Metrics grid now uses auto-fit, will auto-collapse to 1 column on small screens */
    .metrics-grid {
        gap: 12px;
    }
    
    /* Time period */
    .time-period-container {
        grid-template-columns: 1fr;
    }
    
    /* Document cards */
    .document-header {
        padding: 14px 16px;
        flex-wrap: wrap;
    }
    
    /* document-content now uses clamp(), no override needed */
    
    /* Progress container */
    .progress-container {
        padding: 20px;
    }
    
    /* Category Charts Layout */
.category-charts-section {
    margin-bottom: 32px;
}

.chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.chart-column {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.chart-column h4 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

@media (max-width: 1024px) {
    .chart-row {
        grid-template-columns: 1fr;
    }
}

/* Spinner animation for loading states */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
    /* Simplified and slowed down for better performance */
}

/* Toast notifications */
    .toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
    
    .toast {
        min-width: auto;
        width: 100%;
    }
    
    /* File queue header */
    .file-queue-header {
        padding: 12px 16px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }

    .file-queue-header h3 {
        font-size: 0.9rem;
        flex: 1;
        min-width: 150px;
    }

    .file-queue-actions {
        gap: 6px;
    }

    .upload-options {
        width: 100%;
    }
    
    /* Password input */
    .password-input-container {
        width: 100%;
    }
    
    .password-input {
        width: 100%;
    }
    
    /* Verification cards */
    .verification-card {
        padding: 16px;
    }
    
    /* Summary stats */
    .summary-container {
        gap: 20px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .main-content {
        padding: 20px 16px;
    }
    
    .section-header h1 {
        font-size: 1.3rem;
    }
    
    .dropzone {
        padding: 20px 14px;
    }

    .dropzone-text {
        font-size: 0.8rem;
    }
    
    .btn {
        padding: 12px 18px;
        font-size: 0.85rem;
    }
    
    .tab {
        font-size: 0.8rem;
        padding: 10px 12px;
    }
    
    .file-list-item {
        padding: 12px;
    }
    
    .document-header {
        padding: 12px;
    }
    
    .document-content {
        padding: 12px;
    }
    
    .logo {
        width: 80px;
    }
    
    .nav-item {
        font-size: 0.8rem;
        padding: 10px 6px;
    }
    
    .sidebar {
        padding: 0;
    }
    
    .logo-container {
        padding: 10px 12px;
    }
    
    /* Documentation navigation on mobile */
    .doc-nav-link {
        font-size: 0.75rem;
        padding: 8px 12px;
    }
    
    .doc-table {
        font-size: 0.8rem;
    }
    
    .doc-table th,
    .doc-table td {
        padding: 8px 10px;
    }
}

/* Documentation Container */
.documentation-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Smooth scroll behavior for documentation */
html {
    scroll-behavior: smooth;
}

/* Documentation Navigation Links */
.doc-nav-link {
    display: inline-block;
    padding: 10px 18px;
    background: var(--bg-sidebar);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.doc-nav-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(65, 141, 98, 0.3);
}

.doc-nav-link:active {
    transform: translateY(0);
}

.documentation-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.doc-section {
    background: var(--bg-card);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.doc-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

.doc-intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.doc-heading {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
    letter-spacing: -0.3px;
}

.doc-subheading {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: #61b665;
    margin: 24px 0 12px 0;
    letter-spacing: -0.2px;
}

.doc-subsection {
    margin: 20px 0;
}

.doc-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.doc-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-sidebar);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color-light);
}

.doc-emoji {
    font-size: 1.5rem;
}

.doc-table-wrapper {
    overflow-x: auto;
    margin: 16px 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color-light);
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.doc-table thead {
    background: var(--bg-sidebar);
}

.doc-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--color-primary);
    border-bottom: 2px solid var(--border-color);
}

.doc-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-secondary);
}

.doc-table tbody tr:hover {
    background: var(--bg-sidebar);
}

.doc-table tbody tr:nth-child(even) {
    background: rgba(65, 141, 98, 0.03);
}

.doc-table tbody tr:nth-child(even):hover {
    background: var(--bg-sidebar);
}

/* Make table cells with line breaks display nicely */
.doc-table td {
    line-height: 1.6;
}

.doc-table td br {
    line-height: 2;
}

.doc-table code {
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
    font-size: 0.9em;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.doc-code {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    overflow-x: auto;
    margin: 16px 0;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
}

.doc-code code {
    color: var(--text-primary);
    white-space: pre;
}

.doc-example {
    margin: 20px 0;
    padding: 16px;
    background: var(--bg-sidebar);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color-light);
}

.doc-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.doc-list li {
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    color: var(--text-secondary);
    line-height: 1.6;
}

.doc-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

.doc-list-simple {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.doc-list-simple li {
    padding: 10px 0 10px 24px;
    position: relative;
    color: var(--text-secondary);
    line-height: 1.8;
    border-left: 3px solid var(--border-color);
    margin-bottom: 8px;
}

.doc-list-simple li::before {
    content: "";
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-primary);
    opacity: 0.3;
}

.doc-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.doc-feature-card {
    background: var(--bg-sidebar);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    transition: all var(--transition-fast);
}

.doc-feature-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.doc-feature-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.doc-feature-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.doc-feature-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-item {
        min-height: 44px;
    }
    
    .file-remove {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .dropzone:hover {
        transform: none;
    }
    
    .btn-primary:hover:not(:disabled) {
        transform: none;
    }
    
    /* Better focus states for touch */
    .btn:focus,
    .nav-item:focus,
    .tab:focus {
        outline: 3px solid var(--color-primary-glow);
        outline-offset: 2px;
    }
}

/* Landscape mobile */
@media (max-width: 900px) and (orientation: landscape) {
    .sidebar {
        height: auto;
        flex-direction: row;
    }
    
    .main-content {
        margin-top: 0;
    }
}

/* ================================================
   APPLICANT PICKER (Capture · Profile mode)
   ================================================ */

.applicant-picker {
    margin: 0 0 20px;
    width: 100%;
    max-width: none;
}

.applicant-picker-label {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.applicant-picker-label-strong {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #18181B;
}
.applicant-picker-label-hint {
    font-family: var(--font-body);
    font-size: 13px;
    color: #737373;
}

.applicant-picker-wrap {
    position: relative;
}

.applicant-picker-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 12px;
    height: 48px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.applicant-picker-input-row:focus-within {
    border-color: #418D62;
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.12);
}
.applicant-picker-search-icon {
    color: #737373;
    flex-shrink: 0;
}
.applicant-picker-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 14px;
    color: #18181B;
    min-width: 0;
}
.applicant-picker-input::placeholder { color: #A3A3A3; }
.applicant-picker-chevron {
    color: #A3A3A3;
    flex-shrink: 0;
}

.applicant-picker-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(31, 36, 33, 0.06), 0 2px 6px rgba(31, 36, 33, 0.04);
    overflow: hidden;
    z-index: 30;
    max-height: 460px;
    overflow-y: auto;
}

.applicant-picker-create {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: #F5F5F4;
    border: none;
    border-bottom: 1px solid #E7E5E4;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.applicant-picker-create:hover,
.applicant-picker-create.is-active {
    background: #ECFDF5;
}
.applicant-picker-create-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #418D62;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.applicant-picker-create-text { flex: 1; min-width: 0; }
.applicant-picker-create-title {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: #18181B;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.applicant-picker-create-sub {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: #737373;
    line-height: 16px;
    margin-top: 2px;
}
.applicant-picker-kbd {
    font-family: var(--font-body);
    font-size: 11px;
    color: #A3A3A3;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.applicant-picker-section { padding: 4px 0 8px; }
.applicant-picker-section-label {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    color: #A3A3A3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 16px 6px;
}
.applicant-picker-list { display: flex; flex-direction: column; }

.applicant-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
.applicant-picker-row:hover,
.applicant-picker-row.is-active {
    background: #F5F5F4;
}
.applicant-picker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.applicant-picker-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.applicant-picker-row-name {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    color: #18181B;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.applicant-picker-row-meta {
    font-family: var(--font-body);
    font-size: 12px;
    color: #737373;
    line-height: 16px;
}

.applicant-picker-empty {
    padding: 16px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #A3A3A3;
    text-align: center;
}

.applicant-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid #E7E5E4;
    background: #FAFAFA;
    font-family: var(--font-body);
    font-size: 11.5px;
    color: #A3A3A3;
}
.applicant-picker-footer kbd {
    font-family: var(--font-body);
    font-size: 11px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 4px;
    padding: 1px 5px;
    margin: 0 2px;
    color: #525252;
}

/* Locked dropzone (Profile mode without a picked applicant) */
.studio-layout[data-applicant-locked="true"] .dropzone,
.studio-layout[data-applicant-locked="true"] .capture-limit-hint,
.studio-layout[data-applicant-locked="true"] .demo-carousel-section,
.studio-layout[data-applicant-locked="true"] #constructor-link {
    pointer-events: none;
}
.studio-layout[data-applicant-locked="true"] .dropzone {
    opacity: 0.55;
    background: #FAFAFA;
    border-style: dashed;
    border-color: #E7E5E4;
}
.studio-layout[data-applicant-locked="true"] .dropzone .dropzone-icon { opacity: 0.4; }
.studio-layout[data-applicant-locked="true"] .dropzone .dropzone-text { color: #737373; }
.studio-layout[data-applicant-locked="true"] .dropzone .dropzone-formats,
.studio-layout[data-applicant-locked="true"] .dropzone .dropzone-format-badges { opacity: 0.5; }

/* Dark mode */
[data-theme="dark"] .applicant-picker-input-row {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] .applicant-picker-input-row:focus-within {
    border-color: #418D62;
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.20);
}
[data-theme="dark"] .applicant-picker-input { color: #E7E9EA; }
[data-theme="dark"] .applicant-picker-input::placeholder { color: #6E7681; }
[data-theme="dark"] .applicant-picker-search-icon,
[data-theme="dark"] .applicant-picker-chevron { color: #A1A7AD; }
[data-theme="dark"] .applicant-picker-label-strong { color: #E7E9EA; }
[data-theme="dark"] .applicant-picker-label-hint { color: #A1A7AD; }
[data-theme="dark"] .applicant-picker-dropdown {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] .applicant-picker-create {
    background: #242B33;
    border-bottom-color: #30363D;
}
[data-theme="dark"] .applicant-picker-create:hover,
[data-theme="dark"] .applicant-picker-create.is-active {
    background: rgba(65, 141, 98, 0.16);
}
[data-theme="dark"] .applicant-picker-create-title { color: #E7E9EA; }
[data-theme="dark"] .applicant-picker-create-sub,
[data-theme="dark"] .applicant-picker-row-meta { color: #A1A7AD; }
[data-theme="dark"] .applicant-picker-row:hover,
[data-theme="dark"] .applicant-picker-row.is-active { background: #242B33; }
[data-theme="dark"] .applicant-picker-row-name { color: #E7E9EA; }
[data-theme="dark"] .applicant-picker-section-label { color: #6E7681; }
[data-theme="dark"] .applicant-picker-footer {
    background: #1A1F26;
    border-top-color: #30363D;
    color: #6E7681;
}
[data-theme="dark"] .applicant-picker-footer kbd {
    background: #242B33;
    border-color: #30363D;
    color: #C9CDD2;
}

/* ================================================
   DEMO DOCUMENT CAROUSEL
   ================================================ */

/* Demo Carousel Section */
.demo-carousel-section {
    margin: 16px 0;
    width: 100%;
    max-width: none;
}

/* Disclosure toggle (visible to non-free users) */
.demo-carousel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: transparent;
    border: 1px solid #E7E5E4;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: #18181B;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.demo-carousel-toggle:hover {
    background: #F5F5F4;
    border-color: #D4D4D8;
}

.demo-carousel-chevron {
    transition: transform 0.2s ease;
    color: #737373;
}

.demo-carousel-section.expanded .demo-carousel-chevron,
.demo-carousel-toggle[aria-expanded="true"] .demo-carousel-chevron {
    transform: rotate(90deg);
}

.demo-carousel-count {
    font-weight: 400;
    color: #A3A3A3;
    margin-left: 4px;
}

.demo-carousel-body {
    display: none;
    margin-top: 16px;
}

.demo-carousel-section.expanded .demo-carousel-body {
    display: block;
    animation: demo-fade-in 0.18s ease-out;
}

@keyframes demo-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dark-mode disclosure toggle */
[data-theme="dark"] .demo-carousel-toggle {
    border-color: #30363D;
    color: #E7E9EA;
}
[data-theme="dark"] .demo-carousel-toggle:hover {
    background: #242B33;
    border-color: #30363D;
}
[data-theme="dark"] .demo-carousel-chevron { color: #A1A7AD; }
[data-theme="dark"] .demo-carousel-count { color: #6E7681; }

/* Demo carousel in studio layout — full-width to match the dropzone above */
.studio-layout .demo-carousel-section {
    margin: 0;
    max-width: none;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
}

/* When expanded, the body becomes a full-width card to mirror the dropzone */
.studio-layout .demo-carousel-section.expanded .demo-carousel-body {
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 16px;
    padding: 24px 28px;
    box-sizing: border-box;
}

[data-theme="dark"] .studio-layout .demo-carousel-section.expanded .demo-carousel-body {
    background: #1A1F26;
    border-color: #30363D;
}

/* Carousel container fills its parent */
.demo-carousel-container { padding: 0 60px; }
.demo-carousel-track-container { width: 100%; }

.studio-layout .demo-carousel-header {
    text-align: left;
    margin-bottom: 16px;
}

.studio-layout .demo-carousel-header h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.studio-layout .demo-carousel-container {
    position: relative;
    padding: 0 36px;
}

.studio-layout .demo-carousel-track-container {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}


.studio-layout .demo-carousel-track-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.studio-layout .demo-carousel-track {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    width: max-content;
}

/* avoid weird jump */
.studio-layout .carousel-nav:hover {
  transform: scale(1.05);
}


.studio-layout .carousel-nav {
    display: flex;
    width: 28px;
    height: 28px;
    font-size: 1.2rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
}

.studio-layout .carousel-nav:hover {
    transform: translateY(-50%) scale(1.05);
}

.studio-layout .carousel-nav-left {
    left: 0;
}

.studio-layout .carousel-nav-right {
    right: 0;
}

.studio-layout .demo-card {
    min-width: 120px;
    flex-shrink: 0;
    padding: 16px;
}

.studio-layout .demo-card-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
}

.studio-layout .demo-card-title {
    font-size: 0.85rem;
}

.demo-carousel-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    text-align: left;
}

.demo-carousel-header h3,
.demo-carousel-header h4 {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    color: #18181B;
    letter-spacing: -0.005em;
    margin: 0;
}

.demo-carousel-header p,
.demo-carousel-sub {
    color: #737373;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 18px;
    margin: 0;
}

[data-theme="dark"] .demo-carousel-header h3,
[data-theme="dark"] .demo-carousel-header h4 { color: #E7E9EA; }
[data-theme="dark"] .demo-carousel-header p,
[data-theme="dark"] .demo-carousel-sub { color: #A1A7AD; }

/* Carousel Container */
.demo-carousel-container {
    position: relative;
    padding: 0 60px;
}

.demo-carousel-track-container {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius-lg);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.demo-carousel-track-container::-webkit-scrollbar {
    display: none;
}

.demo-carousel-track {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    width: max-content;
}
.studio-layout .demo-carousel-section,
.studio-layout .demo-carousel-container,
.studio-layout .demo-carousel-track-container {
    min-width: 0;
    width: 100%;
}


/* Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 300;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.carousel-nav:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(65, 141, 98, 0.4);
}

.carousel-nav:active {
    transform: translateY(-50%) scale(1);
}

.carousel-nav-left {
    left: 0;
}

.carousel-nav-right {
    right: 0;
}

.carousel-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Demo Card */
.demo-card {
    flex: 0 0 220px;
    background: var(--bg-card);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.demo-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-highlight);
    box-shadow: 0 8px 24px rgba(244, 211, 94, 0.3), 0 0 0 3px rgba(244, 211, 94, 0.2);
}

.demo-card-thumbnail {
    position: relative;
    width: 100%;
    height: 180px;
    background: var(--bg-sidebar);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.demo-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.demo-card:hover .demo-card-thumbnail img {
    transform: scale(1.05);
}

.demo-card-thumbnail-placeholder {
    color: var(--text-muted);
    font-size: 3rem;
}

.demo-card-info {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.demo-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.demo-card-type {
    font-size: 0.75rem;
    padding: 4px 10px;
    background: var(--color-success-bg);
    color: var(--color-primary);
    border-radius: 999px;
    display: inline-block;
    align-self: flex-start;
    font-weight: 600;
    margin-top: auto;
}

/* ================================================
   DEMO PREVIEW MODAL
   ================================================ */

.demo-preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    animation: fadeIn var(--transition-normal);
}

.demo-preview-modal.active {
    display: flex;
}

.demo-preview-content {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--border-color);
    position: relative;
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.demo-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 2px solid var(--border-color-light);
}

.demo-preview-header h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 16px;
}

.demo-preview-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.demo-preview-actions .btn-primary {
    padding: 8px 20px;
    font-size: 0.9rem;
}

.demo-preview-close {
    background: var(--bg-sidebar);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.demo-preview-close:hover {
    background: var(--color-error);
    border-color: var(--color-error);
    color: white;
    transform: rotate(90deg) scale(1.1);
    letter-spacing: -0.02em;
}

.demo-preview-body {
    display: flex;
    gap: 32px;
    padding: 32px;
}

.demo-preview-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-sidebar);
    border-radius: var(--radius-md);
    padding: 20px;
    min-height: 400px;
    max-height: 500px;
    overflow: hidden;
    position: relative;
}

.demo-preview-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.demo-preview-image-container iframe {
    width: 100%;
    height: 100%;
    min-height: 450px;
    border: none;
    border-radius: var(--radius-sm);
    background: white;
    box-shadow: var(--shadow-md);
}

.demo-preview-details {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.demo-detail-item {
    background: var(--bg-sidebar);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color-light);
}

.demo-detail-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
}

.demo-detail-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.demo-detail-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.demo-preview-footer {
    padding: 24px 32px 32px;
    border-top: 2px solid var(--border-color-light);
    display: flex;
    gap: 16px;
    justify-content: flex-end;
}

.demo-preview-footer .btn {
    min-width: 140px;
}

/* Styling for standardized HTML tables */
.scrollable-transactions-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--bg-card);
}

.scrollable-transactions-container table th {
    background: var(--bg-sidebar);
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
    padding: 12px;
    border: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.scrollable-transactions-container table td {
    padding: 10px 12px;
    border: 1px solid var(--border-color-light);
    color: var(--text-primary);
}

.scrollable-transactions-container table tr:hover {
    background: var(--bg-hover);
}

.scrollable-transactions-container table tr:nth-child(even) {
    background: var(--bg-sidebar);
}

.scrollable-transactions-container table tr:nth-child(even):hover {
    background: var(--bg-hover);
}

/* Mobile responsive for side panel */
@media (max-width: 1024px) {
    .side-panel-content {
        width: 50%;
        min-width: 400px;
    }
}

@media (max-width: 768px) {
    .side-panel-content {
        width: 80%;
        min-width: 0;
    }
    
    .side-panel-header {
        padding: 20px 24px;
    }
    
    .side-panel-body {
        padding: 20px 24px;
    }
}

@media (max-width: 480px) {
    .side-panel-content {
        width: 100%;
    }
}

/* Mobile Responsive - Carousel */
@media (max-width: 768px) {
    .demo-carousel-section {
        margin: 24px auto;
    }
    
    .demo-carousel-container {
        padding: 0 50px;
    }
    
    .carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    .demo-card {
        flex: 0 0 180px;
    }
    
    .demo-card-thumbnail {
        height: 150px;
    }
    
    .demo-preview-content {
        width: 95%;
        max-height: 85vh;
    }
    
    .demo-preview-body {
        flex-direction: column;
        padding: 24px;
        gap: 24px;
    }
    
    .demo-preview-details {
        flex: 1;
    }
    
    .demo-preview-image-container {
        min-height: 250px;
        max-height: 300px;
    }
    
    .demo-preview-header {
        padding: 24px 24px 20px;
    }
    
    .demo-preview-header h2 {
        font-size: 1.4rem;
    }
    
    .demo-preview-footer {
        padding: 20px 24px 24px;
        flex-direction: column-reverse;
    }
    
    .demo-preview-footer .btn {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .demo-carousel-header h3 {
        font-size: 1.2rem;
    }
    
    .demo-carousel-header p {
        font-size: 0.85rem;
    }
    
    .demo-carousel-container {
        padding: 0 45px;
    }
    
    .carousel-nav {
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
    }
    
    .demo-card {
        flex: 0 0 160px;
    }
    
    .demo-card-thumbnail {
        height: 130px;
    }
    
    .demo-card-info {
        padding: 12px;
    }
    
    .demo-card-name {
        font-size: 0.85rem;
    }
}

/* ================================================
   AFS DATA VALIDATION DASHBOARD STYLES
   ================================================ */

/* AFS Dashboard Card */
.afs-dashboard {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* AFS Tab Navigation */
.afs-tabs {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
}

.afs-tab-nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.afs-tab-nav::-webkit-scrollbar {
    height: 4px;
}

.afs-tab-nav::-webkit-scrollbar-track {
    background: transparent;
}

.afs-tab-nav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.afs-tab-button {
    padding: 14px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.afs-tab-button:hover {
    color: var(--text-primary);
    background: var(--bg-input);
}

.afs-tab-button.active {
    color: var(--text-primary);
    border-bottom-color: var(--color-primary);
    background: var(--bg-input);
}

/* AFS Tab Content */
.afs-tab-content {
    padding: 24px;
    background: var(--bg-dark);
}

.afs-tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.afs-tab-panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* AFS Data Tables */
.afs-data-table {
    width: 100%;
    border-collapse: collapse;
}

.afs-data-table thead {
    background: var(--bg-input);
}

.afs-data-table th {
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    font-size: 0.9rem;
}

.afs-data-table td {
    padding: 10px 12px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color-light);
}

.afs-data-table tbody tr:last-child td {
    border-bottom: none;
}

.afs-data-table tbody tr:hover {
    background: var(--bg-input);
}

/* Info Icons */
.info-icon {
    color: #888;
    font-size: 0.9em;
    margin-left: 6px;
    opacity: 0.7;
    display: inline-block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.info-icon:hover {
    transform: scale(1.15);
    opacity: 1;
}

/* Source Badge */
.source-badge {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 8px;
}

/* Responsive AFS Dashboard */
@media (max-width: 768px) {
    .afs-tab-content {
        padding: 16px;
    }
    
    .afs-tab-button {
        padding: 12px 16px;
        font-size: 0.85rem;
    }
    
    .afs-data-table {
        font-size: 0.85rem;
    }
    
    .afs-data-table th,
    .afs-data-table td {
        padding: 8px 6px;
    }
}

/* ================================================
   HOME DASHBOARD STYLES
   ================================================ */

.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.stat-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.stat-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-heading);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Recent Activity Feed */
.recent-activity-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 32px;
}

.section-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
}

.section-header-with-action h2 {
    margin: 0;
}

.recent-activity-section h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-sm svg {
    flex-shrink: 0;
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 1;
    transition: opacity 0.15s ease;
    contain: layout style;
    overflow: hidden;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
}

.activity-feed.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Filtering / sort transition: fade the list, lock interactions, and show a
 * centered spinner overlay so the user sees feedback instead of a stagnant
 * jump-to-new-order. The spinner is generated via ::after so we don't need
 * an extra DOM node. */
.activity-feed.filtering {
    position: relative;
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.activity-feed.filtering::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.4);
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
}
.activity-feed.filtering::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
    border: 2.5px solid #E5E7EB;
    border-top-color: #10B981;
    border-radius: 50%;
    animation: previewSpin 0.85s linear infinite;
    z-index: 6;
    pointer-events: none;
}
[data-theme="dark"] .activity-feed.filtering::before { background: rgba(20, 24, 28, 0.45); }
[data-theme="dark"] .activity-feed.filtering::after { border-color: #2A3038; border-top-color: #10B981; }

.empty-state {
    text-align: center;
    padding: 80px 24px;
    color: var(--text-muted);
    animation: empty-state-in 0.4s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.empty-state p {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 260px;
    margin: 0 auto;
}

@keyframes empty-state-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 12px;
    padding: 0;
    border-top: none;
    gap: 16px;
}

.pagination-info {
    font-family: var(--font-body, 'Geist', sans-serif);
    color: #6b7280;
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    flex: 0 0 auto;
}

.pagination-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-controls .btn {
    transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
}

.pagination-controls .btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pagination-controls .pagination-nav .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 7px;
    background: var(--bg-card, #ffffff);
    color: #6b7280;
}

.pagination-controls .pagination-nav .btn:not(:disabled):hover {
    background: #f3f4f6;
    color: #111827;
}


/* Search and Sort Bar */
.search-sort-container {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-wrapper {
    display: flex;
    align-items: center;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--color-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.filter-btn.active {
    background: rgba(255, 152, 0, 0.15);
    border-color: #ff9800;
    color: #ff9800;
}

.filter-btn.active:hover {
    background: rgba(255, 152, 0, 0.25);
    border-color: #ff9800;
}

.filter-btn svg {
    width: 16px;
    height: 16px;
}

.filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ff9800;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10px;
    margin-left: 4px;
}

.filter-btn.active .filter-count-badge {
    background: white;
    color: #ff9800;
}

.search-wrapper {
    position: relative;
    flex: 1;
}

.search-input {
    width: 100%;
    max-width: 360px;
    padding: 9px 14px 9px 36px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 8px;
    color: #18181B;
    font-family: var(--font-body);
    font-size: 13px;
    transition: all var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.1);
}

.search-input::placeholder {
    color: #A3A3A3;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #A3A3A3;
    pointer-events: none;
}

.search-submit-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-submit-btn:hover {
    opacity: 0.85;
}

.clear-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card-hover);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.clear-search-btn:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.doc-type-dropdown {
    position: relative;
    flex-shrink: 0;
}

.doc-type-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #374151;
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.doc-type-trigger:hover {
    border-color: var(--color-primary);
}

.doc-type-dropdown.open .doc-type-trigger,
.doc-type-dropdown.open .filter-pill-btn {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.1);
}

.doc-type-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 260px;
    max-width: 320px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 100;
    padding: 4px 0;
}
.filter-section {
    padding: 0 0 4px;
}
.filter-section + .filter-section {
    border-top: 1px solid var(--border-color-light, #f1f3f5);
    margin-top: 4px;
    padding-top: 4px;
}
.filter-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 13px;
    color: var(--text-primary, #111827);
    text-align: left;
    transition: background 0.12s;
}
.filter-radio:hover {
    background: var(--bg-input, #f3f4f6);
}
.filter-radio.selected {
    background: rgba(65, 141, 98, 0.08);
}
.filter-radio-dot {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1.5px solid #d1d5db;
    background: #ffffff;
    position: relative;
    transition: border-color 0.12s, background 0.12s;
}
.filter-radio.selected .filter-radio-dot {
    border-color: var(--color-primary, #418d62);
}
.filter-radio.selected .filter-radio-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: var(--color-primary, #418d62);
}
.filter-radio-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.filter-radio.selected .filter-radio-icon {
    color: var(--color-primary, #418d62);
}
.filter-radio-label {
    flex: 1;
    font-weight: 500;
}
[data-theme="dark"] .filter-radio-dot { background: var(--bg-card); border-color: var(--border-color); }

/* Search-within-section + scrollable list (used by the doc-type section so it
   stays usable even with 50+ types). */
.filter-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 6px;
    position: sticky;
    top: 0;
    background: var(--bg-card, #ffffff);
    z-index: 1;
}
.filter-search-icon { color: #9ca3af; flex-shrink: 0; }
.filter-search-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-input, #f3f4f6);
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 6px 8px;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 12.5px;
    color: var(--text-primary, #111827);
    outline: none;
    transition: border-color 0.12s, background 0.12s;
}
.filter-search-input::placeholder { color: #9ca3af; }
.filter-search-input:focus {
    background: var(--bg-card, #ffffff);
    border-color: var(--color-primary, #418d62);
}
.filter-search-clear {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.filter-search-clear:hover { background: var(--bg-input, #f3f4f6); color: #374151; }
.filter-scroll-list {
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.filter-scroll-list::-webkit-scrollbar { width: 8px; }
.filter-scroll-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 4px; }
.filter-scroll-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); }
.filter-hidden-hint {
    padding: 6px 12px 8px;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 11px;
    color: #9ca3af;
    border-top: 1px solid var(--border-color-light, #f1f3f5);
    background: var(--bg-card, #ffffff);
}
.filter-section-active {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(65, 141, 98, 0.12);
    color: var(--color-primary, #418d62);
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
[data-theme="dark"] .filter-search-row { background: var(--bg-card); }
[data-theme="dark"] .filter-search-input { background: var(--bg-secondary); color: var(--text-primary); }
[data-theme="dark"] .filter-hidden-hint { background: var(--bg-card); border-top-color: var(--border-color); }
.filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 10.5px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.filter-section-clear {
    background: transparent;
    border: none;
    color: var(--color-primary, #418d62);
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    text-transform: none;
    letter-spacing: 0;
}
.filter-section-clear:hover {
    background: rgba(65, 141, 98, 0.08);
}

.doc-type-dropdown.open .doc-type-menu {
    display: block;
}

.doc-type-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
    font-size: 0.85rem;
}

.doc-type-option:hover {
    background: var(--bg-input);
}

.doc-type-option.selected {
    background: rgba(65, 141, 98, 0.08);
}

.doc-type-check {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.1s;
}

.doc-type-option.selected .doc-type-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.doc-type-label {
    flex: 1;
    color: var(--text-primary);
}

.doc-type-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 1px 6px;
    border-radius: 8px;
}

.doc-type-clear-btn {
    display: block;
    width: calc(100% - 8px);
    margin: 2px 4px 4px;
    padding: 6px 12px;
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.doc-type-clear-btn:hover {
    color: var(--color-error);
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

.doc-type-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Filter pill button */
.filter-pill-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-pill-btn:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.filter-pill-btn.active {
    background: rgba(65, 141, 98, 0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.active-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
}

/* Custom sort dropdown */
.sort-dropdown {
    position: relative;
    flex-shrink: 0;
}

.sort-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.sort-trigger:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.sort-dropdown.open .sort-trigger {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.1);
}

.sort-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    padding: 4px;
    overflow: hidden;
}

.sort-dropdown.open .sort-menu {
    display: block;
}

.sort-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}

.sort-option:hover {
    background: var(--bg-input);
}

.sort-option.selected {
    background: rgba(65, 141, 98, 0.08);
    color: var(--color-primary);
    font-weight: 500;
}

.empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* Selection Action Bar */
.selection-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    color: white;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.selection-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.selection-actions {
    display: flex;
    gap: 8px;
}

.selection-actions .btn {
    color: white;
    border-color: rgba(255,255,255,0.3);
}

.selection-actions .btn:hover {
    background: rgba(255,255,255,0.15);
}

.selection-actions .btn-danger {
    background: rgba(239, 68, 68, 0.8);
    border-color: rgba(239, 68, 68, 0.5);
}

.selection-actions .btn-danger:hover {
    background: rgba(239, 68, 68, 1);
}

/* Download dropdown inside selection action bar */
.selection-action-bar .folder-dropdown-menu {
    background: var(--bg-card);
    color: var(--text-primary);
    min-width: 220px;
}

.selection-action-bar .folder-dropdown-menu .dropdown-divider {
    height: 1px;
    background: var(--border-color-light);
    margin: 4px 0;
}

.selection-action-bar .folder-dropdown-menu .download-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.selection-action-bar .folder-dropdown-menu .download-dropdown-item:hover:not(:disabled) {
    background: var(--bg-card-hover);
}

.selection-action-bar .folder-dropdown-menu .download-dropdown-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: var(--text-muted);
}

.selection-action-bar .folder-dropdown-menu .download-dropdown-item svg {
    flex-shrink: 0;
}

.download-dropdown-item .download-btn-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.download-btn-doctype-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap;
}

.download-dropdown-item:disabled .download-btn-doctype-badge {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.download-btn-reason {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 1px;
    line-height: 1.3;
}

/* Custom checkbox styling */
.select-all-checkbox,
.doc-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.select-all-checkbox input,
.doc-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.select-all-checkbox .checkmark,
.doc-checkbox .checkmark {
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.doc-checkbox .checkmark {
    background: var(--bg-input);
    border-color: var(--border-color);
}

.select-all-checkbox:hover .checkmark,
.doc-checkbox:hover .checkmark {
    border-color: var(--color-primary);
}

.select-all-checkbox input:checked ~ .checkmark,
.doc-checkbox input:checked ~ .checkmark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.select-all-checkbox .checkmark::after,
.doc-checkbox .checkmark::after {
    content: '';
    display: none;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.select-all-checkbox input:checked ~ .checkmark::after,
.doc-checkbox input:checked ~ .checkmark::after {
    display: block;
}

/* Activity item with checkbox */
.activity-item {
    display: flex;
    align-items: center;
    padding: 14px 0;
    background: none;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #F3F4F6;
    transition: background 0.15s ease;
    opacity: 1;
    contain: layout style;
}

.activity-item .doc-checkbox {
    margin-right: 12px;
    flex-shrink: 0;
}

/* Gmail-style checkbox */
.activity-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;
}

.activity-checkbox:hover {
    background-color: var(--bg-secondary);
}

.activity-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.activity-checkbox .checkbox-custom {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-input);
    transition: all 0.15s ease;
}

.activity-checkbox:hover .checkbox-custom {
    border-color: var(--color-primary);
}

.activity-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.activity-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Selected row styling */
.activity-item.selected {
    background: rgba(65, 141, 98, 0.04);
    border-bottom-color: #F3F4F6;
}

.activity-item.selected .activity-checkbox .checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.activity-item.clickable {
    cursor: pointer;
}

.activity-item:hover {
    background: #F9FAFB;
}

.activity-item.clickable:hover {
    background: #F9FAFB;
}

.activity-item.clickable:active {
    background: #F3F4F6;
    transition: background 0.05s ease;
}

.activity-item[draggable="true"] {
    cursor: grab;
}

.activity-item[draggable="true"]:active {
    cursor: grabbing;
}

.activity-item[draggable="true"] {
    cursor: grab;
}

.activity-item[draggable="true"]:active {
    cursor: grabbing;
}

.activity-item.highlight-document {
    background: rgba(65, 141, 98, 0.06);
}

.activity-item.duplicate-document {
    border-left: 3px solid #ff9800;
    background: rgba(255, 152, 0, 0.04);
}

.activity-item.duplicate-document:hover {
    border-left-color: #ff9800;
    background: rgba(255, 152, 0, 0.08);
}

.duplicate-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    background: rgba(255, 152, 0, 0.15);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ff9800;
    vertical-align: middle;
}

.duplicate-badge svg {
    width: 14px;
    height: 14px;
    stroke: #ff9800;
}

/* History Layout with Folders Sidebar */
.history-layout {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
}
/* Lock interactive elements while the History feed is fetching. Skeletons stay
   readable but every button/input/checkbox/link inside the section is inert. */
.history-section.is-loading button,
.history-section.is-loading input,
.history-section.is-loading select,
.history-section.is-loading a,
.history-section.is-loading label,
.history-section.is-loading [role="button"] {
    pointer-events: none;
    cursor: progress;
}
.history-section.is-loading .section-page-actions,
.history-section.is-loading .search-sort-container,
.history-section.is-loading .selection-action-bar,
.history-section.is-loading .activity-feed,
.history-section.is-loading .pagination-controls {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}
.history-section.is-loading {
    cursor: progress;
}
.history-preview-pane {
    width: 0;
    margin-left: 0;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
    background: var(--bg-card, #ffffff);
    border: 1px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
    transition:
        width 280ms cubic-bezier(0.4, 0, 0.2, 1),
        margin-left 280ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 220ms ease,
        transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 280ms ease,
        border-color 280ms ease;
}
.history-preview-pane.is-open {
    width: 440px;
    margin-left: 24px;
    opacity: 1;
    transform: translateX(0);
    border-color: var(--border-color, #e5e7eb);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    pointer-events: auto;
}
.preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f1f3f5;
}
.preview-doc-icon {
    width: 38px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    color: #6b7280;
    font-family: var(--font-mono, 'Geist Mono', monospace);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.preview-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.preview-eyebrow {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 9.5px;
    color: #9ca3af;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.preview-name {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preview-meta {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
.preview-meta .meta-sep { color: #d1d5db; padding: 0 4px; }
.preview-close {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 7px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.preview-close:hover { background: #f3f4f6; color: #111827; }
.preview-thumbnail {
    flex: 1;
    min-height: 0;
    background: #f5f6f8;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}
.preview-thumbnail-state {
    width: 100%;
    aspect-ratio: 8.5 / 11;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.preview-thumbnail-state img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.preview-thumbnail-state .preview-empty {
    color: #9ca3af;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 12.5px;
    text-align: center;
    padding: 16px;
}
/* Spinner shown while the quick-preview image is loading from S3, or while
 * the doc is still processing and has no rendered page yet. */
.preview-spinner-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #FAFAFA;
}
.preview-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid #E5E7EB;
    border-top-color: #10B981;
    border-radius: 50%;
    animation: previewSpin 0.9s linear infinite;
}
.preview-spinner-label {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 12px;
    color: #6B7280;
    letter-spacing: 0.02em;
}
@keyframes previewSpin { to { transform: rotate(360deg); } }
/* Image is invisible until onload swaps it in, so the spinner shows alone. */
.preview-img-loading { opacity: 0; transition: opacity 0.18s ease; }
.preview-img-loading:not(.preview-img-loading) { opacity: 1; }
.preview-thumbnail-state { position: relative; }
[data-theme="dark"] .preview-spinner-wrap { background: #1A1F26; }
[data-theme="dark"] .preview-spinner { border-color: #2A3038; border-top-color: #10B981; }
[data-theme="dark"] .preview-spinner-label { color: #9CA3AF; }
.preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #f1f3f5;
    background: var(--bg-card, #ffffff);
}
.preview-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.preview-nav-btn {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 7px;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.preview-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.preview-nav-btn:not(:disabled):hover { background: #f3f4f6; color: #111827; }
.preview-position {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 11.5px;
    color: #9ca3af;
    margin-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.preview-open-full {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Dark theme overrides for preview pane */
[data-theme="dark"] .history-preview-pane {
    background: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .preview-header,
[data-theme="dark"] .preview-footer { border-color: var(--border-color); }
[data-theme="dark"] .preview-thumbnail { background: var(--bg-secondary); }
[data-theme="dark"] .preview-thumbnail-state { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .preview-name { color: var(--text-primary); }
[data-theme="dark"] .preview-meta { color: var(--text-muted); }
[data-theme="dark"] .preview-close { background: var(--bg-card); border-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .preview-nav-btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-muted); }

/* On narrower viewports, drop the side-by-side layout so preview stacks below */
@media (max-width: 1180px) {
    .history-layout { flex-direction: column; }
    .history-preview-pane { position: static; transform: translateY(12px); }
    .history-preview-pane.is-open { width: 100%; margin-left: 0; margin-top: 16px; transform: translateY(0); }
}

.folder-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--bg-card);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: 16px;
    position: sticky;
    top: 24px;
    transition: box-shadow 0.3s ease;
}

.folder-sidebar:hover {
    box-shadow: var(--shadow-md);
}

.folder-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color-light);
}

.folder-sidebar-header h3 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sidebar move/assign buttons — shown when documents are selected */
.sidebar-move-btn,
.sidebar-assign-btn {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.sidebar-move-btn:hover,
.sidebar-assign-btn:hover {
    background: var(--color-primary);
    color: white;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-icon:hover {
    transform: scale(1.1);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.btn-icon:active {
    transform: scale(0.95);
}

.folder-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.folder-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid transparent;
}

.folder-item:hover {
    background: var(--bg-card-hover);
    transform: translateX(4px);
}

.folder-item.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    transform: translateX(4px);
}

.folder-item.active .folder-icon {
    stroke: var(--color-primary);
    transform: scale(1.05);
}

.folder-item.active .folder-name {
    color: var(--color-primary);
    font-weight: 600;
}

.folder-item.active .folder-count {
    background: var(--color-primary);
    color: white;
}

.folder-icon {
    flex-shrink: 0;
    stroke: var(--text-muted);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s ease;
}

.folder-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.folder-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
    transition: all 0.2s ease;
    margin-left: auto;
}

.folder-divider {
    height: 1px;
    background: var(--border-color-light);
    margin: 12px 0;
}

/* Wrapper for count and actions on user folders */
.folder-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.folder-right .folder-count {
    margin-left: 0;
}

.folder-right .folder-actions {
    display: none;
    gap: 2px;
}

.folder-item.user-folder:hover .folder-right .folder-count {
    display: none;
}

.folder-item.user-folder:hover .folder-right .folder-actions {
    display: flex;
}

.folder-action-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.folder-action-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    transform: scale(1.1);
}

.folder-action-btn.delete:hover {
    color: var(--color-error);
    background: rgba(220, 38, 38, 0.1);
}

/* Drop target hint during drag */
.folder-item.drop-target {
    border: 2px dashed var(--border-color, #ddd);
    transition: all 0.15s ease;
}

/* Drag over state for folders */
.folder-item.drag-over {
    background: var(--color-primary-light);
    border: 2px dashed var(--color-primary);
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 4px 12px var(--color-primary-glow);
    transition: all 0.15s ease;
}

.folder-item.drag-over .folder-icon {
    transform: scale(1.15);
    transition: transform 0.15s ease;
}

/* Dragging item styles */
.activity-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.history-main-content {
    flex: 1;
    min-width: 0;
}

/* Folder Modal */
.folder-modal {
    max-width: 420px;
    width: 90%;
}

.folder-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.folder-modal .modal-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.folder-modal .modal-body {
    padding: 24px;
}

.folder-modal .form-group {
    margin-bottom: 20px;
}

.folder-modal .form-group:last-child {
    margin-bottom: 0;
}

.folder-modal .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.folder-modal .form-group input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-family: var(--font-body);
    background: var(--bg-input);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.folder-modal .form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.folder-modal .form-group input[type="text"]::placeholder {
    color: var(--text-muted);
}

.folder-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-input);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.folder-color-picker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.color-option:hover {
    transform: scale(1.15);
}

.color-option.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-card), 0 2px 8px rgba(0,0,0,0.15);
}

.color-option.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Move to Folder Dropdown */
.folder-dropdown {
    position: relative;
    display: inline-block;
}

.folder-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    margin-top: 4px;
}

.folder-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.folder-dropdown-item:hover {
    background: var(--bg-card-hover);
}

.folder-dropdown-item.unfiled {
    border-bottom: 1px solid var(--border-color-light);
}

.folder-dropdown-item svg {
    flex-shrink: 0;
}

.folder-dropdown-item .folder-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Folder badge on activity item */
.folder-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    background: var(--bg-input);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    vertical-align: middle;
}

.folder-badge .folder-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Responsive folder sidebar */
@media (max-width: 900px) {
    .history-layout {
        display: block;
    }

    .folder-sidebar {
        width: 100%;
        position: static;
    }

    .folder-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .folder-item {
        padding: 8px 12px;
    }

    .folder-divider {
        display: none;
    }
}

/* Batch Group Styles */
.batch-group {
    margin-bottom: 16px;
}

.batch-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--color-primary-glow), var(--bg-sidebar));
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color-light);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.batch-header:hover {
    background: linear-gradient(135deg, var(--color-primary-glow), var(--bg-card-hover));
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.batch-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.batch-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.batch-chevron {
    transition: transform var(--transition-fast);
    color: var(--text-secondary);
}

.batch-chevron.expanded {
    transform: rotate(180deg);
}

.batch-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.batch-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.batch-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.batch-count {
    color: var(--color-primary);
    font-weight: 600;
}

.batch-type {
    color: var(--text-secondary);
    font-weight: 500;
}

.batch-time {
    color: var(--text-muted);
}

.batch-processing-time {
    color: var(--color-success);
    font-weight: 600;
}

.batch-avg-time {
    color: var(--color-info);
    font-weight: 500;
    font-size: 0.85rem;
}

.batch-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.batch-actions .btn-icon {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color-light);
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.batch-actions .btn-icon:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.1);
}

.batch-actions .btn-icon svg {
    display: block;
}

.batch-actions .batch-delete-btn:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
}

.batch-documents {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out;
    opacity: 0;
    margin-top: 0;
}

.batch-documents.expanded {
    max-height: 5000px;
    opacity: 1;
    margin-top: 12px;
}

.batch-document-item {
    margin-bottom: 8px;
}

.batch-document-item:last-child {
    margin-bottom: 0;
}

.activity-details {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.activity-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 340px;
    flex-shrink: 0;
    min-width: 0;
}

.activity-title {
    font-weight: 500;
    color: #111827;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rename-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.activity-item:hover .rename-btn {
    opacity: 1;
}

.rename-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.activity-meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #6B7280;
    width: 140px;
    flex-shrink: 0;
}

.activity-meta .doc-type {
    color: #6B7280;
    font-weight: 400;
}

.activity-meta .file-size {
    display: none;
}

.activity-meta .meta-separator {
    display: none;
}

.activity-time {
    font-size: 12px;
    color: #6B7280;
    width: 180px;
    flex-shrink: 0;
}

.activity-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    width: 140px;
    flex-shrink: 0;
    background: none;
}

.activity-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-status.success {
    background: none;
    color: #374151;
}

.activity-status.success::before {
    background: #10B981;
}

.activity-status.failed {
    background: none;
    color: #374151;
}

.activity-status.failed::before {
    background: #EF4444;
}

.activity-status.pending {
    background: none;
    color: #374151;
}

.activity-status.pending::before {
    background: #9CA3AF;
}

/* Table header for activity feed (sits inside the .activity-feed card) */
.activity-table-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}

.activity-table-header .col-document { width: 340px; flex-shrink: 0; padding-left: 48px; }
.activity-table-header .col-type { width: 140px; flex-shrink: 0; }
.activity-table-header .col-status { width: 140px; flex-shrink: 0; }
.activity-table-header .col-date { width: 180px; flex-shrink: 0; }
.activity-table-header .col-fields { flex: 1; text-align: right; }
[data-theme="dark"] .activity-table-header { background: var(--bg-secondary); }

/* Applicant Row — Paper design (grouped by applicant with expandable sub-rows) */
.applicant-row {
    border-bottom: 1px solid #f1f3f5;
}
.activity-feed > .applicant-row:last-of-type,
.activity-feed > .activity-item:last-of-type,
.activity-feed > .history-flat-list:last-of-type .history-flat-row:last-child {
    border-bottom: none;
}
.applicant-header {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 52px;
}
.applicant-cell {
    flex-shrink: 0;
}
.applicant-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 340px;
}
.applicant-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #6b7280;
    border-radius: 5px;
    transition: background 0.12s, color 0.12s;
}
.applicant-row:hover .applicant-chevron {
    background: #f3f4f6;
    color: #111827;
}
.applicant-chevron-spacer {
    width: 18px;
    flex-shrink: 0;
}
.applicant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
/* Document file-icon avatar — used for unassigned single-doc rows so they
   visually distinguish from applicant aggregates. */
.applicant-file-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
[data-theme="dark"] .applicant-file-icon {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-color: var(--border-color);
}
.applicant-name-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.applicant-name-stack .applicant-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.applicant-subtitle {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.applicant-subtitle .meta-sep {
    color: #d1d5db;
    padding: 0 1px;
}
.unassigned-tag {
    color: #9ca3af;
    font-style: italic;
}
/* Unassigned single-doc row sits at slightly muted intensity so the eye
   anchors on real applicants first. */
.applicant-row--unassigned .applicant-name {
    font-weight: 500;
}
.applicant-row--unassigned {
    background: #fcfcfd;
}
[data-theme="dark"] .applicant-row--unassigned {
    background: var(--bg-secondary);
}
.applicant-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.applicant-doc-count {
    width: 140px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: #6b7280;
}
.applicant-status {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 140px;
    font-size: 13px;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.status-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.applicant-date {
    width: 180px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #6b7280;
}
.applicant-risk {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.applicant-risk-pill {
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
}
.applicant-risk-score {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #9ca3af;
}
.applicant-open-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.applicant-open-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* End-aligned actions cluster (preview + trash) */
.row-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 76px;
    flex-shrink: 0;
}
.row-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-card, #ffffff);
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s, border-color 0.12s;
}
.row-action-btn.row-preview-btn { color: var(--color-primary, #418d62); }
.row-action-btn.row-trash-btn { color: #9ca3af; }
/* Reveal on hover, focus, active (previewing), or selected row */
.applicant-row:hover .row-action-btn,
.applicant-sub-row:hover .row-action-btn,
.activity-item:hover .row-action-btn,
.row-action-btn:focus-visible,
.applicant-header.is-active .row-action-btn,
.applicant-sub-row.is-active .row-action-btn,
.activity-item.is-active .row-action-btn,
.activity-item.selected .row-action-btn,
.applicant-sub-row.selected .row-action-btn {
    opacity: 1;
}
/* Active (previewing) preview button is filled green */
.applicant-header.is-active .row-preview-btn,
.applicant-sub-row.is-active .row-preview-btn,
.activity-item.is-active .row-preview-btn {
    background: var(--color-primary, #418d62);
    border-color: var(--color-primary, #418d62);
    color: #ffffff;
}
.row-action-btn.row-preview-btn:hover {
    background: #ecfdf5;
    border-color: #bbf7d0;
}
.row-action-btn.row-trash-btn:hover {
    background: #FEE2E2;
    color: #B91C1C;
    border-color: #FECACA;
}
[data-theme="dark"] .row-action-btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .row-action-btn.row-preview-btn { color: var(--color-primary, #6dd49c); }
[data-theme="dark"] .row-action-btn.row-trash-btn:hover {
    background: rgba(185, 28, 28, 0.18);
    color: #F87171;
    border-color: rgba(248, 113, 113, 0.35);
}
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
}
.applicant-sub-rows {
    display: none;
}
.applicant-sub-rows.expanded {
    display: block;
}
.applicant-sub-row {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 44px;
    background: #fcfcfd;
    border-top: 1px solid #f3f4f6;
    cursor: pointer;
    box-shadow: inset 3px 0 0 transparent;
    transition: background 0.12s, box-shadow 0.12s;
}
.applicant-sub-row:hover {
    background: #f3f4f6;
}
.applicant-sub-row.is-active {
    background: #eef6f1;
    box-shadow: inset 3px 0 0 var(--color-primary, #418d62);
}
.applicant-header {
    box-shadow: inset 3px 0 0 transparent;
    transition: background 0.12s, box-shadow 0.12s;
}
.applicant-header.is-active {
    background: #f7fbf8;
    box-shadow: inset 3px 0 0 var(--color-primary, #418d62);
}
.activity-item.is-active {
    background: #f7fbf8;
    box-shadow: inset 3px 0 0 var(--color-primary, #418d62);
}
.sub-row-name {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 340px;
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sub-row-file-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 7px;
    background: #f3f4f6;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sub-row-name-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.sub-row-name-text .sub-row-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sub-row-name-text .sub-row-subtitle {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sub-row-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sub-row-type {
    width: 140px;
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: #9ca3af;
}
.sub-row-status {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 140px;
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: #6b7280;
}
.sub-row-status .status-dot {
    width: 5px;
    height: 5px;
}
.sub-row-fields {
    flex: 1;
    font-family: var(--font-body);
    font-size: 12px;
    color: #9ca3af;
}
.applicant-header:hover {
    background: #f9fafb;
}

/* Dark theme overrides for applicant rows */
[data-theme="dark"] .applicant-row { border-bottom-color: var(--border-color); }
[data-theme="dark"] .applicant-name { color: var(--text-primary); }
[data-theme="dark"] .applicant-doc-count { color: var(--text-muted); }
[data-theme="dark"] .applicant-date { color: var(--text-muted); }
[data-theme="dark"] .applicant-sub-row { background: var(--bg-secondary); border-top-color: var(--border-color-light); }
[data-theme="dark"] .applicant-sub-row:hover { background: var(--bg-hover); }
[data-theme="dark"] .sub-row-name { color: var(--text-secondary); }
[data-theme="dark"] .sub-row-type { color: var(--text-muted); }
[data-theme="dark"] .applicant-header:hover { background: var(--bg-hover); }

/* Activity Actions */
.activity-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-icon:hover {
    background: var(--bg-card-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.btn-icon svg {
    flex-shrink: 0;
}

.download-json-btn {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rename-doc-btn {
    transition: all var(--transition-fast);
}

.rename-doc-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #3b82f6;
}

.delete-doc-btn {
    transition: all var(--transition-fast);
}

.delete-doc-btn:hover {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
}

.delete-doc-btn:active {
    transform: translateY(0);
}

/* Quick Actions */
.quick-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* API Keys Page Styles */
.api-keys-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Quick Start Section */
.api-keys-quickstart {
    background: linear-gradient(135deg, rgba(65, 141, 98, 0.1) 0%, rgba(65, 141, 98, 0.05) 100%);
    border: 1px solid rgba(65, 141, 98, 0.3);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.quickstart-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.quickstart-content p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.code-block {
    position: relative;
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    padding: 16px 48px 16px 16px;
    overflow-x: auto;
}

.code-block code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
}

.code-block .code-highlight {
    color: var(--color-primary);
    font-weight: 600;
}

.copy-code-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.copy-code-btn:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
}

.quickstart-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--color-primary);
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 500;
}

.quickstart-link:hover {
    text-decoration: underline;
}

/* API Keys Container */
.api-keys-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.api-keys-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.api-keys-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.api-keys-header .btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Empty State */
.api-keys-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.api-keys-empty svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

.api-keys-empty p {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.api-keys-empty span {
    font-size: 0.9rem;
}

/* API Keys Table */
.api-keys-table {
    width: 100%;
    border-collapse: collapse;
}

.api-keys-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
}

.api-keys-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color-light);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.api-keys-table tr:last-child td {
    border-bottom: none;
}

.api-keys-table tr:hover td {
    background: var(--bg-card-hover);
}

.api-key-name {
    font-weight: 500;
}

.api-key-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.api-key-value .key-prefix {
    background: var(--bg-input);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.api-key-copy-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.api-key-copy-btn:hover {
    color: var(--color-primary);
    background: var(--bg-input);
}

.api-key-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.api-key-status.active {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.api-key-status.inactive {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.api-key-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.api-key-action-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.api-key-action-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.api-key-action-btn.delete:hover {
    color: var(--color-error);
    border-color: var(--color-error);
}

/* Info Section */
.api-keys-info {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
}

.api-keys-info .info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.api-keys-info .info-item svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: modal-overlay-in 0.2s ease-out;
}

@keyframes modal-overlay-in {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    animation: modal-content-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

@keyframes modal-content-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.api-key-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.api-key-modal .modal-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.modal-header-icon.success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.api-key-modal .modal-body {
    padding: 24px;
}

.api-key-modal .form-group {
    margin-bottom: 16px;
}

.api-key-modal .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.api-key-modal .form-group input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: border-color var(--transition-fast);
}

.api-key-modal .form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.api-key-modal .form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.api-key-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

/* Custom Confirm/Alert Dialog */
.kita-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.kita-dialog-overlay.visible {
    opacity: 1;
}

.kita-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.2s ease;
    overflow: hidden;
}

.kita-dialog-overlay.visible .kita-dialog {
    transform: scale(1) translateY(0);
}

.kita-dialog-header {
    display: flex;
    align-items: center;
    padding: 20px 24px 16px;
    gap: 14px;
}

.kita-dialog-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kita-dialog-icon.warning,
.kita-dialog-icon.question { background: var(--color-warning-bg); color: #92400E; }
.kita-dialog-icon.danger   { background: var(--color-error-bg); color: var(--color-error); }
.kita-dialog-icon.info     { background: var(--bg-hover); color: var(--text-primary); }
.kita-dialog-icon.success  { background: var(--color-success-bg); color: var(--color-primary); }

.kita-dialog-icon svg {
    width: 18px;
    height: 18px;
}

.kita-dialog-title {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.005em;
}

.kita-dialog-body {
    padding: 0 24px 20px;
    margin-top: -4px;
    margin-left: 50px;
}

.kita-dialog-message {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 18px;
    color: var(--text-muted);
    margin: 0;
    white-space: pre-line;
}

.kita-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 24px 20px;
    border-top: none;
    background: transparent;
    border-radius: 0;
}

.kita-dialog-btn {
    padding: 8px 14px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border: 1px solid transparent;
}

.kita-dialog-btn-cancel {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.kita-dialog-btn-cancel:hover {
    background: var(--bg-hover);
}

.kita-dialog-btn-confirm {
    background: var(--text-primary);
    color: var(--bg-card);
    border-color: var(--text-primary);
}

.kita-dialog-btn-confirm:hover { opacity: 0.9; }

.kita-dialog-btn-danger {
    background: #B91C1C;
    color: white;
    border-color: #B91C1C;
}

.kita-dialog-btn-danger:hover { opacity: 0.9; }

.kita-dialog-btn-ok {
    background: var(--color-primary);
    color: white;
    min-width: 80px;
}

.kita-dialog-btn-ok:hover {
    background: var(--color-primary-dark);
}

.warning-text {
    color: var(--color-warning);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.new-key-display {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}

.new-key-display code {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
    word-break: break-all;
}

.copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.copy-btn:hover {
    background: var(--color-primary-dark);
}

/* Legacy API Key Styles (kept for compatibility) */
.api-keys-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.api-key-section {
    margin-top: 24px;
}

.api-key-section label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.api-key-display {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}

.api-key-display code {
    flex: 1;
    background: var(--bg-input);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.api-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.api-endpoint-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all var(--transition-fast);
}

.api-endpoint-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.api-endpoint-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.api-method {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-primary);
    color: white;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.api-method.get {
    background: var(--color-info);
    color: #000;
}

.api-path {
    display: block;
    background: var(--bg-input);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-highlight);
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
}

.api-endpoint-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.api-documentation-link {
    background: var(--bg-card);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
}

.api-documentation-link p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 20px;
}

/* Responsive for Home Dashboard */
@media (max-width: 768px) {
    .home-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .stat-card {
        padding: 24px 20px;
    }
    
    .stat-value {
        font-size: 2.5rem;
    }
    
    .section-header-with-action {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* Keep the + button compact, hide text-based buttons */
    .section-header-with-action .btn-sm {
        padding: 8px 10px;
    }

    /* Hide delete/download buttons on mobile, keep + button */
    #delete-all-btn,
    #download-all-json-btn,
    #remove-duplicates-btn {
        display: none !important;
    }

    .quick-actions {
        flex-direction: column;
    }
    
    .quick-actions .btn {
        width: 100%;
    }
    
    .activity-item {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .activity-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .btn-icon {
        flex: 1;
    }

    .activity-status {
        flex-shrink: 0;
    }

    .duplicate-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
        margin-left: 4px;
    }

    .duplicate-badge svg {
        width: 12px;
        height: 12px;
    }

    .batch-header {
        padding: 12px 14px;
    }

    .batch-header-content {
        gap: 8px;
        flex-wrap: wrap;
    }

    .batch-title {
        font-size: 0.9rem;
    }

    .batch-meta {
        font-size: 0.8rem;
        flex-wrap: wrap;
    }

    .batch-actions {
        width: 100%;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 8px;
    }

    .batch-actions .btn-icon {
        flex: 0 0 auto;
        padding: 10px;
    }

    .api-docs-grid {
        grid-template-columns: 1fr;
    }

    .search-sort-container {
        flex-direction: column;
        gap: 12px;
    }

    /* Search takes full width on top */
    .search-sort-container .search-wrapper {
        width: 100%;
        order: 1;
    }

    /* Filters and sort below search */
    .search-sort-container .filter-pill-btn {
        order: 2;
    }

    .search-sort-container .sort-dropdown {
        order: 3;
        margin-left: auto;
    }
}


/* ============================================
   PASSWORD STRENGTH
   ============================================ */

/* Password strength indicator */
.password-strength {
    margin-top: 8px;
}

.strength-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 5px;
}

.strength-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s;
    border-radius: 2px;
}

.strength-text {
    font-size: 12px;
    font-weight: 500;
    display: block;
    text-align: right;
}

/* ==========================================
   ENHANCED MOBILE RESPONSIVE STYLES
   ========================================== */

/* Prevent horizontal overflow on mobile. Use `clip` not `hidden` so neither
 * html nor body becomes a competing scroll container — that would break
 * position: sticky on the global top nav. */
html, body {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

/* Touch-friendly tap targets (minimum 44px) */
@media (max-width: 768px) {
    /* Navigation improvements */
    .nav-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-icon {
        font-size: 1.2rem;
    }

    /* Hide nav text on small screens, show only icons */
    .nav-item span:not(.nav-icon) {
        display: none;
    }

    .nav-item .nav-icon {
        margin-right: 0;
    }

    /* Improve sidebar toggle */
    .sidebar-toggle {
        display: none;
    }

    /* Fix main content width */
    .main-content {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Better form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        min-height: 44px;
        padding: 12px 14px;
    }

    /* Improve dropdowns */
    .dropdown-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 60vh;
        overflow-y: auto;
        animation: slideUpMobile 0.2s ease;
    }

    @keyframes slideUpMobile {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Better modals */
    .modal-content,
    .preview-modal-content {
        width: 95vw;
        max-width: 95vw;
        max-height: 90vh;
        margin: 5vh auto;
        border-radius: var(--radius-lg);
    }

    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Results section improvements */
    .results-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .results-subtitle {
        font-size: 0.85rem;
    }

    /* Document card improvements */
    .document-card {
        border-radius: var(--radius-md);
    }

    .document-title {
        font-size: 0.9rem;
        flex-wrap: wrap;
        gap: 6px;
    }

    .document-badge,
    .table-count-badge,
    .table-type-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .document-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .document-actions .btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* Better tables on mobile */
    .data-table-wrapper {
        margin: 0 -12px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Limit notification mobile */
    .limit-notification {
        margin: 0 -16px;
        border-radius: 0;
        padding: 32px 20px;
    }

    .limit-notification-logo {
        width: 60px;
        height: 60px;
    }

    .limit-notification-title {
        font-size: 1.4rem;
    }

    /* Better file queue on mobile */
    .file-queue-container {
        margin: 0 -16px;
        border-radius: 0;
    }

    .file-queue-header {
        padding: 12px 16px;
    }

    /* API Keys section mobile */
    .api-key-item {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .api-key-value {
        font-size: 0.75rem;
        word-break: break-all;
    }

    /* History section mobile */
    .activity-item {
        flex-direction: column;
        gap: 8px;
        padding: 14px;
    }

    .activity-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Settings panel mobile */
    .settings-panel {
        width: 100vw;
        max-width: 100vw;
        right: 0;
    }

    /* Toast adjustments */
    .toast-container {
        bottom: 70px; /* Above mobile nav if present */
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 380px) {
    .main-content {
        padding: 16px 12px;
    }

    .section-header h1 {
        font-size: 1.2rem;
    }

    .subtitle {
        font-size: 0.8rem;
    }

    .btn {
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    .tab {
        min-width: 100%;
        text-align: center;
    }

    .tabs {
        flex-direction: column;
        gap: 8px;
    }

    .nav-menu {
        padding: 4px;
    }

    .nav-item {
        padding: 10px 4px;
    }

    .logo {
        width: 70px;
    }

    /* Stack document header elements */
    .document-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .document-toggle {
        flex-shrink: 0;
    }

    /* Full width buttons */
    .btn-remove-doc,
    .btn-download-icon {
        width: auto;
    }

    /* Improve readability */
    .metadata-item label {
        font-size: 0.7rem;
    }

    .metadata-item span {
        font-size: 0.85rem;
    }
}

/* Landscape mode on mobile */
@media (max-width: 900px) and (orientation: landscape) {
    .sidebar {
        height: auto;
        max-height: 60px;
    }

    .nav-menu {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .main-content {
        min-height: calc(100vh - 60px);
    }

    .login-section {
        padding: 20px;
    }

    .login-card {
        max-width: 500px;
        padding: 24px;
    }

    .modal-content {
        max-height: 85vh;
    }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    .sidebar {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }

    .main-content {
        padding-left: max(48px, env(safe-area-inset-left));
        padding-right: max(48px, env(safe-area-inset-right));
        padding-bottom: max(32px, env(safe-area-inset-bottom));
    }

    .toast-container {
        bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   MOBILE SETTINGS MENU
   ========================================== */

.mobile-settings-menu {
    display: none;
    position: fixed;
    bottom: 70px;
    right: 16px;
    width: calc(100% - 32px);
    max-width: 300px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    animation: slideUpSettings 0.2s ease;
}

.mobile-settings-menu.active {
    display: block;
}

@keyframes slideUpSettings {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-settings-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.mobile-settings-content {
    padding: 12px;
}

.mobile-settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border-color-light);
}

.mobile-settings-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.mobile-settings-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.mobile-settings-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.mobile-settings-link:hover {
    background: var(--bg-hover);
}

.mobile-settings-link svg {
    color: var(--text-muted);
}

.mobile-settings-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    margin-top: 8px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mobile-settings-logout:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Hide settings nav item on desktop, show on mobile */
.nav-item-settings {
    display: none;
}

@media (max-width: 768px) {
    .nav-item-settings {
        display: flex;
    }

    /* Hide sidebar footer on mobile since we have settings menu */
    .sidebar-footer {
        display: none;
    }
}

/* Better focus states for accessibility */
@media (max-width: 768px) {
    *:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    .btn:focus,
    .nav-item:focus,
    input:focus,
    select:focus {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }
}

/* ================================================
   FRAUD DETECTION DASHBOARD
   Apple-style, elegant design
   ================================================ */

/* Main Dashboard Container */
.fraud-dashboard {
    padding: var(--spacing-lg) var(--spacing-lg);
    max-width: 100%;
}

/* Authenticity Score Header */
.fraud-authenticity-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background: linear-gradient(180deg, var(--bg-input) 0%, var(--bg-card) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color-light);
}

/* Score Ring Container */
.fraud-score-ring {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 16px;
}

.fraud-score-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.fraud-score-ring .ring-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 10;
}

.fraud-score-ring .ring-progress {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out, stroke 0.3s ease;
}

.fraud-score-ring .ring-progress.risk-low {
    stroke: var(--color-success);
}

.fraud-score-ring .ring-progress.risk-medium {
    stroke: var(--color-warning);
}

.fraud-score-ring .ring-progress.risk-high {
    stroke: var(--color-error);
}

.fraud-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.fraud-score-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

/* Risk Badge */
.fraud-risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fraud-risk-badge.risk-low {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.fraud-risk-badge.risk-medium {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.fraud-risk-badge.risk-high {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.fraud-risk-badge.risk-unknown {
    background: var(--bg-input);
    color: var(--text-muted);
}

.fraud-capture-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-input);
    color: var(--text-secondary);
    margin-top: 4px;
}

.fraud-template-info {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Category Cards Grid */
.fraud-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
    .fraud-category-grid {
        grid-template-columns: 1fr;
    }
}

.fraud-category-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-normal);
}

.fraud-category-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color);
}

.fraud-category-card.status-pass {
    border-left: 3px solid var(--color-success);
}

.fraud-category-card.status-warn {
    border-left: 3px solid var(--color-warning);
}

.fraud-category-card.status-fail {
    border-left: 3px solid var(--color-error);
}

.fraud-category-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.fraud-category-name {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.fraud-category-score {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.fraud-category-signals {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Integrity Checks Section */
.fraud-integrity-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.fraud-integrity-section h4 {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.fraud-check-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fraud-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.fraud-check-item:hover {
    background: var(--bg-card-hover);
}

.fraud-check-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.fraud-check-icon.pass {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.fraud-check-icon.warn {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.fraud-check-icon.fail {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.fraud-check-label {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.fraud-check-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 12px;
}

.fraud-check-status.pass {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.fraud-check-status.warn {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.fraud-check-status.fail {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* Signals Section */
.fraud-signals-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.fraud-signals-section h4 {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.fraud-signals-empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.fraud-signal-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.fraud-signal-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-input);
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
    transition: all var(--transition-fast);
}

.fraud-signal-item:hover {
    background: var(--bg-card-hover);
}

.fraud-signal-item.severity-critical {
    border-left-color: #7c3aed;
    background: rgba(124, 58, 237, 0.05);
}

.fraud-signal-item.severity-high {
    border-left-color: var(--color-error);
    background: rgba(220, 38, 38, 0.05);
}

.fraud-signal-item.severity-medium {
    border-left-color: var(--color-warning);
    background: rgba(217, 119, 6, 0.05);
}

.fraud-signal-item.severity-low {
    border-left-color: var(--color-info);
    background: rgba(212, 168, 53, 0.05);
}

.fraud-severity-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.fraud-severity-badge.critical {
    background: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
}

.fraud-severity-badge.high {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.fraud-severity-badge.medium {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.fraud-severity-badge.low {
    background: var(--color-info-bg);
    color: #b8922e;
}

.fraud-signal-content {
    flex: 1;
    min-width: 0;
}

.fraud-signal-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 4px;
}

.fraud-signal-page {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Summary Section */
.fraud-summary {
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.fraud-summary-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.fraud-summary-stats {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.fraud-summary-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.fraud-summary-stat .count {
    font-weight: 600;
    color: var(--text-primary);
}

/* ================================================
   FRAUD DETECTION DASHBOARD V2
   Analyst-focused, detailed view
   ================================================ */

.fraud-dashboard-v2 {
    padding: var(--spacing-lg);
    max-width: 100%;
}

/* Overview Section */
.fraud-overview {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-card) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color-light);
    margin-bottom: var(--spacing-xl);
}

.fraud-score-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.fraud-score-meta {
    text-align: center;
}

.fraud-risk-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
    max-width: 200px;
}

.fraud-stats-section {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

.fraud-stat-item {
    text-align: center;
    padding: var(--spacing-md);
    min-width: 80px;
}

.fraud-stat-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.fraud-stat-item.high .fraud-stat-value { color: var(--color-error); }
.fraud-stat-item.medium .fraud-stat-value { color: var(--color-warning); }
.fraud-stat-item.low .fraud-stat-value { color: var(--text-muted); }

.fraud-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Section Titles */
.fraud-section-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.fraud-section-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

/* Category Sections */
.fraud-categories-section {
    margin-bottom: var(--spacing-xl);
}

.fraud-category-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
}

.fraud-category-section.pass { border-left: 4px solid var(--color-success); }
.fraud-category-section.warn { border-left: 4px solid var(--color-warning); }
.fraud-category-section.fail { border-left: 4px solid var(--color-error); }

.fraud-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: background 0.15s ease;
}

.fraud-category-header:hover {
    background: var(--bg-hover);
}

.fraud-category-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.fraud-category-section .fraud-category-icon {
    font-size: 1.5rem;
    margin-bottom: 0;
}

.fraud-category-info {
    display: flex;
    flex-direction: column;
}

.fraud-category-section .fraud-category-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 2px;
}

.fraud-category-section .fraud-category-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.fraud-category-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.fraud-category-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.fraud-category-status.pass {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.fraud-category-status.warn {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.fraud-category-status.fail {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.fraud-category-expand {
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.fraud-category-section.expanded .fraud-category-expand {
    transform: rotate(180deg);
}

/* Category Details (Hidden by default) */
.fraud-category-details {
    display: none;
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color-light);
    background: var(--bg-input);
}

.fraud-category-section.expanded .fraud-category-details {
    display: block;
}

.fraud-checks-title,
.fraud-findings-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.fraud-checks-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md) 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 6px;
}

.fraud-checks-list li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-left: 20px;
    position: relative;
}

.fraud-checks-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: bold;
}

.fraud-category-clean {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--spacing-md);
    background: var(--color-success-bg);
    border-radius: var(--radius-sm);
    color: var(--color-success);
    font-size: 0.9rem;
}

.fraud-category-clean .clean-icon {
    font-weight: bold;
}

/* Findings */
.fraud-category-findings {
    margin-top: var(--spacing-md);
}

.fraud-finding-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color-light);
    margin-bottom: 8px;
}

.fraud-finding-item.severity-high {
    border-left: 3px solid var(--color-error);
}

.fraud-finding-item.severity-medium {
    border-left: 3px solid var(--color-warning);
}

.fraud-finding-item.severity-low {
    border-left: 3px solid var(--text-muted);
}

.fraud-finding-content {
    flex: 1;
}

.fraud-finding-id {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.fraud-finding-reason {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.fraud-finding-details {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    margin-top: 8px;
    word-break: break-all;
}

.fraud-finding-page {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Analyst Notes */
.fraud-analyst-notes {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.fraud-notes-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

.fraud-notes-content p:last-child {
    margin-bottom: 0;
}

.fraud-meta-info {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    margin-top: var(--spacing-md) !important;
}

/* Tamper Highlights Section */
.tamper-highlights-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.tamper-highlights-section.high {
    border-left: 4px solid var(--color-error);
}

.tamper-highlights-section.medium {
    border-left: 4px solid var(--color-warning);
}

.tamper-highlights-section.low {
    border-left: 4px solid var(--color-success);
}

.tamper-highlights-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: background 0.15s ease;
}

.tamper-highlights-header:hover {
    background: var(--bg-hover);
}

.tamper-highlights-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.tamper-highlights-icon {
    font-size: 1.2rem;
}

.tamper-highlights-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
}

.tamper-highlights-expand {
    color: var(--text-muted);
    transition: transform 0.2s ease;
    font-size: 0.7rem;
}

.tamper-highlights-section.expanded .tamper-highlights-expand {
    transform: rotate(180deg);
}

.tamper-highlights-body {
    display: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color-light);
    background: var(--bg-input);
}

.tamper-highlights-section.expanded .tamper-highlights-body {
    display: block;
}

.tamper-highlights-summary {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color-light);
}

.tamper-highlights-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.tamper-highlight-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    transition: box-shadow 0.15s ease;
}

.tamper-highlight-item:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.tamper-highlight-item.severity-high {
    border-left: 3px solid var(--color-error);
}

.tamper-highlight-item.severity-medium {
    border-left: 3px solid var(--color-warning);
}

.tamper-highlight-item.severity-low {
    border-left: 3px solid var(--color-info, #3b82f6);
}

.tamper-highlight-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 6px;
}

.tamper-severity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tamper-severity-badge.high {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.tamper-severity-badge.medium {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.tamper-severity-badge.low {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.tamper-field-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
}

.tamper-category-tag {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: auto;
}

.tamper-highlight-body {
    padding-left: calc(8px + var(--spacing-sm));
}

.tamper-value-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    font-size: 0.82rem;
    margin-bottom: 2px;
}

.tamper-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    min-width: 60px;
}

.tamper-value {
    font-family: var(--font-mono, monospace);
    color: var(--color-error);
    font-weight: 500;
}

.tamper-expected {
    font-family: var(--font-mono, monospace);
    color: var(--color-success);
    font-size: 0.82rem;
}

.tamper-reason {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}

.tamper-no-issues {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    color: var(--color-success);
    font-size: 0.85rem;
}

.tamper-no-issues-icon {
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .fraud-overview {
        flex-direction: column;
        align-items: center;
    }

    .fraud-stats-section {
        justify-content: center;
    }

    .fraud-checks-list {
        grid-template-columns: 1fr;
    }
}

/* Loading State */
.fraud-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.fraud-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Error State */
.fraud-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.fraud-error-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
    color: var(--color-warning);
}

/* ==============================================================================
   AFS AGENT CHAT - PAGE JUMP LINKS
   ============================================================================== */

.page-jump-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 4px;
    padding: 1px 6px;
    margin: 0 2px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
    vertical-align: baseline;
    /* color, background, border set inline per document */
}

.page-jump-link:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.page-jump-link:active {
    transform: translateY(0);
}

.page-jump-link .page-jump-icon {
    font-size: 0.8em;
    opacity: 0.85;
}

/* ==============================================================================
   SETTINGS PAGE STYLES
   ============================================================================== */

/* Settings Page Layout */
.settings-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
    max-width: none;
}

/* === Settings v2 — profile / org / plan / branding cards ============================ */

.settings-stack-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.settings-stack-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-stack-card-head-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.settings-stack-card-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: var(--text-primary);
}

.settings-stack-card-sub {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 18px;
    color: var(--text-muted);
}

/* Profile avatar block */
.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--bg-card);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 24px;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border-color);
}

.profile-avatar.has-image {
    color: transparent;
}

.profile-avatar-camera {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(24, 24, 27, 0.08);
    transition: transform 0.15s ease;
}

.profile-avatar-wrap:hover .profile-avatar-camera {
    transform: scale(1.08);
}

.profile-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-primary);
}

.profile-email {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 18px;
    color: var(--text-muted);
}

.profile-hint {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 16px;
    color: var(--text-muted);
    padding-top: 4px;
}

/* Organization empty + filled cards */
.org-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 24px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
}

.org-empty-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.org-empty-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-primary);
    text-align: center;
}

.org-empty-sub {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 18px;
    color: var(--text-muted);
    text-align: center;
    max-width: 380px;
}

.org-empty-actions {
    display: flex;
    gap: 8px;
    padding-top: 6px;
}

.org-filled-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.org-filled-logo {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-card);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.org-filled-logo.has-image span { display: none; }

.org-filled-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.org-filled-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 20px;
    color: var(--text-primary);
}

.org-filled-sub {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 16px;
    color: var(--text-muted);
}

.org-role-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--color-success-bg);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    color: var(--color-primary);
    text-transform: capitalize;
}

.org-role-pill.role-member { background: var(--bg-hover); color: var(--text-muted); }
.org-role-pill.role-admin { background: var(--color-warning-bg); color: #92400E; }
.org-role-pill.role-owner { background: var(--color-success-bg); color: var(--color-primary); }

/* Plan card */
.settings-plan-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.settings-plan-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-plan-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-primary);
}

.settings-plan-sub {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 18px;
    color: var(--text-muted);
}

.settings-logout-btn {
    align-self: flex-start;
}

/* Branding panel */
.white-label-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--bg-hover);
    border-radius: 5px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.branding-grid {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.branding-field-label {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 16px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.branding-upload-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 100px;
    background: var(--bg-secondary);
    border: 1.5px dashed var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden;
}

.branding-upload-tile:hover {
    border-color: var(--color-primary);
    background: var(--bg-hover);
}

.branding-upload-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 12px;
}

.branding-upload-tile img.branding-uploaded {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.branding-preview-col {
    flex: 1;
    min-width: 0;
}

.branding-preview {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    height: 100px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.branding-preview-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.branding-preview-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.branding-preview-logo {
    height: 22px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.branding-preview-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.branding-preview-link {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
}

.branding-preview-link.active {
    color: var(--text-primary);
    font-weight: 500;
}

.branding-actions {
    display: flex;
    gap: 8px;
    padding-top: 4px;
}

.btn-dark-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #18181B;
    border: 1px solid #18181B;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.05s;
}

.btn-dark-sm:hover { opacity: 0.9; }
.btn-dark-sm:active { transform: scale(0.98); }

.branding-status {
    margin: 6px 0 0 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text-muted);
}

.branding-status.success { color: var(--color-primary); }
.branding-status.error { color: var(--color-error); }

/* Suppress legacy no-org / invite notices — replaced by new Profile-panel cards */
#no-organization-notice,
#pending-user-invitations-card.settings-card.invitation-card {
    display: none !important;
}

/* === Profile name inline edit ============================ */
.profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-name-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.profile-name-edit-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.profile-name-input {
    height: 32px;
    padding: 0 10px;
    background: var(--bg-card);
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-glow);
    width: 240px;
    box-sizing: border-box;
}

/* First / last name inline edit */
.profile-name-edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 2px;
}

.profile-name-fields {
    display: flex;
    gap: 10px;
}

.profile-name-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.profile-name-field-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11.5px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.profile-name-field input {
    height: 36px;
    padding: 0 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    width: 200px;
    max-width: 100%;
}

.profile-name-field input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.profile-name-error {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: #B91C1C;
}

.profile-name-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* === Preferences cards ============================ */
.pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 6px;
}

.pref-row-divided {
    padding-top: 14px;
    border-top: 1px solid var(--border-color-light);
}

.pref-row-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pref-label-text {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    line-height: 18px;
    color: var(--text-primary);
}

.pref-label-sub {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 16px;
    color: var(--text-muted);
}

.pref-segmented {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 9px;
}

.pref-seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.pref-seg:hover { color: var(--text-primary); }

.pref-seg.active {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05);
}

.pref-locked-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 240px;
    height: 40px;
    padding: 0 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-muted);
    box-sizing: border-box;
    opacity: 0.85;
}

.pref-locked-tag {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pref-select {
    appearance: none;
    -webkit-appearance: none;
    width: 240px;
    height: 40px;
    padding: 0 38px 0 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pref-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.pref-select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

.pref-tz {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.pref-tz-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #418D62;
}

.pref-tz-value {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
}

.pref-tz-override {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.pref-tz-override:hover { color: var(--color-primary); }

/* === Team panel ============================ */
.team-card-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-seats-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--bg-hover);
    border-radius: 5px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11.5px;
    color: var(--text-muted);
}

.team-invite-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.team-invite-email {
    flex: 1;
    height: 40px;
    padding: 0 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    box-sizing: border-box;
}

.team-invite-email::placeholder { color: var(--text-muted); }

.team-invite-email:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.team-invite-role {
    appearance: none;
    -webkit-appearance: none;
    width: 120px;
    height: 40px;
    padding: 0 30px 0 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text-primary);
    cursor: pointer;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.team-invite-role:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.team-invite-role option {
    background: var(--bg-card);
    color: var(--text-primary);
}

.team-list-card {
    padding: 24px 28px;
    gap: 14px;
}

.team-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-list-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
}

.team-list-count {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    background: var(--bg-hover);
    border-radius: 9px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11.5px;
    color: var(--text-muted);
}

.team-list-count-warn {
    background: #FEF3C7;
    color: #92400E;
}

.team-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Restyle existing .member-item rows when they live inside .team-list */
.team-list .member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color-light);
}

.team-list .member-item:first-child { border-top: 1px solid var(--border-color-light); }

.team-list .member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
}

.team-list .member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-list .member-avatar .avatar-initials {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.team-list .member-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.team-list .member-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    line-height: 18px;
    color: var(--text-primary);
}

.team-list .member-email,
.team-list .member-status {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 16px;
    color: var(--text-muted);
}

.team-list .role-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--bg-hover);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    color: var(--text-muted);
}

.team-list .role-badge.role-owner { background: var(--color-success-bg); color: var(--color-primary); }
.team-list .role-badge.role-admin { background: var(--color-warning-bg); color: #92400E; }

.team-list .member-action-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.team-list .member-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.team-list .member-action-btn.danger:hover { color: var(--color-error); }

.team-list .members-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.team-list .members-empty svg { color: var(--border-color); }

.team-leave-btn {
    align-self: flex-start;
    color: #B91C1C !important;
    border-color: #FECACA !important;
}

.team-leave-btn:hover { background: #FEE2E2 !important; }

.team-invite-card { padding: 20px 28px; }

/* === Results page (top-level) ============================ */

.results-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 64px 32px;
    background: #FFFFFF;
    border: 1.5px dashed #E7E5E4;
    border-radius: 14px;
}

.results-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #F5F5F4;
    color: #737373;
    display: flex;
    align-items: center;
    justify-content: center;
}

.results-empty-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.results-empty-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #18181B;
}

.results-empty-sub {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 20px;
    color: #737373;
    text-align: center;
    max-width: 420px;
}

.results-empty-actions {
    display: flex;
    gap: 8px;
    padding-top: 8px;
}

.results-populated {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 12px;
}

.results-toolbar-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.results-toolbar-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #18181B;
}

.results-toolbar-sub {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: #737373;
}

.results-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.results-overflow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 8px;
    color: #737373;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.results-overflow-btn:hover {
    background: #F5F5F4;
    color: #18181B;
}

#results-overflow-dropdown {
    position: relative;
}

#results-overflow-dropdown .dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 180px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(24, 24, 27, 0.08);
    padding: 4px;
    z-index: 100;
}

#results-overflow-dropdown .dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #18181B;
    text-align: left;
    cursor: pointer;
}

#results-overflow-dropdown .dropdown-item:hover { background: #F5F5F4; }

/* Cross-check disabled (when multi-applicant) */
.results-cross-check-disabled {
    opacity: 0.55;
    cursor: not-allowed !important;
    background: #F5F5F4 !important;
    border-color: #E7E5E4 !important;
    color: #737373 !important;
}

/* Split layout container */
#results-section .results-layout {
    display: flex;
    gap: 0;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 12px;
    overflow: hidden;
    min-height: 560px;
}

/* Results page reads edge-to-edge — the bordered .results-layout box runs
   flush to the window edges so wide tables get every available pixel.
   The section header gets its own small horizontal inset so "Results" +
   subtitle don't sit flush against the screen edge. */
.main-content:has(#results-section.active) {
    padding-left: 0;
    padding-right: 0;
    padding-top: 12px;
}
#results-section .section-header {
    padding: 0 16px;
}
@media (min-width: 1600px) {
    #results-section .section-header {
        padding: 0 24px;
    }
}

/* Sidebar restyle */
#results-section .documents-sidebar {
    display: flex;
    flex-direction: column;
    width: 248px;
    flex-shrink: 0;
    border-right: 1px solid #E7E5E4;
    background: #FFFFFF;
}

.results-sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px;
    height: 32px;
    padding: 0 12px;
    background: #FAFAFA;
    border: 1px solid #E7E5E4;
    border-radius: 7px;
    color: #737373;
}

.results-sidebar-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: #18181B;
}

.results-sidebar-search input::placeholder { color: #A3A3A3; }

#results-section .documents-list-sidebar {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Show every doc inline — no inner scrollbar. If the list grows past the
     * viewport the whole page scrolls instead, which matches how a normal list
     * behaves and avoids the "tiny scroll inside a panel" UX. */
    overflow-y: visible;
    border-top: 1px solid #F5F5F4;
}

/* Applicant group header (rendered by JS) */
.results-applicant-group { display: flex; flex-direction: column; border-bottom: 1px solid #F5F5F4; }
.results-applicant-group:last-child { border-bottom: none; }

.results-applicant-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FAFAFA;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    width: 100%;
    text-align: left;
}

.results-applicant-group-header:hover { background: #F5F5F4; }

.results-applicant-group-chev {
    font-family: var(--font-body);
    font-size: 11px;
    color: #737373;
    transition: transform 0.15s;
    width: 12px;
    text-align: center;
}

.results-applicant-group.collapsed .results-applicant-group-chev { transform: rotate(-90deg); }

.results-applicant-group-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: #18181B;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.results-applicant-group-count {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: #737373;
}

.results-applicant-group-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10.5px;
    background: #F5F5F4;
    color: #737373;
}

.results-applicant-group-status.done { background: #ECFDF5; color: #418D62; }
.results-applicant-group-status.processing { background: #FEF3C7; color: #92400E; }
.results-applicant-group-status.failed { background: #FEE2E2; color: #B91C1C; }

.results-applicant-group-rows { display: flex; flex-direction: column; }
.results-applicant-group.collapsed .results-applicant-group-rows { display: none; }

/* Individual doc row in sidebar */
.results-doc-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px;
    border-bottom: 1px solid #F5F5F4;
    background: #FFFFFF;
    cursor: pointer;
    transition: background 0.15s;
    border-left: 3px solid transparent;
}

.results-doc-row:hover { background: #FAFAFA; }

.results-doc-row.selected {
    background: #F5F5F4;
    border-left-color: #18181B;
}

.results-doc-row-top { display: flex; align-items: center; gap: 8px; }

.results-doc-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.results-doc-status-dot.done       { background: #418D62; }
.results-doc-status-dot.processing { background: #92400E; }
.results-doc-status-dot.classifying{ background: #92400E; }
.results-doc-status-dot.failed     { background: #B91C1C; }
.results-doc-status-dot.queued     { background: #A3A3A3; }
.results-doc-status-dot.pending    { background: #A3A3A3; }

.results-doc-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: #18181B;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.results-doc-row.selected .results-doc-name { font-weight: 600; }

.results-doc-sub {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: #737373;
    padding-left: 16px;
}

.results-doc-sub.failed { color: #B91C1C; }

/* Tab strip restyle (scoped to #results-section) */
#results-section .detail-tabs-container {
    border-bottom: 1px solid #E7E5E4;
    padding: 0 24px;
    background: #FFFFFF;
}

#results-section .tabs { display: flex; align-items: center; gap: 6px; }

#results-section .tab {
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #737373;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
}

#results-section .tab:hover { color: #18181B; }

#results-section .tab.active {
    color: #18181B;
    font-weight: 500;
    border-bottom-color: #18181B;
}

#results-section .detail-content {
    /* Comfortable inner padding so content doesn't crash against the panel
     * walls. Wide tables still get most of the panel width. */
    padding: 24px 24px;
    overflow-y: auto;
    /* Reserve scrollbar space at all times so switching between Extract /
     * Fraud Check / Analysis (which have different content heights) doesn't
     * shift the layout horizontally when the vertical scrollbar appears
     * or disappears. */
    scrollbar-gutter: stable;
}

/* No-selection placeholder */
#results-section .no-selection-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    flex: 1;
}

.no-selection-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #F5F5F4;
    color: #737373;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-selection-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    color: #18181B;
}

.no-selection-sub {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 18px;
    color: #737373;
    text-align: center;
    max-width: 320px;
}

/* Nav-link unread dot for Results */
.app-nav-link[data-section="results"][data-has-results="true"]::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #418D62;
    margin-left: 6px;
    transform: translateY(-1px);
}

/* Dark-mode overrides */
[data-theme="dark"] .results-empty-card { background: #1A1F26; border-color: #30363D; }
[data-theme="dark"] .results-empty-icon { background: #242B33; color: #A1A7AD; }
[data-theme="dark"] .results-empty-title { color: #E7E9EA; }
[data-theme="dark"] .results-empty-sub { color: #A1A7AD; }
[data-theme="dark"] .results-toolbar { background: #1A1F26; border-color: #30363D; }
[data-theme="dark"] .results-toolbar-title { color: #E7E9EA; }
[data-theme="dark"] .results-toolbar-sub { color: #A1A7AD; }
[data-theme="dark"] .results-overflow-btn { background: #1A1F26; border-color: #30363D; color: #A1A7AD; }
[data-theme="dark"] .results-overflow-btn:hover { background: #242B33; color: #E7E9EA; }
[data-theme="dark"] #results-overflow-dropdown .dropdown-menu { background: #1A1F26; border-color: #30363D; }
[data-theme="dark"] #results-overflow-dropdown .dropdown-item { color: #E7E9EA; }
[data-theme="dark"] #results-overflow-dropdown .dropdown-item:hover { background: #242B33; }
[data-theme="dark"] #results-section .results-layout { background: #1A1F26; border-color: #30363D; }
[data-theme="dark"] #results-section .documents-sidebar { background: #1A1F26; border-right-color: #30363D; }
[data-theme="dark"] .results-sidebar-search { background: #151A21; border-color: #30363D; color: #A1A7AD; }
[data-theme="dark"] .results-sidebar-search input { color: #E7E9EA; }
[data-theme="dark"] #results-section .documents-list-sidebar { border-top-color: #242B33; }
[data-theme="dark"] .results-applicant-group { border-bottom-color: #242B33; }
[data-theme="dark"] .results-applicant-group-header { background: #151A21; }
[data-theme="dark"] .results-applicant-group-header:hover { background: #242B33; }
[data-theme="dark"] .results-applicant-group-chev { color: #A1A7AD; }
[data-theme="dark"] .results-applicant-group-name { color: #E7E9EA; }
[data-theme="dark"] .results-applicant-group-count { color: #A1A7AD; }
[data-theme="dark"] .results-applicant-group-status { background: #242B33; color: #A1A7AD; }
[data-theme="dark"] .results-doc-row { background: #1A1F26; border-bottom-color: #242B33; }
[data-theme="dark"] .results-doc-row:hover { background: #242B33; }
[data-theme="dark"] .results-doc-row.selected { background: #242B33; border-left-color: #E7E9EA; }
[data-theme="dark"] .results-doc-name { color: #E7E9EA; }
[data-theme="dark"] .results-doc-sub { color: #A1A7AD; }
[data-theme="dark"] #results-section .detail-tabs-container { background: #1A1F26; border-bottom-color: #30363D; }
[data-theme="dark"] #results-section .tab { color: #A1A7AD; }
[data-theme="dark"] #results-section .tab.active { color: #E7E9EA; border-bottom-color: #E7E9EA; }
[data-theme="dark"] .no-selection-icon { background: #242B33; color: #A1A7AD; }
[data-theme="dark"] .no-selection-title { color: #E7E9EA; }
[data-theme="dark"] .no-selection-sub { color: #A1A7AD; }

/* Compact density */
[data-density="compact"] .results-toolbar { padding: 12px 16px; }
[data-density="compact"] .results-applicant-group-header { padding: 9px 14px; }
[data-density="compact"] .results-doc-row { padding: 9px 14px; }
[data-density="compact"] #results-section .tab { padding: 9px 12px; font-size: 12.5px; }
[data-density="compact"] #results-section .results-layout { min-height: 480px; }

/* === Map existing renderer markup (.sidebar-applicant-group / .sidebar-doc-item) to the new look ============ */

#results-section .sidebar-applicant-group {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #F5F5F4;
}

#results-section .sidebar-applicant-group:last-child { border-bottom: none; }

#results-section .sidebar-applicant-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FAFAFA;
    border: none;
    border-bottom: 1px solid #F5F5F4;
}

#results-section .sidebar-applicant-group-header svg { color: #737373; flex-shrink: 0; }

#results-section .sidebar-applicant-group-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

#results-section .sidebar-applicant-group-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: #18181B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#results-section .sidebar-applicant-group-count {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: #737373;
}

/* Sidebar doc rows — map .sidebar-doc-item to .results-doc-row look */
#results-section .sidebar-doc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FFFFFF;
    border: none;
    border-bottom: 1px solid #F5F5F4;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.15s;
}

#results-section .sidebar-doc-item:hover { background: #FAFAFA; }
#results-section .sidebar-doc-item.selected {
    background: #F5F5F4;
    border-left-color: #18181B;
}

#results-section .sidebar-doc-item .status-icon-svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

#results-section .sidebar-doc-item .doc-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

#results-section .sidebar-doc-item .doc-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: #18181B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#results-section .sidebar-doc-item.selected .doc-name { font-weight: 600; }

#results-section .sidebar-doc-item .doc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11.5px;
    color: #737373;
}

#results-section .sidebar-doc-item .doc-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    background: #F5F5F4;
    border-radius: 5px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    color: #18181B;
}

#results-section .sidebar-doc-item .doc-time { color: #737373; }
#results-section .sidebar-doc-item .doc-time.uploading,
#results-section .sidebar-doc-item .doc-time.queued,
#results-section .sidebar-doc-item .processing-timer { color: #92400E; }

#results-section .sidebar-doc-item.failed .doc-name { color: #18181B; }
#results-section .sidebar-doc-item.failed .doc-meta { color: #B91C1C; }

#results-section .sidebar-remove-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #A3A3A3;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}

#results-section .sidebar-doc-item:hover .sidebar-remove-btn { opacity: 1; }
#results-section .sidebar-remove-btn:hover { background: #F5F5F4; color: #B91C1C; }

[data-theme="dark"] #results-section .sidebar-applicant-group { border-bottom-color: #242B33; }
[data-theme="dark"] #results-section .sidebar-applicant-group-header {
    background: #151A21;
    border-bottom-color: #242B33;
}
[data-theme="dark"] #results-section .sidebar-applicant-group-header svg { color: #A1A7AD; }
[data-theme="dark"] #results-section .sidebar-applicant-group-name { color: #E7E9EA; }
[data-theme="dark"] #results-section .sidebar-applicant-group-count { color: #A1A7AD; }
[data-theme="dark"] #results-section .sidebar-doc-item {
    background: #1A1F26;
    border-bottom-color: #242B33;
}
[data-theme="dark"] #results-section .sidebar-doc-item:hover { background: #242B33; }
[data-theme="dark"] #results-section .sidebar-doc-item.selected {
    background: #242B33;
    border-left-color: #E7E9EA;
}
[data-theme="dark"] #results-section .sidebar-doc-item .doc-name { color: #E7E9EA; }
[data-theme="dark"] #results-section .sidebar-doc-item .doc-type-pill { background: #242B33; color: #E7E9EA; }
[data-theme="dark"] #results-section .sidebar-doc-item .doc-meta,
[data-theme="dark"] #results-section .sidebar-doc-item .doc-time { color: #A1A7AD; }
[data-theme="dark"] #results-section .sidebar-remove-btn { color: #6E7681; }
[data-theme="dark"] #results-section .sidebar-remove-btn:hover { background: #242B33; }

/* === History page — Applicants / All documents view toggle ============== */

.history-view-toggle {
    align-self: flex-start;
}

/* Unassigned section divider (Applicants mode) */
.history-unassigned-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 16px;
    background: #fafbfc;
    border-top: 1px solid #f1f3f5;
    border-bottom: 1px solid #f1f3f5;
    margin-top: 0;
}

.history-unassigned-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    color: #A3A3A3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.history-unassigned-hint {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: #737373;
}

[data-theme="dark"] .history-unassigned-divider { border-top-color: #30363D; }
[data-theme="dark"] .history-unassigned-label { color: #6E7681; }
[data-theme="dark"] .history-unassigned-hint { color: #A1A7AD; }

/* Flat document rows (All documents mode) — reuses .applicant-row / .applicant-header
   so columns line up identically with the grouped Applicants view. Only small overrides
   live here. */

/* Square doc icon (vs the circular person avatar in Applicants mode) */
.history-flat-row .applicant-avatar.history-flat-row-icon-square {
    border-radius: 8px;
    background: #F5F5F4;
    color: #737373;
}

[data-theme="dark"] .history-flat-row .applicant-avatar.history-flat-row-icon-square {
    background: #242B33;
    color: #A1A7AD;
}

[data-density="compact"] .history-unassigned-divider { padding: 12px 18px 8px; }

/* === Auth screens (verify / forgot / reset / invite) ============================ */

.auth-page { /* inherits .login-page layout */ }

/* When an auth view is active, suppress the login screen and any auth bootstrap that re-shows it */
body.auth-view-active #login-container,
body.auth-view-active #app-container,
body.auth-view-active #onboarding-container { display: none !important; }

.auth-heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.02em;
    color: #18181B;
    margin: 0;
}

.auth-title-accent { color: #418D62; }

.auth-sub {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 21px;
    color: #737373;
    margin: 0;
}

.auth-sub strong { color: #18181B; font-weight: 500; }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: #18181B;
}

.auth-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #18181B;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-input::placeholder { color: #A3A3A3; }

.auth-input:focus {
    outline: none;
    border-color: #418D62;
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.12);
}

.auth-input-with-toggle { position: relative; }

.auth-input-with-toggle .auth-input { padding-right: 42px; }

.auth-eye-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #737373;
    cursor: pointer;
    border-radius: 6px;
}

.auth-eye-btn:hover { background: #F5F5F4; color: #18181B; }

.auth-error {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 18px;
    color: #B91C1C;
    background: #FEE2E2;
    border: 1px solid #FECACA;
    padding: 8px 12px;
    border-radius: 8px;
}

.auth-primary-btn {
    width: 100%;
    height: 46px;
    background: #418D62;
    border: 1px solid #418D62;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s, transform 0.05s;
}

.auth-primary-btn:hover { background: #2C6845; }
.auth-primary-btn:active { transform: scale(0.99); }
.auth-primary-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Code grid */
.auth-code-grid {
    display: flex;
    gap: 10px;
}

.auth-code-cell {
    width: 52px;
    height: 60px;
    text-align: center;
    background: #FFFFFF;
    border: 1.5px solid #E7E5E4;
    border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 24px;
    color: #18181B;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-code-cell:focus {
    outline: none;
    border-color: #418D62;
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.12);
}

/* Strength meter */
.auth-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -6px;
}

.auth-strength-bars {
    display: flex;
    gap: 4px;
    flex: 1;
}

.auth-strength-bar {
    flex: 1;
    height: 4px;
    background: #E7E5E4;
    border-radius: 2px;
    transition: background 0.2s;
}

.auth-strength-bar.fill-weak { background: #B91C1C; }
.auth-strength-bar.fill-fair { background: #92400E; }
.auth-strength-bar.fill-strong { background: #418D62; }

.auth-strength-label {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    color: #737373;
    min-width: 50px;
    text-align: right;
}

.auth-strength-label.label-weak { color: #B91C1C; }
.auth-strength-label.label-fair { color: #92400E; }
.auth-strength-label.label-strong { color: #418D62; }

/* Resend / secondary rows */
.auth-secondary-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #737373;
}

.auth-secondary-center {
    flex-direction: row;
    justify-content: center;
    gap: 4px;
    align-items: center;
}

.auth-secondary-decline { padding-top: 4px; }

.auth-resend-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.auth-resend-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: #18181B;
    text-decoration: underline;
    cursor: pointer;
}

.auth-resend-btn:hover { color: #418D62; }

.auth-resend-cooldown { color: #A3A3A3; }

.auth-escape-link {
    color: #18181B;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-escape-link:hover { color: #418D62; }

/* Success card (forgot password sent state) */
.auth-success-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 20px 24px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 12px;
    text-align: center;
}

.auth-success-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ECFDF5;
    color: #418D62;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-success-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: #18181B;
}

.auth-success-sub {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 19px;
    color: #737373;
}

/* Right-panel visual cards (mail / lock / etc.) */
.auth-visual-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 300px;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(24, 24, 27, 0.06);
    text-align: center;
}

.auth-visual-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-visual-icon-mail { background: #ECFDF5; color: #418D62; }
.auth-visual-icon-lock { background: #F5F5F4; color: #18181B; }

.auth-visual-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: #18181B;
}

.auth-visual-sub {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 19px;
    color: #737373;
}

/* Invitation accept */
.auth-org-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #FAFAFA;
    border: 1px solid #E7E5E4;
    border-radius: 12px;
    align-self: flex-start;
}

.auth-org-badge-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #0F172A;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    background-size: cover;
    background-position: center;
}

.auth-org-badge-meta { display: flex; flex-direction: column; gap: 1px; }

.auth-org-badge-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: #18181B;
}

.auth-org-badge-sub {
    font-family: var(--font-body);
    font-size: 12px;
    color: #737373;
}

.auth-inviter-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-inviter-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #418D62;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
}

.auth-inviter-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: #737373;
}

.auth-invite-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.auth-avatar-stack {
    display: flex;
    align-items: center;
}

.auth-avatar-stack-item {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #FAFAF7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
}

.auth-avatar-stack-item + .auth-avatar-stack-item { margin-left: -12px; }
.auth-avatar-stack-more { background: #737373; font-size: 13px !important; }

.auth-invite-visual-text {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: #18181B;
    text-align: center;
    max-width: 280px;
}

/* === Phase 2 lift — batch progress / stat cards / status pills =================== */

/* Batch progress container & header */
.batch-progress-container {
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 12px;
    padding: 24px 28px;
}

.batch-progress-header h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #18181B;
}

/* Status pill (replaces the uppercase pill) */
.batch-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11.5px;
    text-transform: none;
    letter-spacing: 0;
}

.batch-status-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

.batch-status-badge.processing { background: #FEF3C7; color: #92400E; }
.batch-status-badge.completed   { background: #ECFDF5; color: #418D62; }
.batch-status-badge.failed      { background: #FEE2E2; color: #B91C1C; }

/* Stat card grid — neutralize old gradients, lift the typography */
.batch-progress-stats { gap: 12px; }

.batch-stat-card {
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 10px;
    padding: 16px 18px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.batch-stat-value {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 22px;
    color: #18181B;
    font-variant-numeric: tabular-nums;
}

.batch-stat-card.failed .batch-stat-value { color: #B91C1C; }

.batch-stat-label {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    color: #737373;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    order: -1;
}

/* Batch upload warning — friendlier, matches alert pattern */
.batch-upload-warning {
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 12px 14px;
    color: #18181B;
    font-size: 13px;
    font-family: var(--font-body);
    line-height: 18px;
}

.batch-upload-warning svg { color: #92400E; }

/* === Activity item status pills (History rows) ============================== */

.activity-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11.5px;
    background: #F5F5F4;
    color: #737373;
}

.activity-status::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

.activity-status.done,
.activity-status.completed,
.activity-status.success { background: #ECFDF5; color: #418D62; }

.activity-status.processing,
.activity-status.partial { background: #FEF3C7; color: #92400E; }

.activity-status.failed,
.activity-status.error { background: #FEE2E2; color: #B91C1C; }

.activity-status.pending,
.activity-status.queued { background: #F5F5F4; color: #737373; }

.activity-status.revoked {
    background: #F5F5F4;
    color: #A3A3A3;
}

/* === File queue rows (Capture) ============================================== */

.file-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    background: #FFFFFF;
    border-bottom: 1px solid #F5F5F4;
    transition: background 0.15s;
}

.file-list-item:hover { background: #FAFAFA; }

.file-list-item:last-child { border-bottom: none; }

.file-list-item.password-protected { background: #FFFBEB; }

.file-list-item .file-icon,
.file-list-item .doc-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #F5F5F4;
    color: #737373;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.04em;
}

.file-list-item .file-name,
.file-list-item .doc-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    color: #18181B;
}

.file-list-item .file-meta,
.file-list-item .doc-meta {
    font-family: var(--font-body);
    font-size: 12px;
    color: #737373;
}

/* === Usage dashboard — section heading already inherits .section-page-heading */
.usage-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.usage-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 12px;
}

.usage-stat-label {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: #737373;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.usage-stat-value {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 24px;
    color: #18181B;
    font-variant-numeric: tabular-nums;
}

.usage-stat-delta {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: #737373;
}

.usage-stat-delta.up { color: #418D62; }
.usage-stat-delta.warn { color: #92400E; }
.usage-stat-delta.down { color: #B91C1C; }

/* === Density preference (Comfortable / Compact) =================== */

[data-density="compact"] .section-page-heading { gap: 18px; }

[data-density="compact"] .section-page-heading .section-page-title { font-size: 20px; line-height: 26px; }
[data-density="compact"] .section-page-heading .section-page-subtitle { font-size: 13px; line-height: 18px; }

[data-density="compact"] .capture-section.active,
[data-density="compact"] .history-section.active,
[data-density="compact"] .batch-section.active,
[data-density="compact"] .api-section.active,
[data-density="compact"] .settings-section.active {
    padding: 24px 48px 40px;
    gap: 16px;
}

/* Settings cards */
[data-density="compact"] .settings-stack-card { padding: 18px 20px; gap: 12px; }
[data-density="compact"] .settings-plan-card { padding: 14px 20px; }
[data-density="compact"] .settings-stack-card-title { font-size: 14.5px; }
[data-density="compact"] .settings-stack-card-sub { font-size: 12.5px; line-height: 17px; }

/* Profile avatar block */
[data-density="compact"] .profile-avatar-row { gap: 14px; }
[data-density="compact"] .profile-avatar { width: 56px; height: 56px; font-size: 20px; }
[data-density="compact"] .profile-name { font-size: 14px; }
[data-density="compact"] .profile-email { font-size: 12.5px; }
[data-density="compact"] .profile-hint { font-size: 11.5px; }

/* Org cards */
[data-density="compact"] .org-empty-state { padding: 22px 20px; gap: 10px; }
[data-density="compact"] .org-filled-row { padding: 12px; }
[data-density="compact"] .org-filled-logo { width: 36px; height: 36px; font-size: 15px; }

/* Preferences rows */
[data-density="compact"] .pref-row { padding-top: 4px; }
[data-density="compact"] .pref-row-divided { padding-top: 10px; }
[data-density="compact"] .pref-segmented { padding: 3px; }
[data-density="compact"] .pref-seg { padding: 4px 10px; font-size: 12px; }
[data-density="compact"] .pref-locked-input,
[data-density="compact"] .pref-select { height: 34px; font-size: 13px; }

/* Team list */
[data-density="compact"] .team-list-card { padding: 18px 20px; gap: 10px; }
[data-density="compact"] .team-list .member-item { padding: 9px 0; gap: 10px; }
[data-density="compact"] .team-list .member-avatar { width: 30px; height: 30px; font-size: 12px; }
[data-density="compact"] .team-invite-form { gap: 6px; }
[data-density="compact"] .team-invite-email,
[data-density="compact"] .team-invite-role { height: 34px; font-size: 13px; }

/* History / activity rows */
[data-density="compact"] .activity-item { padding-top: 10px !important; padding-bottom: 10px !important; }
[data-density="compact"] .activity-status { padding: 2px 7px; font-size: 11px; }

/* File queue rows */
[data-density="compact"] .file-list-item { padding: 9px 18px; gap: 10px; }
[data-density="compact"] .file-list-item .file-icon,
[data-density="compact"] .file-list-item .doc-icon { width: 30px; height: 30px; }
[data-density="compact"] .file-list-item .file-name,
[data-density="compact"] .file-list-item .doc-name { font-size: 12.5px; }
[data-density="compact"] .file-list-item .file-meta,
[data-density="compact"] .file-list-item .doc-meta { font-size: 11px; }

/* Batch progress + stat cards */
[data-density="compact"] .batch-progress-container { padding: 16px 20px; }
[data-density="compact"] .batch-stat-card { padding: 12px 14px; }
[data-density="compact"] .batch-stat-value { font-size: 18px; }

/* Usage cards */
[data-density="compact"] .usage-stat-card { padding: 12px 14px; }
[data-density="compact"] .usage-stat-value { font-size: 20px; }

/* Top nav */
[data-density="compact"] .app-top-nav { height: 52px; }
[data-density="compact"] .app-container { padding-top: 52px; }
[data-density="compact"] .app-nav-link { padding: 5px 11px; font-size: 13px; }

/* Capture mode toolbar + dropzone */
[data-density="compact"] .capture-mode-toolbar { padding: 4px; }
[data-density="compact"] .capture-mode-btn { padding: 5px 10px; font-size: 12.5px; }
[data-density="compact"] .capture-dropzone { min-height: 220px; padding: 36px 24px; gap: 10px; }
[data-density="compact"] .capture-dropzone .dropzone-text { font-size: 16px; }
[data-density="compact"] .capture-dropzone .dropzone-formats { font-size: 12.5px; }
[data-density="compact"] .capture-limit-hint { font-size: 12px; }

/* Batch dropzone */
[data-density="compact"] .batch-dropzone { min-height: 220px; padding: 36px 24px; }

/* API key table rows */
[data-density="compact"] .api-keys-table th,
[data-density="compact"] .api-keys-table td { padding: 10px 14px; font-size: 12.5px; }

/* === Dark mode — overrides for shipped surfaces ============================= */

[data-theme="dark"] body { background: #0F1419; }

/* Top nav */
[data-theme="dark"] .app-top-nav {
    background: #151A21;
    border-bottom-color: #30363D;
}
[data-theme="dark"] .app-nav-link { color: #A1A7AD; }
[data-theme="dark"] .app-nav-link:hover { color: #E7E9EA; background: #242B33; }
[data-theme="dark"] .app-nav-link.active { background: #242B33; color: #E7E9EA; }
[data-theme="dark"] .app-nav-user-name { color: #E7E9EA; }
[data-theme="dark"] .app-nav-user-org { color: #6E7681; }

/* Section headings */
[data-theme="dark"] .section-page-title,
[data-theme="dark"] .capture-title { color: #E7E9EA; }
[data-theme="dark"] .section-page-subtitle,
[data-theme="dark"] .capture-subtitle { color: #A1A7AD; }
[data-theme="dark"] .section-page-meta { color: #6E7681; }

/* Settings stack cards — vars handle light/dark automatically */

/* Profile avatar — use deeper dark for contrast */
[data-theme="dark"] .profile-avatar { color: #0F1419; }
[data-theme="dark"] .org-filled-logo { color: #0F1419; }

/* Org empty/filled — use sidebar bg for subtle depth */
[data-theme="dark"] .org-empty-state { background: #151A21; }
[data-theme="dark"] .org-filled-row { background: #151A21; }

/* Settings sidebar nav */
/* settings-nav-label — var(--text-muted) handles dark mode */

/* Branding panel — deeper bg for inset areas */
[data-theme="dark"] .branding-upload-tile { background: #151A21; }
[data-theme="dark"] .branding-preview { background: #151A21; }

/* Preferences segmented controls */
[data-theme="dark"] .pref-seg.active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
[data-theme="dark"] .pref-locked-input {
    background: #151A21;
}
[data-theme="dark"] .pref-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A7AD' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Team panel — vars handle light/dark automatically */

/* First / last name edit — vars handle light/dark automatically */

/* btn-ghost-sm / btn-primary-sm / btn-dark-sm */
[data-theme="dark"] .btn-ghost-sm {
    background: #1A1F26;
    border-color: #30363D;
    color: #E7E9EA;
}
[data-theme="dark"] .btn-ghost-sm:hover { background: #242B33; }
[data-theme="dark"] .btn-dark-sm {
    background: #E7E9EA;
    border-color: #E7E9EA;
    color: #0F1419;
}

/* Capture page (Studio) */
[data-theme="dark"] .capture-mode-toolbar {
    background: #242B33;
    border-color: #30363D;
}
[data-theme="dark"] .capture-mode-btn { color: #A1A7AD; }
[data-theme="dark"] .capture-mode-btn:hover { color: #E7E9EA; }
[data-theme="dark"] .capture-mode-btn.selected {
    background: #1A1F26;
    border-color: #30363D;
    color: #E7E9EA;
}
[data-theme="dark"] .capture-dropzone {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] .capture-dropzone:hover,
[data-theme="dark"] .capture-dropzone.drag-over {
    background: #151A21;
    border-color: #418D62;
}
[data-theme="dark"] .capture-dropzone .dropzone-icon { color: #E7E9EA; }
[data-theme="dark"] .capture-dropzone .dropzone-text { color: #E7E9EA; }
[data-theme="dark"] .capture-dropzone .dropzone-formats { color: #A1A7AD; }
[data-theme="dark"] .capture-dropzone .format-badge {
    background: #242B33;
    color: #A1A7AD;
}
[data-theme="dark"] .capture-limit-hint { color: #A1A7AD; }
[data-theme="dark"] .capture-limit-hint strong { color: #E7E9EA; }

/* Batch dropzone */
[data-theme="dark"] .batch-dropzone {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] .batch-dropzone-icon { color: #E7E9EA; }
[data-theme="dark"] .batch-dropzone-text { color: #E7E9EA; }
[data-theme="dark"] .batch-dropzone-formats { color: #A1A7AD; }

/* Batch progress + stat cards */
[data-theme="dark"] .batch-progress-container,
[data-theme="dark"] .batch-stat-card {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] .batch-stat-value { color: #E7E9EA; }
[data-theme="dark"] .batch-stat-label { color: #A1A7AD; }

/* File queue rows */
[data-theme="dark"] .file-list-item { background: #1A1F26; border-bottom-color: #242B33; }
[data-theme="dark"] .file-list-item:hover { background: #242B33; }
[data-theme="dark"] .file-list-item .file-icon,
[data-theme="dark"] .file-list-item .doc-icon { background: #242B33; color: #A1A7AD; }
[data-theme="dark"] .file-list-item .file-name,
[data-theme="dark"] .file-list-item .doc-name { color: #E7E9EA; }
[data-theme="dark"] .file-list-item .file-meta,
[data-theme="dark"] .file-list-item .doc-meta { color: #A1A7AD; }

/* Activity (history) — keep status pills as designed; light status bg pops on dark */
[data-theme="dark"] .activity-status { background: #242B33; color: #A1A7AD; }

/* Usage cards */
[data-theme="dark"] .usage-stat-card {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] .usage-stat-value { color: #E7E9EA; }
[data-theme="dark"] .usage-stat-label,
[data-theme="dark"] .usage-stat-delta { color: #A1A7AD; }

/* Search input */
[data-theme="dark"] .search-input {
    background: #1A1F26;
    border-color: #30363D;
    color: #E7E9EA;
}
[data-theme="dark"] .search-input::placeholder { color: #6E7681; }

/* Dialogs / modals */
[data-theme="dark"] .kita-dialog-btn-confirm {
    color: #0F1419;
}
[data-theme="dark"] .kita-dialog-icon.warning,
[data-theme="dark"] .kita-dialog-icon.question { background: rgba(217, 119, 6, 0.15); color: #FBBF24; }
[data-theme="dark"] .kita-dialog-icon.danger { background: rgba(220, 38, 38, 0.15); color: #F87171; }
[data-theme="dark"] .kita-dialog-icon.info { background: #242B33; }
[data-theme="dark"] .kita-dialog-icon.success { background: rgba(65, 141, 98, 0.15); }

/* Create-org modal */
[data-theme="dark"] .create-org-hint {
    background: #151A21;
}
[data-theme="dark"] .create-org-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A7AD' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
[data-theme="dark"] .team-invite-role {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A7AD' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Toasts */
[data-theme="dark"] .toast {
    background: #1A1F26;
    border-color: #30363D;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
}
[data-theme="dark"] .toast-message { color: #E7E9EA; }
[data-theme="dark"] .toast-dismiss { color: #6E7681; }
[data-theme="dark"] .toast-dismiss:hover { background: #242B33; }

/* Onboarding */
[data-theme="dark"] .onboarding-page { background: #0F1419; }
[data-theme="dark"] .onboarding-title { color: #E7E9EA; }
[data-theme="dark"] .onboarding-sub { color: #A1A7AD; }
[data-theme="dark"] .onboarding-step-dot { background: #1A1F26; border-color: #30363D; color: #6E7681; }
[data-theme="dark"] .onboarding-step.current .onboarding-step-dot {
    background: #E7E9EA;
    border-color: #E7E9EA;
    color: #0F1419;
}
[data-theme="dark"] .onboarding-step-divider { background: #30363D; }
[data-theme="dark"] .onboarding-step-label { color: #6E7681; }
[data-theme="dark"] .onboarding-step.done .onboarding-step-label,
[data-theme="dark"] .onboarding-step.current .onboarding-step-label { color: #E7E9EA; }
[data-theme="dark"] .onboarding-choice {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] .onboarding-choice:hover {
    border-color: #E7E9EA;
}
[data-theme="dark"] .onboarding-choice.primary { border-color: #E7E9EA; }
[data-theme="dark"] .onboarding-choice-icon { background: #242B33; color: #E7E9EA; }
[data-theme="dark"] .onboarding-choice.primary .onboarding-choice-icon {
    background: #E7E9EA;
    color: #0F1419;
}
[data-theme="dark"] .onboarding-choice-title { color: #E7E9EA; }
[data-theme="dark"] .onboarding-choice-desc { color: #A1A7AD; }
[data-theme="dark"] .onboarding-choice-tag { color: #6E7681; }
[data-theme="dark"] .onboarding-skip-hint { color: #6E7681; }
[data-theme="dark"] .onboarding-skip-link { color: #E7E9EA; }

/* Auth screens (verify / forgot / reset / invite) */
[data-theme="dark"] .login-page,
[data-theme="dark"] .auth-page { background: #0F1419; }
[data-theme="dark"] .login-left-panel { background: #0F1419; }
[data-theme="dark"] .login-right-panel { background: #151A21; border-left-color: #30363D; }
[data-theme="dark"] .auth-title { color: #E7E9EA; }
[data-theme="dark"] .auth-sub { color: #A1A7AD; }
[data-theme="dark"] .auth-sub strong { color: #E7E9EA; }
[data-theme="dark"] .auth-label { color: #E7E9EA; }
[data-theme="dark"] .auth-input,
[data-theme="dark"] .auth-code-cell {
    background: #1A1F26;
    border-color: #30363D;
    color: #E7E9EA;
}
[data-theme="dark"] .auth-input::placeholder { color: #6E7681; }
[data-theme="dark"] .auth-secondary-row { color: #A1A7AD; }
[data-theme="dark"] .auth-resend-cooldown { color: #6E7681; }
[data-theme="dark"] .auth-escape-link,
[data-theme="dark"] .auth-resend-btn { color: #E7E9EA; }
[data-theme="dark"] .auth-success-card,
[data-theme="dark"] .auth-visual-card,
[data-theme="dark"] .auth-org-badge {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] .auth-success-title,
[data-theme="dark"] .auth-visual-title,
[data-theme="dark"] .auth-org-badge-name,
[data-theme="dark"] .auth-invite-visual-text { color: #E7E9EA; }
[data-theme="dark"] .auth-success-sub,
[data-theme="dark"] .auth-visual-sub,
[data-theme="dark"] .auth-org-badge-sub,
[data-theme="dark"] .auth-inviter-text { color: #A1A7AD; }
[data-theme="dark"] .auth-strength-bar { background: #30363D; }
[data-theme="dark"] .login-footer-legal,
[data-theme="dark"] .onboarding-topbar-right { color: #6E7681; }
[data-theme="dark"] .login-legal-link,
[data-theme="dark"] .auth-escape-link { color: #E7E9EA; }
[data-theme="dark"] .auth-avatar-stack-item { border-color: #151A21; }

/* Section page generic (history/batch/api/settings active) */
[data-theme="dark"] .history-section.active,
[data-theme="dark"] .batch-section.active,
[data-theme="dark"] .api-section.active,
[data-theme="dark"] .settings-section.active,
[data-theme="dark"] .capture-section.active { background: transparent; }

.team-readonly {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 13px;
}

.team-readonly svg { color: var(--text-muted); flex-shrink: 0; }

/* === Create Organization Modal ============================ */

.create-org-modal {
    max-width: 520px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
}

.create-org-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 28px 4px;
    border-bottom: none;
}

.create-org-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.create-org-sub {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
    margin: 0;
}

.create-org-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px 8px;
}

.create-org-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.create-org-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.create-org-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-primary);
}

.create-org-optional { color: var(--text-muted); font-weight: 400; }

.create-org-helper {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
}

.create-org-input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.create-org-input::placeholder { color: var(--text-muted); }

.create-org-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.create-org-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

.create-org-select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

.create-org-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.create-org-hint-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--bg-hover);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.create-org-hint-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-primary);
}

.create-org-hint-sub {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 18px;
    color: var(--text-muted);
    margin-top: 2px;
}

.create-org-error {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-error);
}

.create-org-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 24px 28px;
    border-top: none;
}

/* === Onboarding (post-signup, no org) ============================ */

.onboarding-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #FAFAFA;
}

.onboarding-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 48px;
    flex-shrink: 0;
}

.onboarding-topbar-logo { height: 22px; width: auto; }

.onboarding-topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #737373;
}

.onboarding-topbar-divider {
    width: 24px;
    height: 1px;
    background: #E7E5E4;
}

.onboarding-signout {
    background: none;
    border: none;
    cursor: pointer;
    color: #A3A3A3;
    text-decoration: underline;
    font-family: var(--font-body);
    font-size: 13px;
    padding: 0;
}

.onboarding-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    flex: 1;
    justify-content: center;
    padding: 0 48px 64px;
}

.onboarding-stepper {
    display: flex;
    align-items: center;
    gap: 14px;
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.onboarding-step-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    color: #A3A3A3;
}

.onboarding-step.done .onboarding-step-dot {
    background: #418D62;
    border-color: #418D62;
    color: #FFFFFF;
}

.onboarding-step.current .onboarding-step-dot {
    background: #18181B;
    border-color: #18181B;
    color: #FFFFFF;
    font-weight: 600;
}

.onboarding-step-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: #A3A3A3;
}

.onboarding-step.done .onboarding-step-label,
.onboarding-step.current .onboarding-step-label { color: #18181B; }

.onboarding-step-divider {
    width: 32px;
    height: 1px;
    background: #E7E5E4;
}

.onboarding-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.onboarding-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.02em;
    color: #18181B;
    margin: 0;
}

.onboarding-sub {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 22px;
    color: #737373;
    text-align: center;
    max-width: 520px;
    margin: 0;
}

.onboarding-choices {
    display: flex;
    gap: 16px;
}

.onboarding-choice {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 340px;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
    text-align: left;
}

.onboarding-choice:hover {
    border-color: #18181B;
    box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px rgba(24, 24, 27, 0.06);
}

.onboarding-choice:active { transform: scale(0.995); }

.onboarding-choice.primary {
    border-color: #18181B;
    box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px rgba(24, 24, 27, 0.06);
}

.onboarding-choice-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #F5F5F4;
    color: #18181B;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-choice.primary .onboarding-choice-icon {
    background: #18181B;
    color: #FFFFFF;
}

.onboarding-choice-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -0.01em;
    color: #18181B;
}

.onboarding-choice-desc {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 20px;
    color: #737373;
}

.onboarding-choice-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
}

.onboarding-choice-tag {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: #A3A3A3;
}

.onboarding-skip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.onboarding-skip-hint {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 18px;
    color: #A3A3A3;
}

.onboarding-skip-link {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: #18181B;
    text-decoration: underline;
    padding: 4px 0;
}

/* Settings Two-Column Layout */
.settings-layout {
    display: flex;
    gap: 0;
    min-height: 480px;
}

/* Settings Sidebar Navigation */
.settings-sidebar-nav {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 20px;
    border-right: 1px solid var(--border-color-light);
}

.settings-nav-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
    margin-bottom: 8px;
}

.settings-nav-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.settings-nav-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 4px 10px;
    margin-bottom: 2px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    background: none;
    font-size: 0.85rem;
    font-weight: 450;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    text-align: left;
    font-family: inherit;
    width: 100%;
}

.settings-nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.settings-nav-item.active {
    color: var(--color-primary);
    background: rgba(65, 141, 98, 0.08);
    font-weight: 550;
}

.settings-nav-item svg {
    flex-shrink: 0;
    opacity: 0.65;
}

.settings-nav-item.active svg {
    opacity: 1;
    color: var(--color-primary);
}

/* Settings Content Area */
.settings-content-area {
    flex: 1;
    min-width: 0;
    padding-left: 28px;
}

.settings-panel-content {
    display: none;
}

.settings-panel-content.active {
    display: block;
}

.settings-panel-header {
    margin-bottom: 20px;
}

.settings-panel-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.settings-panel-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Dark theme adjustments for settings nav */
[data-theme="dark"] .settings-nav-item.active {
    background: rgba(65, 141, 98, 0.15);
}

[data-theme="dark"] .settings-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Responsive: stack on narrow screens */
@media (max-width: 700px) {
    .settings-layout {
        flex-direction: column;
    }
    .settings-sidebar-nav {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--border-color-light);
        padding-right: 0;
        padding-bottom: 12px;
        margin-bottom: 12px;
        gap: 4px;
    }
    .settings-nav-section {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .settings-nav-label {
        display: none;
    }
    .settings-nav-item {
        width: auto;
        padding: 6px 12px;
    }
    .settings-content-area {
        padding-left: 0;
    }
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color-light);
    margin-bottom: 0;
}

.settings-tab {
    padding: 12px 24px;
    background: none;
    border: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast), background var(--transition-fast);
    font-family: inherit;
}

.settings-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.settings-tab.active {
    color: var(--color-primary);
    font-weight: 600;
}

.settings-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
}

.settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}

.settings-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--text-primary);
}

.settings-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.settings-card-header .settings-card-title {
    margin-bottom: 0;
}

/* Organization Switcher (Admin Only) */
.org-switcher-container {
    width: 100%;
}

/* Custom themed dropdown for org switcher */
.org-switcher-custom-select {
    position: relative;
    width: 100%;
}

.org-switcher-trigger {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.org-switcher-trigger:hover {
    border-color: var(--color-primary);
}

.org-switcher-trigger.open {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.org-switcher-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: var(--text-muted);
}

.org-switcher-trigger.open .org-switcher-chevron {
    transform: rotate(180deg);
}

.org-switcher-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--color-primary);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 280px;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.org-switcher-dropdown.open {
    display: flex;
}

.org-switcher-search {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-family: var(--font-body);
    background: var(--bg-secondary);
    border: none;
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}

.org-switcher-search::placeholder {
    color: var(--text-muted);
}

.org-switcher-options {
    overflow-y: auto;
    max-height: 220px;
}

.org-switcher-option {
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--border-color-light);
}

.org-switcher-option:last-child {
    border-bottom: none;
}

.org-switcher-option:hover {
    background: var(--bg-card-hover);
}

.org-switcher-option.selected {
    background: var(--bg-card-hover);
    color: var(--color-primary);
    font-weight: 600;
    border-left: 3px solid var(--color-primary);
    padding-left: 11px;
}

.org-switcher-option.placeholder {
    color: var(--text-muted);
    font-style: italic;
}

/* Spinner animation for org switching */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.settings-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.settings-info-row:last-of-type {
    border-bottom: none;
}

.settings-info-row .settings-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    flex-shrink: 0;
    min-width: 100px;
}

.settings-info-row .settings-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-align: right;
}

/* Role Badges */
.role-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
}

.role-owner {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.role-admin {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
}

.role-member {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* Member Count Badge */
.member-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-hover);
    padding: 4px 12px;
    border-radius: 12px;
}

/* Invite Form */
.invite-form {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.invite-input-group {
    display: flex;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.invite-email-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.invite-email-input:focus {
    outline: none;
    border-color: var(--color-highlight);
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.1);
}

.invite-email-input::placeholder {
    color: var(--text-tertiary);
}

.invite-role-select {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 100px;
}

.invite-role-select:focus {
    outline: none;
    border-color: var(--color-highlight);
}

.invite-input-group .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Subsection Titles */
.subsection-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 12px;
}

/* Members List */
.members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: 8px;
    transition: background 0.15s ease;
}

.member-item:hover {
    background: var(--bg-hover-dark, rgba(0, 0, 0, 0.06));
}

.member-item.pending {
    opacity: 0.75;
    border: 1px dashed var(--border-color);
    background: transparent;
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials {
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

.member-info {
    flex: 1;
    min-width: 0;
}

.member-name {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-email {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-status {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.member-item .role-badge {
    flex-shrink: 0;
}

.member-action-btn {
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-action-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.member-action-btn.danger:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Settings Logout Button */
.settings-logout-btn {
    margin-top: 16px;
    width: 100%;
}

/* Empty state for members list */
.members-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
}

.members-empty svg {
    opacity: 0.4;
    margin-bottom: 12px;
}

/* Dark Theme Adjustments */
[data-theme="dark"] .role-owner {
    background: linear-gradient(135deg, #78350f, #92400e);
    color: #fef3c7;
}

[data-theme="dark"] .role-admin {
    background: linear-gradient(135deg, #1e3a8a, #1e40af);
    color: #dbeafe;
}

[data-theme="dark"] .member-action-btn.danger:hover {
    background: #7f1d1d;
    color: #fecaca;
}

[data-theme="dark"] .member-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* User Invitations List (invitations received by user) */
.invitations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invitation-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-hover);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
}

.invitation-card:hover {
    border-color: var(--color-highlight);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.invitation-org-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-highlight), var(--color-highlight-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.invitation-org-avatar svg {
    width: 24px;
    height: 24px;
    color: white;
}

.invitation-info {
    flex: 1;
    min-width: 0;
}

.invitation-org-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 4px;
}

.invitation-details {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.invitation-details .role-badge {
    margin-left: 8px;
    vertical-align: middle;
}

.invitation-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.invitation-actions .btn {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.invitation-actions .btn-accept {
    background: var(--color-primary);
    color: white;
    border: none;
}

.invitation-actions .btn-accept:hover {
    background: var(--color-primary-dark);
}

.invitation-actions .btn-decline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.invitation-actions .btn-decline:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Notice Card (for users without organization) */
.notice-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--color-info-bg);
    border: 1px solid var(--color-highlight);
    border-radius: 10px;
}

.notice-card.info {
    background: var(--color-info-bg);
    border-color: var(--color-highlight);
}

.notice-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notice-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.notice-content {
    flex: 1;
}

.notice-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.notice-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Empty state for invitations */
.invitations-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-secondary);
}

.invitations-empty svg {
    opacity: 0.3;
    margin-bottom: 12px;
}

.invitations-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Dark Theme for Invitations */
[data-theme="dark"] .invitation-card {
    background: var(--bg-card);
}

[data-theme="dark"] .invitation-actions .btn-decline:hover {
    background: #7f1d1d;
    color: #fecaca;
    border-color: #7f1d1d;
}

[data-theme="dark"] .notice-card {
    background: rgba(212, 168, 53, 0.1);
}

/* Toast dark mode */
[data-theme="dark"] .toast {
    background: #1A1F26;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
    border-left-color: #6B7280;
}
[data-theme="dark"] .toast.success { border-left-color: #5ebd89; }
[data-theme="dark"] .toast.error   { border-left-color: #f87171; }
[data-theme="dark"] .toast.warning { border-left-color: #fbbf24; }

[data-theme="dark"] .toast.success .toast-icon { background: rgba(65,141,98,0.15); }
[data-theme="dark"] .toast.error .toast-icon   { background: rgba(220,38,38,0.15); }
[data-theme="dark"] .toast.warning .toast-icon { background: rgba(217,119,6,0.15); }
[data-theme="dark"] .toast.info .toast-icon    { background: rgba(107,114,128,0.15); }

[data-theme="dark"] .toast-dismiss { color: #6B7280; }
[data-theme="dark"] .toast-dismiss:hover { background: rgba(255,255,255,0.06); }

/* Responsive - Mobile */
@media (max-width: 768px) {
    .settings-page {
        padding: 16px;
    }

    .settings-card {
        padding: 16px;
    }

    .invite-input-group {
        flex-direction: column;
    }

    .invite-email-input {
        min-width: 100%;
    }

    .invite-role-select {
        width: 100%;
    }

    .invite-input-group .btn {
        width: 100%;
        justify-content: center;
    }

    .member-item {
        flex-wrap: wrap;
    }

    .member-item .role-badge {
        order: 3;
        margin-left: 52px;
        margin-top: 8px;
    }

    .member-action-btn {
        margin-left: auto;
    }
}

/* ================================================
   BATCH TESTING STYLES
   ================================================ */

.batch-free-tier-gate,
.api-keys-free-tier-gate {
    max-width: 800px;
    margin: 0 auto;
}

.free-tier-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 32px;
    background: var(--bg-card);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    gap: 16px;
}

.free-tier-message h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.free-tier-message p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 400px;
}

.batch-testing-container {
    max-width: none;
    margin: 0;
    width: 100%;
}

/* Batch Dropzone */
.batch-dropzone {
    border: 1.5px dashed #D4D4D8;
    border-radius: 16px;
    padding: 64px 32px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px rgba(24, 24, 27, 0.04);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.batch-dropzone:hover,
.batch-dropzone.drag-over {
    border-color: #418D62;
    background: #FAFAFA;
}

.batch-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    pointer-events: none; /* Allow clicks to pass through to parent dropzone */
}

.batch-dropzone-content * {
    pointer-events: none; /* Ensure all children pass clicks to parent */
}

.batch-dropzone-icon {
    color: #18181B;
    transition: color var(--transition-normal);
    margin-bottom: 6px;
}

.batch-dropzone:hover .batch-dropzone-icon,
.batch-dropzone.drag-over .batch-dropzone-icon {
    color: #418D62;
}

.batch-dropzone-text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #18181B;
}

.batch-dropzone-formats {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 20px;
    color: #737373;
    max-width: 520px;
    margin: 0 auto;
}

/* Batch Config Panel */
.batch-config {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.batch-config h3 {
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.batch-config-row {
    margin-bottom: var(--spacing-md);
}

.batch-config-row label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.batch-config-row input,
.batch-config-row select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

.batch-config-row input:focus,
.batch-config-row select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.batch-classify-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    max-height: 180px;
    overflow-y: auto;
    padding: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.batch-classify-grid label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 2px 0;
}

.batch-classify-grid label:hover {
    color: var(--color-primary);
}

.batch-file-summary {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.batch-config-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

/* Batch Progress Container */
.batch-progress-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.batch-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.batch-progress-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.batch-upload-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: var(--spacing-md);
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 30%, transparent);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.batch-upload-warning svg {
    color: var(--color-warning, #f59e0b);
    margin-top: 1px;
}

/* Status Badge */
.batch-status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.batch-status-badge.processing {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.batch-status-badge.completed {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.batch-status-badge.failed {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* Progress Stats Grid */
.batch-progress-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.batch-stat-card {
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
}

.batch-stat-card.failed .batch-stat-value {
    color: var(--color-error);
}

.batch-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

.batch-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Progress Bar */
.batch-progress-bar-container {
    margin-bottom: var(--spacing-lg);
}

.batch-progress-bar {
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-xs);
}

.batch-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 4px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}

.ai-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.batch-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

#batch-progress-percent {
    font-weight: 600;
    color: var(--color-primary);
}

/* Progress Actions */
.batch-progress-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .batch-progress-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .batch-config-actions {
        flex-direction: column;
    }

    .batch-config-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .batch-progress-actions {
        flex-direction: column;
    }

    .batch-progress-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================
   Batch History Section
   ================================================ */
/* Batch History — Table Layout */
.batch-history-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
}

.batch-history-table-header {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 36px;
    border-bottom: 1px solid var(--border-color);
}

.bh-col {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.bh-col-name { width: 260px; }
.bh-col-type { width: 100px; }
.bh-col-progress { width: 180px; }
.bh-col-status { width: 140px; }
.bh-col-date { width: 170px; }
.bh-col-results { flex: 1; text-align: right; }

.batch-history-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.batch-history-empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
}

.batch-history-item {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
    cursor: pointer;
    transition: background 0.1s;
}

.batch-history-item:hover {
    background: var(--bg-hover);
}

.batch-history-item.preparing {
    opacity: 0.7;
}

/* Column: Job Name */
.bh-cell-name {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bh-name-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bh-name-icon.completed { background: var(--color-success-bg, #f0fdf4); color: var(--color-primary); }
.bh-name-icon.processing { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.bh-name-icon.failed { background: var(--color-error-bg, #fef2f2); color: var(--color-error, #ef4444); }
.bh-name-icon.pending, .bh-name-icon.preparing { background: var(--bg-secondary); color: var(--text-muted); }

.bh-name-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bh-name-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bh-name-id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

/* Column: Type */
.bh-cell-type {
    width: 100px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Column: Progress */
.bh-cell-progress {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bh-progress-track {
    flex: 1;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.bh-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bh-progress-fill.completed { background: var(--color-primary); }
.bh-progress-fill.processing { background: #3b82f6; }
.bh-progress-fill.failed { background: var(--color-error, #ef4444); }

.bh-progress-count {
    font-family: var(--font-mono);
    font-size: 11px;
    width: 48px;
    flex-shrink: 0;
    text-align: right;
}

.bh-progress-count.completed { color: var(--color-primary); }
.bh-progress-count.processing { color: #3b82f6; }
.bh-progress-count.failed { color: var(--color-error, #ef4444); }
.bh-progress-count.pending, .bh-progress-count.preparing { color: var(--text-muted); }

/* Column: Status */
.bh-cell-status {
    width: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.bh-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
}

.bh-status-dot.completed { background: var(--color-primary); }
.bh-status-dot.processing { background: #3b82f6; }
.bh-status-dot.failed { background: var(--color-error, #ef4444); }
.bh-status-dot.pending { background: #d1d5db; }
.bh-status-dot.preparing { background: #3b82f6; animation: batch-preparing-pulse 1.5s ease-in-out infinite; }

.bh-status-label {
    font-size: 13px;
}

.bh-status-label.completed { color: var(--color-primary); }
.bh-status-label.processing { color: #3b82f6; }
.bh-status-label.failed { color: var(--color-error, #ef4444); }
.bh-status-label.pending { color: var(--text-muted); }
.bh-status-label.preparing { color: #3b82f6; animation: batch-preparing-pulse 1.5s ease-in-out infinite; }

/* Column: Date */
.bh-cell-date {
    width: 170px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Column: Results */
.bh-cell-results {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    align-items: center;
}

.bh-result-pill {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.bh-result-pill.passed { color: var(--color-primary); background: var(--color-success-bg, #f0fdf4); }
.bh-result-pill.warnings { color: var(--color-warning, #f59e0b); background: var(--color-warning-bg, #fffbeb); }
.bh-result-pill.failed { color: var(--color-error, #ef4444); background: var(--color-error-bg, #fef2f2); }

.bh-result-text {
    font-size: 12px;
    color: var(--text-muted);
}

@keyframes batch-preparing-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@media (max-width: 768px) {
    .batch-history-table-header { display: none; }
    .batch-history-item {
        flex-wrap: wrap;
        height: auto;
        padding: 12px 16px;
        gap: 8px;
    }
    .bh-col-name, .bh-cell-name { width: 100%; }
    .bh-cell-progress, .bh-cell-date { display: none; }
    .bh-cell-results { width: 100%; justify-content: flex-start; }
}

/* ================================================
   Powered by Kita (in sidebar, above sidebar-footer)
   Shown when organization branding is active
   ================================================ */
.powered-by-kita {
    display: none; /* Hidden by default, shown via JS when org branding active */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-body);
    margin-top: auto;
}

/* Preview badge row */
.powered-by-kita .preview-badge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Powered by row */
.powered-by-kita .powered-by-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.powered-by-kita .powered-by-logo {
    height: 16px;
    width: auto;
    vertical-align: middle;
}

/* Preview mode badge - transparent with theme border */
.powered-by-kita .preview-badge {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Collapsed sidebar styles */
.sidebar.collapsed .powered-by-kita {
    padding: 8px;
    margin-top: auto;
}

.sidebar.collapsed .powered-by-kita .preview-badge-row {
    display: none;
}

.sidebar.collapsed .powered-by-kita .powered-by-row span {
    display: none;
}

.sidebar.collapsed .powered-by-kita .powered-by-logo {
    height: 20px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .powered-by-kita {
        padding: 12px 16px;
        font-size: 0.7rem;
    }

    .powered-by-kita .powered-by-logo {
        height: 14px;
    }

    .powered-by-kita .preview-badge {
        font-size: 0.55rem;
        padding: 3px 8px;
    }
}

/* ================================================
   AI Agent Citation Badges & Highlighting
   ================================================ */

/* Citation badge - clickable inline badge in chat messages */
.citation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    margin: 0 2px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid;
    transition: all var(--transition-fast);
    vertical-align: baseline;
    text-decoration: none;
    white-space: nowrap;
}

.citation-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

.citation-badge:active {
    transform: translateY(0);
}

/* Unknown citation badge */
.citation-badge.citation-unknown {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: default;
}

/* Canvas highlight animation for citations */
.citation-highlight-active {
    animation: citationPulse 2s ease-out;
}

@keyframes citationPulse {
    0% {
        filter: brightness(1.2) drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
    }
    25% {
        filter: brightness(1.3) drop-shadow(0 0 12px rgba(59, 130, 246, 0.8));
    }
    50% {
        filter: brightness(1.2) drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
    }
    75% {
        filter: brightness(1.1) drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
    }
    100% {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
}

/* Visual layout section highlight when citation navigates to it */
.visual-layout-section.citation-target {
    box-shadow: 0 0 0 3px var(--color-primary);
    transition: box-shadow 0.3s ease;
}

/* Citation tooltip preview (optional enhancement) */
.citation-badge[title] {
    position: relative;
}

.citation-badge::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.2s ease;
}

.citation-badge:hover::after {
    width: 80%;
}

/* Multiple citation badges inline styling */
.citation-badge + .citation-badge {
    margin-left: 2px;
}

/* Dark theme adjustments for citation badges */
[data-theme="dark"] .citation-badge {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .citation-badge:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Clear highlights button (if needed in UI) */
.clear-highlights-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.clear-highlights-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ================================================
   Applicant Selector & Sidebar Styles
   ================================================ */

/* Legacy applicant-selector styles removed — now in file-queue-actions as .account-selector */

/* Applicant badge on document items */
.applicant-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    background: rgba(65, 141, 98, 0.12);
    color: var(--color-primary);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive: account selector in file queue */
@media (max-width: 640px) {
    .account-selector {
        display: none; /* Hide on very small screens to save space; still accessible via applicant sidebar */
    }
}

/* ===== Credit History Summary ===== */
.cr-summary-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.cr-summary-title {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-primary);
}

.cr-summary-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.cr-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.cr-metrics-grid .metric-card {
    min-height: 0;
    padding: 14px 12px;
}

.cr-metrics-grid .metric-value {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.cr-metrics-grid .metric-label {
    font-size: 0.8rem;
}

.cr-metric-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.76rem;
    font-weight: 500;
}

@media (max-width: 640px) {
    .cr-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .cr-metrics-grid .metric-card {
        padding: 10px 8px;
    }

    .cr-metrics-grid .metric-value {
        font-size: 1.2rem;
    }
}

/* ========== Usage Section ========== */

.usage-controls {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.period-toggle {
    display: inline-flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 2px;
}

.period-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.period-btn:hover {
    color: var(--text-primary);
}

.period-btn.active {
    background: var(--bg-card);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.usage-chart-container {
    position: relative;
    background: var(--bg-card);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    padding: 24px;
    height: 400px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .usage-chart-container {
        height: 300px;
    }
}

/* ================================================
   SECTION LOADER SPINNER
   ================================================ */

.section-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

.usage-chart-container .section-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--bg-card, #fff);
    border-radius: var(--radius-md);
}

.loader-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--color-primary, #418d62);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Cross-Document Verification Panel */
.cross-verification-panel {
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card);
    overflow: hidden;
}

/* Analyze Applicant button in cross-verification header */
.cv-header-actions {
    padding: 12px 20px 0;
    display: flex;
    justify-content: flex-end;
}

.analyze-applicant-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

/* Applicant Analysis Panel — sits below cross-verification */
.applicant-analysis-panel {
    margin-bottom: 20px;
    border: 1px solid var(--color-primary, #6366f1);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card);
    overflow: hidden;
}

.applicant-analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--color-primary, #6366f1) 5%, var(--bg-card));
}

.applicant-analysis-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cross-verification-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.cv-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cv-header-text {
    flex: 1;
    min-width: 0;
}

.cross-verification-header h3 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cross-verification-header .cv-doc-summary {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Cross-Doc Score Badge */
.cv-score-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cv-score-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid currentColor;
    flex-shrink: 0;
}

.cv-score-badge.score-good {
    color: var(--color-success, #22c55e);
    background: rgba(34, 197, 94, 0.08);
}

.cv-score-badge.score-warning {
    color: var(--color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
}

.cv-score-badge.score-danger {
    color: var(--color-error, #ef4444);
    background: rgba(239, 68, 68, 0.08);
}

.cv-score-number {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.cv-score-label {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.cv-score-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-score-risk {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.cv-score-checks {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cross-verification-signals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border-color);
}

.cv-signal-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
}

.cv-signal-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-top: 1px;
}

.cv-signal-content {
    min-width: 0;
}

.cv-signal-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}

.cv-signal-value {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.cv-signal-card[data-status="good"] .cv-signal-icon { color: var(--color-success); }
.cv-signal-card[data-status="warning"] .cv-signal-icon { color: var(--color-warning, #f59e0b); }
.cv-signal-card[data-status="neutral"] .cv-signal-icon { color: var(--text-muted); }
.cv-signal-card[data-status="inconclusive"] .cv-signal-icon { color: var(--text-muted); }

@media (max-width: 768px) {
    .cross-verification-signals {
        grid-template-columns: 1fr;
    }
}

/* ========== AFS Charts & SME Lending Dashboard ========== */

.afs-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.afs-chart-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: 10px;
    padding: 16px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.afs-chart-container canvas {
    max-height: 280px;
    width: 100% !important;
}

@media (max-width: 768px) {
    .afs-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== Citation Badges ========== */
.citation-badge {
    /* color, background, border set inline per document via getDocumentColor */
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.1s;
}

.citation-badge:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* ================================================
   Timeline UI Component
   ================================================ */

.processing-timeline {
    padding: 0 0 8px;
}

.timeline-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
}

/* Horizontal timeline bar — pill-based stepper */
.processing-timeline .timeline-bar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    gap: 0;
    height: auto;
    opacity: 1;
    min-width: auto;
    border-radius: 0;
}

.processing-timeline .timeline-bar::before {
    display: none;
}

/* Connector segment between pills */
.processing-timeline .timeline-connector {
    width: 24px;
    height: 1px;
    background: #D1D5DB;
    flex-shrink: 0;
}

[data-theme="dark"] .processing-timeline .timeline-connector {
    background: var(--border-color, #2a2a2a);
}

.processing-timeline .timeline-step {
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.processing-timeline .timeline-connector { flex-shrink: 0; }

.processing-timeline .timeline-step:hover {
    opacity: 0.85;
}

/* Pill element inside each step */
.processing-timeline .timeline-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1.5px solid transparent;
    background: #F3F4F6;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #6B7280);
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 16px;
}

[data-theme="dark"] .processing-timeline .timeline-pill {
    background: var(--bg-secondary, #1c1c1c);
    color: var(--text-muted, #666);
}

.processing-timeline .timeline-pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.processing-timeline .timeline-pill-icon svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.processing-timeline .timeline-pill.completed {
    background: #E8F5EC;
    border-color: transparent;
    color: #418D62;
}

[data-theme="dark"] .processing-timeline .timeline-pill.completed {
    background: rgba(65, 141, 98, 0.12);
    color: #5ebd89;
}

.processing-timeline .timeline-pill.in-progress {
    border-color: transparent;
    color: #6B7280;
    background: #F3F4F6;
}

[data-theme="dark"] .processing-timeline .timeline-pill.in-progress {
    background: var(--bg-secondary, #1c1c1c);
    color: var(--text-muted, #666);
}

.processing-timeline .timeline-pill.in-progress .timeline-pill-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #3b82f6;
    position: relative;
}

.processing-timeline .timeline-pill.in-progress .timeline-pill-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
}

.processing-timeline .timeline-pill.pending {
    background: #F3F4F6;
    border-color: transparent;
    color: #9CA3AF;
}

[data-theme="dark"] .processing-timeline .timeline-pill.pending {
    background: var(--bg-card, #1a1a1a);
    color: var(--text-muted, #666);
}

.processing-timeline .timeline-pill.pending .timeline-pill-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #D1D5DB;
}

[data-theme="dark"] .processing-timeline .timeline-pill.pending .timeline-pill-dot {
    background: var(--text-muted, #666);
    opacity: 0.5;
}

.processing-timeline .timeline-pill.no_data {
    background: #F3F4F6;
    border-color: transparent;
    color: #9CA3AF;
}

[data-theme="dark"] .processing-timeline .timeline-pill.no_data {
    background: var(--bg-secondary, #1c1c1c);
    color: var(--text-muted, #666);
}

.processing-timeline .timeline-pill.failed {
    background: #FEF2F2;
    border-color: transparent;
    color: #ef4444;
}

[data-theme="dark"] .processing-timeline .timeline-pill.failed {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

@keyframes timeline-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}

/* Selected pill — green bg with white text per Paper design */
.processing-timeline .timeline-step.selected .timeline-pill {
    border-color: #418D62;
    background: #418D62;
    color: #fff;
    font-weight: 600;
}

.processing-timeline .timeline-step.selected .timeline-pill .timeline-pill-icon svg circle {
    fill: #fff;
}

.processing-timeline .timeline-step.selected .timeline-pill .timeline-pill-icon svg path {
    stroke: #418D62;
}

[data-theme="dark"] .processing-timeline .timeline-step.selected .timeline-pill {
    background: #418D62;
    border-color: #418D62;
    color: #fff;
}

/* Timeline validation status tags */
.timeline-status-tag {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.3;
}
.timeline-status-tag.pass { color: #418D62; background: #F0FDF4; }
.timeline-status-tag.error { color: #DC2626; background: #FEF2F2; border: 1px solid #FECACA; }
.timeline-status-tag.ai-fixed { color: #2563EB; background: #EFF6FF; border: 1px solid #BFDBFE; }
.timeline-status-tag.flagged { color: #D97706; background: #FFFBEB; border: 1px solid #FDE68A; }
.timeline-status-tag.bounced { color: #D97706; background: #FEF3C7; }
.timeline-status-tag.reversed { color: #DC2626; background: #FEF2F2; border: 1px solid #FECACA; }
[data-theme="dark"] .timeline-status-tag.pass { color: #5ebd89; background: rgba(65,141,98,0.12); }
[data-theme="dark"] .timeline-status-tag.error { color: #f87171; background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); }
[data-theme="dark"] .timeline-status-tag.ai-fixed { color: #60a5fa; background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); }
[data-theme="dark"] .timeline-status-tag.flagged { color: #fbbf24; background: rgba(217,119,6,0.1); border-color: rgba(217,119,6,0.25); }

/* Timeline category chips */
.timeline-cat-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.timeline-cat-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.68rem;
    color: var(--text-secondary);
}
.timeline-cat-chip .cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.timeline-cat-chip .cat-pct {
    font-family: var(--font-mono, 'Geist Mono', monospace);
    font-weight: 600;
    color: var(--text-primary);
}

/* Timeline category tag in table */
.timeline-cat-tag {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    background: #F3F4F6;
    color: #374151;
}
[data-theme="dark"] .timeline-cat-tag {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Timeline "why changed" inline tags */
.timeline-change-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    color: #D97706;
    background: #FEF3C7;
}
[data-theme="dark"] .timeline-change-tag {
    color: #fbbf24;
    background: rgba(217,119,6,0.12);
}

/* Timeline step panels — one visible at a time */
.timeline-panels {
    flex: 1;
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 8px;
    overflow: hidden;
}

.timeline-panel {
    display: none;
}

.timeline-panel.active {
    display: block;
}

.timeline-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-secondary, #1a1a1a);
    border-bottom: 1px solid var(--border-color, #2a2a2a);
}

.timeline-panel-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.timeline-panel-status.completed { background: #22c55e; }
.timeline-panel-status.in-progress { background: #3b82f6; }
.timeline-panel-status.pending { background: var(--text-muted, #666); }
.timeline-panel-status.failed { background: #ef4444; }
.timeline-panel-status.no_data { background: var(--text-muted, #666); }

.timeline-panel-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary, #e5e5e5);
    flex: 1;
}

.timeline-panel-duration {
    font-size: 0.72rem;
    color: var(--text-muted, #666);
    flex-shrink: 0;
}

.timeline-panel-content {
    padding: 16px;
}

/* Step summary stats inside accordion header */
.timeline-step-stats {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-muted, #666);
}

.timeline-step-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.timeline-step-stat .stat-value {
    color: var(--text-secondary, #999);
    font-weight: 500;
}

/* ================================================
   AI Corrections Panel
   ================================================ */

.ai-corrections-overview {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.ai-corrections-card {
    flex: 1;
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: var(--radius-md, 8px);
    padding: 14px 16px;
    text-align: center;
}

.ai-corrections-card-icon {
    font-size: 1.2rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-corrections-card-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.ai-corrections-card-label {
    font-size: 0.75rem;
    color: var(--text-muted, #666);
    margin-top: 2px;
}

.ai-corrections-card-detail {
    font-size: 0.7rem;
    color: var(--text-muted, #666);
    margin-top: 4px;
}

.correction-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.correction-log-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    background: var(--bg-secondary, #1a1a1a);
}

.correction-log-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    color: var(--text-secondary, #999);
    vertical-align: middle;
}

.correction-log-row {
    cursor: pointer;
    transition: background 0.15s;
}

.correction-log-row:hover {
    background: rgba(59, 130, 246, 0.06);
}

.correction-original {
    color: #ef4444;
    text-decoration: line-through;
}

.correction-corrected {
    color: #22c55e;
    font-weight: 500;
}

.correction-reason {
    color: var(--text-muted, #666);
    font-style: italic;
    font-size: 0.75rem;
}

/* ================================================
   Signal Extraction — Citation Sidebar
   ================================================ */

.signal-citations-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.signal-citations-main {
    flex: 1;
    min-width: 0;
}

.signal-citations-sidebar {
    width: 200px;
    flex-shrink: 0;
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: var(--radius-md, 8px);
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.citations-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
}

.citations-list {
    padding: 6px;
}

.citation-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background 0.15s;
}

.citation-item:hover {
    background: rgba(59, 130, 246, 0.08);
}

.citation-item.citation-highlight {
    background: rgba(34, 197, 94, 0.06);
    border-left: 2px solid #22c55e;
    padding-left: 8px;
}

.citation-page-badge {
    flex-shrink: 0;
    width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card, #141414);
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary, #999);
}

.citation-detail {
    min-width: 0;
}

.citation-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary, #e5e5e5);
    line-height: 1.3;
}

.citation-sublabel {
    font-size: 0.7rem;
    color: var(--text-muted, #666);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
    .signal-citations-layout {
        flex-direction: column;
    }

    .signal-citations-sidebar {
        width: 100%;
        position: static;
        max-height: none;
    }

    .citations-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .citation-item {
        flex: 0 0 auto;
    }
}

/* ================================================
   Verify Checks — Expanded Explanations
   ================================================ */

.verify-checks-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

/* Card grid layout for signal groups */
.verify-checks-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.verify-check-card {
    width: 230px;
    flex-shrink: 0;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[data-theme="dark"] .verify-check-card {
    background: var(--bg-secondary, #1a1a1a);
    border-color: var(--border-color, #2a2a2a);
}

.verify-check-card.pass {
    background: #E8F5EC;
    border-color: #C5E6D0;
}

[data-theme="dark"] .verify-check-card.pass {
    background: rgba(65, 141, 98, 0.1);
    border-color: rgba(65, 141, 98, 0.25);
}

.verify-check-card.warn {
    background: #FFFBEB;
    border-color: #FDE68A;
}

[data-theme="dark"] .verify-check-card.warn {
    background: rgba(251, 191, 36, 0.06);
    border-color: rgba(251, 191, 36, 0.25);
}

.verify-check-card.fail {
    background: #FEF2F2;
    border-color: #FECACA;
}

[data-theme="dark"] .verify-check-card.fail {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.25);
}

.verify-check-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
}

.verify-check-card-title .status-svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.verify-check-card-title span {
    font-size: 12px;
    font-weight: 600;
    color: #418D62;
}

.verify-check-card.warn .verify-check-card-title span {
    color: #D97706;
}

.verify-check-card.fail .verify-check-card-title span {
    color: #DC2626;
}

[data-theme="dark"] .verify-check-card.pass .verify-check-card-title span {
    color: #5ebd89;
}

[data-theme="dark"] .verify-check-card.warn .verify-check-card-title span {
    color: #fbbf24;
}

[data-theme="dark"] .verify-check-card.fail .verify-check-card-title span {
    color: #f87171;
}

.verify-check-card-desc {
    font-size: 11px;
    line-height: 16px;
    color: #6B7280;
}

.verify-check-card.warn .verify-check-card-desc {
    color: #92400E;
}

.verify-check-card.fail .verify-check-card-desc {
    color: #991B1B;
}

[data-theme="dark"] .verify-check-card-desc {
    color: var(--text-secondary, #999);
}

[data-theme="dark"] .verify-check-card.warn .verify-check-card-desc,
[data-theme="dark"] .verify-check-card.fail .verify-check-card-desc {
    color: var(--text-secondary, #999);
}

.verify-check-item {
    padding: 10px 14px;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border-color, #2a2a2a);
}

.verify-check-item.flagged {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.04);
}

.verify-check-explanation {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    color: var(--text-secondary, #999);
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-sm, 4px);
    line-height: 1.4;
}

.verify-check-pass-note {
    margin-top: 4px;
    padding-left: 26px;
    font-size: 0.75rem;
    color: var(--text-muted, #666);
    font-style: italic;
}

.verify-severity-badge {
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    font-size: 0.68rem;
    padding-top: 1px;
    letter-spacing: 0.03em;
}

/* Verify check findings — actual metadata values */
.verify-check-findings {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm, 4px);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.verify-finding-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.78rem;
    line-height: 1.4;
}

.verify-finding-label {
    color: var(--text-muted, #666);
    flex-shrink: 0;
    min-width: 110px;
    font-weight: 500;
}

.verify-finding-value {
    color: var(--text-secondary, #999);
    word-break: break-all;
}

/* Sidebar set-highlight for Analyze tab — items inside group */
.sidebar-doc-item.set-highlight {
    background: rgba(65, 141, 98, 0.08);
    border-bottom: 1px solid rgba(65, 141, 98, 0.12);
    transition: background 0.2s ease, border-left 0.2s ease;
}

.sidebar-doc-item.set-highlight:last-child {
    border-bottom: none;
}

.sidebar-doc-item.set-highlight .doc-name {
    color: #2D6A46;
}

.sidebar-doc-item.set-highlight.selected {
    background: rgba(65, 141, 98, 0.18);
}

[data-theme="dark"] .sidebar-doc-item.set-highlight {
    background: rgba(65, 141, 98, 0.10);
    border-bottom-color: rgba(65, 141, 98, 0.15);
}

[data-theme="dark"] .sidebar-doc-item.set-highlight .doc-name {
    color: #6ee7a0;
}

[data-theme="dark"] .sidebar-doc-item.set-highlight.selected {
    background: rgba(65, 141, 98, 0.22);
}

.verify-finding-value.verify-finding-warn {
    color: #fbbf24;
    font-weight: 500;
}

/* ================================================
   Set Cards (History View)
   ================================================ */

.set-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.set-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease;
}

.set-card-header:hover {
    background: var(--bg-hover);
}

.set-card-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.set-card.expanded .set-card-arrow {
    transform: rotate(90deg);
}

.set-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3b82f6;
}

.set-card-info {
    flex: 1;
    min-width: 0;
}

.set-card-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.set-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
}

.set-card-meta .meta-separator {
    color: var(--text-muted);
}

.set-card-open-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.set-card-open-btn:hover {
    background: var(--accent-color, #3b82f6);
    border-color: var(--accent-color, #3b82f6);
    color: #fff;
}

.set-card-documents {
    display: none;
    padding: 0 8px;
}

.set-card.expanded .set-card-documents {
    display: block;
    padding: 0 8px 8px;
}

.set-card-documents .activity-item {
    margin-left: 16px;
    border-left: 2px solid var(--border-color);
    padding-left: 12px;
}

/* Upload Mode Picker — toggle between individual and set */
/* Upload Mode Toggle - segmented control */
.upload-mode-toggle {
    display: flex;
    background: #F3F4F6;
    border-radius: 10px;
    padding: 3px;
    gap: 0;
    width: fit-content;
    margin: 16px auto 8px;
}

.mode-toggle-btn {
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    white-space: nowrap;
}

.mode-toggle-btn:hover {
    color: #374151;
}

.mode-toggle-btn.selected {
    background: #FFFFFF;
    color: #1A1A1A;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Legacy compat — keep old class names working */
.upload-mode-picker {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 20px 16px 12px;
}

.upload-mode-card.selected,
.upload-mode-card {
    display: none; /* Hidden — replaced by segmented toggle */
}

/* Inline set creation form */
.inline-set-form {
    padding: 0 16px 12px;
}

.inline-set-form-inner {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 10px;
    padding: 16px 20px;
}

.inline-set-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
    display: block;
    margin-bottom: 4px;
}

.inline-set-hint {
    font-size: 0.8rem;
    color: var(--text-muted, #666);
    margin-bottom: 12px;
}

.inline-set-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.inline-set-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 6px;
    background: var(--bg-primary, #141414);
    color: var(--text-primary, #e5e5e5);
    font-size: 0.85rem;
    font-family: var(--font-body);
    outline: none;
}

.inline-set-input:focus {
    border-color: var(--color-primary, #3b82f6);
}

/* Active set banner */
.active-set-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    margin: 0 0 8px;
    background: rgba(65, 141, 98, 0.06);
    border-left: 3px solid #418D62;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: var(--text-primary, #1A1A1A);
}

.active-set-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #418D62;
}

.active-set-info span {
    color: #6B7280;
}

.active-set-info strong {
    color: var(--text-primary, #1A1A1A);
    font-weight: 600;
}

.active-set-name-input {
    background: transparent;
    border: 1px solid rgba(65, 141, 98, 0.3);
    border-radius: 6px;
    color: var(--text-primary, #1A1A1A);
    font-size: 13px;
    font-weight: 600;
    padding: 3px 8px;
    outline: none;
    min-width: 180px;
    font-family: var(--font-body);
}

.active-set-name-input:focus {
    border-color: #418D62;
    box-shadow: 0 0 0 2px rgba(65, 141, 98, 0.15);
}

.active-set-close {
    background: none;
    border: none;
    color: #9CA3AF;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.active-set-close:hover {
    color: #DC2626;
    background: rgba(220, 38, 38, 0.06);
}

/* Analyze tab styles */
.analyze-container {
    /* Match .processing-timeline padding exactly so Extract / Fraud Check /
     * Analysis tabs share the same doc-header position when switching. The
     * outer .detail-content owns the horizontal breathing room (--spacing-md). */
    padding: 0 0 8px;
}

/* ================================================
   Analyze Tab — Paper Design Components
   ================================================ */

/* Individual Analysis header */
.analyze-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.analyze-header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.analyze-header-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

[data-theme="dark"] .analyze-header-title {
    color: var(--text-primary, #e5e5e5);
}

.analyze-header-subtitle {
    font-size: 12px;
    color: #6B7280;
}

[data-theme="dark"] .analyze-header-subtitle {
    color: var(--text-muted, #666);
}

.analyze-mode-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    background: #F3F4F6;
    font-size: 11px;
    line-height: 14px;
    color: #6B7280;
}

[data-theme="dark"] .analyze-mode-pill {
    background: var(--bg-secondary, #1c1c1c);
    color: var(--text-muted, #666);
}

/* Green / Yellow flag cards side by side */
/* Strengths & concerns — editorial 2-column layout, no card chrome */
.analyze-flags-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 0 24px;
    border-top: 1px solid var(--border-color, #E5E3DC);
    margin-bottom: 8px;
}
[data-theme="dark"] .analyze-flags-block { border-top-color: var(--border-color, #2a2a2a); }
.analyze-flags-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}
.analyze-flags-head-text { display: flex; flex-direction: column; gap: 4px; }
.analyze-flags-eyebrow {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    line-height: 14px;
    color: var(--text-secondary, #5D5D63);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.analyze-flags-title {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-primary, #18181B);
}
.analyze-flags-meta {
    font-size: 12.5px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}

.analyze-flags-row {
    display: flex;
    border-top: 1px solid var(--border-color, #E5E3DC);
}
[data-theme="dark"] .analyze-flags-row { border-top-color: var(--border-color, #2a2a2a); }
.analyze-flag-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 0;
    min-width: 0;
}
.analyze-flag-col.has-divider {
    padding-right: 24px;
    border-right: 1px solid var(--border-color, #E5E3DC);
}
.analyze-flag-col.has-leading-pad {
    padding-left: 24px;
}
[data-theme="dark"] .analyze-flag-col.has-divider { border-right-color: var(--border-color, #2a2a2a); }

.analyze-flag-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.analyze-flag-col-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
}
.analyze-flag-col-eyebrow {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.analyze-flag-col.positive .analyze-flag-col-dot { background: #15803D; }
.analyze-flag-col.positive .analyze-flag-col-eyebrow { color: #15803D; }
.analyze-flag-col.concern .analyze-flag-col-dot { background: #B45309; }
.analyze-flag-col.concern .analyze-flag-col-eyebrow { color: #B45309; }
[data-theme="dark"] .analyze-flag-col.positive .analyze-flag-col-dot { background: #5ebd89; }
[data-theme="dark"] .analyze-flag-col.positive .analyze-flag-col-eyebrow { color: #5ebd89; }
[data-theme="dark"] .analyze-flag-col.concern .analyze-flag-col-dot { background: #fbbf24; }
[data-theme="dark"] .analyze-flag-col.concern .analyze-flag-col-eyebrow { color: #fbbf24; }

.analyze-flag-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.analyze-flag-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.analyze-flag-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    margin-top: 7px;
    flex-shrink: 0;
}
.analyze-flag-item-text {
    font-size: 13.5px;
    line-height: 18px;
    color: var(--text-primary, #18181B);
}
.analyze-flag-col.positive .analyze-flag-item-dot { background: #15803D; }
.analyze-flag-col.concern .analyze-flag-item-dot { background: #B45309; }
[data-theme="dark"] .analyze-flag-col.positive .analyze-flag-item-dot { background: #5ebd89; }
[data-theme="dark"] .analyze-flag-col.concern .analyze-flag-item-dot { background: #fbbf24; }

@media (max-width: 760px) {
    .analyze-flags-row { flex-direction: column; }
    .analyze-flag-col.has-divider { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--border-color, #E5E3DC); }
    .analyze-flag-col.has-leading-pad { padding-left: 0; }
}

/* Cashflow metrics divided row */
.analyze-metrics-row {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    margin-bottom: 20px;
}

[data-theme="dark"] .analyze-metrics-row {
    border-color: var(--border-color, #2a2a2a);
}

.analyze-metric-cell {
    flex: 1 1 0;
    padding: 14px 16px;
    border-right: 1px solid #E5E7EB;
}

[data-theme="dark"] .analyze-metric-cell {
    border-right-color: var(--border-color, #2a2a2a);
}

.analyze-metric-cell:last-child { border-right: none; }

.analyze-metric-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 12px;
    color: #9CA3AF;
}

[data-theme="dark"] .analyze-metric-label {
    color: var(--text-muted, #666);
}

.analyze-metric-value {
    padding-top: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #111827;
}

[data-theme="dark"] .analyze-metric-value {
    color: var(--text-primary, #e5e5e5);
}

.analyze-metric-value.positive { color: #418D62; }
.analyze-metric-value.negative { color: #EF4444; }

[data-theme="dark"] .analyze-metric-value.positive { color: #5ebd89; }
[data-theme="dark"] .analyze-metric-value.negative { color: #f87171; }

/* Applicant summary card */
.analyze-applicant-card {
    display: flex;
    border-radius: 12px;
    padding: 20px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    margin-bottom: 16px;
}

[data-theme="dark"] .analyze-applicant-card {
    background: var(--bg-card, #1a1a1a);
    border-color: var(--border-color, #2a2a2a);
}

.analyze-applicant-main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid #E5E7EB;
    padding-right: 20px;
}

[data-theme="dark"] .analyze-applicant-main {
    border-right-color: var(--border-color, #2a2a2a);
}

.analyze-applicant-identity {
    display: flex;
    align-items: center;
    gap: 8px;
}

.analyze-applicant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #DBEAFE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2563EB;
}

[data-theme="dark"] .analyze-applicant-avatar {
    background: rgba(37, 99, 235, 0.15);
}

.analyze-applicant-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 18px;
}

[data-theme="dark"] .analyze-applicant-name {
    color: var(--text-primary, #e5e5e5);
}

.analyze-applicant-role {
    font-size: 11px;
    color: #6B7280;
    line-height: 14px;
}

[data-theme="dark"] .analyze-applicant-role {
    color: var(--text-muted, #666);
}

.analyze-applicant-facts {
    display: flex;
    gap: 16px;
}

.analyze-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.analyze-fact-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 12px;
    color: #9CA3AF;
}

[data-theme="dark"] .analyze-fact-label {
    color: var(--text-muted, #666);
}

.analyze-fact-value {
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #111827;
}

[data-theme="dark"] .analyze-fact-value {
    color: var(--text-primary, #e5e5e5);
}

.analyze-applicant-risk {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-left: 24px;
}

.analyze-risk-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 12px;
    color: #9CA3AF;
}

.analyze-risk-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
}

.analyze-risk-score {
    font-size: 11px;
    color: #6B7280;
    line-height: 14px;
    font-family: var(--font-mono, 'Geist Mono', monospace);
}

/* DTI + Recommendation side-by-side */
.analyze-dti-rec-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.analyze-panel-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #E5E7EB;
}

[data-theme="dark"] .analyze-panel-card {
    border-color: var(--border-color, #2a2a2a);
}

.analyze-panel-card.recommendation {
    background: #E8F5EC;
    border-color: #C5E6D0;
}

[data-theme="dark"] .analyze-panel-card.recommendation {
    background: rgba(65, 141, 98, 0.1);
    border-color: rgba(65, 141, 98, 0.25);
}

.analyze-panel-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    color: #111827;
}

[data-theme="dark"] .analyze-panel-title {
    color: var(--text-primary, #e5e5e5);
}

.analyze-dti-big {
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    font-family: var(--font-mono, 'Geist Mono', monospace);
}

.analyze-dti-bar {
    display: flex;
    border-radius: 3px;
    height: 6px;
    overflow: hidden;
    gap: 2px;
}

.analyze-rec-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.analyze-rec-title svg { flex-shrink: 0; }

.analyze-rec-title span {
    font-size: 13px;
    font-weight: 600;
    color: #367A53;
    line-height: 16px;
}

[data-theme="dark"] .analyze-rec-title span {
    color: #5ebd89;
}

.analyze-rec-text {
    font-size: 12px;
    line-height: 18px;
    color: #374151;
}

[data-theme="dark"] .analyze-rec-text {
    color: var(--text-secondary, #999);
}

.analyze-rec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.analyze-rec-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 14px;
}

.analyze-rec-tag.green { background: #DCFCE7; color: #059669; }
.analyze-rec-tag.yellow { background: #FEF3C7; color: #D97706; }
.analyze-rec-tag.red { background: #FEE2E2; color: #DC2626; }

[data-theme="dark"] .analyze-rec-tag.green { background: rgba(5, 150, 105, 0.15); }
[data-theme="dark"] .analyze-rec-tag.yellow { background: rgba(217, 119, 6, 0.15); }
[data-theme="dark"] .analyze-rec-tag.red { background: rgba(220, 38, 38, 0.15); }

/* Cross-check flex table — Paper design */
.analyze-cross-check {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.analyze-cross-check-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.analyze-cross-check-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #111827;
}

[data-theme="dark"] .analyze-cross-check-title {
    color: var(--text-primary, #e5e5e5);
}

.analyze-match-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 14px;
}

.analyze-match-badge.match {
    background: #F0FDF4;
    color: #418D62;
}

.analyze-match-badge.mismatch {
    background: #FEF3C7;
    color: #D97706;
}

[data-theme="dark"] .analyze-match-badge.match {
    background: rgba(65, 141, 98, 0.12);
}

[data-theme="dark"] .analyze-match-badge.mismatch {
    background: rgba(217, 119, 6, 0.12);
}

.analyze-cross-table {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
}

[data-theme="dark"] .analyze-cross-table {
    border-color: var(--border-color, #2a2a2a);
}

.analyze-cross-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #F3F4F6;
}

.analyze-cross-row:last-child {
    border-bottom: none;
}

.analyze-cross-row.header {
    background: #F9FAFB;
    border-bottom-color: #E5E7EB;
}

[data-theme="dark"] .analyze-cross-row.header {
    background: var(--bg-card, #1a1a1a);
    border-bottom-color: var(--border-color, #2a2a2a);
}

[data-theme="dark"] .analyze-cross-row {
    border-bottom-color: var(--border-color-light, #222);
}

.analyze-cross-cell {
    font-size: 12px;
    line-height: 16px;
    color: #111827;
    flex: 1 1 0;
}

[data-theme="dark"] .analyze-cross-cell {
    color: var(--text-primary, #e5e5e5);
}

.analyze-cross-cell.doc-type {
    width: 180px;
    flex: 0 0 180px;
    font-weight: 500;
    color: #374151;
}

[data-theme="dark"] .analyze-cross-cell.doc-type {
    color: var(--text-secondary, #999);
}

.analyze-cross-cell.header-cell {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B7280;
    line-height: 14px;
}

.analyze-cross-cell.empty {
    color: #9CA3AF;
}

.analyze-cross-cell.mono {
    font-family: var(--font-mono, 'Geist Mono', monospace);
}

/* Sidebar applicant group — wraps docs by applicant in multi-set viewer */
.sidebar-applicant-group {
    border-radius: 0 8px 8px 0;
    overflow: hidden;
    margin-bottom: 4px;
}
.sidebar-applicant-group[data-group-color="green"]  { border-left: 3px solid #418D62; background: rgba(65,141,98,0.04); }
.sidebar-applicant-group[data-group-color="blue"]   { border-left: 3px solid #3B82F6; background: rgba(59,130,246,0.04); }
.sidebar-applicant-group[data-group-color="amber"]  { border-left: 3px solid #D97706; background: rgba(217,119,6,0.04); }
.sidebar-applicant-group[data-group-color="purple"] { border-left: 3px solid #7C3AED; background: rgba(124,58,237,0.04); }

[data-theme="dark"] .sidebar-applicant-group[data-group-color="green"]  { border-left-color: #5ebd89; background: rgba(65,141,98,0.06); }
[data-theme="dark"] .sidebar-applicant-group[data-group-color="blue"]   { border-left-color: #60a5fa; background: rgba(59,130,246,0.06); }
[data-theme="dark"] .sidebar-applicant-group[data-group-color="amber"]  { border-left-color: #fbbf24; background: rgba(217,119,6,0.06); }
[data-theme="dark"] .sidebar-applicant-group[data-group-color="purple"] { border-left-color: #a78bfa; background: rgba(124,58,237,0.06); }

/* Active group (analyze tab highlight) */
/* Active group — Credit Assessment highlight */
.sidebar-applicant-group.set-active {
    background: rgba(65,141,98,0.12);
    border-left-width: 4px;
    box-shadow: inset 0 0 0 1px rgba(65,141,98,0.18), 0 0 8px rgba(65,141,98,0.10);
    animation: ca-group-glow 1.2s ease-out;
}
.sidebar-applicant-group.set-active .sidebar-applicant-group-header {
    background: rgba(65,141,98,0.08);
}
.sidebar-applicant-group.set-active .sidebar-applicant-group-header::after {
    content: 'ANALYZING';
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    background: #418D62;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.sidebar-applicant-group.set-active .sidebar-doc-item.set-highlight {
    background: rgba(65,141,98,0.10);
    border-left: 2px solid rgba(65,141,98,0.35);
    padding-left: 14px;
}
.sidebar-applicant-group.set-active .sidebar-doc-item.set-highlight.selected {
    background: rgba(65,141,98,0.20);
    border-left: 2px solid #418D62;
}

@keyframes ca-group-glow {
    0%   { box-shadow: inset 0 0 0 1px rgba(65,141,98,0.40), 0 0 16px rgba(65,141,98,0.25); }
    100% { box-shadow: inset 0 0 0 1px rgba(65,141,98,0.18), 0 0 8px rgba(65,141,98,0.10); }
}

[data-theme="dark"] .sidebar-applicant-group.set-active {
    background: rgba(65,141,98,0.16);
    box-shadow: inset 0 0 0 1px rgba(65,141,98,0.25), 0 0 10px rgba(65,141,98,0.12);
}
[data-theme="dark"] .sidebar-applicant-group.set-active .sidebar-applicant-group-header {
    background: rgba(65,141,98,0.10);
}
[data-theme="dark"] .sidebar-applicant-group.set-active .sidebar-doc-item.set-highlight {
    background: rgba(65,141,98,0.12);
    border-left-color: rgba(65,141,98,0.45);
}
[data-theme="dark"] .sidebar-applicant-group.set-active .sidebar-doc-item.set-highlight.selected {
    background: rgba(65,141,98,0.24);
    border-left-color: #418D62;
}

.sidebar-applicant-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 12px;
    font-weight: 600;
}
.sidebar-applicant-group[data-group-color="green"] .sidebar-applicant-group-header  { color: #2D6A46; border-bottom-color: rgba(65,141,98,0.12); }
.sidebar-applicant-group[data-group-color="blue"] .sidebar-applicant-group-header   { color: #1d4ed8; border-bottom-color: rgba(59,130,246,0.12); }
.sidebar-applicant-group[data-group-color="amber"] .sidebar-applicant-group-header  { color: #92400e; border-bottom-color: rgba(217,119,6,0.12); }
.sidebar-applicant-group[data-group-color="purple"] .sidebar-applicant-group-header { color: #5b21b6; border-bottom-color: rgba(124,58,237,0.12); }

[data-theme="dark"] .sidebar-applicant-group[data-group-color="green"] .sidebar-applicant-group-header  { color: #5ebd89; border-bottom-color: rgba(65,141,98,0.15); }
[data-theme="dark"] .sidebar-applicant-group[data-group-color="blue"] .sidebar-applicant-group-header   { color: #60a5fa; border-bottom-color: rgba(59,130,246,0.15); }
[data-theme="dark"] .sidebar-applicant-group[data-group-color="amber"] .sidebar-applicant-group-header  { color: #fbbf24; border-bottom-color: rgba(217,119,6,0.15); }
[data-theme="dark"] .sidebar-applicant-group[data-group-color="purple"] .sidebar-applicant-group-header { color: #a78bfa; border-bottom-color: rgba(124,58,237,0.15); }

.sidebar-applicant-group-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    overflow: hidden;
}

.sidebar-applicant-group-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

.sidebar-applicant-group-count {
    font-weight: 400;
    color: #6B7280;
    font-size: 11px;
}

[data-theme="dark"] .sidebar-applicant-group-count {
    color: #9CA3AF;
}

/* Applicant checkbox in Applications page */
.applicant-select-cb {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #418D62;
}

/* Applicant bulk action bar */
.applicant-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color-light, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: sticky;
    bottom: 12px;
    z-index: 10;
}

[data-theme="dark"] .applicant-bulk-bar {
    background: var(--bg-card, #1f2937);
    border-color: var(--border-color-light, #374151);
}

.applicant-bulk-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111);
}

/* Verify Authenticity Score — horizontal layout */
.verify-score-horizontal {
    display: flex;
    align-items: center;
    border-radius: 12px;
    padding: 20px;
    gap: 20px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
}

[data-theme="dark"] .verify-score-horizontal {
    background: var(--bg-card, #1a1a1a);
    border-color: var(--border-color, #2a2a2a);
}

.verify-score-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    flex-shrink: 0;
    gap: 4px;
}

.verify-score-big {
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}

.verify-score-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 12px;
    color: #9CA3AF;
}

.verify-score-divider {
    width: 1px;
    height: 48px;
    background: #E5E7EB;
    flex-shrink: 0;
}

[data-theme="dark"] .verify-score-divider {
    background: var(--border-color, #2a2a2a);
}

.verify-score-details {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.verify-score-risk-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.verify-score-risk-label {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 18px;
}

[data-theme="dark"] .verify-score-risk-label {
    color: var(--text-primary, #e5e5e5);
}

.verify-score-risk-counts {
    font-size: 12px;
    color: #6B7280;
}

[data-theme="dark"] .verify-score-risk-counts {
    color: var(--text-muted, #666);
}

.verify-score-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    gap: 2px;
}

.verify-score-summary {
    font-size: 12px;
    line-height: 16px;
    color: #6B7280;
}

[data-theme="dark"] .verify-score-summary {
    color: var(--text-secondary, #999);
}

/* ── Dark theme: Global top nav ── */
[data-theme="dark"] .app-top-nav {
    background: var(--bg-card);
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .app-nav-link { color: var(--text-muted); }
[data-theme="dark"] .app-nav-link:hover { color: var(--text-primary); background: var(--bg-subtle); }
[data-theme="dark"] .app-nav-link.active { color: #6ee7a0; background: rgba(65, 141, 98, 0.15); }
[data-theme="dark"] .app-nav-pages { color: var(--text-muted); }
[data-theme="dark"] .app-nav-avatar {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}
[data-theme="dark"] .app-nav-avatar:hover { background: var(--border-color); }
[data-theme="dark"] .app-nav-dropdown {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
[data-theme="dark"] .app-nav-logout { color: #f87171; }
[data-theme="dark"] .app-nav-logout:hover { background: rgba(239, 68, 68, 0.1); }
[data-theme="dark"] .app-nav-logout svg { color: #f87171; }
[data-theme="dark"] .results-layout { background: var(--bg-card); }
[data-theme="dark"] .documents-sidebar {
    background: var(--bg-card);
    border-right-color: var(--border-color);
}
[data-theme="dark"] .sidebar-header { background: var(--bg-card); }
[data-theme="dark"] .sidebar-count {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}
[data-theme="dark"] .btn-clear-all { color: var(--text-muted); }
[data-theme="dark"] .btn-clear-all:hover { color: #f87171; }
[data-theme="dark"] .sidebar-doc-item:hover { background: var(--bg-subtle); }
[data-theme="dark"] .sidebar-doc-item.selected {
    background: color-mix(in srgb, var(--doc-color, var(--color-primary)) 12%, transparent);
    border-left-color: var(--doc-color, var(--color-primary));
}
[data-theme="dark"] .sidebar-doc-item .doc-name { color: var(--text-primary); }
[data-theme="dark"] .sidebar-doc-item .doc-meta { color: var(--text-muted); }
[data-theme="dark"] .sidebar-doc-item .doc-type-pill { color: var(--text-muted); }
[data-theme="dark"] .sidebar-doc-item .doc-time { color: var(--text-muted); }
[data-theme="dark"] .detail-tabs-container {
    background: var(--bg-card);
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .detail-tabs-container .tab { color: var(--text-muted); }
[data-theme="dark"] .detail-tabs-container .tab:hover { color: var(--text-secondary); }
[data-theme="dark"] .detail-tabs-container .tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}
[data-theme="dark"] .document-detail-panel { background: var(--bg-card); }
[data-theme="dark"] .detail-content { background: var(--bg-card); }
[data-theme="dark"] .section-header h1 { color: var(--text-primary); }
[data-theme="dark"] .subtitle { color: var(--text-muted); }
[data-theme="dark"] .main-content { background: var(--bg-dark); }
[data-theme="dark"] .results-layout { background: var(--bg-card); }
[data-theme="dark"] .activity-item { border-bottom-color: var(--border-color); }
[data-theme="dark"] .activity-item:hover,
[data-theme="dark"] .activity-item.clickable:hover { background: var(--bg-subtle); }
[data-theme="dark"] .activity-title { color: var(--text-primary); }
[data-theme="dark"] .activity-meta .doc-type { color: var(--text-muted); }
[data-theme="dark"] .activity-time { color: var(--text-muted); }
[data-theme="dark"] .activity-status.success,
[data-theme="dark"] .activity-status.failed,
[data-theme="dark"] .activity-status.pending { color: var(--text-secondary); }
[data-theme="dark"] .activity-table-header { border-bottom-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .search-input { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .search-input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .dropzone { border-color: var(--border-color); }
[data-theme="dark"] .dropzone-text { color: var(--text-primary); }
[data-theme="dark"] .dropzone-subtext { color: var(--text-secondary); }
[data-theme="dark"] .mode-toggle-btn { color: var(--text-muted); }
[data-theme="dark"] .mode-toggle-btn.selected { background: var(--bg-card); color: var(--text-primary); }
[data-theme="dark"] .upload-mode-toggle { background: var(--bg-subtle); }
[data-theme="dark"] .active-set-banner { background: rgba(65, 141, 98, 0.08); border-left-color: #5ebd89; }
[data-theme="dark"] .active-set-info { color: #5ebd89; }
[data-theme="dark"] .active-set-info span { color: #9CA3AF; }
[data-theme="dark"] .active-set-info strong { color: var(--text-primary); }
[data-theme="dark"] .active-set-name-input { color: var(--text-primary); border-color: rgba(65, 141, 98, 0.3); }
[data-theme="dark"] .active-set-name-input:focus { border-color: #5ebd89; box-shadow: 0 0 0 2px rgba(94, 189, 137, 0.15); }
[data-theme="dark"] .active-set-close { color: #6B7280; }
[data-theme="dark"] .active-set-close:hover { color: #f87171; background: rgba(220, 38, 38, 0.1); }
[data-theme="dark"] .constructor-link { background: var(--bg-subtle); border-color: var(--border-color); }
[data-theme="dark"] .constructor-link:hover { background: var(--bg-card-hover); }

.cross-check-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-bottom: 20px;
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 8px;
    overflow: hidden;
}

.cross-check-table th {
    background: rgba(var(--color-primary-rgb, 65, 141, 98), 0.08);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cross-check-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #1e1e1e);
    color: var(--text-primary, #e5e5e5);
}

.cross-check-table tr:hover td {
    background: rgba(var(--color-primary-rgb, 65, 141, 98), 0.04);
}

.cross-check-match { color: var(--color-primary, #418D62); font-weight: 500; }
.cross-check-mismatch { color: #ef4444; font-weight: 500; }
.cross-check-missing { color: var(--text-muted, #666); font-style: italic; }

.page-ref-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    margin: 0 2px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid currentColor;
    transition: filter 0.15s, transform 0.1s;
    vertical-align: baseline;
    white-space: nowrap;
    /* color/background set inline per document */
}
.page-ref-badge:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Recommendation panel */
.recommendation-panel {
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 8px;
    padding: 20px;
    background: var(--bg-card, #1a1a1a);
}

.recommendation-score-bar {
    text-align: center;
    margin-bottom: 16px;
}

.recommendation-score {
    font-size: 2rem;
    font-weight: 700;
}

.recommendation-score-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.recommendation-score-track {
    height: 4px;
    background: var(--bg-secondary, #252525);
    border-radius: 2px;
    overflow: hidden;
    max-width: 200px;
    margin: 0 auto;
}

.recommendation-score-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Green / Red flags */
.recommendation-flags {
    margin-top: 16px;
}

.recommendation-flags-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.recommendation-flags-title.green { color: var(--color-primary, #418D62); }
.recommendation-flags-title.red { color: #ef4444; }

.recommendation-flag {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    margin-bottom: 4px;
    line-height: 1.4;
}

.recommendation-flag.green {
    background: rgba(var(--color-primary-rgb, 65, 141, 98), 0.06);
    color: var(--text-secondary);
}

.recommendation-flag.green .flag-icon {
    color: var(--color-primary, #418D62);
    font-weight: 700;
    flex-shrink: 0;
}

.recommendation-flag.red {
    background: rgba(239, 68, 68, 0.06);
    color: var(--text-secondary);
}

.recommendation-flag.red .flag-icon {
    color: #ef4444;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================
   Lending Underwriting Summary
   ============================================ */

.lending-metrics-cards {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.lending-metric-card {
    flex: 1 1 130px;
    min-width: 120px;
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 8px;
    padding: 14px 12px;
    text-align: center;
}

.lending-metric-card .metric-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #e5e5e5);
    line-height: 1.2;
}

.lending-metric-card .metric-val.positive { color: var(--color-primary, #418D62); }
.lending-metric-card .metric-val.negative { color: #ef4444; }
.lending-metric-card .metric-val.warn { color: #f59e0b; }

.lending-metric-card .metric-lbl {
    font-size: 0.7rem;
    color: var(--text-muted, #888);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lending-metric-card .metric-sub {
    font-size: 0.72rem;
    color: var(--text-muted, #888);
    margin-top: 2px;
}

.lending-section {
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.lending-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    background: rgba(var(--color-primary-rgb, 65, 141, 98), 0.04);
    user-select: none;
    transition: background 0.15s;
}

.lending-section-header:hover {
    background: rgba(var(--color-primary-rgb, 65, 141, 98), 0.08);
}

.lending-section-header .section-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
}

.lending-section-header .section-chevron {
    font-size: 0.7rem;
    color: var(--text-muted, #888);
    transition: transform 0.2s;
}

.lending-section.collapsed .lending-section-body { display: none; }
.lending-section.collapsed .section-chevron { transform: rotate(-90deg); }

.lending-section-body {
    padding: 12px 14px;
}

.lending-bar-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.lending-bar-label {
    font-size: 0.78rem;
    color: var(--text-secondary, #aaa);
    min-width: 100px;
    flex-shrink: 0;
}

.lending-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary, #252525);
    border-radius: 4px;
    overflow: hidden;
}

.lending-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.lending-bar-value {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    min-width: 40px;
    text-align: right;
}

.lending-outlier-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color, #1e1e1e);
    font-size: 0.8rem;
}

.lending-outlier-row:last-child { border-bottom: none; }

.lending-outlier-row .outlier-date {
    color: var(--text-muted, #888);
    min-width: 80px;
    flex-shrink: 0;
}

.lending-outlier-row .outlier-desc {
    color: var(--text-secondary, #aaa);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lending-outlier-row .outlier-amt {
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
    min-width: 80px;
    text-align: right;
}

.lending-outlier-row .outlier-pct {
    font-size: 0.72rem;
    color: var(--text-muted, #888);
    min-width: 45px;
    text-align: right;
}

.lending-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border-color, #1a1a1a);
}

.lending-detail-row:last-child { border-bottom: none; }

.lending-detail-row .detail-label {
    color: var(--text-secondary, #aaa);
}

.lending-detail-row .detail-value {
    font-weight: 500;
    color: var(--text-primary, #e5e5e5);
}

/* ============================================
   Analyze Tab — Cross-Doc Sections
   ============================================ */

.corroboration-field {
    margin-bottom: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color, #1a1a1a);
}
.corroboration-field:last-child { border-bottom: none; }

.doc-coverage-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 12px;
}

.signal-status-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
}
.signal-status-badge.good { background: rgba(65,141,98,0.12); color: var(--color-primary, #418D62); }
.signal-status-badge.warning { background: rgba(239,68,68,0.12); color: #ef4444; }
.signal-status-badge.partial { background: rgba(245,158,11,0.12); color: #d97706; }
.signal-status-badge.neutral { background: rgba(136,136,136,0.12); color: var(--text-muted, #888); }

.income-match-badge {
    font-size: 0.72rem;
    font-weight: 600;
}

/* ========== DTI Gauge ========== */
.dti-gauge {
    margin: 8px 0 12px;
}

.dti-gauge-track {
    position: relative;
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-secondary, #252525);
}

.dti-gauge-zone {
    height: 100%;
}

.dti-gauge-marker {
    position: absolute;
    top: -2px;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.dti-gauge-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-muted, #888);
    margin-top: 3px;
    padding: 0 2px;
}

.dti-rating-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ========== Affordability ========== */
.affordability-capacity-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--bg-secondary, #252525);
}

.affordability-segment {
    height: 100%;
    transition: width 0.4s ease;
}

.affordability-segment.debt {
    background: #ef4444;
}

.affordability-segment.capacity {
    background: #22c55e;
}

/* ========== Document Timeline ========== */
.timeline-chart {
    padding: 4px 0;
}

.timeline-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-muted, #888);
    margin-bottom: 8px;
    padding: 0 4px;
}

.timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.timeline-label {
    font-size: 0.72rem;
    color: var(--text-secondary, #aaa);
    min-width: 100px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-track {
    flex: 1;
    height: 10px;
    background: var(--bg-secondary, #252525);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.timeline-track .timeline-bar {
    position: absolute;
    height: 100%;
    border-radius: 5px;
    min-width: 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.timeline-track .timeline-bar:hover {
    opacity: 1;
}

.timeline-track .timeline-bar-expired {
    opacity: 0.4;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,0.1) 3px,
        rgba(255,255,255,0.1) 6px
    ) !important;
}

/* ========== Spending Trend Alerts ========== */
.spending-trend-alert {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: var(--bg-secondary, #252525);
    border-radius: 6px;
}

.spending-trend-alert:last-child {
    margin-bottom: 0;
}

/* ============================================
   Validation Rubric
   ============================================ */

.validation-rubric {
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background: var(--bg-card, #1a1a1a);
}

.rubric-doc-type {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.rubric-score-bar {
    text-align: center;
    margin-bottom: 16px;
}

.rubric-score-value {
    font-size: 1.75rem;
    font-weight: 700;
}

.rubric-score-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.rubric-score-track {
    height: 4px;
    background: var(--bg-secondary, #252525);
    border-radius: 2px;
    overflow: hidden;
    max-width: 180px;
    margin: 0 auto;
}

.rubric-score-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.rubric-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rubric-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.rubric-check-icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
}

.rubric-check-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    margin-right: 4px;
}

.rubric-check-detail {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.rubric-check.pass {
    background: rgba(34, 197, 94, 0.06);
}

.rubric-check.pass .rubric-check-icon {
    color: #22c55e;
}

.rubric-check.warn {
    background: rgba(245, 158, 11, 0.06);
}

.rubric-check.warn .rubric-check-icon {
    color: #f59e0b;
}

.rubric-check.fail {
    background: rgba(239, 68, 68, 0.06);
}

.rubric-check.fail .rubric-check-icon {
    color: #ef4444;
}

/* ============================================
   Score Breakdown — expandable inline panels
   ============================================ */

.score-breakdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    background: none;
    border: none;
    transition: color 0.15s, background 0.15s;
    user-select: none;
}

.score-breakdown-toggle:hover {
    color: var(--text-secondary);
    background: var(--bg-secondary, #252525);
}

.score-breakdown-toggle .chevron {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.65rem;
}

.score-breakdown-toggle.open .chevron {
    transform: rotate(90deg);
}

.score-breakdown-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.score-breakdown-panel.open {
    max-height: 600px;
}

.score-breakdown-inner {
    padding: 12px 0 4px;
}

.score-breakdown-formula {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.4;
}

.score-breakdown-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 0.78rem;
}

.score-breakdown-label {
    width: 130px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.score-breakdown-value {
    width: 35px;
    text-align: right;
    font-weight: 600;
    flex-shrink: 0;
}

.score-breakdown-track {
    flex: 1;
    height: 4px;
    background: var(--bg-secondary, #252525);
    border-radius: 2px;
    overflow: hidden;
    min-width: 40px;
}

.score-breakdown-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.score-breakdown-weight {
    width: 36px;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* ============================================
   Threshold Scale Bar
   ============================================ */

.threshold-bar {
    position: relative;
    height: 10px;
    border-radius: 5px;
    overflow: visible;
    display: flex;
    margin: 8px 0 18px;
}

.threshold-zone {
    height: 100%;
    position: relative;
}

.threshold-zone:first-child {
    border-radius: 5px 0 0 5px;
}

.threshold-zone:last-child {
    border-radius: 0 5px 5px 0;
}

.threshold-zone-label {
    position: absolute;
    bottom: -16px;
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.threshold-marker {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 18px;
    background: var(--text-primary, #fff);
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
}

/* ── Org Comparison Section ── */
.org-comparison-section {
    margin-top: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.org-comparison-section.collapsed .lending-section-body { display: none; }
.org-comparison-section.collapsed .section-chevron { transform: rotate(-90deg); }

.org-cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.org-cmp-table th {
    text-align: left;
    font-weight: 500;
    color: var(--text-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.org-cmp-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color-light, rgba(0,0,0,0.05));
}
.org-cmp-label {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}
.org-cmp-val {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.org-cmp-bar-cell { width: 120px; }
.org-cmp-bar-track {
    position: relative;
    height: 6px;
    background: var(--bg-tertiary, #e5e7eb);
    border-radius: 3px;
    overflow: visible;
}
.org-cmp-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.org-cmp-bar-fill.green { background: var(--color-primary, #418D62); }
.org-cmp-bar-fill.yellow { background: #f59e0b; }
.org-cmp-bar-fill.red { background: #ef4444; }

.org-cmp-bar-marker {
    position: absolute;
    top: -2px;
    width: 3px;
    height: 10px;
    background: var(--text-primary);
    border-radius: 1px;
    transform: translateX(-50%);
}

.org-cmp-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    white-space: nowrap;
}
.org-cmp-badge.green { background: rgba(65,141,98,0.12); color: var(--color-primary, #418D62); }
.org-cmp-badge.yellow { background: rgba(245,158,11,0.12); color: #d97706; }
.org-cmp-badge.red { background: rgba(239,68,68,0.12); color: #ef4444; }

/* Trend arrows */
.org-cmp-trend {
    font-size: 0.72rem;
    white-space: nowrap;
    text-align: center;
}
.org-trend-arrow {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
}
.org-trend-arrow.up { color: var(--color-primary, #418D62); }
.org-trend-arrow.down { color: #ef4444; }
.org-trend-arrow.stable { color: var(--text-muted); }

/* Window toggle pills */
.org-cmp-window-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.org-cmp-pill {
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.org-cmp-pill:hover {
    border-color: var(--color-primary, #418D62);
    color: var(--text-primary);
}
.org-cmp-pill.active {
    background: var(--color-primary, #418D62);
    color: white;
    border-color: var(--color-primary, #418D62);
}

/* ========== Credit Assessment (ca-*) ========== */

.ca-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.ca-row > * {
    flex: 1 1 0;
    min-width: 0;
}

.ca-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color-light, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    padding: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    margin-bottom: 16px;
}
.ca-row {
    margin-bottom: 16px;
}
.ca-row .ca-card {
    margin-bottom: 0;
}
.ca-card-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.ca-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}
.ca-card-header .ca-card-title {
    margin-bottom: 0;
}
.ca-card-stat {
    font-size: 0.7rem;
    color: var(--text-muted, #9CA3AF);
    font-weight: 500;
}

/* Document Coverage Grid */
.ca-coverage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
@media (min-width: 1180px) {
    .ca-coverage-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.ca-coverage-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color-light, #e5e7eb);
    background: var(--bg-card, #fff);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ca-coverage-chip.present {
    background: #F0FDF4;
    border-color: #BBF7D0;
}
.ca-coverage-chip.missing {
    background: #FAFAFA;
    border-color: var(--border-color-light, #e5e7eb);
}
.ca-coverage-icon {
    display: inline-flex;
    flex-shrink: 0;
}
.ca-coverage-chip.present .ca-coverage-icon {
    color: #16a34a;
}
.ca-coverage-chip.missing .ca-coverage-icon {
    color: #9CA3AF;
}
.ca-coverage-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.ca-coverage-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ca-coverage-chip.missing .ca-coverage-name {
    color: var(--text-secondary, #6B7280);
    font-weight: 500;
}
.ca-coverage-meta {
    font-size: 0.68rem;
    color: var(--text-muted, #9CA3AF);
    margin-top: 2px;
    font-family: var(--font-mono, 'Geist Mono', monospace);
}
.ca-coverage-chip.present .ca-coverage-meta {
    color: #16a34a;
}

/* Header */
.ca-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color-light, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 16px;
}
.ca-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #418D62 0%, #2D6A47 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}
.ca-header-info {
    flex: 1;
    min-width: 0;
}
.ca-header-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 4px;
}
.ca-header-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ca-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}
.ca-header-badge.verified {
    background: #DCFCE7;
    color: #059669;
}
.ca-header-badge.unverified {
    background: #FEF3C7;
    color: #D97706;
}
.ca-header-composite {
    flex-shrink: 0;
    text-align: right;
    padding-left: 20px;
    border-left: 1px solid var(--border-color-light, #e5e7eb);
    min-width: 130px;
}
.ca-header-composite-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.ca-header-composite-score {
    font-family: var(--font-mono, 'Geist Mono', monospace);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ca-header-composite-suffix {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 3px;
}
.ca-header-composite-risk {
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 6px;
}

/* =====================================================================
 * Generic schema-signals layout (Extract tab for vocab-driven doc types)
 * Replaces the legacy "every field = giant centered metric card" layout
 * with a section header + clean key/value rows + paragraph blocks for
 * long-text fields + properly-styled tables for arrays.
 * ===================================================================== */
.schema-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 8px;
    padding: 0;
    border-bottom: none;
}
.schema-section-head:first-child { margin-top: 4px; }
.schema-section-head::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-color-light, #F5F5F4);
}
.schema-section-icon {
    display: none;
}
.schema-section-label {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-primary, #18181B);
    flex-shrink: 0;
}

.schema-block {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 10px;
}
.schema-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 16px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-color-light, #F5F5F4);
    font-size: 13px;
    line-height: 1.45;
}
.schema-row:last-child { border-bottom: none; }
.schema-row-label {
    color: var(--text-muted, #737373);
    font-weight: 400;
    font-size: 12px;
}
.schema-row-value {
    color: var(--text-primary, #18181B);
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: -0.005em;
    word-break: break-word;
}
.schema-row-value.status-good { color: #16a34a; }
.schema-row-value.status-warn { color: #d97706; }
.schema-row-value.status-bad  { color: #dc2626; }

.schema-longtext {
    background: var(--bg-secondary, #FAFAFA);
    border: 1px solid var(--border-color-light, #F5F5F4);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.schema-longtext-label {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    color: #A8A29E;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 6px;
}
.schema-longtext-body {
    font-size: 13px;
    line-height: 19px;
    color: #27272A;
    white-space: pre-wrap;
    text-align: left;
    font-weight: 400;
}
.schema-longtext-list {
    margin: 0;
    padding-left: 22px;
    color: var(--text-primary);
    font-size: 0.86rem;
    line-height: 1.55;
    font-weight: 400;
}
.schema-longtext-list li {
    padding: 4px 0;
    text-align: left;
}
.schema-longtext-list li + li {
    border-top: 1px dashed var(--border-color-light, #f3f4f6);
    margin-top: 4px;
    padding-top: 8px;
}

.schema-table-wrap {
    overflow-x: auto;
    margin-bottom: 10px;
    border: 1px solid var(--border-color-light, #F5F5F4);
    border-radius: 8px;
    background: #FFFFFF;
}
.schema-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: transparent;
}
.schema-table thead th {
    text-align: left;
    font-family: Geist, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted, #737373);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 8px 14px;
    background: var(--bg-secondary, #FAFAFA);
    border-bottom: 1px solid var(--border-color-light, #F5F5F4);
    white-space: nowrap;
}
.schema-table tbody td {
    padding: 9px 14px;
    border-bottom: none;
    color: var(--text-primary, #18181B);
    font-weight: 400;
    vertical-align: middle;
}
.schema-table tbody tr:nth-child(even) td { background: var(--bg-secondary, #FAFAFA); }
.schema-table .schema-table-src {
    text-align: center;
    width: 70px;
}

.schema-list {
    margin: 0 0 18px;
    padding-left: 22px;
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.5;
}
.schema-list li { padding: 2px 0; }

/* Credit-assessment verdict — same layout as .fraud-v2-verdict but with a
 * couple of small tweaks for the applicant-name stat and the trailing
 * identity-status badge row. */
.ca-verdict { margin-bottom: 16px; }
.ca-stat-name {
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.ca-verdict-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -4px;
}
.ca-verdict-identity-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, #5D5D63);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: "Geist Mono", ui-monospace, monospace;
}

/* Three-Pillar Cards */
.ca-pillar-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.ca-pillar-card {
    flex: 1 1 0;
    min-width: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color-light, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ca-pillar-card:hover {
    border-color: var(--border-color, #d4d4d8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.ca-pillar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ca-pillar-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ca-pillar-score-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 2px 0 4px;
}
.ca-pillar-score {
    font-family: var(--font-mono, 'Geist Mono', monospace);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ca-pillar-score-suffix {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted, #9CA3AF);
}
.ca-pillar-risk {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}
.ca-pillar-risk.low { background: #DCFCE7; color: #059669; }
.ca-pillar-risk.medium { background: #FEF3C7; color: #D97706; }
.ca-pillar-risk.high { background: #FEE2E2; color: #DC2626; }
.ca-pillar-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--bg-input, #f4f4f5);
    overflow: hidden;
}
.ca-pillar-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.ca-pillar-desc {
    font-size: 0.72rem;
    color: var(--text-muted, #9CA3AF);
    line-height: 1.4;
}
.ca-pillar-metrics {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color-light, #e5e7eb);
}
.ca-pillar-metric {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
}
.ca-pillar-metric-label {
    color: var(--text-muted, #9CA3AF);
}
.ca-pillar-metric-value {
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono, 'Geist Mono', monospace);
}

/* Recommendation Bar */
.ca-rec-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 12px;
}
.ca-rec-bar.approve {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
}
.ca-rec-bar.review {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
}
.ca-rec-bar.reject {
    background: #FEF2F2;
    border: 1px solid #FECACA;
}
.ca-rec-decision {
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ca-rec-bar.approve .ca-rec-decision { color: #059669; }
.ca-rec-bar.review .ca-rec-decision { color: #D97706; }
.ca-rec-bar.reject .ca-rec-decision { color: #DC2626; }
.ca-rec-summary {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-secondary, #374151);
    line-height: 1.4;
}
.ca-rec-composite {
    font-family: var(--font-mono, 'Geist Mono', monospace);
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Metric Rows */
.ca-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--border-color-light, #f3f4f6);
}
.ca-metric-row:last-child {
    border-bottom: none;
}
.ca-metric-label {
    color: var(--text-secondary, #6B7280);
}
.ca-metric-value {
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono, 'Geist Mono', monospace);
    font-size: 0.78rem;
}

/* Tables */
.ca-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.ca-table th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color-light, #e5e7eb);
}
.ca-table td {
    padding: 7px 8px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color-light, #f3f4f6);
}
.ca-table tr:last-child td {
    border-bottom: none;
}
.ca-table tr:nth-child(even) td {
    background: rgba(0,0,0,0.015);
}
.ca-table .mono {
    font-family: var(--font-mono, 'Geist Mono', monospace);
}
.ca-table .mismatch {
    color: #D97706;
    font-weight: 600;
}
.ca-table .match {
    color: #059669;
}

/* Progress Bars */
.ca-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color-light, #e5e7eb);
    overflow: hidden;
}
.ca-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Loan Officer Investigation Guide */
.ca-guide-container {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color-light, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 12px;
    overflow: hidden;
}
.ca-guide-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--border-color-light, #e5e7eb);
}
.ca-guide-title:hover {
    background: rgba(0,0,0,0.02);
}
.ca-guide-chevron {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.ca-guide-container.collapsed .ca-guide-chevron {
    transform: rotate(-90deg);
}
.ca-guide-container.collapsed .ca-guide-sections {
    display: none;
}
.ca-guide-sections {
    padding: 0;
}
.ca-guide-section {
    border-bottom: 1px solid var(--border-color-light, #f3f4f6);
}
.ca-guide-section:last-child {
    border-bottom: none;
}
.ca-guide-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}
.ca-guide-header:hover {
    background: rgba(0,0,0,0.02);
}
.ca-guide-section-chevron {
    font-size: 0.6rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.ca-guide-section.collapsed .ca-guide-section-chevron {
    transform: rotate(-90deg);
}
.ca-guide-section.collapsed .ca-guide-body {
    display: none;
}
.ca-guide-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ca-guide-badge.high { background: #FEE2E2; color: #DC2626; }
.ca-guide-badge.clarify { background: #FEF3C7; color: #D97706; }
.ca-guide-badge.confirm { background: #DBEAFE; color: #2563EB; }
.ca-guide-badge.investigate { background: #F3F4F6; color: #6B7280; }
.ca-guide-body {
    padding: 0 16px 10px;
}
.ca-guide-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.75rem;
    color: var(--text-secondary, #374151);
    line-height: 1.4;
}
.ca-guide-item input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--color-primary, #418D62);
}

/* Document Coverage */
.ca-doc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.78rem;
}
.ca-doc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ca-doc-dot.present { background: #10B981; }
.ca-doc-dot.missing { background: #D1D5DB; }

/* Dark mode */
[data-theme="dark"] .ca-card,
[data-theme="dark"] .ca-header,
[data-theme="dark"] .ca-pillar-card,
[data-theme="dark"] .ca-guide-container {
    background: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .ca-rec-bar.approve {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.2);
}
[data-theme="dark"] .ca-rec-bar.review {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.2);
}
[data-theme="dark"] .ca-rec-bar.reject {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.2);
}
[data-theme="dark"] .ca-pillar-risk.low { background: rgba(16,185,129,0.15); }
[data-theme="dark"] .ca-pillar-risk.medium { background: rgba(245,158,11,0.15); }
[data-theme="dark"] .ca-pillar-risk.high { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .ca-header-avatar { background: #1e3a5f; color: #60a5fa; }
[data-theme="dark"] .ca-header-badge.verified { background: rgba(16,185,129,0.15); }
[data-theme="dark"] .ca-header-badge.unverified { background: rgba(245,158,11,0.15); }
[data-theme="dark"] .ca-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .ca-guide-title:hover,
[data-theme="dark"] .ca-guide-header:hover { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .ca-doc-dot.missing { background: #4B5563; }
[data-theme="dark"] .ca-metric-row { border-bottom-color: var(--border-color); }
[data-theme="dark"] .ca-progress { background: var(--border-color); }

@media (max-width: 768px) {
    .ca-row { flex-direction: column; }
    .ca-pillar-row { flex-direction: column; }
    .ca-rec-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ================================================
   API + Batch — bone+stone Geist refresh (overrides
   the legacy var()-based rules above). Reuses the
   .quota-block hero pattern for the paywall states.
   ================================================ */

/* Paywall heros: layout match — full-width hero centered with the same
   max-width as #limit-banner. quota-block-* base styles already shipped. */
#api-keys-free-tier-gate.quota-block,
#batch-free-tier-gate.quota-block {
    max-width: 760px;
    margin: 0 auto 32px;
}

/* === API keys page === */
#api-keys-section .api-keys-page { gap: 16px; }

#api-keys-section .api-keys-container {
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

#api-keys-section .api-keys-empty {
    padding: 56px 24px;
    color: #737373;
    background: #FFFFFF;
}
#api-keys-section .api-keys-empty svg { color: #A3A3A3; opacity: 1; }
#api-keys-section .api-keys-empty p {
    font-size: 15px;
    font-weight: 600;
    color: #18181B;
    margin: 14px 0 4px;
}
#api-keys-section .api-keys-empty span {
    font-size: 13px;
    color: #737373;
}

#api-keys-section .api-keys-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
}
#api-keys-section .api-keys-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 500;
    color: #A3A3A3;
    background: transparent;
    border-bottom: 1px solid #F4F4F5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
#api-keys-section .api-keys-table td {
    padding: 14px 16px;
    font-size: 13.5px;
    color: #18181B;
    border-bottom: 1px solid #F4F4F5;
    background: transparent;
}
#api-keys-section .api-keys-table tr:last-child td { border-bottom: none; }
#api-keys-section .api-keys-table tr:hover td { background: #FAFAFA; }
#api-keys-section .api-key-name { font-weight: 500; }

#api-keys-section .api-key-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: #525252;
}
#api-keys-section .api-key-value .key-prefix {
    background: #FAFAFA;
    border: 1px solid #E7E5E4;
    border-radius: 6px;
    padding: 3px 8px;
    color: #525252;
}
#api-keys-section .api-key-copy-btn {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: #737373;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#api-keys-section .api-key-copy-btn:hover { background: #F5F5F4; color: #18181B; }

#api-keys-section .api-key-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 500;
}
#api-keys-section .api-key-status.active {
    background: #ECFDF5;
    color: #418D62;
}
#api-keys-section .api-key-status.inactive {
    background: #F5F5F4;
    color: #737373;
}
#api-keys-section .api-key-status::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    display: inline-block;
}

/* Hide the legacy .free-tier-message centered card — replaced by the
   quota-block hero above. */
#api-keys-section .free-tier-message,
#batch-testing-section .free-tier-message { display: none !important; }

/* === Batch page === */
#batch-testing-section .batch-testing-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#batch-testing-section .batch-dropzone {
    background: #FFFFFF;
    border: 1.5px dashed #D4D4D8;
    border-radius: 14px;
    padding: 56px 32px;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
#batch-testing-section .batch-dropzone:hover,
#batch-testing-section .batch-dropzone.drag-over {
    border-color: #418D62;
    background: #ECFDF5;
}
#batch-testing-section .batch-dropzone-icon { color: #737373; }
#batch-testing-section .batch-dropzone:hover .batch-dropzone-icon,
#batch-testing-section .batch-dropzone.drag-over .batch-dropzone-icon { color: #418D62; }
#batch-testing-section .batch-dropzone-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: #18181B;
    margin-top: 10px;
}
#batch-testing-section .batch-dropzone-formats {
    font-family: var(--font-body);
    font-size: 13px;
    color: #737373;
    margin-top: 6px;
}

[data-theme="dark"] #api-keys-section .api-keys-container,
[data-theme="dark"] #api-keys-section .api-keys-empty {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] #api-keys-section .api-keys-empty p { color: #E7E9EA; }
[data-theme="dark"] #api-keys-section .api-keys-table th,
[data-theme="dark"] #api-keys-section .api-keys-table td { border-bottom-color: #242B33; }
[data-theme="dark"] #api-keys-section .api-keys-table th { color: #6E7681; }
[data-theme="dark"] #api-keys-section .api-keys-table td { color: #E7E9EA; }
[data-theme="dark"] #api-keys-section .api-keys-table tr:hover td { background: #242B33; }
[data-theme="dark"] #api-keys-section .api-key-value { color: #A1A7AD; }
[data-theme="dark"] #api-keys-section .api-key-value .key-prefix {
    background: #242B33;
    border-color: #30363D;
    color: #C9CDD2;
}
[data-theme="dark"] #api-keys-section .api-key-copy-btn { color: #A1A7AD; }
[data-theme="dark"] #api-keys-section .api-key-copy-btn:hover { background: #242B33; color: #E7E9EA; }
[data-theme="dark"] #api-keys-section .api-key-status.inactive {
    background: rgba(255,255,255,0.05);
    color: #A1A7AD;
}

[data-theme="dark"] #batch-testing-section .batch-dropzone {
    background: #1A1F26;
    border-color: #30363D;
}
[data-theme="dark"] #batch-testing-section .batch-dropzone-text { color: #E7E9EA; }
[data-theme="dark"] #batch-testing-section .batch-dropzone-formats { color: #A1A7AD; }

/* ============================================
   Extract tab — Doc header
   Filename + doc-type subtitle on the left, green-dot status pill on
   the right. Sits above the metadata strip; mirrors the Paper master.
   ============================================ */
.extract-doc-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--border-color-light, #F5F5F4);
}
.extract-doc-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.extract-doc-header-eyebrow {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted, #737373);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 12px;
}
.extract-doc-header-title {
    font-family: Geist, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 26px;
    color: var(--text-primary, #18181B);
    /* Wrap long filenames inside the header instead of overflowing the
     * detail-panel width. `anywhere` breaks at any character, so UUID-style
     * names without hyphens still wrap cleanly. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.extract-doc-header-subtitle {
    font-size: 13px;
    color: var(--text-muted, #737373);
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.extract-doc-header-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: #2F6E4B;
    background: rgba(65, 141, 98, 0.10);
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}
.extract-doc-header-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-primary, #418D62);
}

/* Extracted data heading — thin rule + ghost JSON button */
.extracted-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 10px;
    border-bottom: 1px solid var(--text-primary, #18181B);
    margin-bottom: 16px;
}
.extracted-section-title {
    font-family: Geist, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 22px;
    color: var(--text-primary, #18181B);
    margin: 0;
}
.raw-json-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid var(--text-primary, #18181B);
    border-radius: 7px;
    background: #FFFFFF;
    font-family: Geist, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #18181B);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.raw-json-btn:hover {
    background: var(--text-primary, #18181B);
    color: #FFFFFF;
}
.raw-json-btn-glyph {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.raw-json-btn-arrow { flex-shrink: 0; }
[data-theme="dark"] .extract-doc-header {
    border-bottom-color: var(--border-color, #2a2a2a);
}
[data-theme="dark"] .extract-doc-header-title { color: var(--text-primary); }
[data-theme="dark"] .extract-doc-header-subtitle { color: var(--text-muted); }

/* ============================================
   Extract tab — Document metadata section
   Additive; reads result.document_metadata which the worker already
   populates. Sits between the doc header and the pill bar.
   ============================================ */
.doc-metadata-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 0 4px;
    margin-bottom: 0;
    border-bottom: none;
}
.doc-metadata-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.doc-metadata-title {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    color: #A8A29E;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 14px;
}
.doc-metadata-caption {
    font-size: 12px;
    color: #A8A29E;
}
.doc-metadata-grid {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--border-color-light, #F5F5F4);
}
.doc-metadata-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}
.doc-metadata-col + .doc-metadata-col {
    border-left: 1px solid var(--border-color-light, #F5F5F4);
    padding-left: 18px;
}
.doc-metadata-col:not(:last-child) {
    padding-right: 18px;
}
.doc-metadata-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color-light, #F5F5F4);
}
.doc-metadata-row:last-child {
    border-bottom: none;
}
.doc-metadata-label {
    flex: none;
    font-family: Geist, sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #A8A29E;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.doc-metadata-value {
    flex: none;
    min-width: 0;
    font-size: 13px;
    color: var(--text-primary, #18181B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-metadata-value.mono {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}
[data-theme="dark"] .doc-metadata-section {
    border-bottom-color: var(--border-color, #2a2a2a);
}
[data-theme="dark"] .doc-metadata-row {
    border-bottom-color: var(--border-color, #2a2a2a);
}
[data-theme="dark"] .doc-metadata-title { color: var(--text-primary); }
[data-theme="dark"] .doc-metadata-label { color: var(--text-muted); }
[data-theme="dark"] .doc-metadata-value { color: var(--text-primary); }

@media (max-width: 720px) {
    .doc-metadata-grid { flex-direction: column; gap: 0; }
}

/* Extract → Signals (bank docs) — redirect card pointing to Credit Assessment */
.extract-signals-redirect {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    border: 1px dashed var(--border-color, #E7E5E4);
    border-radius: 10px;
    background: var(--bg-secondary, #FAFAFA);
}
.extract-signals-redirect-title {
    font-family: Geist, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #18181B);
}
.extract-signals-redirect-body {
    font-size: 13px;
    color: var(--text-muted, #737373);
    line-height: 18px;
}
.extract-signals-redirect-btn {
    appearance: none;
    border: 1px solid var(--color-primary, #418D62);
    background: var(--color-primary, #418D62);
    color: #FFFFFF;
    font-family: Geist, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.extract-signals-redirect-btn:hover { opacity: 0.92; }
[data-theme="dark"] .extract-signals-redirect {
    border-color: var(--border-color, #2a2a2a);
    background: var(--bg-secondary, #1c1c1c);
}

/* ──────────────────────────────────────────────────────────────────────────
   Categorization — editorial dual-chart layout
   ────────────────────────────────────────────────────────────────────────── */
.cat-section { margin-bottom: 28px; }
.cat-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
}
.cat-section-titles { display: flex; flex-direction: column; gap: 4px; }
.cat-eyebrow {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #5D5D63);
}
.cat-section-title {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-primary, #18181B);
}
.cat-section-caption {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.cat-charts-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.cat-chart-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card, #FAFAF8);
    border: 1px solid var(--border-color, #E5E3DC);
    border-radius: 10px;
}
.cat-chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cat-chart-card-title {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-primary, #18181B);
}
.cat-chart-card-meta {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-weight: 400;
    font-size: 11px;
    line-height: 14px;
    color: var(--text-muted, #A8A6A0);
}
.cat-chart-canvas { max-height: 340px; }

.cat-breakdown-table-wrap {
    border: 1px solid var(--border-color, #E5E3DC);
    border-radius: 10px;
    overflow: hidden;
}
.cat-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card, #FAFAF8);
}
.cat-th {
    padding: 10px 16px;
    background: var(--bg-secondary, #F4F2EC);
    border-bottom: 1px solid var(--border-color, #E5E3DC);
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary, #5D5D63);
}
.cat-th-left { text-align: left; }
.cat-th-right { text-align: right; }
.cat-tr + .cat-tr .cat-td { border-top: 1px solid var(--border-color, #E5E3DC); }
.cat-td {
    padding: 10px 16px;
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-primary, #18181B);
}
.cat-td-left { text-align: left; }
.cat-td-num {
    text-align: right;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 12.5px;
}
.cat-td-debit { color: #B91C1C; }
.cat-td-credit { color: #15803D; }
.cat-td-net { font-weight: 600; }
.cat-td-net.is-pos { color: #15803D; }
.cat-td-net.is-neg { color: #B91C1C; }
.cat-td-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted, #A8A6A0);
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 12.5px;
}

@media (max-width: 880px) {
    .cat-charts-row { flex-direction: column; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Underwriting Recommendation — verdict hero + drivers + conditions
   ────────────────────────────────────────────────────────────────────────── */
.uw-rec-section { margin: 4px 0 24px; }
.uw-rec-eyebrow {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #5D5D63);
    padding-bottom: 10px;
}
.uw-rec-card {
    background: var(--bg-secondary, #F4F2EC);
    border: 1px solid var(--border-color, #E5E3DC);
    border-radius: 12px;
    overflow: hidden;
}
.uw-rec-collapsible[open] { background: var(--bg-secondary, #F4F2EC); }
.uw-rec-summary {
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 22px 26px;
    align-items: center;
    background: var(--bg-card, #FAFAF8);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s ease;
}
.uw-rec-summary::-webkit-details-marker { display: none; }
.uw-rec-summary::marker { display: none; content: ''; }
.uw-rec-summary:hover { background: #F4F2EC; }
.uw-rec-collapsible[open] .uw-rec-summary { border-bottom: 1px solid var(--border-color, #E5E3DC); }
.uw-rec-summary-main { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uw-rec-summary-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding-left: 18px;
    border-left: 1px solid var(--border-color, #E5E3DC);
}
.uw-rec-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #E5E3DC);
    background: var(--bg-card, #FAFAF8);
    color: var(--text-secondary, #5D5D63);
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.uw-rec-summary:hover .uw-rec-toggle {
    background: #FFFFFF;
    color: var(--text-primary, #18181B);
    border-color: #C2C0BA;
}
.uw-rec-toggle-chevron {
    transition: transform 0.18s ease;
    flex: 0 0 auto;
}
.uw-rec-collapsible[open] .uw-rec-toggle-chevron { transform: rotate(180deg); }
.uw-rec-toggle-label { display: inline; }
.uw-rec-toggle-open { display: none; }
.uw-rec-collapsible[open] .uw-rec-toggle-closed { display: none; }
.uw-rec-collapsible[open] .uw-rec-toggle-open { display: inline; }
.uw-rec-body { animation: uwRecOpen 0.18s ease-out; }
@keyframes uwRecOpen {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}
.uw-rec-verdict-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 22px 26px;
    align-items: center;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
    background: var(--bg-card, #FAFAF8);
}
.uw-rec-verdict-main { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uw-rec-verdict-row-top { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.uw-rec-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.02em;
}
.uw-rec-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}
.uw-rec-verdict-approve { background: #DCFCE7; color: #15803D; }
.uw-rec-verdict-approve_conditional { background: #DCFCE7; color: #15803D; }
.uw-rec-verdict-review { background: #FEF3C7; color: #B45309; }
.uw-rec-verdict-decline { background: #FEE2E2; color: #B91C1C; }
.uw-rec-verdict-sub {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.uw-rec-verdict-title {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.01em;
    color: var(--text-primary, #18181B);
}
.uw-rec-verdict-sub-line {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-secondary, #5D5D63);
}
.uw-rec-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding-left: 24px;
    border-left: 1px solid var(--border-color, #E5E3DC);
}
.uw-rec-score-label {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.uw-rec-score-value {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 600;
    font-size: 38px;
    line-height: 42px;
    letter-spacing: -0.02em;
    color: var(--text-primary, #18181B);
}
.uw-rec-score-suffix {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-weight: 400;
    font-size: 11px;
    line-height: 14px;
    color: var(--text-muted, #A8A6A0);
}
.uw-rec-drivers {
    display: flex;
    flex-direction: row;
    gap: 0;
}
.uw-rec-drivers-col {
    flex: 1;
    min-width: 0;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.uw-rec-drivers-col + .uw-rec-drivers-col { border-left: 1px solid var(--border-color, #E5E3DC); }
.uw-rec-drivers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}
.uw-rec-drivers-title {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-primary, #18181B);
}
.uw-rec-drivers-sum {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-weight: 400;
    font-size: 11px;
    line-height: 14px;
    color: var(--text-muted, #A8A6A0);
}
.uw-rec-drivers-sum.is-neg { color: var(--text-muted, #A8A6A0); }
.uw-rec-driver {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
}
.uw-rec-driver-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    margin-top: 7px;
    flex: 0 0 6px;
}
.uw-rec-driver-dot.is-pos { background: #15803D; }
.uw-rec-driver-dot.is-neg { background: #B45309; }
.uw-rec-driver-label {
    flex: 1;
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--text-primary, #18181B);
    min-width: 0;
}
.uw-rec-driver-weight {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: var(--text-secondary, #5D5D63);
    flex: 0 0 auto;
}
.uw-rec-conditions {
    padding: 18px 22px;
    border-top: 1px solid var(--border-color, #E5E3DC);
    background: var(--bg-card, #FAFAF8);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.uw-rec-conditions-title {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-primary, #18181B);
    padding-bottom: 4px;
}
.uw-rec-condition {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}
.uw-rec-condition-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #475569;
    margin-top: 7px;
    flex: 0 0 6px;
}
.uw-rec-condition-text {
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--text-primary, #18181B);
}

@media (max-width: 880px) {
    .uw-rec-verdict-row { flex-direction: column; align-items: flex-start; gap: 18px; }
    .uw-rec-summary { flex-direction: column; align-items: flex-start; gap: 14px; }
    .uw-rec-summary-right { padding-left: 0; border-left: 0; width: 100%; justify-content: space-between; }
    .uw-rec-score { padding-left: 0; border-left: 0; align-items: flex-start; flex-direction: row; gap: 12px; align-items: baseline; }
    .uw-rec-drivers { flex-direction: column; }
    .uw-rec-drivers-col + .uw-rec-drivers-col { border-left: 0; border-top: 1px solid var(--border-color, #E5E3DC); }
}

[data-theme="dark"] .uw-rec-card,
[data-theme="dark"] .uw-rec-verdict-row,
[data-theme="dark"] .uw-rec-conditions {
    background: var(--bg-card, #1c1c1c);
    border-color: var(--border-color, #2a2a2a);
}
[data-theme="dark"] .uw-rec-card { background: var(--bg-secondary, #161616); }

[data-theme="dark"] .cat-chart-card,
[data-theme="dark"] .cat-breakdown-table {
    background: var(--bg-card, #1c1c1c);
    border-color: var(--border-color, #2a2a2a);
}
[data-theme="dark"] .cat-th { background: var(--bg-secondary, #161616); }

/* ============================================================
 * v2 — Credit Assessment + Fraud Check (Paper redesign)
 * ============================================================ */

/* ---- CA step strip (reuses processing-timeline pills from extract page) ---- */
.ca-step-timeline {
    padding: 0 0 12px;
    /* Generous top margin so the pills breathe under the doc-header border line.
     * The previous 4px felt crammed against the divider. */
    margin: 24px 0 12px;
}
.ca-step-timeline .ca-step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ca-step-timeline .timeline-scroll {
    padding-bottom: 0;
    overflow: visible;
}
.ca-step-timeline .timeline-bar { margin-bottom: 0; }
.uw-step-eyebrow {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #A8A6A0);
    flex-shrink: 0;
}

/* ---- Cashflow strip ---- */
.uw-cashflow-strip {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 0 24px;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
    margin-bottom: 24px;
}
[data-theme="dark"] .uw-cashflow-strip { border-bottom-color: var(--border-color, #2a2a2a); }
.uw-cashflow-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.uw-cashflow-title {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-primary, #18181B);
}
.uw-cashflow-meta {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.uw-cashflow-row {
    display: flex;
    gap: 32px;
}
.uw-cashflow-cell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.uw-cashflow-label {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.uw-cashflow-value {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: var(--text-primary, #18181B);
}
.uw-cashflow-sub {
    font-size: 11.5px;
    line-height: 14px;
    color: var(--text-secondary, #5D5D63);
}
.uw-cashflow-sub.pos { color: #15803D; }
.uw-cashflow-sub.neg { color: #B91C1C; }
[data-theme="dark"] .uw-cashflow-sub.pos { color: #5ebd89; }
[data-theme="dark"] .uw-cashflow-sub.neg { color: #f87171; }

/* ---- Lending suitability strip ---- */
.uw-suitability { margin-bottom: 28px; }
.uw-suitability-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}
.uw-suitability-head-text { display: flex; flex-direction: column; gap: 4px; }
.uw-suitability-title {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-primary, #18181B);
}
.uw-suitability-meta {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.uw-suitability-strip {
    display: flex;
    border-top: 1px solid var(--border-color, #E5E3DC);
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}
[data-theme="dark"] .uw-suitability-strip {
    border-top-color: var(--border-color, #2a2a2a);
    border-bottom-color: var(--border-color, #2a2a2a);
}
.uw-suitability-cell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-right: 1px solid var(--border-color, #E5E3DC);
    min-width: 0;
}
.uw-suitability-cell:first-child { padding-left: 0; }
.uw-suitability-cell:last-child { padding-right: 0; border-right: 0; }
[data-theme="dark"] .uw-suitability-cell { border-right-color: var(--border-color, #2a2a2a); }
.uw-suitability-label {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.uw-suitability-value {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.01em;
    color: var(--text-primary, #18181B);
}
.uw-suitability-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    line-height: 14px;
    color: var(--text-secondary, #5D5D63);
}
.uw-suitability-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
    background: #475569;
}
.uw-suitability-dot.pos { background: #15803D; }
.uw-suitability-dot.warn { background: #B45309; }
.uw-suitability-dot.neg { background: #B91C1C; }
.uw-suitability-dot.neutral { background: #475569; }

/* ---- Footer note ---- */
.uw-footer-note {
    display: flex;
    gap: 10px;
    padding: 20px 0 8px;
    font-size: 12px;
    line-height: 18px;
    color: var(--text-secondary, #5D5D63);
}
.uw-footer-note-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--text-muted, #A8A6A0);
    margin-top: 6px;
    flex-shrink: 0;
}

/* ============================================================
 * Fraud Check v2 — Authenticity verdict
 * ============================================================ */
.fraud-v2 {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.fraud-v2-verdict {
    display: flex;
    gap: 48px;
    padding: 20px 0 24px;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
    margin-bottom: 24px;
}
[data-theme="dark"] .fraud-v2-verdict { border-bottom-color: var(--border-color, #2a2a2a); }
.fraud-v2-verdict-left {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fraud-v2-eyebrow {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #5D5D63);
}
.fraud-v2-score-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.fraud-v2-score {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 64px;
    letter-spacing: -0.03em;
    color: var(--text-primary, #18181B);
}
.fraud-v2-score-suffix {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 14px;
    line-height: 18px;
    color: var(--text-muted, #A8A6A0);
}
.fraud-v2-risk-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    width: fit-content;
}
.fraud-v2-risk-pill .fraud-v2-risk-dot {
    width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0;
}
.fraud-v2-risk-pill.low { background: #DCFCE7; color: #15803D; }
.fraud-v2-risk-pill.low .fraud-v2-risk-dot { background: #15803D; }
.fraud-v2-risk-pill.medium { background: #FEF3C7; color: #B45309; }
.fraud-v2-risk-pill.medium .fraud-v2-risk-dot { background: #B45309; }
.fraud-v2-risk-pill.high { background: #FEE2E2; color: #B91C1C; }
.fraud-v2-risk-pill.high .fraud-v2-risk-dot { background: #B91C1C; }
[data-theme="dark"] .fraud-v2-risk-pill.low { background: rgba(34,197,94,0.12); color: #5ebd89; }
[data-theme="dark"] .fraud-v2-risk-pill.low .fraud-v2-risk-dot { background: #5ebd89; }
[data-theme="dark"] .fraud-v2-risk-pill.medium { background: rgba(251,191,36,0.10); color: #fbbf24; }
[data-theme="dark"] .fraud-v2-risk-pill.medium .fraud-v2-risk-dot { background: #fbbf24; }
[data-theme="dark"] .fraud-v2-risk-pill.high { background: rgba(239,68,68,0.10); color: #f87171; }
[data-theme="dark"] .fraud-v2-risk-pill.high .fraud-v2-risk-dot { background: #f87171; }

.fraud-v2-verdict-right {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.fraud-v2-summary {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: var(--text-primary, #18181B);
}
.fraud-v2-stats {
    display: flex;
    gap: 32px;
}
.fraud-v2-stat { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; }
.fraud-v2-stat-label {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.fraud-v2-stat-value {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: var(--text-primary, #18181B);
}
.fraud-v2-stat-value.warn { color: #B45309; }
.fraud-v2-stat-value.fail { color: #B91C1C; }
[data-theme="dark"] .fraud-v2-stat-value.warn { color: #fbbf24; }
[data-theme="dark"] .fraud-v2-stat-value.fail { color: #f87171; }

.fraud-v2-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.fraud-v2-bar {
    display: flex;
    height: 6px;
    border-radius: 999px;
    background: var(--border-color, #E5E3DC);
    overflow: hidden;
}
.fraud-v2-bar-seg-high { flex: 50; background: #B91C1C; }
.fraud-v2-bar-seg-med  { flex: 30; background: #B45309; }
.fraud-v2-bar-seg-low  { flex: 20; background: #15803D; }
.fraud-v2-bar-ticks {
    position: relative;
    height: 14px;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-muted, #A8A6A0);
}
.fraud-v2-bar-tick { position: absolute; top: 0; }
.fraud-v2-bar-marker {
    position: absolute;
    top: -22px;
    transform: translateX(-50%);
    color: var(--text-primary, #18181B);
}

/* ---- Check sections ---- */
.fraud-v2-section { margin-bottom: 4px; padding-top: 0; }
.fraud-v2-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.fraud-v2-section-title {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-primary, #18181B);
}
.fraud-v2-section-meta {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.fraud-v2-checks {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
    margin-bottom: 24px;
}
[data-theme="dark"] .fraud-v2-checks { border-bottom-color: var(--border-color, #2a2a2a); }
.fraud-v2-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}
.fraud-v2-check:last-child { border-bottom: 0; }
[data-theme="dark"] .fraud-v2-check { border-bottom-color: var(--border-color, #2a2a2a); }
.fraud-v2-check-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    margin-top: 7px;
    flex-shrink: 0;
    background: #15803D;
}
.fraud-v2-check-dot.warn { background: #B45309; }
.fraud-v2-check-dot.fail { background: #B91C1C; }
.fraud-v2-check-body { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fraud-v2-check-label {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: var(--text-primary, #18181B);
}
.fraud-v2-check-detail {
    font-size: 12.5px;
    line-height: 17px;
    color: var(--text-secondary, #5D5D63);
}
.fraud-v2-check-detail.warn { color: #B45309; }
[data-theme="dark"] .fraud-v2-check-detail.warn { color: #fbbf24; }
.fraud-v2-check-status {
    flex-shrink: 0;
    font-size: 12.5px;
    line-height: 16px;
    color: #15803D;
    font-weight: 500;
}
.fraud-v2-check-status.warn { color: #B45309; }
.fraud-v2-check-status.fail { color: #B91C1C; }
[data-theme="dark"] .fraud-v2-check-status { color: #5ebd89; }
[data-theme="dark"] .fraud-v2-check-status.warn { color: #fbbf24; }
[data-theme="dark"] .fraud-v2-check-status.fail { color: #f87171; }

/* ---- Collapsible footer rows ---- */
.fraud-v2-collapsibles {
    border-top: 1px solid var(--border-color, #E5E3DC);
    margin-top: 8px;
}
[data-theme="dark"] .fraud-v2-collapsibles { border-top-color: var(--border-color, #2a2a2a); }
.fraud-v2-collapsible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
    cursor: pointer;
}
.fraud-v2-collapsible:last-child { border-bottom: 0; }
[data-theme="dark"] .fraud-v2-collapsible { border-bottom-color: var(--border-color, #2a2a2a); }
.fraud-v2-collapsible-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fraud-v2-collapsible-chev {
    flex-shrink: 0;
    transition: transform .15s ease;
    color: var(--text-muted, #A8A6A0);
}
.fraud-v2-collapsible[open] .fraud-v2-collapsible-chev { transform: rotate(90deg); }
.fraud-v2-collapsible-label {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 18px;
    color: var(--text-primary, #18181B);
}
.fraud-v2-collapsible-meta {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}

/* ============================================================
 * Credit Assessment · Signal Extraction v2 — cards grid + lens toggle
 * ============================================================ */
.ce-signals-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.ce-signals-v2-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
}
.ce-signals-v2-head-text { display: flex; flex-direction: column; gap: 4px; }
.ce-signals-v2-title {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-primary, #18181B);
}
.ce-signals-v2-lens {
    display: inline-flex;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E5E3DC);
    border-radius: 8px;
    padding: 2px;
}
[data-theme="dark"] .ce-signals-v2-lens {
    background: var(--bg-card, #1c1c1c);
    border-color: var(--border-color, #2a2a2a);
}
.ce-signals-v2-lens-btn {
    padding: 6px 12px;
    border-radius: 6px;
    background: transparent;
    border: 0;
    color: var(--text-secondary, #5D5D63);
    font-size: 12px;
    line-height: 16px;
    cursor: pointer;
    font-family: inherit;
}
.ce-signals-v2-lens-btn.active {
    background: var(--text-primary, #18181B);
    color: var(--bg-primary, #FAFAF8);
}
[data-theme="dark"] .ce-signals-v2-lens-btn.active {
    background: #FAFAF8;
    color: #18181B;
}

.ce-signals-v2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border-color, #E5E3DC);
    border-left: 1px solid var(--border-color, #E5E3DC);
}
[data-theme="dark"] .ce-signals-v2-grid {
    border-top-color: var(--border-color, #2a2a2a);
    border-left-color: var(--border-color, #2a2a2a);
}
.ce-signals-v2-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-right: 1px solid var(--border-color, #E5E3DC);
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}
[data-theme="dark"] .ce-signals-v2-card {
    border-right-color: var(--border-color, #2a2a2a);
    border-bottom-color: var(--border-color, #2a2a2a);
}
.ce-signals-v2-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ce-signals-v2-card-label {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.ce-signals-v2-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    background: #DCFCE7;
    color: #15803D;
}
.ce-signals-v2-card-badge .ce-signals-v2-card-badge-dot {
    width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}
.ce-signals-v2-card-badge.warn { background: #FEF3C7; color: #B45309; }
.ce-signals-v2-card-badge.neutral { background: var(--bg-secondary, #F4F2EC); color: var(--text-secondary, #5D5D63); }
.ce-signals-v2-card-badge.danger { background: #FEE2E2; color: #B91C1C; }
[data-theme="dark"] .ce-signals-v2-card-badge { background: rgba(34,197,94,0.12); color: #5ebd89; }
[data-theme="dark"] .ce-signals-v2-card-badge.warn { background: rgba(251,191,36,0.10); color: #fbbf24; }
[data-theme="dark"] .ce-signals-v2-card-badge.neutral { background: var(--bg-secondary, #161616); color: var(--text-secondary, #c0bfb9); }
[data-theme="dark"] .ce-signals-v2-card-badge.danger { background: rgba(239,68,68,0.10); color: #f87171; }
.ce-signals-v2-card-value {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.01em;
    color: var(--text-primary, #18181B);
}
.ce-signals-v2-card-caption {
    font-size: 12.5px;
    line-height: 18px;
    color: var(--text-secondary, #5D5D63);
}

@media (max-width: 760px) {
    .uw-cashflow-row { flex-wrap: wrap; gap: 20px; }
    .uw-cashflow-cell { flex-basis: 45%; }
    .uw-suitability-strip { flex-wrap: wrap; }
    .uw-suitability-cell { flex-basis: 50%; border-bottom: 1px solid var(--border-color, #E5E3DC); }
    .uw-suitability-cell:first-child { padding-left: 20px; }
    .uw-suitability-cell:last-child { padding-right: 20px; }
    .fraud-v2-verdict { flex-direction: column; gap: 24px; }
    .fraud-v2-verdict-left { flex-basis: auto; }
    .ce-signals-v2-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Fraud Check v3 — editorial rows with rich findings grids
 * ============================================================ */
.fraud-v3-section {
    border-top: 1px solid var(--border-color, #E5E3DC);
    margin-top: 8px;
}
.fraud-v3-section:first-of-type { border-top: 0; margin-top: 0; }
[data-theme="dark"] .fraud-v3-section { border-top-color: var(--border-color, #2a2a2a); }
.fraud-v3-section[open] .fraud-v3-section-chev { transform: rotate(90deg); }

.fraud-v3-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 24px 0 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.fraud-v3-section-head::-webkit-details-marker { display: none; }
.fraud-v3-section-head::marker { display: none; content: ''; }
.fraud-v3-section-head:hover .fraud-v3-section-title { color: var(--text-primary, #18181B); }
.fraud-v3-section-head-text { display: flex; flex-direction: column; gap: 4px; }
.fraud-v3-section-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.fraud-v3-section-chev {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform .15s ease;
    color: var(--text-muted, #A8A6A0);
}
.fraud-v3-section-body { padding-bottom: 8px; }

.fraud-v3-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: "Geist", system-ui, sans-serif;
    font-size: 11.5px;
    line-height: 14px;
    font-weight: 600;
    margin-left: 10px;
    flex-shrink: 0;
}
.fraud-v3-section-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.fraud-v3-section-pill.warn { background: #FEF3C7; color: #B45309; }
.fraud-v3-section-pill.fail { background: #FEE2E2; color: #B91C1C; }
[data-theme="dark"] .fraud-v3-section-pill.warn { background: rgba(251,191,36,0.10); color: #fbbf24; }
[data-theme="dark"] .fraud-v3-section-pill.fail { background: rgba(239,68,68,0.10); color: #f87171; }

/* Fraud-check pill strip — sits inside .processing-timeline so it inherits
   the Extract / Analysis pill look. Trailing meta ("· 1 warning") is muted
   so the section label stays the dominant element. */
.fraud-v3-pill-strip {
    margin: 8px 0 16px;
}
.fraud-v3-pill-strip .fraud-pill-meta {
    color: var(--text-muted, #6B7280);
    font-weight: 400;
    margin-left: 2px;
}
[data-theme="dark"] .fraud-v3-pill-strip .fraud-pill-meta {
    color: var(--text-muted, #888);
}
.fraud-v3-pill-strip .timeline-step.selected .fraud-pill-meta {
    color: inherit;
    opacity: 0.7;
}
.fraud-step-panel {
    margin-bottom: 8px;
}

.fraud-v3-section-head-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.fraud-v3-section-eyebrow {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    line-height: 14px;
    color: var(--text-secondary, #5D5D63);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fraud-v3-section-title {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-primary, #18181B);
}
.fraud-v3-section-meta {
    font-size: 12.5px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}

.fraud-v3-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color, #E5E3DC);
}
[data-theme="dark"] .fraud-v3-rows { border-top-color: var(--border-color, #2a2a2a); }

.fraud-v3-row {
    display: flex;
    flex-direction: column;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}
.fraud-v3-row:last-child { border-bottom: 0; }
[data-theme="dark"] .fraud-v3-row { border-bottom-color: var(--border-color, #2a2a2a); }
.fraud-v3-row.is-warn {
    padding-left: 14px;
    padding-right: 14px;
    background: #FBF7EE;
}
.fraud-v3-row.is-fail {
    padding-left: 14px;
    padding-right: 14px;
    background: #FCEFEF;
}
[data-theme="dark"] .fraud-v3-row.is-warn { background: rgba(180,83,9,0.08); }
[data-theme="dark"] .fraud-v3-row.is-fail { background: rgba(185,28,28,0.08); }

.fraud-v3-row-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.fraud-v3-row-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    margin-top: 7px;
    flex-shrink: 0;
    background: #15803D;
}
.fraud-v3-row-dot.warn { background: #B45309; }
.fraud-v3-row-dot.fail { background: #B91C1C; }
.fraud-v3-row-body { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fraud-v3-row-label {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: var(--text-primary, #18181B);
}
.fraud-v3-row-summary {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-secondary, #5D5D63);
}
.fraud-v3-row-status {
    flex-shrink: 0;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #15803D;
}
.fraud-v3-row-status.warn { color: #B45309; }
.fraud-v3-row-status.fail { color: #B91C1C; }
[data-theme="dark"] .fraud-v3-row-status { color: #5ebd89; }
[data-theme="dark"] .fraud-v3-row-status.warn { color: #fbbf24; }
[data-theme="dark"] .fraud-v3-row-status.fail { color: #f87171; }

.fraud-v3-findings {
    display: flex;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-left: 21px;
    column-gap: 48px;
    row-gap: 10px;
}
.fraud-v3-row.is-warn .fraud-v3-findings,
.fraud-v3-row.is-fail .fraud-v3-findings { padding-left: 21px; }
.fraud-v3-finding {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
}
.fraud-v3-finding-label {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 13px;
    color: var(--text-muted, #A8A6A0);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fraud-v3-finding-value {
    font-size: 13px;
    line-height: 16px;
    color: var(--text-primary, #18181B);
}
.fraud-v3-finding-value.muted { color: var(--text-muted, #A8A6A0); }
.fraud-v3-finding-value.warn { color: #B45309; }
.fraud-v3-finding-value.fail { color: #B91C1C; }
.fraud-v3-finding-value.mono {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 12px;
}
[data-theme="dark"] .fraud-v3-finding-value.warn { color: #fbbf24; }
[data-theme="dark"] .fraud-v3-finding-value.fail { color: #f87171; }

.fraud-v3-related {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 0 21px;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #F4E2BD;
    border-radius: 6px;
}
[data-theme="dark"] .fraud-v3-related {
    background: var(--bg-card, #1a1f26);
    border-color: rgba(180,83,9,0.35);
}
.fraud-v3-related.is-fail { border-color: #F5C7C7; }
[data-theme="dark"] .fraud-v3-related.is-fail { border-color: rgba(185,28,28,0.35); }
.fraud-v3-related-eyebrow {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 13px;
    color: var(--text-secondary, #5D5D63);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fraud-v3-related-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.fraud-v3-related-sev {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 14px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    padding-top: 1px;
    color: #15803D;
    width: 36px;
}
.fraud-v3-related-sev.med { color: #B45309; }
.fraud-v3-related-sev.high { color: #B91C1C; }
.fraud-v3-related-text {
    flex: 1;
    font-size: 12.5px;
    line-height: 17px;
    color: var(--text-primary, #18181B);
}

/* Additional signals (catch-all rows) */
.fraud-v3-add-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}
.fraud-v3-add-row:last-child { border-bottom: 0; }
[data-theme="dark"] .fraud-v3-add-row { border-bottom-color: var(--border-color, #2a2a2a); }
.fraud-v3-add-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-top: 1px;
}
.fraud-v3-add-sev {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 42px;
    color: #15803D;
}
.fraud-v3-add-sev.med { color: #B45309; }
.fraud-v3-add-sev.high { color: #B91C1C; }
.fraud-v3-add-body { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fraud-v3-add-reason {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-primary, #18181B);
}
.fraud-v3-add-id {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-muted, #A8A6A0);
}
.fraud-v3-add-tag {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.06em;
    color: var(--text-muted, #A8A6A0);
    flex-shrink: 0;
}

/* Score breakdown by category */
.fraud-v3-breakdown {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color, #E5E3DC);
}
[data-theme="dark"] .fraud-v3-breakdown { border-top-color: var(--border-color, #2a2a2a); }
.fraud-v3-breakdown-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}
.fraud-v3-breakdown-row:last-child { border-bottom: 0; }
[data-theme="dark"] .fraud-v3-breakdown-row { border-bottom-color: var(--border-color, #2a2a2a); }
.fraud-v3-breakdown-label {
    flex: 0 0 180px;
    font-size: 13.5px;
    line-height: 18px;
    color: var(--text-primary, #18181B);
}
.fraud-v3-breakdown-bar-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.fraud-v3-breakdown-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-secondary, #F4F2EC);
    border-radius: 999px;
    overflow: hidden;
}
[data-theme="dark"] .fraud-v3-breakdown-bar { background: var(--bg-secondary, #1c1c1c); }
.fraud-v3-breakdown-bar-fill {
    height: 100%;
    background: #15803D;
    transition: width .2s ease;
}
.fraud-v3-breakdown-bar-fill.warn { background: #B45309; }
.fraud-v3-breakdown-bar-fill.fail { background: #B91C1C; }
.fraud-v3-breakdown-score {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 16px;
    color: var(--text-primary, #18181B);
    width: 76px;
    text-align: right;
    white-space: nowrap;
}
.fraud-v3-breakdown-weight {
    flex: 0 0 80px;
    text-align: right;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}

.fraud-v3-subsection {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fraud-v3-subsection-eyebrow {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    line-height: 14px;
    color: var(--text-secondary, #5D5D63);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fraud-v3-subsection-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fraud-v3-subsection-explainer {
    font-size: 12.5px;
    line-height: 18px;
    color: var(--text-secondary, #5D5D63);
    max-width: 760px;
}
.fraud-v3-subsection-explainer strong {
    color: var(--text-primary, #18181B);
    font-weight: 600;
}

/* Circular transfer card with directional flow */
.fraud-v3-circular {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 14px;
    background: #FCEFEF;
    border: 1px solid #F5C7C7;
    border-radius: 8px;
}
[data-theme="dark"] .fraud-v3-circular {
    background: rgba(185,28,28,0.08);
    border-color: rgba(185,28,28,0.30);
}
.fraud-v3-circular-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.fraud-v3-circular-id {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fraud-v3-circular-id-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #B91C1C;
    flex-shrink: 0;
}
.fraud-v3-circular-id-text {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: var(--text-primary, #18181B);
}
.fraud-v3-circular-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #FEE2E2;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 14px;
    font-weight: 600;
    color: #B91C1C;
    flex-shrink: 0;
}
[data-theme="dark"] .fraud-v3-circular-badge { background: rgba(239,68,68,0.12); color: #f87171; }
.fraud-v3-circular-badge-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.fraud-v3-flow-strip {
    display: flex;
    align-items: stretch;
    border: 1px solid #F5C7C7;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-card, #FFFFFF);
}
[data-theme="dark"] .fraud-v3-flow-strip {
    background: var(--bg-card, #1a1f26);
    border-color: rgba(185,28,28,0.30);
}
.fraud-v3-flow-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-right: 1px solid #F5C7C7;
    min-width: 0;
}
.fraud-v3-flow-cell:last-child { border-right: 0; }
[data-theme="dark"] .fraud-v3-flow-cell { border-right-color: rgba(185,28,28,0.30); }
.fraud-v3-flow-cell-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 13px;
    color: var(--text-muted, #A8A6A0);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fraud-v3-flow-cell-label.out { color: #B91C1C; }
.fraud-v3-flow-cell-label.in { color: #15803D; }
[data-theme="dark"] .fraud-v3-flow-cell-label.out { color: #f87171; }
[data-theme="dark"] .fraud-v3-flow-cell-label.in { color: #5ebd89; }
.fraud-v3-flow-cell-value {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary, #18181B);
}
.fraud-v3-flow-cell-value.warn { color: #B45309; }
.fraud-v3-flow-cell-value.fail { color: #B91C1C; }
[data-theme="dark"] .fraud-v3-flow-cell-value.warn { color: #fbbf24; }
[data-theme="dark"] .fraud-v3-flow-cell-value.fail { color: #f87171; }

@media (max-width: 760px) {
    .fraud-v3-flow-strip { flex-wrap: wrap; }
    .fraud-v3-flow-cell { flex-basis: 50%; }
    .fraud-v3-flow-cell:nth-child(2n) { border-right: 0; }
    .fraud-v3-flow-cell:nth-child(-n+2) { border-bottom: 1px solid #F5C7C7; }
}

/* Frequent description card (warn-tinted, same flow language as circular) */
.fraud-v3-pattern-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 14px;
    background: #FBF7EE;
    border: 1px solid #F4E2BD;
    border-radius: 8px;
}
[data-theme="dark"] .fraud-v3-pattern-card {
    background: rgba(180,83,9,0.08);
    border-color: rgba(180,83,9,0.30);
}
.fraud-v3-pattern-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.fraud-v3-pattern-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.fraud-v3-pattern-label {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    color: var(--text-primary, #18181B);
    word-break: break-word;
}
.fraud-v3-pattern-sublabel {
    font-size: 12.5px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.fraud-v3-pattern-count {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #FEF3C7;
    border-radius: 999px;
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    color: #B45309;
    flex-shrink: 0;
}
[data-theme="dark"] .fraud-v3-pattern-count { background: rgba(251,191,36,0.12); color: #fbbf24; }

/* Warn-tinted flow strip overrides (uses same .fraud-v3-flow-cell internals) */
.fraud-v3-flow-strip.warn {
    border-color: #F4E2BD;
}
.fraud-v3-flow-strip.warn .fraud-v3-flow-cell {
    border-right-color: #F4E2BD;
}
[data-theme="dark"] .fraud-v3-flow-strip.warn {
    border-color: rgba(180,83,9,0.30);
}
[data-theme="dark"] .fraud-v3-flow-strip.warn .fraud-v3-flow-cell {
    border-right-color: rgba(180,83,9,0.30);
}
@media (max-width: 760px) {
    .fraud-v3-flow-strip.warn .fraud-v3-flow-cell:nth-child(-n+2) { border-bottom: 1px solid #F4E2BD; }
}

/* Outlier row — bank-statement style */
.fraud-v3-outlier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 16px;
    background: #FBF7EE;
    border: 1px solid #F4E2BD;
    border-radius: 8px;
}
[data-theme="dark"] .fraud-v3-outlier {
    background: rgba(180,83,9,0.08);
    border-color: rgba(180,83,9,0.30);
}
.fraud-v3-outlier-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.fraud-v3-outlier-headline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fraud-v3-outlier-date {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 12px;
    line-height: 14px;
    color: var(--text-secondary, #5D5D63);
    flex-shrink: 0;
}
.fraud-v3-outlier-desc {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    color: var(--text-primary, #18181B);
    word-break: break-word;
}
.fraud-v3-outlier-meta {
    font-size: 12.5px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.fraud-v3-outlier-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.fraud-v3-outlier-amount {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary, #18181B);
}
.fraud-v3-outlier-amount.credit { color: #15803D; }
.fraud-v3-outlier-amount.debit { color: #B91C1C; }
[data-theme="dark"] .fraud-v3-outlier-amount.credit { color: #5ebd89; }
[data-theme="dark"] .fraud-v3-outlier-amount.debit { color: #f87171; }
.fraud-v3-outlier-mult {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #FEF3C7;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 14px;
    font-weight: 600;
    color: #B45309;
}
[data-theme="dark"] .fraud-v3-outlier-mult { background: rgba(251,191,36,0.12); color: #fbbf24; }
@media (max-width: 760px) {
    .fraud-v3-outlier { flex-direction: column; align-items: stretch; gap: 14px; }
    .fraud-v3-outlier-right { align-items: flex-start; }
}

.fraud-v3-footer {
    display: flex;
    gap: 10px;
    padding-top: 24px;
}
.fraud-v3-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--text-muted, #A8A6A0);
    margin-top: 7px;
    flex-shrink: 0;
}
.fraud-v3-footer-text {
    flex: 1;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--text-secondary, #5D5D63);
}

@media (max-width: 760px) {
    .fraud-v3-row.is-warn,
    .fraud-v3-row.is-fail { padding-left: 12px; padding-right: 12px; }
    .fraud-v3-finding { flex-basis: 45%; min-width: 0; }
    .fraud-v3-breakdown-label { flex-basis: 130px; }
    .fraud-v3-breakdown-weight { flex-basis: 60px; }
}

/* ============================================================
 * Signal Extraction v3 — editorial chart card, lens toggle,
 * number-only signal cards, raw-metric vertical-divider strips
 * ============================================================ */
.sig-v3-block {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 0 28px;
    border-top: 1px solid var(--border-color, #E5E3DC);
    font-family: "Geist", system-ui, sans-serif;
}
[data-theme="dark"] .sig-v3-block { border-top-color: var(--border-color, #2a2a2a); }
.sig-v3-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}
.sig-v3-head-text { display: flex; flex-direction: column; gap: 4px; }
.sig-v3-eyebrow {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    line-height: 14px;
    color: var(--text-secondary, #5D5D63);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sig-v3-title {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-primary, #18181B);
}
.sig-v3-subtitle {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-secondary, #5D5D63);
}
.sig-v3-meta {
    font-size: 12.5px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}

/* Balance summary strip under the chart */
.sig-v3-summary-strip {
    display: flex;
    border-top: 1px solid var(--border-color, #E5E3DC);
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}
[data-theme="dark"] .sig-v3-summary-strip {
    border-top-color: var(--border-color, #2a2a2a);
    border-bottom-color: var(--border-color, #2a2a2a);
}
.sig-v3-summary-cell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 20px;
    border-right: 1px solid var(--border-color, #E5E3DC);
    min-width: 0;
}
.sig-v3-summary-cell:first-child { padding-left: 0; }
.sig-v3-summary-cell:last-child { padding-right: 0; border-right: 0; }
[data-theme="dark"] .sig-v3-summary-cell { border-right-color: var(--border-color, #2a2a2a); }
.sig-v3-summary-label {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 13px;
    color: var(--text-muted, #A8A6A0);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sig-v3-summary-value {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary, #18181B);
}

/* Lens toggle + ? tooltip */
.sig-v3-lens-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.sig-v3-lens-help {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.sig-v3-lens-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #E5E3DC);
    background: var(--bg-card, #FFFFFF);
    color: var(--text-secondary, #5D5D63);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: help;
    padding: 0;
    line-height: 1;
}
[data-theme="dark"] .sig-v3-lens-help-btn {
    background: var(--bg-card, #1c1c1c);
    border-color: var(--border-color, #2a2a2a);
}
.sig-v3-lens-help-card {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    padding: 14px 16px;
    background: #18181B;
    color: #E5E3DC;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(24,24,27,0.18);
    font-size: 12.5px;
    line-height: 18px;
    z-index: 10;
    display: none;
}
.sig-v3-lens-help:hover .sig-v3-lens-help-card,
.sig-v3-lens-help-btn:focus + .sig-v3-lens-help-card { display: block; }
.sig-v3-lens-help-eyebrow {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 13px;
    color: #A8A6A0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.sig-v3-lens-help-section { margin-bottom: 10px; }
.sig-v3-lens-help-section:last-child { margin-bottom: 0; }
.sig-v3-lens-help-name { font-weight: 600; color: #FAFAF8; margin-bottom: 2px; }
.sig-v3-lens-help-desc { color: #A8A6A0; }
.sig-v3-lens-help-footnote {
    font-size: 11.5px;
    color: #A8A6A0;
    border-top: 1px solid #3F3F46;
    padding-top: 8px;
    margin-top: 2px;
}
.sig-v3-lens-help-reason { color: #FAFAF8; font-style: italic; }

.sig-v3-lens-toggle {
    display: inline-flex;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E5E3DC);
    border-radius: 8px;
    padding: 2px;
}
[data-theme="dark"] .sig-v3-lens-toggle {
    background: var(--bg-card, #1c1c1c);
    border-color: var(--border-color, #2a2a2a);
}
.sig-v3-lens-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 6px;
    background: transparent;
    border: 0;
    color: var(--text-secondary, #5D5D63);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 16px;
    cursor: pointer;
}
.sig-v3-lens-btn.active {
    background: var(--text-primary, #18181B);
    color: var(--bg-primary, #FAFAF8);
    font-weight: 500;
}
[data-theme="dark"] .sig-v3-lens-btn.active {
    background: #FAFAF8;
    color: #18181B;
}

/* Signal cards grid (3 columns) — number + colored dot only */
.sig-v3-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border-color, #E5E3DC);
    border-left: 1px solid var(--border-color, #E5E3DC);
}
[data-theme="dark"] .sig-v3-cards-grid {
    border-top-color: var(--border-color, #2a2a2a);
    border-left-color: var(--border-color, #2a2a2a);
}
.sig-v3-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border-right: 1px solid var(--border-color, #E5E3DC);
    border-bottom: 1px solid var(--border-color, #E5E3DC);
    min-width: 0;
}
[data-theme="dark"] .sig-v3-card {
    border-right-color: var(--border-color, #2a2a2a);
    border-bottom-color: var(--border-color, #2a2a2a);
}
.sig-v3-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sig-v3-card-label {
    font-size: 12.5px;
    line-height: 16px;
    color: var(--text-secondary, #5D5D63);
}
.sig-v3-card-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
    background: #475569;
}
.sig-v3-card-dot.good { background: #15803D; }
.sig-v3-card-dot.neutral { background: #B45309; }
.sig-v3-card-dot.warning { background: #B91C1C; }
[data-theme="dark"] .sig-v3-card-dot.good { background: #5ebd89; }
[data-theme="dark"] .sig-v3-card-dot.neutral { background: #fbbf24; }
[data-theme="dark"] .sig-v3-card-dot.warning { background: #f87171; }
.sig-v3-card-value {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary, #18181B);
}
.sig-v3-card-caption {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-muted, #A8A6A0);
}

/* Raw metrics — 8 groups */
.sig-v3-raw-section {
    display: flex;
    flex-direction: column;
    padding: 32px 0 0;
}
.sig-v3-raw-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid var(--border-color, #E5E3DC);
}
[data-theme="dark"] .sig-v3-raw-group { border-top-color: var(--border-color, #2a2a2a); }
.sig-v3-raw-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}
[data-theme="dark"] .sig-v3-raw-group-head { border-bottom-color: var(--border-color, #2a2a2a); }
.sig-v3-raw-group-title {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: var(--text-primary, #18181B);
}
.sig-v3-raw-group-count {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    line-height: 14px;
    color: var(--text-muted, #A8A6A0);
}
.sig-v3-raw-row { display: flex; }
.sig-v3-raw-cell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 24px;
    border-right: 1px solid var(--border-color, #E5E3DC);
    min-width: 0;
}
.sig-v3-raw-cell:first-child { padding-left: 0; }
.sig-v3-raw-cell:last-child { padding-right: 0; border-right: 0; }
[data-theme="dark"] .sig-v3-raw-cell { border-right-color: var(--border-color, #2a2a2a); }
.sig-v3-raw-label {
    font-size: 12px;
    line-height: 15px;
    color: var(--text-secondary, #5D5D63);
}
.sig-v3-raw-value {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: var(--text-primary, #18181B);
}
.sig-v3-raw-value.pos { color: #15803D; }
.sig-v3-raw-value.neg { color: #B91C1C; }
[data-theme="dark"] .sig-v3-raw-value.pos { color: #5ebd89; }
[data-theme="dark"] .sig-v3-raw-value.neg { color: #f87171; }

.sig-v3-footer {
    display: flex;
    gap: 10px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color, #E5E3DC);
    margin-top: 8px;
}
[data-theme="dark"] .sig-v3-footer { border-top-color: var(--border-color, #2a2a2a); }
.sig-v3-footer-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--text-muted, #A8A6A0);
    margin-top: 7px; flex-shrink: 0;
}
.sig-v3-footer-text {
    flex: 1;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--text-secondary, #5D5D63);
}

@media (max-width: 760px) {
    .sig-v3-summary-strip { flex-wrap: wrap; }
    .sig-v3-summary-cell { flex-basis: 50%; }
    .sig-v3-cards-grid { grid-template-columns: 1fr; }
    .sig-v3-raw-row { flex-wrap: wrap; }
    .sig-v3-raw-cell { flex-basis: 50%; }
}


/* =====================================================================
 * Raw JSON modal — animated reveal from the View raw JSON button
 * Overlay fades + backdrop-blurs in. Modal scales out of the button's
 * click origin with a snappy spring. JSON lines cascade in with a
 * tight stagger so the content feels alive rather than dumped.
 * ===================================================================== */
.raw-json-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 16, 17, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transition: background 280ms ease, backdrop-filter 280ms ease, opacity 200ms ease;
}
.raw-json-overlay.open {
    background: rgba(15, 16, 17, 0.46);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 1;
    pointer-events: auto;
}

.raw-json-modal {
    position: relative;
    width: min(880px, 92vw);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 24px 60px -12px rgba(15,16,17,0.30),
        0 2px 6px rgba(15,16,17,0.06);
    transform-origin: var(--rj-origin-x, 50%) var(--rj-origin-y, 50%);
    transform: scale(0.18) translateY(0);
    opacity: 0;
    filter: blur(6px);
    transition:
        transform 420ms cubic-bezier(0.22, 1.32, 0.36, 1),
        opacity 220ms ease,
        filter 280ms ease;
    overflow: hidden;
}
.raw-json-overlay.open .raw-json-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

.raw-json-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid #F1F1EF;
    background: #FAFAF9;
}
.raw-json-modal-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: Geist, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #18181B;
    letter-spacing: -0.005em;
}
.raw-json-modal-glyph {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #18181B;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 6px;
    padding: 2px 7px;
    letter-spacing: -0.04em;
}
.raw-json-modal-meta {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    color: #A8A29E;
    letter-spacing: 0.04em;
    padding-left: 4px;
    border-left: 1px solid #E7E5E4;
    margin-left: 4px;
}
.raw-json-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.raw-json-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #E7E5E4;
    background: #FFFFFF;
    border-radius: 7px;
    font-family: Geist, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #18181B;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.raw-json-action:hover {
    background: #18181B;
    color: #FFFFFF;
    border-color: #18181B;
}
.raw-json-action.is-copied {
    background: #418D62;
    color: #FFFFFF;
    border-color: #418D62;
}
.raw-json-action-close {
    padding: 6px;
    width: 28px;
    justify-content: center;
}

.raw-json-modal-body {
    flex: 1 1 auto;
    overflow: auto;
    background:
        linear-gradient(#FFFFFF 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), #FFFFFF 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(15,16,17,0.06), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, rgba(15,16,17,0.06), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 28px, 100% 28px, 100% 12px, 100% 12px;
    background-attachment: local, local, scroll, scroll;
}
.raw-json-pre {
    margin: 0;
    padding: 18px 22px 22px;
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 20px;
    color: #18181B;
    white-space: pre;
    tab-size: 2;
    display: flex;
    flex-direction: column;
}
.rj-line {
    display: block;
    opacity: 0;
    transform: translateY(2px);
    animation: rjLineIn 320ms cubic-bezier(0.22, 1.32, 0.36, 1) forwards;
}
@keyframes rjLineIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* JSON syntax tokens */
.rj-key  { color: #18181B; font-weight: 600; }
.rj-str  { color: #2F6E4B; }
.rj-num  { color: #B25F00; }
.rj-bool { color: #6E40C9; font-weight: 500; }
.rj-null { color: #A8A29E; font-style: italic; }
.rj-punc { color: #A8A29E; }

.raw-json-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid #F1F1EF;
    background: #FAFAF9;
    font-family: Geist, system-ui, sans-serif;
    font-size: 11.5px;
    color: #737373;
}
.raw-json-foot-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #418D62;
    box-shadow: 0 0 0 3px rgba(65,141,98,0.16);
}
.raw-json-modal-foot kbd {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10.5px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 4px;
    padding: 1px 5px;
    color: #18181B;
}

/* Null/missing metadata indicator — muted italic so it reads as "absent"
 * rather than as data the user should act on. */
.doc-metadata-value .meta-null {
    color: #A8A29E;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
}

/* ==========================================================================
 * Custom document types (Capture page "Custom" tab + sample-driven flow modal)
 * ========================================================================== */

.custom-doctype-picker {
    margin: 12px 0 8px;
    padding: 12px 16px;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    animation: fadeIn var(--transition-normal);
}
.custom-doctype-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.custom-doctype-picker-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.custom-doctype-picker-label-strong {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.3;
}
.custom-doctype-picker-label-hint {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}
.custom-doctype-teach-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 12.5px;
}
.custom-doctype-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    align-items: center;
}
.custom-doctype-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
}
.custom-doctype-chip:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.custom-doctype-chip.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
}
.custom-doctype-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-primary);
}
.custom-doctype-empty {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Sample-driven flow modal --- */
.custom-sample-modal {
    animation: fadeIn var(--transition-normal);
}
.custom-sample-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 18px;
    border: 1.5px dashed var(--border-color);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-input);
    cursor: pointer;
    text-align: center;
    color: var(--text-secondary);
    transition: border-color var(--transition-fast, 150ms ease), background var(--transition-fast, 150ms ease);
}
.custom-sample-dropzone strong {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}
.custom-sample-dropzone span {
    font-size: 12px;
}
.custom-sample-dropzone:hover,
.custom-sample-dropzone.drag-over {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.custom-sample-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: classify-spin 0.8s linear infinite;
}
.custom-sample-match-card {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(65, 141, 98, 0.06);
    border: 1px solid rgba(65, 141, 98, 0.24);
    border-radius: var(--radius-md, 10px);
}
.custom-sample-match-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-sample-match-headline {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
}
.custom-sample-match-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.45;
}
.custom-sample-match-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: flex-end;
}
.custom-sample-review-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(65, 141, 98, 0.08);
    border: 1px solid rgba(65, 141, 98, 0.20);
    border-radius: var(--radius-sm, 6px);
    font-size: 12px;
    color: var(--text-secondary);
}
.custom-sample-label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--text-primary);
}
.custom-sample-input {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-body, system-ui);
    font-size: 13px;
}
.custom-sample-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}
.custom-sample-mono {
    font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
    font-size: 11px;
    line-height: 1.5;
    resize: vertical;
}
.custom-sample-helper {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.custom-sample-helper code {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10.5px;
}
.custom-sample-errors {
    padding: 8px 10px;
    background: rgba(229, 62, 62, 0.08);
    border: 1px solid rgba(229, 62, 62, 0.24);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-error, #e53e3e);
    font-size: 12px;
    margin-bottom: 10px;
}
.custom-sample-review-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.custom-sample-error-card {
    padding: 14px 16px;
    background: rgba(229, 62, 62, 0.06);
    border: 1px solid rgba(229, 62, 62, 0.18);
    border-radius: var(--radius-md, 10px);
}
.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-ghost:hover {
    background: var(--bg-input);
}

/* =========================================================
   Usage page — redesign
   ========================================================= */
.usage-section-v2.active {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 8px 0 80px;
}
.usage-section-v2 * {
    font-family: var(--font-body);
}
.usage-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}
.usage-page-header-left { display: flex; flex-direction: column; gap: 6px; }
.usage-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-tertiary, #71717A);
}
.usage-breadcrumb-sep { color: #A1A1AA; }
.usage-page-title {
    font-size: 32px; font-weight: 600; color: var(--text-primary);
    letter-spacing: -0.02em; line-height: 36px; margin: 0;
}
.usage-page-subtitle {
    font-size: 14px; color: var(--text-secondary); line-height: 20px; margin: 0;
}

/* Hero */
.usage-hero {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 48px;
}
.usage-hero-left { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.usage-hero-eyebrow { display: flex; align-items: center; gap: 10px; }
.usage-eyebrow-label {
    font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-tertiary, #71717A);
}
.usage-live-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px; background: var(--color-primary); border-radius: 4px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: #fff;
}
.usage-live-dot {
    width: 5px; height: 5px; border-radius: 999px; background: #fff;
}
.usage-hero-figure { display: flex; align-items: flex-end; gap: 14px; }
.usage-hero-number {
    font-size: 72px; font-weight: 500; color: var(--text-primary);
    letter-spacing: -0.04em; line-height: 72px;
    font-variant-numeric: tabular-nums;
}
.usage-hero-unit {
    font-size: 18px; font-weight: 400; color: var(--text-tertiary, #71717A);
    padding-bottom: 14px;
}
.usage-hero-delta-row {
    display: flex; align-items: center; gap: 14px; min-height: 22px;
}
.usage-delta-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(65, 141, 98, 0.10); color: var(--color-primary);
    font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.usage-delta-pill.is-down { background: rgba(220, 38, 38, 0.10); color: var(--color-error); }
.usage-delta-pill.is-down .usage-delta-arrow { transform: rotate(180deg); }
.usage-delta-note { font-size: 13px; color: var(--text-secondary); }
.usage-delta-note .muted { color: var(--text-tertiary, #71717A); }

.usage-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.usage-period-toggle {
    display: flex; padding: 3px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 8px;
}
.usage-period-btn {
    appearance: none; background: transparent; border: 0;
    font-family: var(--font-body); font-size: 13px; font-weight: 500;
    color: var(--text-tertiary, #71717A);
    padding: 6px 12px; border-radius: 5px; cursor: pointer; transition: 0.12s ease;
}
.usage-period-btn:hover { color: var(--text-primary); }
.usage-period-btn.active {
    color: var(--text-primary); font-weight: 600; background: var(--bg-primary);
    box-shadow: 0 1px 2px rgba(24, 24, 27, 0.08);
}
.usage-period-range {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-tertiary, #71717A);
    font-variant-numeric: tabular-nums;
}

/* Metric tiles */
.usage-tiles {
    display: flex; border: 1px solid var(--border-color);
    border-radius: 10px; overflow: hidden; background: var(--bg-primary);
}
.usage-tile {
    flex: 1; display: flex; flex-direction: column; gap: 10px;
    padding: 22px 26px;
}
.usage-tile + .usage-tile { border-left: 1px solid var(--border-color); }
.usage-tile-label {
    font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-tertiary, #71717A);
}
.usage-tile-figure { display: flex; align-items: flex-end; gap: 8px; }
.usage-tile-number {
    font-size: 28px; font-weight: 500; color: var(--text-primary);
    letter-spacing: -0.02em; line-height: 30px;
    font-variant-numeric: tabular-nums;
}
.usage-tile-delta {
    font-size: 12px; font-weight: 500; color: var(--color-primary);
    padding-bottom: 6px; font-variant-numeric: tabular-nums;
}
.usage-tile-delta.is-down { color: var(--color-error); }
.usage-tile-delta-muted { color: var(--text-tertiary, #71717A); font-weight: 400; }
.usage-tile-sub { font-size: 12px; color: var(--text-tertiary, #71717A); }

/* Card surface (chart + table) */
.usage-card {
    display: flex; flex-direction: column; gap: 20px;
    padding: 24px 28px; background: var(--bg-primary);
    border: 1px solid var(--border-color); border-radius: 10px;
}
.usage-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.usage-card-title {
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    letter-spacing: -0.01em; margin: 0 0 4px;
}
.usage-card-sub { font-size: 13px; color: var(--text-tertiary, #71717A); margin: 0; }

.usage-tier-legend { display: flex; align-items: center; gap: 18px; }
.usage-legend-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
}
.usage-legend-dot { width: 9px; height: 9px; border-radius: 2px; }

.usage-chart-card .usage-chart-container {
    position: relative; height: 280px; padding-top: 4px;
}

/* Breakdown table */
.usage-table-card { padding: 0; gap: 0; overflow: hidden; }
.usage-table-card .usage-card-head { padding: 22px 24px 18px; }
#credits-breakdown-table { display: flex; flex-direction: column; }
.usage-table-header {
    display: flex; align-items: center; padding: 12px 24px;
    background: var(--bg-secondary); border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.usage-table-header > div {
    font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-tertiary, #71717A);
}
.usage-table-row {
    display: flex; align-items: center; padding: 16px 24px;
    border-bottom: 1px solid var(--border-color-light);
}
.usage-table-row:last-of-type { border-bottom: 0; }
.usage-table-row[data-credits-extra="1"] { display: none; }
.usage-table-row[data-credits-extra="1"].is-open { display: flex; }
.usage-col-type { flex: 2.2; display: flex; flex-direction: column; gap: 2px; padding-right: 16px; }
.usage-col-tier { flex: 1.2; display: flex; align-items: center; gap: 7px; }
.usage-col-share { flex: 2.5; display: flex; align-items: center; gap: 12px; padding-right: 32px; }
.usage-col-docs, .usage-col-credits { flex: 1; text-align: right; }
.usage-row-type {
    font-size: 14px; font-weight: 500; color: var(--text-primary); text-transform: capitalize;
}
.usage-row-sub { font-size: 12px; color: var(--text-tertiary, #71717A); }
.usage-tier-dot { width: 6px; height: 6px; border-radius: 999px; }
.usage-tier-dot.tier-simple { background: var(--color-primary); }
.usage-tier-dot.tier-advanced { background: var(--color-highlight); }
.usage-tier-dot.tier-complex { background: #c0392b; }
.usage-tier-label {
    font-size: 13px; color: var(--text-secondary); font-weight: 500; text-transform: capitalize;
}
.usage-share-track {
    flex: 1; height: 6px; background: var(--border-color-light);
    border-radius: 999px; overflow: hidden;
}
.usage-share-fill { height: 100%; background: var(--text-primary); border-radius: 999px; }
.usage-share-pct {
    font-size: 12px; color: var(--text-tertiary, #71717A);
    min-width: 42px; text-align: right; font-variant-numeric: tabular-nums;
}
.usage-num {
    font-size: 13px; color: var(--text-primary); font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.usage-num-strong { font-size: 14px; font-weight: 600; }
.usage-table-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}
.usage-table-footer-info { display: flex; align-items: center; gap: 10px; }
.usage-table-footer-text { font-size: 12px; color: var(--text-tertiary, #71717A); }
.usage-table-footer-text strong {
    color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums;
}
.usage-tier-mini { display: inline-flex; align-items: center; gap: 4px; }
.usage-tier-mini-dot { width: 5px; height: 5px; border-radius: 999px; }
.usage-view-more-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; background: var(--bg-primary);
    border: 1px solid var(--border-color); border-radius: 6px;
    font-size: 13px; font-weight: 500; color: var(--text-primary);
    cursor: pointer; transition: 0.12s ease;
}
.usage-view-more-btn:hover { background: var(--bg-secondary); }
.usage-view-more-btn svg { transition: transform 0.2s ease; }
.usage-view-more-btn.is-open svg { transform: rotate(180deg); }

/* Shimmer / skeleton loading */
@keyframes usageShimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.usage-section-v2.is-loading .usage-hero-number,
.usage-section-v2.is-loading .usage-tile-number {
    background: linear-gradient(90deg, #F5F5F4 0%, #ECECEB 40%, #F5F5F4 80%);
    background-size: 400px 100%;
    animation: usageShimmer 1.1s linear infinite;
    color: transparent !important;
    border-radius: 6px;
    display: inline-block;
}
.usage-section-v2.is-loading .usage-hero-number {
    min-width: 220px; height: 64px;
}
.usage-section-v2.is-loading .usage-tile-number {
    min-width: 80px; height: 28px;
}
.usage-section-v2.is-loading .usage-tile-delta,
.usage-section-v2.is-loading .usage-delta-pill,
.usage-section-v2.is-loading .usage-tile-sub,
.usage-section-v2.is-loading .usage-delta-note { visibility: hidden; }
.usage-section-v2.is-loading .usage-chart-container { position: relative; min-height: 280px; }
.usage-section-v2.is-loading .usage-chart-container > canvas { opacity: 0; }
.usage-section-v2.is-loading .usage-chart-container::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #FAFAFA 0%, #F0F0EF 40%, #FAFAFA 80%);
    background-size: 800px 100%;
    animation: usageShimmer 1.4s linear infinite;
    border-radius: 8px;
    pointer-events: none;
}
[data-theme="dark"] .usage-section-v2.is-loading .usage-hero-number,
[data-theme="dark"] .usage-section-v2.is-loading .usage-tile-number {
    background: linear-gradient(90deg, #21262d 0%, #2a3038 40%, #21262d 80%);
    background-size: 400px 100%;
}
[data-theme="dark"] .usage-section-v2.is-loading .usage-chart-container::after {
    background: linear-gradient(90deg, #1a1f26 0%, #232a32 40%, #1a1f26 80%);
    background-size: 800px 100%;
}
.usage-table-skeleton {
    display: flex; flex-direction: column;
}
.usage-table-skel-row {
    display: flex; align-items: center; padding: 16px 24px;
    border-bottom: 1px solid var(--border-color-light); gap: 16px;
}
.usage-table-skel-row:last-child { border-bottom: 0; }
.usage-table-skel-cell {
    height: 12px; border-radius: 4px;
    background: linear-gradient(90deg, #F5F5F4 0%, #ECECEB 40%, #F5F5F4 80%);
    background-size: 400px 100%;
    animation: usageShimmer 1.1s linear infinite;
}
[data-theme="dark"] .usage-table-skel-cell {
    background: linear-gradient(90deg, #21262d 0%, #2a3038 40%, #21262d 80%);
    background-size: 400px 100%;
}

/* Smooth fade-in when loaded */
.usage-section-v2 .usage-hero-number,
.usage-section-v2 .usage-tile-number {
    transition: opacity 0.18s ease;
}