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

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

/* Form controls don't inherit the page font by default (selects fell back to
   Arial) — keep every control in the body face. */
button, input, select, textarea, optgroup {
    font-family: inherit;
}

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

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

.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-desc {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.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: var(--color-primary);
    color: #FFFFFF;
    border: 1px solid var(--color-primary);
}
.quota-block-cta-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    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: var(--color-primary);
    color: #FFFFFF;
    border-color: var(--color-primary);
}
[data-theme="dark"] .quota-block-cta-primary:hover { background: var(--color-primary-dark); }
[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;
}

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

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

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

/* ---- Kita Max toggle (process bar) ---- */
.process-bar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kita-max-control {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.kita-max-control:hover {
    border-color: var(--color-primary);
}

/* Lit-up state when enabled (driven by JS adding .is-on) */
.kita-max-control.is-on {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-card));
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.kita-max-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex: 0 0 auto;
}

.kita-max-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.kita-max-track {
    position: absolute;
    inset: 0;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.kita-max-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.kita-max-switch input:checked + .kita-max-track {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.kita-max-switch input:checked + .kita-max-track .kita-max-thumb {
    transform: translateX(16px);
    background: #fff;
}

.kita-max-switch input:focus-visible + .kita-max-track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.kita-max-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.kita-max-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.kita-max-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 4px;
    color: #fff;
    background: var(--color-primary);
}

.kita-max-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .kita-max-sub { display: none; }
    .process-bar-actions { gap: 10px; }
}

/* Kita Max badge in the results detail header */

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

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

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

/* Status badges */

.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-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-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: var(--font-mono);
    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 */

/* Progress bar for processing documents */

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

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

/* Processing time badge for completed documents */

/* Reducto tables container - collapsible section */

.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;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* `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 Ask Kita (#ai-agent-widget) 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;
    min-width: 0;
    flex: 1;
}
.app-nav-logo {
    height: 24px;
    width: auto;
    margin-right: 24px;
}
.app-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.app-nav-links::-webkit-scrollbar { display: none; }
.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;
    flex-shrink: 0;
}
.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; }

/* Kita apps launcher (grid button + product popover). Design: Paper "Capture v4 — Kita apps launcher". */
.app-nav-launcher-wrap { position: relative; }
.app-nav-launcher {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #737373;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.app-nav-launcher:hover,
.app-nav-launcher[aria-expanded="true"] { background: #F5F5F4; color: #18181B; }
.app-nav-launcher-menu {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    gap: 8px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(24,24,27,0.10), 0 1px 2px rgba(24,24,27,0.05);
    z-index: 10001;
}
.app-nav-launcher-menu.open { display: flex; }
.app-nav-launcher-tile {
    width: 112px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 15px;
    text-align: center;
    white-space: nowrap;
    transition: background 0.1s;
}
.app-nav-launcher-tile:hover { background: var(--bg-hover); }
.app-nav-launcher-tile.is-current { background: #F4F4F2; }
.app-nav-launcher-tile svg { display: block; flex-shrink: 0; }

/* 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 */

/* Inline before/after diff in corrected cells */

/* AI Corrections summary line */

/* 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 */

/* 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;
    display: flex;
    align-items: stretch;
    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; }

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

/* 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; }
    .app-nav-identity { display: none; }
    #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;
}

/* Categorized transactions table — perf-friendly styles
   (replaces per-row/per-cell inline styles to keep HTML small) */
.cat-tx-table { width: 100%; border-collapse: collapse; }
.cat-tx-table thead th {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 5;
}
.cat-tx-table thead th.num { text-align: right; }
.cat-tx-table tbody td {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
}
.cat-tx-table tbody td.num { text-align: right; }
.cat-tx-table tbody td.debit { color: var(--color-danger); }
.cat-tx-table tbody td.credit { color: var(--color-success); }
.cat-tx-table tbody td.balance { font-weight: 500; }
.cat-tx-table tbody tr:nth-child(even) { background: var(--bg-subtle); }
.cat-tx-table tbody tr.row-hidden { display: none; }
.cat-tx-table .cat-pill {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: inline-block;
}
.cat-tx-table .cat-pill:hover { filter: brightness(1.08); }

/* Editable transaction cells */
.cat-tx-table td.editable {
    cursor: text;
    position: relative;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
    border-radius: 3px;
}
.cat-tx-table td.editable:hover {
    background-color: rgba(65, 141, 98, 0.06);
}
.cat-tx-table td.editable:focus {
    outline: none;
    background-color: rgba(65, 141, 98, 0.10);
    box-shadow: inset 0 0 0 2px var(--color-primary, #418D62);
}
.cat-tx-table tr.tx-saving td:first-child,
.cat-tx-table tr.tx-saved td:first-child,
.cat-tx-table tr.tx-error td:first-child { position: relative; }
.cat-tx-table tr.tx-saving td:first-child::before,
.cat-tx-table tr.tx-saved td:first-child::before,
.cat-tx-table tr.tx-error td:first-child::before {
    content: "";
    position: absolute;
    left: 1px; top: 50%;
    width: 5px; height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
}
.cat-tx-table tr.tx-saving td:first-child::before {
    background: #d4af37;
    animation: tx-pulse 1s ease-in-out infinite;
}
.cat-tx-table tr.tx-saved td:first-child::before { background: var(--color-success, #418D62); }
.cat-tx-table tr.tx-error td:first-child::before { background: var(--color-danger, #be4b4b); }
@keyframes tx-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.tx-edit-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 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) */

/* 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 */

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

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

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

.info-icon-wrapper {
    position: relative;
}/* 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) */

/* Add arrow indicator - right when closed, down when open */

.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 */

/* Standardized Transcription Styles */

/* Description column — single line, sized to its longest entry only. */

/* Date column — wide enough for full "September 30, 2025" without wrapping. */

/* Structural marker rows (page breaks, starting/ending balances) */

/* Make numeric columns right-aligned */

/* Description + reference columns stay single-line, matching the rest. */

/* Metadata table specific styling (2 columns: Field, Value) */

/* 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 */

/* Inline pagination arrows */

/* Page info inline with arrows */

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

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

.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-icon {
    display: none; /* Hide icon placeholders for cleaner look */
}

/* Fraud Table Section */

/* 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) {
    .app-top-nav { padding: 0 12px; }
    .app-nav-logo { margin-right: 8px; }
    .app-nav-credits { display: none !important; }
    .app-nav-link { padding: 6px 8px; font-size: 12px; }
    .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 */

.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 */

/* 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-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 */
}

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

    /* 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-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;
    }
    
    /* 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 */
}
    
    /* 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: var(--font-mono);
    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: var(--font-mono);
    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;
    }
}

/* Dark mode */

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

/* ================================================
   AFS DATA VALIDATION DASHBOARD STYLES
   ================================================ */

/* AFS Dashboard Card */

/* AFS Tab Navigation */

/* AFS Tab Content */

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

/* AFS Data Tables */

/* 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 */

/* Responsive AFS Dashboard */

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

/* History — view tabs (Sets vs Documents) */

/* History — uploader chips */
.history-user-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    align-items: center;
}
.history-user-chip {
    background: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    padding: 4px 10px 4px 4px;
    color: #374151;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.history-user-chip.all {
    padding: 4px 12px;
}
.history-user-chip:hover {
    border-color: #9ca3af;
}
.history-user-chip.active {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}
.history-user-chip-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    overflow: hidden;
}
.history-user-chip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.history-user-chip.active .history-user-chip-avatar {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.history-user-chip-you {
    color: #6b7280;
    font-weight: 500;
    margin-left: 4px;
    font-size: 0.85em;
}
.history-user-chip.active .history-user-chip-you {
    color: rgba(255, 255, 255, 0.75);
}

/* History scope selector (Personal vs Entire organization).
   Inherits the visual language of .sort-dropdown / .sort-trigger so the
   History header reads as a single coherent toolbar. */
.history-scope-dropdown {
    position: relative;
    margin: 14px 0 4px;
    display: inline-flex;
}
.history-scope-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 11px;
    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;
}
.history-scope-trigger svg { color: var(--text-muted); flex-shrink: 0; }
.history-scope-trigger:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
}
.history-scope-trigger:hover svg { color: var(--text-secondary); }
.history-scope-label { color: var(--text-secondary); }
.history-scope-label strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-left: 2px;
}
.history-scope-dropdown.open .history-scope-trigger {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.1);
}
.history-scope-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    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;
}
.history-scope-dropdown.open .history-scope-menu { display: block; }
.history-scope-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: none;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--transition-fast);
    font-family: var(--font-body);
}
.history-scope-option:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); }
.history-scope-option.selected { background: rgba(65, 141, 98, 0.08); }
.history-scope-option-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.history-scope-option-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Suppress the History feed flash: hide rows while a re-render is mid-flight
   so users don't see the unfiltered render pass before transformFeedForMode
   reorders / hides things. */

.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: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #f1f3f5;
    background: var(--bg-card, #ffffff);
}
.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); }

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

.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 */

/* 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-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); }
.activity-feed > .activity-item:last-of-type{
    border-bottom: none;
}
.unassigned-tag {
    color: #9ca3af;
    font-style: italic;
}
.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;
}

/* 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 */
.activity-item:hover .row-action-btn,
.row-action-btn:focus-visible,
.activity-item.is-active .row-action-btn,
.activity-item.selected .row-action-btn{
    opacity: 1;
}
/* Active (previewing) preview button is filled green */
.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;
}
.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;
}
[data-theme="dark"] .sub-row-name { color: var(--text-secondary); }
[data-theme="dark"] .sub-row-type { color: var(--text-muted); }

/* Activity Actions */
.activity-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.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(--color-primary);
    color: #FFFFFF;
    border-color: var(--color-primary);
}

.kita-dialog-btn-confirm:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

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

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

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

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

/* 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-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

/* Risk Badge */

.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-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-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-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
   ================================================ */

/* Overview Section */

/* Section Titles */
.fraud-section-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Category Sections */

/* Category Details (Hidden by default) */

/* Findings */

/* Analyst Notes */

/* 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 */

/* 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(--color-primary);
    color: #FFFFFF;
    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(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    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: var(--color-primary);
    border: 1px solid var(--color-primary);
    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 { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.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-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;
}


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

#pdf-fab {
    position: fixed;
    top: clamp(136px, 20vh, 190px);
    left: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    transition: left 0.20s ease-in;
}

body.results-active #pdf-fab {
    display: flex;
}

body.pdf-panel-open #pdf-fab {
    left: var(--pdf-panel-width, 260px);
    transition-duration: 0.25s;
    transition-timing-function: ease-out;
}

body.pdf-panel-resizing #pdf-fab {
    transition: none;
}

.pdf-fab-button {
    width: 46px;
    height: 58px;
    border: 1px solid var(--border-color, #E4E4E7);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text-secondary, #71717A);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    box-shadow: 2px 2px 10px rgba(9, 9, 11, 0.08);
    backdrop-filter: blur(8px);
    transition: width 0.13s, height 0.13s, background 0.13s, border-color 0.13s, color 0.13s, box-shadow 0.13s;
}

.pdf-fab-button:not([aria-disabled="true"]):hover {
    background: var(--bg-hover, #F4F4F5);
    border-color: #D4D4D8;
    color: var(--text-primary, #18181B);
    box-shadow: 3px 3px 14px rgba(9, 9, 11, 0.12);
}

.pdf-fab-button:focus-visible {
    outline: 2px solid var(--color-primary, #3D8B5E);
    outline-offset: -3px;
}

.pdf-fab-button[aria-expanded="true"],
body.pdf-panel-open .pdf-fab-button {
    background: color-mix(in srgb, var(--color-primary, #3D8B5E) 10%, #FFFFFF);
    border-color: var(--color-primary, #3D8B5E);
    color: var(--color-primary, #3D8B5E);
}

.pdf-fab-button[aria-disabled="true"] {
    opacity: 0.38;
    cursor: not-allowed;
}

.pdf-fab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-fab-text {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-align: center;
}

.pdf-fab-icon-open { display: none; }
body.pdf-panel-open .pdf-fab-icon-closed { display: none; }
body.pdf-panel-open .pdf-fab-icon-open { display: flex; }
body.pdf-panel-open .pdf-fab-text { display: none; }
body.pdf-panel-open .pdf-fab-button {
    width: 30px;
    height: 36px;
    gap: 0;
}

[data-theme="dark"] .pdf-fab-button {
    background: rgba(26, 31, 38, 0.96);
    border-color: #30363D;
    color: #A1A7AD;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .pdf-fab-button:not([aria-disabled="true"]):hover {
    background: #242B33;
    border-color: #3A4148;
    color: #E7E9EA;
}

[data-theme="dark"] .pdf-fab-button[aria-expanded="true"],
[data-theme="dark"] body.pdf-panel-open .pdf-fab-button {
    background: rgba(65, 141, 98, 0.18);
    border-color: #418D62;
    color: #6FB98F;
}

@media (prefers-reduced-motion: reduce) {
    #pdf-fab,
    .pdf-fab-button { transition: none; }
}

/* Document controls share the compact, neutral treatment of CDFIs. */
#results-section #pdf-fab {
    position: static;
    inset: auto;
    z-index: auto;
    flex: 0 0 auto;
    transition: none;
}
.pdf-edge-toggle .pdf-fab-button,
body.pdf-panel-open .pdf-edge-toggle .pdf-fab-button {
    width: auto;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border-color, #E0DDD3);
    border-radius: 999px;
    display: inline-flex;
    flex-direction: row;
    gap: 7px;
    background: var(--bg-card, #FFFFFF);
    color: var(--text-primary, #0F1A12);
    box-shadow: none;
    backdrop-filter: none;
}
body.pdf-panel-open .pdf-edge-toggle .pdf-fab-icon-closed { display: flex; }
.pdf-edge-toggle .pdf-fab-text,
body.pdf-panel-open .pdf-edge-toggle .pdf-fab-text {
    display: inline;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
}
.pdf-edge-toggle .pdf-fab-button:not([aria-disabled="true"]):hover {
    background: var(--bg-hover, #F4F7F2);
    border-color: var(--color-primary, #39875A);
    box-shadow: none;
}
.pdf-edge-toggle .pdf-fab-button[aria-expanded="true"] {
    background: color-mix(in srgb, var(--color-primary, #39875A) 8%, var(--bg-card, #FFFFFF));
    border-color: var(--color-primary, #39875A);
    color: var(--color-primary, #39875A);
}
body #pdf-panel-header .document-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #626B65);
    cursor: pointer;
}
body #pdf-panel-header .document-panel-close:hover { background: var(--bg-hover, #F4F7F2); color: var(--text-primary); }
body #pdf-panel-header .document-panel-close:focus-visible {
    outline: 2px solid var(--color-primary, #39875A);
    outline-offset: 2px;
}

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

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

/* 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: var(--color-primary);
}

#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-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: var(--color-primary);
}
[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; }

/* === 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: #FFFFFF; }
[data-theme="dark"] .org-filled-logo { color: #FFFFFF; }

/* 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: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* 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: #FFFFFF;
}
[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 */

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

/* === Customer onboarding (admin-sent sign-up link) ===================
   Join landing, plan step, payment-incomplete and activated screens, plus the
   Settings → Admin "Onboard a customer" modal. Driven by customer-onboarding.js;
   built on the .login-page / .onboarding-page / .auth-* primitives above. */
.co-join-actions { display: flex; flex-direction: column; gap: 10px; }
.co-google-btn {
    width: 100%;
    height: 46px;
    padding: 0;
    gap: 10px;
    border: 1px solid #E7E5E4;
    border-radius: 8px;
    background: #FFFFFF;
    color: #18181B;
    font-size: 14.5px;
    font-weight: 500;
}
.co-google-btn:hover { background: #FAFAFA; border-color: #D4D4D8; }

.co-next-steps { display: flex; flex-direction: column; gap: 28px; width: 100%; max-width: 520px; padding: 32px 64px; }
.co-eyebrow {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #A3A3A3;
}
.co-step-list { list-style: none; margin: 0; padding: 0; }
.co-step { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid #E7E5E4; }
.co-step:last-child { border-bottom: none; }
.co-step-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #E7E5E4;
    background: #FFFFFF;
    font: 500 12px var(--font-body);
    color: #A3A3A3;
}
.co-step.is-current .co-step-dot { background: #418D62; border-color: #418D62; color: #FFFFFF; font-weight: 600; }
.co-step-text { display: flex; flex-direction: column; gap: 4px; font: 400 13.5px/20px var(--font-body); color: #737373; }
.co-step-text strong { font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -0.01em; color: #18181B; }

.co-content { justify-content: flex-start; gap: 40px; padding-top: 24px; }
.co-content-centered { justify-content: center; gap: 26px; }

.co-period-row { display: flex; align-items: center; gap: 14px; }
.co-period-toggle { display: flex; gap: 4px; padding: 4px; background: #FFFFFF; border: 1px solid #E7E5E4; border-radius: 10px; }
.co-period-option {
    padding: 9px 20px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font: 500 13.5px var(--font-body);
    color: #737373;
    cursor: pointer;
}
.co-period-option.is-active { background: #18181B; color: #FFFFFF; font-weight: 600; }
.co-period-note { font: 500 13.5px var(--font-body); color: #418D62; }

.co-plan-cards { display: flex; align-items: stretch; gap: 16px; }
.co-plan-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 340px;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.co-plan-card:hover { border-color: #18181B; }
.co-plan-card.is-selected { border-color: #418D62; box-shadow: 0 0 0 3px rgba(65, 141, 98, 0.12); cursor: default; }
.co-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.co-plan-head > div { display: flex; flex-direction: column; gap: 5px; min-height: 67px; }
.co-plan-name { font: 600 17px/22px var(--font-body); letter-spacing: -0.01em; color: #18181B; }
.co-plan-desc { font: 400 13.5px/20px var(--font-body); color: #737373; }
.co-plan-badge {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 20px;
    background: #E8F5EC;
    font: 600 11.5px var(--font-body);
    letter-spacing: 0.02em;
    color: #2C6845;
}
.co-plan-price { display: flex; align-items: baseline; gap: 7px; }
.co-plan-price-num { font: 600 38px var(--font-body); letter-spacing: -0.03em; color: #18181B; }
.co-plan-price-per { font: 400 13.5px var(--font-body); color: #737373; }
.co-plan-price-note { font: 400 13px/19px var(--font-body); color: #737373; min-height: 38px; }
.co-plan-facts { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid #E7E5E4; }
.co-plan-fact { display: flex; justify-content: space-between; font: 400 13.5px var(--font-body); color: #3F3F46; }
.co-plan-fact span:last-child { font-weight: 500; color: #18181B; }
.co-plan-fact .is-highlight { font-weight: 600; color: #418D62; }
.co-plan-card .auth-primary-btn,
.co-plan-card .co-secondary-btn { height: 44px; margin-top: auto; }

.co-plan-footnote { display: flex; flex-direction: column; align-items: center; gap: 7px; font: 400 13.5px/20px var(--font-body); color: #737373; text-align: center; }
.co-quiet-link { background: none; border: none; padding: 0; font: 500 13.5px var(--font-body); color: #737373; text-decoration: none; cursor: pointer; }
.co-quiet-link:hover { color: #18181B; }
/* Deliberately understated: the paid plans are the path we want taken. */
.co-trial-link { margin-top: 12px; font: 400 12.5px/18px var(--font-body); color: #A3A3A3; text-decoration: underline; text-underline-offset: 3px; }
.co-trial-link:hover { color: #737373; }

.co-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border: 1px solid #E7E5E4;
    border-radius: 8px;
    background: #FFFFFF;
    font: 500 14px var(--font-body);
    color: #18181B;
    text-decoration: none;
    cursor: pointer;
}
.co-secondary-btn:hover { border-color: #18181B; }
.co-inline-btn { width: auto; padding: 0 22px; }

.co-state-card { display: flex; flex-direction: column; gap: 22px; width: 560px; max-width: 100%; padding: 36px; background: #FFFFFF; border: 1px solid #E7E5E4; border-radius: 14px; }
.co-state-head { display: flex; align-items: flex-start; gap: 13px; }
.co-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #FEF3E2;
    font: 600 19px var(--font-body);
    color: #B45309;
}
.co-state-title { margin: 0; font: 600 19px/24px var(--font-body); letter-spacing: -0.015em; color: #18181B; }
.co-state-sub { margin: 3px 0 0; font: 400 13.5px/20px var(--font-body); color: #737373; }
.co-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: #FAFAFA;
    border: 1px solid #E7E5E4;
    border-radius: 10px;
    font: 400 13px var(--font-body);
    color: #737373;
}
.co-summary-row > div { display: flex; flex-direction: column; gap: 3px; }
.co-summary-row strong { font-size: 14px; font-weight: 600; color: #18181B; letter-spacing: -0.01em; }
.co-summary-price { font: 600 19px var(--font-body); letter-spacing: -0.02em; color: #18181B; }
.co-button-pair { display: flex; gap: 10px; }
.co-button-pair > * { flex: 1; }
.co-escape-link { font: 400 13.5px/20px var(--font-body); color: #737373; text-align: center; text-decoration: none; }
.co-escape-link:hover { color: #18181B; text-decoration: underline; }

.co-success-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #418D62;
    font: 600 24px var(--font-body);
    color: #FFFFFF;
    animation: co-mark-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.co-success-mark-sm { width: 36px; height: 36px; font-size: 17px; background: #E8F5EC; color: #418D62; animation: none; }
@keyframes co-mark-in { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.co-wallet { display: flex; background: #FFFFFF; border: 1px solid #E7E5E4; border-radius: 14px; }
.co-wallet > div { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 186px; padding: 22px 24px; }
.co-wallet > div + div { border-left: 1px solid #E7E5E4; }
.co-wallet strong { font: 600 24px var(--font-body); letter-spacing: -0.02em; color: #18181B; }
.co-wallet span { font: 400 13px var(--font-body); color: #737373; }
.co-final-actions { display: flex; gap: 10px; }

/* One burst from the success mark: pieces fly out along --dx/--dy, then fall
   --fall while spinning and fading. */
.co-confetti { position: fixed; left: 50%; top: 34%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.co-confetti-piece {
    position: absolute;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: co-confetti 1.8s cubic-bezier(0.15, 0.6, 0.35, 1) var(--delay) forwards;
}
.co-confetti-piece.is-round { width: 7px; height: 7px; border-radius: 50%; }
@keyframes co-confetti {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    35% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--spin) * 0.4)); }
    100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + var(--fall))) rotate(var(--spin)); }
}
@media (prefers-reduced-motion: reduce) {
    .co-confetti { display: none; }
    .co-success-mark { animation: none; }
}

.co-admin-modal { max-width: 480px; padding: 0; overflow: hidden; }
.co-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 4px; }
.co-admin-head h3, .co-admin-success h3 { margin: 0; font: 600 18px var(--font-body); letter-spacing: -0.015em; color: #18181B; }
.co-admin-head p, .co-admin-success p { margin: 4px 0 0; font: 400 13.5px/20px var(--font-body); color: #737373; }
.co-admin-body { display: flex; flex-direction: column; gap: 18px; padding: 20px 24px 24px; }
.co-field { display: flex; flex-direction: column; gap: 6px; }
.co-field-hint { font: 400 12.5px/18px var(--font-body); color: #737373; }
.co-admin-plans { display: flex; gap: 4px; padding: 4px; background: #FAFAFA; border: 1px solid #E7E5E4; border-radius: 10px; }
.co-admin-plan {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
}
.co-admin-plan strong { font-size: 13.5px; font-weight: 500; color: #3F3F46; }
.co-admin-plan span { font-size: 12px; color: #737373; }
.co-admin-plan.is-selected { background: #FFFFFF; border-color: #418D62; }
.co-admin-plan.is-selected strong { font-weight: 600; color: #18181B; }
.co-admin-plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 12.5px var(--font-body); color: #737373; }
.co-admin-period { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font-body); color: #18181B; cursor: pointer; }
.co-admin-error { padding: 8px 12px; border-radius: 6px; background: var(--color-error-bg); color: var(--color-error); font-size: 13px; }
.co-admin-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid #E7E5E4; }
.co-admin-foot-split { justify-content: space-between; }
.co-admin-foot .co-inline-btn { height: 40px; font-size: 13px; }
.co-admin-success { gap: 16px; padding-top: 28px; }
.co-link-list { display: flex; flex-direction: column; gap: 10px; }
.co-link-row { display: flex; gap: 8px; }
.co-link-row-email { display: block; margin-bottom: 4px; font: 500 12.5px var(--font-body); color: #18181B; }
.co-link-row-email .co-link-row-status { margin-left: 6px; font-weight: 400; color: #737373; }
.co-link-input { flex: 1; min-width: 0; background: #FAFAFA; font-family: var(--font-mono); font-size: 13px; }

@media (max-width: 1100px) {
    .co-plan-cards { flex-direction: column; align-items: center; }
    .co-plan-card { width: 100%; max-width: 420px; }
}
@media (max-width: 640px) {
    .co-wallet { flex-direction: column; }
    .co-wallet > div + div { border-left: none; border-top: 1px solid #E7E5E4; }
    .co-final-actions, .co-button-pair { flex-direction: column; }
}

/* 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 → Admin stacks several cards in one sub-tab with no layout gap, so
   they sat flush against each other. */
[id^="admin-subtab-"] > .settings-card ~ .settings-card { margin-top: 20px; }

.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 */

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

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

/* Header and rows share one grid so every column lines up. */
.batch-history-table-header,
.batch-history-item {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr) 128px;
    column-gap: 24px;
    align-items: center;
    padding: 0 16px;
}

.batch-history-table-header {
    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-results { 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 {
    min-height: 60px;
    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 {
    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,
.bh-cell-date {
    min-width: 0;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column: Progress */
.bh-cell-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.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;
    min-width: 40px;
    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 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.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: Results */
.bh-cell-results {
    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);
}

.bh-dl-btn {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-body);
    border: 1px solid #EEF0F3;
    border-radius: 6px;
    background: #F7F8FA;
    color: #5B6470;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}
.bh-dl-btn:hover {
    border-color: #0A0A0F;
    color: #0A0A0F;
    background: #FFFFFF;
}

@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 {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 8px;
        padding: 12px 16px;
    }
    .bh-cell-name { grid-column: 1 / -1; }
    .bh-cell-type, .bh-cell-progress, .bh-cell-date { display: none; }
    .bh-cell-results { justify-content: flex-end; }
}

/* ================================================
   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);
}

/* Responsive: account selector in file queue */
@media (max-width: 640px) {
    .account-selector {
        display: none; /* Hide on very small screens to save space */
    }
}

/* ===== 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-Doc Score Badge */

/* ========== 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;
    height: 280px;
    position: relative;
}

.afs-chart-container canvas {
    width: 100% !important;
    height: 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.warn {
    background: #FEF3C7;
    border-color: transparent;
    color: #92400E;
}

.processing-timeline .timeline-pill.fail {
    background: #FEE2E2;
    border-color: transparent;
    color: #991B1B;
}

[data-theme="dark"] .processing-timeline .timeline-pill.warn {
    background: rgba(217, 119, 6, 0.14);
    color: #FBBF24;
}

[data-theme="dark"] .processing-timeline .timeline-pill.fail {
    background: rgba(220, 38, 38, 0.14);
    color: #F87171;
}

.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 */

.verify-finding-value.verify-finding-warn {
    color: #fbbf24;
    font-weight: 500;
}

/* Upload Mode Picker — toggle between individual and set */
/* Upload Mode Toggle - segmented control */

/* Legacy compat — keep old class names working */

.upload-mode-card.selected,
.upload-mode-card {
    display: none; /* Hidden — replaced by segmented toggle */
}

/* Inline set creation form */

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

/* DTI + Recommendation side-by-side */
.analyze-dti-rec-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

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

/* Active group (analyze tab highlight) */
/* Active group — Credit Assessment highlight */

@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); }
}

/* 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-launcher { color: var(--text-muted); }
[data-theme="dark"] .app-nav-launcher:hover,
[data-theme="dark"] .app-nav-launcher[aria-expanded="true"] { background: var(--bg-subtle); color: var(--text-primary); }
[data-theme="dark"] .app-nav-launcher-menu { box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
[data-theme="dark"] .app-nav-launcher-tile.is-current { background: var(--bg-subtle); }
[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); }

.cross-check-match { color: var(--color-primary, #418D62); font-weight: 500; }
.cross-check-mismatch { color: #ef4444; font-weight: 500; }

.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 */

/* Green / Red flags */

/* ============================================
   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
   ============================================ */

.doc-coverage-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 12px;
}

/* ========== DTI Gauge ========== */

/* ========== Affordability ========== */

/* ========== Document Timeline ========== */

/* ========== Spending Trend Alerts ========== */

/* ============================================
   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%);
}

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

/* Document Coverage Grid */

/* Header */

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

/* Recommendation Bar */

/* Metric Rows */

/* Tables */

/* Progress Bars */

/* Loan Officer Investigation Guide */

/* Document Coverage */

/* Dark mode */

/* ================================================
   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 — Paper key-management design. Scoped to this page only. */
#api-keys-section.active {
    max-width: 1104px;
    padding: 40px 24px 80px;
    gap: 28px;
    color: #0F1A12;
}
#api-keys-section .section-page-heading { align-items: center; }
#api-keys-section .section-page-heading-text { gap: 10px; }
#api-keys-section .section-page-title {
    font-size: 32px;
    line-height: 40px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #0F1A12;
}
#api-keys-section .section-page-subtitle {
    color: #73786E;
    white-space: normal;
    overflow: visible;
}
#api-keys-section #create-api-key-btn {
    background: #1F5A3A;
    color: #FFFFFF;
    border: 0;
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}
#api-keys-section #create-api-key-btn:hover { background: #14402A; }
#api-keys-section .api-keys-container {
    background: #FFFFFF;
    border: 1px solid #E6E2D6;
    border-radius: 16px;
    padding: 6px 24px 8px;
    overflow: hidden;
}
#api-keys-section .api-keys-empty {
    padding: 56px 0;
    color: #73786E;
    background: transparent;
}
#api-keys-section .api-keys-empty svg { color: #73786E; opacity: 1; }
#api-keys-section .api-keys-empty p {
    font-size: 15px;
    font-weight: 500;
    color: #0F1A12;
    margin: 14px 0 4px;
}
#api-keys-section .api-keys-empty span { font-size: 14px; color: #73786E; }
#api-keys-section .api-keys-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    table-layout: fixed;
}
#api-keys-section .api-keys-table th {
    text-align: left;
    padding: 12px 16px 12px 0;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
    color: #73786E;
    background: transparent;
    border-bottom: 1px solid #E6E2D6;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
#api-keys-section .api-keys-table th:nth-child(1) { width: 30%; }
#api-keys-section .api-keys-table th:nth-child(2) { width: 28%; }
#api-keys-section .api-keys-table th:nth-child(3) { width: 18%; }
#api-keys-section .api-keys-table th:nth-child(4) { width: 12%; }
#api-keys-section .api-keys-table th:nth-child(5) { width: 12%; }
#api-keys-section .api-keys-table td {
    padding: 20px 16px 20px 0;
    font-size: 13px;
    line-height: 20px;
    color: #0F1A12;
    border-bottom: 1px solid #E6E2D6;
    background: transparent;
    overflow-wrap: anywhere;
    vertical-align: middle;
}
#api-keys-section .api-keys-table th:last-child,
#api-keys-section .api-keys-table td:last-child { padding-right: 0; }
#api-keys-section .api-keys-table tr:last-child td { border-bottom: none; }
#api-keys-section .api-keys-table tr:hover td { background: #F8F8F8; }
#api-keys-section .api-key-name { font-size: 15px; font-weight: 500; }
#api-keys-section .api-key-value {
    font-family: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
    font-size: 13px;
    color: #1F5A3A;
}
#api-keys-section .api-key-value .key-prefix {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    overflow-wrap: anywhere;
}
#api-keys-section .api-key-status {
    padding: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 400;
    background: transparent;
}
#api-keys-section .api-key-status.active { background: transparent; color: #1F5A3A; }
#api-keys-section .api-key-status.inactive { background: transparent; color: #73786E; }
#api-keys-section .api-key-status::before { display: none; }
#api-keys-section .api-key-action-btn.delete {
    border: 1px solid #E6E2D6;
    border-radius: 999px;
    background: transparent;
    color: #B43F3F;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 18px;
}
#api-keys-section .api-key-action-btn.delete:hover { border-color: #B43F3F; }
#api-keys-section .api-keys-links { display: flex; gap: 28px; margin-top: 28px; }
#api-keys-section .api-keys-links a { color: #1F5A3A; font-size: 14px; line-height: 18px; text-decoration: none; }
#api-keys-section .api-keys-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
#api-keys-section .api-keys-links a:focus-visible { outline: 2px solid #1F5A3A; outline-offset: 3px; }
[data-theme="dark"] #api-keys-section .api-keys-links a { color: #7AC49B; }
#api-keys-section button:focus-visible { outline: 2px solid #1F5A3A; outline-offset: 3px; }
@media (max-width: 600px) {
    #api-keys-section.active { padding: 28px 16px 64px; }
    #api-keys-section .section-page-heading { align-items: flex-start; flex-wrap: wrap; gap: 16px; }
    #api-keys-section .api-keys-container { padding: 4px 16px; }
    #api-keys-section .api-keys-table thead { display: none; }
    #api-keys-section .api-keys-table tbody { display: block; }
    #api-keys-section .api-keys-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 20px 0;
        border-bottom: 1px solid #E6E2D6;
    }
    #api-keys-section .api-keys-table tr:last-child { border-bottom: none; }
    #api-keys-section .api-keys-table td { padding: 0; border: 0; grid-column: 1; }
    #api-keys-section .api-keys-table td:nth-child(3) { display: none; }
    #api-keys-section .api-keys-table td:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* 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,
[data-theme="dark"] #api-keys-section .section-page-title { color: #E7E9EA; }
[data-theme="dark"] #api-keys-section .api-key-status.active { color: #7AC49B; }
[data-theme="dark"] #api-keys-section .api-key-action-btn.delete { border-color: #30363D; color: #F09090; }
[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: transparent;
    border-color: transparent;
    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 */
.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) ---- */
.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
 * ============================================================ */

/* ---- Check sections ---- */

/* ---- 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; }
    .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%; }
}

/* Bank statement loan activity */
.loan-activity-block {
    gap: 20px;
}

.loan-activity-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--border-color, #E5E3DC);
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}

.loan-activity-summary-cell {
    min-width: 0;
    padding: 13px 14px;
    border-right: 1px solid var(--border-color, #E5E3DC);
}

.loan-activity-summary-cell:nth-child(5n) {
    border-right: 0;
}

.loan-activity-summary-cell:nth-child(n + 6) {
    border-top: 1px solid var(--border-color, #E5E3DC);
}

.loan-activity-label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted, #85837D);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.loan-activity-summary-value {
    display: block;
    color: var(--text-primary, #18181B);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    overflow-wrap: anywhere;
}

.loan-activity-stream {
    overflow: hidden;
    border: 1px solid var(--border-color, #E5E3DC);
    border-radius: 6px;
    background: var(--bg-card, #FFFFFF);
}

.loan-activity-stream + .loan-activity-stream {
    margin-top: -8px;
}

.loan-activity-stream-summary {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, auto) auto;
    align-items: center;
    gap: 16px;
    min-height: 68px;
    padding: 14px 18px;
    color: var(--text-primary, #18181B);
    cursor: pointer;
}

.loan-activity-stream-summary::marker {
    color: var(--text-muted, #85837D);
}

.loan-activity-stream-summary::-webkit-details-marker {
    color: var(--text-muted, #85837D);
}

.loan-activity-stream[open] > .loan-activity-stream-summary {
    border-bottom: 1px solid var(--border-color, #E5E3DC);
    background: var(--bg-secondary, #F7F7F5);
}

.loan-activity-stream-identity,
.loan-activity-stream-overview {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.loan-activity-stream-name {
    color: var(--text-primary, #18181B);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 18px;
    overflow-wrap: anywhere;
}

.loan-activity-stream-lender,
.loan-activity-stream-cadence {
    color: var(--text-secondary, #5D5D63);
    font-size: 12px;
    line-height: 16px;
    overflow-wrap: anywhere;
}

.loan-activity-stream-amount {
    color: var(--text-primary, #18181B);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-align: right;
}

.loan-activity-stream-cadence {
    text-align: right;
}

.loan-activity-stream-tags {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.loan-activity-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid var(--border-color, #E5E3DC);
    border-radius: 5px;
    background: var(--bg-card, #FFFFFF);
    color: var(--text-secondary, #5D5D63);
    font-size: 10.5px;
    font-weight: 650;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: capitalize;
    white-space: normal;
}

.loan-activity-status.is-positive {
    border-color: #B8DDC8;
    background: #EEF8F2;
    color: #17633A;
}

.loan-activity-status.is-warning {
    border-color: #E7CD8D;
    background: #FFF8E6;
    color: #7A5713;
}

.loan-activity-status.is-negative {
    border-color: #ECC1C1;
    background: #FFF1F1;
    color: #9E2F2F;
}

.loan-activity-stream-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 18px;
}

.loan-activity-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border-color, #E5E3DC);
    border-left: 1px solid var(--border-color, #E5E3DC);
}

.loan-activity-facts > div {
    min-width: 0;
    padding: 11px 12px;
    border-right: 1px solid var(--border-color, #E5E3DC);
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}

.loan-activity-facts strong {
    color: var(--text-primary, #18181B);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 17px;
    overflow-wrap: anywhere;
}

.loan-activity-linked {
    padding: 12px 14px;
    border-left: 3px solid #418D62;
    background: var(--bg-secondary, #F7F7F5);
}

.loan-activity-linked-title,
.loan-activity-table-title {
    margin-bottom: 8px;
    color: var(--text-primary, #18181B);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.loan-activity-linked-grid {
    display: grid;
    grid-template-columns: auto auto minmax(160px, 1fr) auto;
    align-items: center;
    gap: 8px 16px;
    color: var(--text-secondary, #5D5D63);
    font-size: 12px;
    line-height: 17px;
}

.loan-activity-linked-grid > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.loan-activity-table-section {
    min-width: 0;
}

.loan-activity-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-top: 1px solid var(--border-color, #E5E3DC);
    border-bottom: 1px solid var(--border-color, #E5E3DC);
}

.loan-activity-table {
    width: 100%;
    min-width: 540px;
    border-collapse: collapse;
    table-layout: auto;
}

.loan-activity-table th,
.loan-activity-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color, #E5E3DC);
    color: var(--text-secondary, #5D5D63);
    font-size: 11.5px;
    line-height: 16px;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.loan-activity-table th {
    color: var(--text-muted, #85837D);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.loan-activity-table tr:last-child td {
    border-bottom: 0;
}

.loan-activity-table .is-numeric {
    text-align: right;
    white-space: nowrap;
}

.loan-activity-empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--border-color, #E5E3DC);
    border-radius: 6px;
    background: var(--bg-secondary, #F7F7F5);
}

.loan-activity-empty strong {
    color: var(--text-primary, #18181B);
    font-size: 13px;
    line-height: 18px;
}

.loan-activity-empty span {
    color: var(--text-secondary, #5D5D63);
    font-size: 12px;
    line-height: 17px;
}

.loan-activity-validation-line {
    color: var(--text-muted, #71717A);
    font-size: 12px;
    line-height: 17px;
}

[data-theme="dark"] .loan-activity-status.is-positive {
    border-color: #315F46;
    background: #173526;
    color: #86D4A7;
}

[data-theme="dark"] .loan-activity-status.is-warning {
    border-color: #69562B;
    background: #3C321C;
    color: #E7CB82;
}

[data-theme="dark"] .loan-activity-status.is-negative {
    border-color: #6B3737;
    background: #3E2222;
    color: #F1A0A0;
}

@media (max-width: 980px) {
    .loan-activity-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .loan-activity-summary-cell,
    .loan-activity-summary-cell:nth-child(5n) { border-right: 1px solid var(--border-color, #E5E3DC); }
    .loan-activity-summary-cell:nth-child(2n) { border-right: 0; }
    .loan-activity-summary-cell:nth-child(n + 3) { border-top: 1px solid var(--border-color, #E5E3DC); }
    .loan-activity-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .loan-activity-linked-grid { grid-template-columns: auto auto minmax(0, 1fr); }
    .loan-activity-linked-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .loan-activity-block .sig-v3-head { align-items: flex-start; flex-direction: column; }
    .loan-activity-stream-summary { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; }
    .loan-activity-stream-overview { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
    .loan-activity-stream-amount,
    .loan-activity-stream-cadence { text-align: left; }
    .loan-activity-stream-tags { justify-content: flex-start; }
    .loan-activity-stream-body { padding: 14px; }
    .loan-activity-facts { grid-template-columns: 1fr; }
    .loan-activity-linked-grid { grid-template-columns: 1fr; }
    .loan-activity-linked-grid > :last-child { grid-column: auto; }
}


/* =====================================================================
 * 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;
}
/* Plain (unhighlighted) body: heavy JSON payloads and raw transcriptions.
   Transcript lines can run long, so wrap instead of forcing a horizontal
   scroll. */
.raw-json-pre-plain {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
}
/* Formatted transcript mode: Reducto markup rendered as real formatting. */
.raw-transcript .rt-line { display: block; min-height: 20px; }
.rt-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 0 6px;
    border: 1px solid #D4D4D8;
    border-radius: 4px;
    background: #FAFAFA;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #71717A;
    line-height: 18px;
    vertical-align: 1px;
}
.rt-sig {
    display: inline-block;
    padding: 0 8px;
    border: 1px dashed #A1A1AA;
    border-radius: 4px;
    font-size: 11px;
    font-style: italic;
    color: #52525B;
    line-height: 19px;
}
.rt-page-head {
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #E4E4E7;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #71717A;
}
.raw-transcript .rt-page-head:first-child { margin-top: 0; }
.rt-h { font-weight: 600; margin: 10px 0 4px; }
.rt-h1 { font-size: 15px; }
.rt-h2 { font-size: 14px; }
.rt-h3 { font-size: 13.5px; }
.rt-h4 { font-size: 13px; }
.rt-table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
    max-width: 100%;
}
.rt-table th,
.rt-table td {
    border: 1px solid #E4E4E7;
    padding: 4px 9px;
    text-align: left;
    vertical-align: top;
}
.rt-table th {
    background: #FAFAFA;
    font-weight: 600;
}
.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;
}

/* ============================================================================
   Mobile banking screenshot — specialised renderer
   ----------------------------------------------------------------------------
   Phone-app aesthetic: a hero "card" for the account block (one of those
   embossed bank cards), a KPI strip for at-a-glance inflow/outflow/net,
   and a vertical transaction timeline grouped by day. Tamper note up top
   stays quiet so it doesn't compete with the data.
   ============================================================================ */

/* Account card (echoes a credit/debit card aesthetic) */

/* KPI strip */

/* Section title */

/* Transactions timeline */

/* Signals */

/* Empty state */

/* ============================================================================
   Custom-schema teach-flow — loading stepper + side-by-side review
   ============================================================================ */

/* The modal widens for the review state so the PDF preview has room.
   Other states keep the compact width. */
.custom-sample-modal {
    max-width: 560px;
    transition: max-width 220ms ease;
}
.custom-sample-modal.custom-sample-modal-wide {
    max-width: 1080px;
}
@media (max-width: 980px) {
    .custom-sample-modal.custom-sample-modal-wide {
        max-width: 95vw;
    }
}

/* ---- Loading state ---- */
.custom-loading-shell {
    padding: 8px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.custom-loading-header {
    text-align: left;
}
.custom-loading-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.custom-loading-sub {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.custom-loading-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.custom-loading-steps li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-input, #f9fafb);
    border: 1px solid transparent;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.custom-loading-steps li.is-active {
    background: rgba(65, 141, 98, 0.06);
    border-color: rgba(65, 141, 98, 0.22);
}
.custom-loading-steps li.is-done {
    background: var(--bg-input, #f9fafb);
    border-color: transparent;
}
.custom-loading-step-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color, #e5e7eb);
    background: var(--bg-card, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: border-color 180ms ease, background 180ms ease;
}
.custom-loading-steps li.is-active .custom-loading-step-icon {
    border-color: var(--color-primary, #418D62);
    box-shadow: 0 0 0 4px rgba(65, 141, 98, 0.14);
}
.custom-loading-steps li.is-active .custom-loading-step-icon::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 2px solid transparent;
    border-top-color: var(--color-primary, #418D62);
    border-right-color: var(--color-primary, #418D62);
    border-radius: 50%;
    animation: classify-spin 0.85s linear infinite;
}
.custom-loading-steps li.is-done .custom-loading-step-icon {
    background: var(--color-primary, #418D62);
    border-color: var(--color-primary, #418D62);
}
.custom-loading-steps li.is-done .custom-loading-step-icon::before {
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
    top: 5px;
    left: 4px;
}
.custom-loading-step-text { min-width: 0; }
.custom-loading-step-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.custom-loading-steps li:not(.is-active):not(.is-done) .custom-loading-step-title {
    color: var(--text-secondary);
    font-weight: 500;
}
.custom-loading-step-sub {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 1px;
    line-height: 1.4;
}

/* The skeleton block fakes a schema appearing — shimmering placeholder rows */
.custom-loading-skeleton {
    margin-top: 4px;
    padding: 12px 14px;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: var(--bg-card, #ffffff);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.custom-loading-skeleton-row {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-input, #f3f4f6) 0%, var(--border-color, #e5e7eb) 40%, var(--bg-input, #f3f4f6) 80%);
    background-size: 400px 100%;
    animation: custom-loading-shimmer 1.4s linear infinite;
}
@keyframes custom-loading-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
[data-theme="dark"] .custom-loading-skeleton-row {
    background: linear-gradient(90deg, #21262d 0%, #2a3038 40%, #21262d 80%);
    background-size: 400px 100%;
}

/* ---- Review state — side-by-side layout ---- */
.custom-sample-review-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 16px;
    margin-top: 12px;
    min-height: 520px;
}
@media (max-width: 880px) {
    .custom-sample-review-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }
}

.custom-sample-preview-pane {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: var(--bg-input, #f9fafb);
    overflow: hidden;
    min-height: 460px;
}
.custom-sample-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-card, #ffffff);
}
.custom-sample-preview-filename {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}
.custom-sample-preview-pager {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.custom-sample-preview-pager-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}
.custom-sample-preview-pager-btn:hover {
    background: var(--bg-card, #ffffff);
    color: var(--text-primary);
}
.custom-sample-preview-pagelabel {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    min-width: 38px;
    text-align: center;
}
.custom-sample-preview-stage {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    padding: 12px;
    background:
        repeating-conic-gradient(rgba(0, 0, 0, 0.03) 0% 25%, transparent 0% 50%) 50% / 14px 14px;
    background-color: var(--bg-input, #f9fafb);
}
.custom-sample-preview-stage canvas,
.custom-sample-preview-stage img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.2);
    background: #ffffff;
}
.custom-sample-preview-empty {
    color: var(--text-secondary);
    font-size: 12.5px;
    padding: 32px 16px;
    text-align: center;
    font-family: var(--font-body);
}

.custom-sample-form-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.custom-sample-schema-textarea {
    flex: 1;
    min-height: 240px;
    resize: vertical;
}

/* ============================================================
   Settings → Team (kt-* prefix). Redesigned in Paper, 2026-05-20.
   Editorial mood: ink on white, Geist + Geist Mono, single cobalt accent.
   ============================================================ */
.kt-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.kt-header-text { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.kt-title { font-family: Geist, system-ui, sans-serif; font-weight: 600; font-size: 36px; letter-spacing: -.025em; color: #0A0A0F; line-height: 36px; margin: 0; }
.kt-lede { font-family: Geist, system-ui, sans-serif; font-size: 14px; color: #5B6470; line-height: 22px; max-width: 520px; margin: 6px 0 0 0; }
.kt-eyebrow { font-family: Geist, system-ui, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5B6470; }
.kt-seats { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.kt-seats-line { display: flex; align-items: baseline; gap: 6px; }
.kt-seats-num { font-family: Geist, system-ui, sans-serif; font-weight: 600; font-size: 40px; letter-spacing: -.03em; color: #0A0A0F; line-height: 36px; font-variant-numeric: tabular-nums; }
.kt-seats-of { font-family: Geist, system-ui, sans-serif; font-size: 18px; color: #5B6470; font-variant-numeric: tabular-nums; }
.kt-seats-label { font-family: Geist, system-ui, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5B6470; }
.kt-seats.is-full .kt-seats-num { color: #DC2626; }

.kt-composer { background: #F7F8FA; border: 1px solid #EEF0F3; border-radius: 14px; padding: 24px; margin-bottom: 40px; }
.kt-composer-inner { display: flex; flex-direction: column; gap: 14px; }
.kt-composer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kt-composer-hint { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #5B6470; }
.kt-composer-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.kt-input-shell { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #FFFFFF; border: 1px solid #E1E5EA; border-radius: 10px; color: #5B6470; transition: border-color .15s ease, box-shadow .15s ease; }
.kt-input-shell:focus-within { border-color: #0A0A0F; box-shadow: 0 0 0 3px rgba(10,10,15,.06); color: #0A0A0F; }
.kt-input { flex: 1; border: none; outline: none; background: transparent; font-family: Geist, system-ui, sans-serif; font-size: 14px; color: #0A0A0F; padding: 13px 0; min-width: 0; }
.kt-input::placeholder { color: #9AA0A6; }
.kt-roletoggle { display: flex; align-items: center; gap: 4px; padding: 4px; background: #FFFFFF; border: 1px solid #E1E5EA; border-radius: 10px; }
.kt-roletoggle-btn { padding: 9px 14px; border: none; background: transparent; border-radius: 7px; font: 500 13px Geist, system-ui, sans-serif; color: #5B6470; cursor: pointer; transition: background .15s ease, color .15s ease; }
.kt-roletoggle-btn.is-active { background: #0A0A0F; color: #FFFFFF; }
.kt-send-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; background: var(--color-primary); color: #FFFFFF; border: none; border-radius: 10px; font: 500 14px Geist, system-ui, sans-serif; cursor: pointer; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.kt-send-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), .22); }
.kt-send-btn:active { transform: translateY(0); }
.kt-send-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.kt-composer-foot { display: flex; align-items: center; gap: 8px; font-family: Geist, system-ui, sans-serif; font-size: 12px; color: #5B6470; }
.kt-readonly { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #F7F8FA; border: 1px solid #EEF0F3; border-radius: 12px; font: 400 13px/18px Geist, system-ui, sans-serif; color: #5B6470; }
.kt-readonly svg { flex-shrink: 0; color: #8A93A0; }
/* Members see only the notice: no card-inside-a-card. */
.kt-composer.is-readonly { padding: 0; background: none; border: 0; margin-bottom: 32px; }
.kt-composer.is-readonly .kt-readonly { flex: 1; box-sizing: border-box; }
.kt-composer-seats { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #FEF7E6; border: 1px solid #F5E2B8; border-radius: 10px; font: 400 13px/18px Geist, system-ui, sans-serif; color: #7A5A12; }
.kt-composer-seats svg { flex-shrink: 0; }
.kt-input:disabled { cursor: not-allowed; color: #8A93A0; }
[data-theme="dark"] .kt-readonly { background: #1A1F26; border-color: #2A313B; color: #A1A1AA; }
[data-theme="dark"] .kt-composer-seats { background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.3); color: #FBBF24; }

.kt-section { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.kt-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kt-section-head-left { display: flex; align-items: center; gap: 10px; }
.kt-section-head-meta { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #5B6470; }
.kt-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; background: #F7F8FA; color: #5B6470; border: 1px solid #EEF0F3; border-radius: 9px; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 11px; }
.kt-badge-warn { background: #FEF3C7; color: #92400E; border-color: transparent; }

.kt-list { display: flex; flex-direction: column; gap: 8px; }
.kt-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #EEF0F3; border-radius: 12px; background: #FFFFFF; transition: border-color .15s ease, background .15s ease; }
.kt-row:hover { border-color: #D4D8DE; }
.kt-row-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 18px; background: var(--color-primary); color: #FFFFFF; font: 600 13px Geist, system-ui, sans-serif; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kt-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kt-row-avatar.is-pending { background: #FEF3C7; color: #92400E; }
.kt-row-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kt-row-name { display: flex; align-items: center; gap: 8px; font-family: Geist, system-ui, sans-serif; font-weight: 600; font-size: 14px; color: #0A0A0F; min-width: 0; }
.kt-row-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-you { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #5B6470; padding: 1px 6px; background: #F7F8FA; border-radius: 4px; flex-shrink: 0; }
.kt-row-email { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #5B6470; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-role-pill { padding: 5px 10px; background: #F7F8FA; color: #5B6470; border: 1px solid #EEF0F3; border-radius: 6px; font: 500 12px Geist, system-ui, sans-serif; flex-shrink: 0; text-transform: capitalize; }
.kt-role-pill.is-owner { background: #0A0A0F; color: #FFFFFF; border-color: #0A0A0F; }
.kt-role-pill.is-admin { background: #EAF2FF; color: #3253FF; border-color: transparent; }
.kt-icon-btn { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid #EEF0F3; background: #FFFFFF; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #5B6470; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.kt-icon-btn:hover { border-color: #0A0A0F; color: #0A0A0F; }
.kt-icon-btn.is-danger:hover { border-color: #DC2626; color: #DC2626; background: #FFF4F4; }

.kt-empty { padding: 32px 16px; text-align: center; border: 1px dashed #D4D8DE; border-radius: 12px; color: #5B6470; font-family: Geist, system-ui, sans-serif; font-size: 13px; }

/* ============================================================
   Settings → Profile / Preferences / Regions / Branding (kt-* prefix).
   ============================================================ */
.kt-row-action { padding: 9px 14px; background: #FFFFFF; border: 1px solid #EEF0F3; border-radius: 10px; font: 500 13px Geist, system-ui, sans-serif; color: #5B6470; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.kt-row-action:hover { border-color: #0A0A0F; color: #0A0A0F; }

/* Identity card (Profile) */
.kt-identity { display: flex; align-items: center; gap: 24px; padding: 24px; border: 1px solid #EEF0F3; border-radius: 14px; margin-bottom: 32px; }
.kt-identity-avatar-wrap { position: relative; flex-shrink: 0; cursor: pointer; }
.kt-identity-avatar { width: 80px; height: 80px; border-radius: 40px; background: var(--color-primary); color: #FFFFFF; font: 600 30px Geist, system-ui, sans-serif; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kt-identity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kt-identity-camera { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; border-radius: 13px; background: #FFFFFF; border: 1.5px solid #EEF0F3; display: flex; align-items: center; justify-content: center; color: #5B6470; }
.kt-identity-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kt-identity-namewrap { display: flex; align-items: center; gap: 10px; }
.kt-identity-name { font: 600 22px Geist, system-ui, sans-serif; letter-spacing: -.015em; color: #0A0A0F; }
.kt-identity-edit { width: 24px; height: 24px; background: transparent; border: 1px solid #EEF0F3; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #5B6470; transition: border-color .15s, color .15s; }
.kt-identity-edit:hover { border-color: #0A0A0F; color: #0A0A0F; }
.kt-identity-email { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: #5B6470; }
.kt-identity-hint { font: 400 12px Geist, system-ui, sans-serif; color: #5B6470; margin-top: 6px; }

/* Inline name editor */
.kt-name-edit { display: flex; flex-direction: column; gap: 10px; }
.kt-name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kt-name-field { display: flex; flex-direction: column; gap: 4px; }
.kt-name-field-label { font: 600 11px Geist, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5B6470; }
.kt-name-field input { padding: 9px 12px; border: 1px solid #E1E5EA; border-radius: 8px; font: 400 14px Geist, system-ui, sans-serif; color: #0A0A0F; outline: none; transition: border-color .15s, box-shadow .15s; }
.kt-name-field input:focus { border-color: #0A0A0F; box-shadow: 0 0 0 3px rgba(10,10,15,.06); }
.kt-name-error { font-size: 12px; color: #DC2626; margin: 0; }
.kt-name-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Org chip row in Profile */
.kt-orgrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #EEF0F3; border-radius: 12px; background: #FFFFFF; }
.kt-orgrow-logo { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: #418D62; color: #FFFFFF; font: 600 14px Geist, system-ui, sans-serif; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kt-orgrow-logo img { width: 100%; height: 100%; object-fit: cover; }
.kt-orgrow-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kt-orgrow-name { font: 600 14px Geist, system-ui, sans-serif; color: #0A0A0F; }
.kt-orgrow-sub { font: 400 12px Geist, system-ui, sans-serif; color: #5B6470; }

/* Plan card */
.kt-plancard { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border: 1px solid #EEF0F3; border-radius: 12px; }
.kt-plancard-meta { display: flex; flex-direction: column; gap: 4px; }
.kt-plancard-name { display: flex; align-items: baseline; gap: 8px; }
.kt-plancard-name-text { font: 600 18px Geist, system-ui, sans-serif; letter-spacing: -.015em; color: #0A0A0F; }
.kt-plancard-tag { padding: 2px 8px; background: #F7F8FA; color: #5B6470; border: 1px solid #EEF0F3; border-radius: 4px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; }
.kt-plancard-sub { font: 400 13px Geist, system-ui, sans-serif; color: #5B6470; }

/* Empty-state cards (no org) */
.kt-empty-card { padding: 24px; border: 1px dashed #D4D8DE; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: #FAFBFC; }
.kt-empty-card-icon { width: 40px; height: 40px; border-radius: 20px; background: #FFFFFF; border: 1px solid #EEF0F3; display: flex; align-items: center; justify-content: center; color: #5B6470; }
.kt-empty-card-title { font: 600 15px Geist, system-ui, sans-serif; color: #0A0A0F; }
.kt-empty-card-sub { font: 400 13px Geist, system-ui, sans-serif; color: #5B6470; max-width: 380px; }
.kt-empty-card-actions { display: flex; gap: 8px; margin-top: 6px; }

/* ============================================================
   Profile panel layout cleanup — consistent vertical rhythm,
   section labels given breathing room above their cards.
   Scoped to #settings-panel-profile.
   ============================================================ */
/* Even spacing between sections + clear gap under each section label */
#settings-panel-profile .kt-section-head { margin-bottom: 14px; }
#settings-panel-profile > .kt-identity { margin-bottom: 28px; }
#settings-panel-profile > div[style] { margin-bottom: 28px !important; }

/* Empty-org card: align left & fill width like the other cards
   instead of floating centered and crowding the section label */
#settings-panel-profile .kt-empty-card {
    align-items: flex-start;
    text-align: left;
    padding: 28px;
    gap: 12px;
}
#settings-panel-profile .kt-empty-card-sub { max-width: none; }
#settings-panel-profile .kt-empty-card-actions { margin-top: 10px; }

/* Preference rows */
.kt-group { display: flex; flex-direction: column; border: 1px solid #EEF0F3; border-radius: 14px; overflow: hidden; }
.kt-prefrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.kt-prefrow + .kt-prefrow { border-top: 1px solid #EEF0F3; }
.kt-prefrow-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kt-prefrow-title { font: 600 14px Geist, system-ui, sans-serif; color: #0A0A0F; }
.kt-prefrow-sub { font: 400 12px Geist, system-ui, sans-serif; color: #5B6470; }

/* Segmented control (theme/density) */
.kt-seg { display: inline-flex; padding: 4px; background: #F7F8FA; border: 1px solid #EEF0F3; border-radius: 10px; gap: 4px; }
.kt-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; background: transparent; border-radius: 7px; font: 500 13px Geist, system-ui, sans-serif; color: #5B6470; cursor: pointer; transition: background .15s, color .15s; }
.kt-seg-btn.is-active { background: #FFFFFF; color: #0A0A0F; box-shadow: 0 1px 2px rgba(10,10,15,.05); }

/* Select shell */
.kt-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: #FFFFFF; border: 1px solid #E1E5EA; border-radius: 10px; font: 400 13px Geist, system-ui, sans-serif; color: #0A0A0F; min-width: 200px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.kt-select:focus { outline: none; border-color: #0A0A0F; box-shadow: 0 0 0 3px rgba(10,10,15,.06); }

/* Locked input (English primary) */
.kt-locked { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #F7F8FA; border: 1px solid #EEF0F3; border-radius: 10px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: #5B6470; }
.kt-locked-tag { padding: 1px 6px; background: #FEF3C7; color: #92400E; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.kt-locked-value { color: #0A0A0F; }

/* Timezone pill */
.kt-tz { display: inline-flex; align-items: center; gap: 8px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: #0A0A0F; }
.kt-tz-dot { width: 6px; height: 6px; background: #16A34A; border-radius: 3px; }
.kt-tz-override { background: none; border: none; padding: 0; font: 500 12px Geist, system-ui, sans-serif; color: #5B6470; cursor: pointer; }
.kt-tz-override:hover { color: #0A0A0F; }

/* Regions toggle row */
.kt-region-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.kt-region-row + .kt-region-row { border-top: 1px solid #EEF0F3; }
.kt-region-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kt-region-code { width: 36px; height: 36px; flex-shrink: 0; border-radius: 18px; background: #F7F8FA; border: 1px solid #EEF0F3; display: flex; align-items: center; justify-content: center; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 12px; color: #0A0A0F; text-transform: uppercase; }
.kt-region-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kt-region-name { font: 600 14px Geist, system-ui, sans-serif; color: #0A0A0F; }
.kt-region-sub { font: 400 12px Geist, system-ui, sans-serif; color: #5B6470; }
.kt-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; }
.kt-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.kt-switch-knob { position: absolute; inset: 0; background: #E1E5EA; border-radius: 10px; transition: background .2s ease; }
.kt-switch-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 8px; background: #FFFFFF; transition: transform .2s ease; }
.kt-switch input:checked + .kt-switch-knob { background: #0A0A0F; }
.kt-switch input:checked + .kt-switch-knob::after { transform: translateX(16px); }

/* Branding editor */
.kt-branding-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; }
@media (max-width: 720px) { .kt-branding-grid { grid-template-columns: 1fr; } }
.kt-upload-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 200px; border: 1px dashed #D4D8DE; border-radius: 14px; background: #FAFBFC; cursor: pointer; transition: border-color .15s, background .15s; }
.kt-upload-tile:hover { border-color: #0A0A0F; background: #FFFFFF; }
.kt-upload-tile-title { font: 500 13px Geist, system-ui, sans-serif; color: #0A0A0F; }
.kt-upload-tile-sub { font: 400 12px Geist, system-ui, sans-serif; color: #5B6470; }
.kt-branding-preview { height: 200px; border: 1px solid #EEF0F3; border-radius: 14px; background: #FFFFFF; overflow: hidden; display: flex; flex-direction: column; }
.kt-branding-preview-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #EEF0F3; }
.kt-branding-preview-brand { font: 600 14px Geist, system-ui, sans-serif; letter-spacing: -.01em; color: #0A0A0F; max-height: 28px; }
.kt-branding-preview-brand img { max-height: 28px; }
.kt-branding-preview-links { display: flex; gap: 18px; font: 400 12px Geist, system-ui, sans-serif; color: #5B6470; }
.kt-branding-preview-links span:first-child { color: #0A0A0F; font-weight: 500; }
.kt-branding-preview-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #FAFBFC; }
.kt-branding-preview-title { font: 600 14px Geist, system-ui, sans-serif; color: #0A0A0F; }
.kt-branding-preview-sub { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #5B6470; }
.kt-branding-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kt-branding-actions-note { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #5B6470; }
.kt-branding-actions-row { display: flex; gap: 10px; }
.kt-btn-ghost { padding: 11px 16px; background: #FFFFFF; border: 1px solid #EEF0F3; border-radius: 10px; font: 500 13px Geist, system-ui, sans-serif; color: #0A0A0F; cursor: pointer; transition: border-color .15s; }
.kt-btn-ghost:hover { border-color: #0A0A0F; }
.kt-btn-dark { padding: 11px 22px; background: var(--color-primary); color: #FFFFFF; border: none; border-radius: 10px; font: 500 13px Geist, system-ui, sans-serif; cursor: pointer; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.kt-btn-dark:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), .22); }

/* WHITE-LABEL header chip */
.kt-chip-whitelabel { padding: 2px 8px; background: #0A0A0F; color: #FFFFFF; border-radius: 4px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; letter-spacing: .08em; }

/* Configuration panels — list-loading + mono-tag */
.kt-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 32px 0; color: #5B6470; font: 400 13px Geist, system-ui, sans-serif; }
.kt-mono-tag { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #5B6470; padding: 1px 6px; background: #F7F8FA; border-radius: 4px; }
.kt-row-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #F7F8FA; border: 1px solid #EEF0F3; color: #0A0A0F; }
.kt-row-icon.is-blue   { background: #EAF2FF; color: #3253FF; border-color: transparent; }
.kt-row-icon.is-amber  { background: #FEF3C7; color: #92400E; border-color: transparent; }
.kt-row-icon.is-red    { background: #FFE5E5; color: #DC2626; border-color: transparent; }
.kt-row-icon.is-green  { background: #E8F5EC; color: #15803D; border-color: transparent; }
.kt-status-pill { padding: 5px 10px; border-radius: 6px; font: 500 12px Geist, system-ui, sans-serif; flex-shrink: 0; }
.kt-status-pill.is-active { background: #E8F5EC; color: #15803D; }
.kt-status-pill.is-draft  { background: #FEF3C7; color: #92400E; }
.kt-status-pill.is-off    { background: #F7F8FA; color: #5B6470; border: 1px solid #EEF0F3; }

/* ============================================================
   kt-* modal system — used by create-org, create-schema, etc.
   ============================================================ */
.kt-modal-overlay { position: fixed; inset: 0; background: rgba(15,17,21,.62); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(6px); padding: 24px; }
.kt-modal { width: 520px; max-width: 100%; max-height: calc(100vh - 48px); overflow: auto; background: #FFFFFF; color: #0A0A0F; border: 1px solid #EEF0F3; border-radius: 18px; box-shadow: 0 32px 80px rgba(0,0,0,.32); font-family: Geist, ui-sans-serif, system-ui, sans-serif; display: flex; flex-direction: column; }
.kt-modal.is-wide { width: 720px; }
.kt-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 32px 20px; border-bottom: 1px solid #EEF0F3; }
.kt-modal-head-text { display: flex; flex-direction: column; gap: 6px; }
.kt-modal-eyebrow { font: 600 11px Geist, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5B6470; }
.kt-modal-title { font: 600 22px Geist, system-ui, sans-serif; letter-spacing: -.015em; color: #0A0A0F; margin: 0; line-height: 26px; }
.kt-modal-sub { font: 400 13px Geist, system-ui, sans-serif; color: #5B6470; line-height: 20px; margin: 0; }
.kt-modal-close { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid #EEF0F3; background: #FFFFFF; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #5B6470; font: 400 18px Geist, system-ui, sans-serif; transition: border-color .15s, color .15s; padding: 0; }
.kt-modal-close:hover { border-color: #0A0A0F; color: #0A0A0F; }
.kt-modal-body { padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.kt-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 32px 24px; border-top: 1px solid #EEF0F3; background: #FAFBFC; border-radius: 0 0 18px 18px; }

.kt-field { display: flex; flex-direction: column; gap: 6px; }
.kt-field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kt-field-label { font: 600 11px Geist, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5B6470; }
.kt-field-optional { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #5B6470; text-transform: none; letter-spacing: 0; font-weight: 400; }
.kt-field-helper { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #5B6470; }
.kt-text-input { padding: 11px 14px; border: 1px solid #E1E5EA; border-radius: 10px; background: #FFFFFF; font: 400 14px Geist, system-ui, sans-serif; color: #0A0A0F; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; box-sizing: border-box; }
.kt-text-input:focus { border-color: #0A0A0F; box-shadow: 0 0 0 3px rgba(10,10,15,.06); }
.kt-text-input::placeholder { color: #9AA0A6; }

.kt-hint { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #F7F8FA; border: 1px solid #EEF0F3; border-radius: 12px; }
.kt-hint-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: #FFFFFF; border: 1px solid #EEF0F3; display: flex; align-items: center; justify-content: center; color: #5B6470; }
.kt-hint-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kt-hint-title { font: 600 13px Geist, system-ui, sans-serif; color: #0A0A0F; }
.kt-hint-sub { font: 400 12px Geist, system-ui, sans-serif; color: #5B6470; line-height: 18px; }

.kt-form-error { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #FFF4F4; border: 1px solid #FBCFCF; border-radius: 8px; color: #DC2626; font: 400 13px Geist, system-ui, sans-serif; }

/* Danger button variant — for "Leave organization", destructive actions */
.kt-btn-danger { padding: 11px 16px; background: #FFFFFF; border: 1px solid #FBCFCF; border-radius: 10px; font: 500 13px Geist, system-ui, sans-serif; color: #DC2626; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.kt-btn-danger:hover { background: #FFF4F4; border-color: #DC2626; }
/* Completion email controls */
.completion-email-control {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 220px;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.completion-email-control:hover {
    border-color: rgba(var(--color-primary-rgb), 0.45);
    background: var(--bg-hover);
}

.completion-email-control > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.completion-email-switch {
    position: relative;
    width: 30px;
    height: 18px;
    flex: 0 0 30px;
    border-radius: 999px;
    background: #D6D3D1;
    transition: background var(--transition-fast);
}

.completion-email-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: transform var(--transition-fast);
}

.completion-email-control > input:checked + .completion-email-switch {
    background: var(--color-primary);
}

.completion-email-control > input:checked + .completion-email-switch::after {
    transform: translateX(12px);
}

.completion-email-control > input:focus-visible + .completion-email-switch {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.completion-email-control > input:disabled ~ * {
    opacity: 0.58;
}

.completion-email-control:has(input:disabled) {
    cursor: default;
}

.completion-email-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.25;
}

.completion-email-title {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.completion-email-address {
    max-width: 210px;
    color: var(--text-muted);
    font-size: 10.5px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.completion-email-control-compact {
    min-width: 205px;
    padding: 6px 9px;
}

.completion-email-control-panel {
    width: 100%;
    margin-top: 12px;
}

.processing-run-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    /* Its own card: it sits in a gap below the header card, so the old
       square, top-borderless "attached" style read as a broken slab. */
    border: 1px solid rgba(var(--color-primary-rgb), 0.22);
    border-radius: 12px;
    background: rgba(var(--color-primary-rgb), 0.055);
}

.processing-run-notice-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.35;
}

.processing-run-notice-title {
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
}

.processing-run-notice-sub {
    color: var(--text-muted);
    font-size: 11px;
}

.batch-processing-notification-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 10px 0 14px;
}

.batch-processing-notification-message {
    color: var(--text-secondary);
    font-size: 12.5px;
}

@media (max-width: 760px) {
    .processing-run-notice,
    .batch-processing-notification-row {
        align-items: stretch;
        flex-direction: column;
    }

    .completion-email-control,
    .completion-email-control-compact {
        width: 100%;
        min-width: 0;
    }
}

/* ---- Capture first-open welcome (customer onboarding) ---- */
.capture-welcome {
    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 24px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 14px;
    overflow: hidden;
    animation: capture-welcome-in 320ms ease-out;
}
@keyframes capture-welcome-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .capture-welcome { animation: none; } }
.capture-welcome-accent { width: 4px; flex-shrink: 0; background: var(--color-primary); }
.capture-welcome-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 48px 22px 24px; }
.capture-welcome-eyebrow {
    font: 600 11px/16px var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.capture-welcome-title { margin: 0; font: 600 18px/24px var(--font-body); letter-spacing: -0.01em; color: #18181B; }
.capture-welcome-text { margin: 0; max-width: 820px; font: 400 14px/21px var(--font-body); color: #52525B; }
.capture-welcome-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.capture-welcome-btn {
    padding: 9px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--color-primary);
    color: #FFFFFF;
    font: 600 13px/18px var(--font-body);
    cursor: pointer;
}
.capture-welcome-btn:hover { background: var(--color-primary-dark); }
.capture-welcome-link {
    padding: 0;
    border: 0;
    background: none;
    color: #737373;
    font: 500 13px/18px var(--font-body);
    cursor: pointer;
}
.capture-welcome-link:hover { color: #18181B; }
.capture-welcome-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #A3A3A3;
    font: 400 20px/1 var(--font-body);
    cursor: pointer;
}
.capture-welcome-close:hover { background: #F5F5F4; color: #18181B; }
[data-theme="dark"] .capture-welcome { background: #1A1F26; border-color: #2A313B; }
[data-theme="dark"] .capture-welcome-title { color: #F4F4F5; }
[data-theme="dark"] .capture-welcome-text { color: #A1A1AA; }
[data-theme="dark"] .capture-welcome-close:hover { background: #262C35; color: #F4F4F5; }
@media (max-width: 640px) {
    .capture-welcome-body { padding: 18px 40px 18px 18px; }
    .capture-welcome-actions { flex-wrap: wrap; gap: 12px; }
}

/* ---- Settings → Admin → Org Detail: danger zone ---- */
.admin-danger-zone { display: flex; gap: 32px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 32px; padding: 20px 22px; border: 1px solid #F3C7C7; border-radius: 12px; background: #FEF6F6; }
.admin-danger-text { flex: 1 1 320px; min-width: 0; }
.admin-danger-title { margin: 0 0 6px; font: 600 15px/20px var(--font-body); color: #991B1B; }
.admin-danger-sub { margin: 0; font: 400 13px/19px var(--font-body); color: #7F1D1D; }
.admin-danger-confirm { flex: 1 1 320px; min-width: 0; }
.admin-danger-label { display: block; margin-bottom: 6px; font: 400 13px/18px var(--font-body); color: #52525B; }
.admin-danger-row { display: flex; gap: 8px; }
.admin-danger-input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #E4B4B4; border-radius: 8px; background: #FFFFFF; font: 400 14px var(--font-body); color: #18181B; }
.admin-danger-input:focus { outline: none; border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.admin-danger-btn { padding: 9px 16px; border: 1px solid #DC2626; border-radius: 8px; background: #DC2626; color: #FFFFFF; font: 600 13px var(--font-body); white-space: nowrap; cursor: pointer; transition: background .15s ease, opacity .15s ease; }
.admin-danger-btn:hover:not(:disabled) { background: #B91C1C; border-color: #B91C1C; }
.admin-danger-btn:disabled { opacity: .45; cursor: not-allowed; }
.admin-danger-msg { margin: 8px 0 0; min-height: 18px; font: 400 13px/18px var(--font-body); color: #B91C1C; }
[data-theme="dark"] .admin-danger-zone { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .35); }
[data-theme="dark"] .admin-danger-title { color: #FCA5A5; }
[data-theme="dark"] .admin-danger-sub { color: #FECACA; }
[data-theme="dark"] .admin-danger-label { color: #A1A1AA; }
[data-theme="dark"] .admin-danger-input { background: #1A1F26; border-color: rgba(220, 38, 38, .4); color: #F4F4F5; }

/* ---- Settings → Admin → Org Detail: plan invite ---- */
.admin-plan-invite-sub { margin: 0 0 12px; font: 400 13px/19px var(--font-body); color: var(--text-secondary); max-width: 720px; }
.admin-plan-invite { display: flex; flex-direction: column; gap: 12px; }
.admin-plan-invite-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.admin-plan-invite-fields label { display: flex; flex-direction: column; gap: 6px; font: 500 12.5px/16px var(--font-body); color: var(--text-secondary); }
.admin-plan-invite-fields select { padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font: 400 14px var(--font-body); min-width: 0; }
.admin-plan-invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-plan-invite-result { display: flex; gap: 8px; }
.admin-plan-invite-result input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font: 400 13px var(--font-mono, ui-monospace, monospace); }
.admin-plan-invite-msg { min-height: 18px; font: 400 13px/18px var(--font-body); color: var(--text-secondary); }
.admin-plan-invite-msg.is-error { color: #B91C1C; }
@media (max-width: 900px) { .admin-plan-invite-fields { grid-template-columns: 1fr; } }

/* ---- Results on narrow screens ---- */
@media (max-width: 900px) {
    /* The 248px sidebar rule above is more specific than the generic stacked
       rule, so the document list stayed a half-width column beside empty space. */
    #results-section .results-layout { flex-direction: column; min-height: 0; }
    #results-section .documents-sidebar { width: 100%; max-height: 240px; border-right: 0; border-bottom: 1px solid #E7E5E4; }
    [data-theme="dark"] #results-section .documents-sidebar { border-bottom-color: #30363D; }
    /* One-line subtitles were cut off with an ellipsis. */
    .section-page-subtitle, .capture-subtitle { white-space: normal; overflow: visible; text-overflow: clip; }
    .processing-run-notice { flex-direction: column; align-items: stretch; gap: 12px; }
    /* On Results the wrapped second line runs under the fixed page-panel toggle. */
    #results-section .section-page-subtitle { display: none; }
}

/* ---- Settings → Admin → Org Detail: subscription ---- */
.admin-subscription { display: flex; gap: 32px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 32px; padding: 20px 22px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-primary); }
.admin-subscription-text { flex: 1 1 380px; min-width: 0; }
.admin-subscription-title { margin: 0 0 6px; font: 600 15px/20px var(--font-body); color: var(--text-primary); }
.admin-subscription-sub { margin: 0; font: 400 14px/20px var(--font-body); color: var(--text-primary); }
.admin-subscription-note { margin: 6px 0 0; font: 400 13px/19px var(--font-body); color: var(--text-secondary); }
.admin-subscription-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.admin-subscription-btn { padding: 9px 16px; border: 1px solid #DC2626; border-radius: 8px; background: #FFFFFF; color: #B91C1C; font: 600 13px var(--font-body); white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; }
.admin-subscription-btn:hover:not(:disabled) { background: #DC2626; color: #FFFFFF; }
.admin-subscription-btn:disabled { opacity: .5; cursor: not-allowed; }
.admin-subscription + .admin-danger-zone { margin-top: 16px; }
[data-theme="dark"] .admin-subscription-btn { background: transparent; color: #FCA5A5; border-color: rgba(220, 38, 38, .6); }

/* ---- Settings → Profile: rename organization ---- */
.kt-org-rename { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.kt-org-rename-input { flex: 1 1 260px; min-width: 0; padding: 10px 12px; border: 1px solid #E4E7EC; border-radius: 10px; background: #FFFFFF; font: 400 14px Geist, system-ui, sans-serif; color: #0A0A0F; }
.kt-org-rename-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .18); }
.kt-org-rename-msg { flex-basis: 100%; min-height: 0; font: 400 13px/18px Geist, system-ui, sans-serif; color: #B91C1C; }
[data-theme="dark"] .kt-org-rename-input { background: #1A1F26; border-color: #2A313B; color: #F4F4F5; }

/* Join / plan-link page: an empty status line still took a slot in the column,
   doubling the gap above the message box. */
#co-join-status:empty, #co-join-error:empty { display: none; }

/* Capture: Paper Documents / Applications / Combine / Custom workspaces. */
#home-section.capture-section.active {
    --capture-surface: #fff;
    --capture-border: #E7E5E4;
    --capture-muted: #737373;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 56px;
    background: #FAFAFA;
}
#home-section .capture-heading { margin: 0; }
#home-section .capture-title { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; }
#home-section .capture-toolbar-row { margin: 0; border-bottom: 1px solid var(--capture-border); }
#home-section .capture-mode-toolbar { padding: 0; gap: 28px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#home-section .capture-mode-btn { padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-size: 14px; line-height: 20px; color: var(--capture-muted); box-shadow: none; }
#home-section .capture-mode-btn svg { display: none; }
#home-section .capture-mode-btn.selected { color: var(--text-primary); border-bottom-color: currentColor; background: transparent; font-weight: 500; box-shadow: none; }
#home-section .capture-mode-btn:focus-visible { outline: 2px solid #418D62; outline-offset: 4px; }
#home-section .capture-mode-description { margin: 0; font-size: 14px; line-height: 22px; max-width: none; color: var(--text-secondary); }
#home-section .studio-layout { display: flex; flex-direction: column; gap: 24px; width: 100%; margin: 0; }
#home-section .capture-dropzone { min-height: 340px; padding: 36px 24px; border: 1.5px dashed #D6D3D1; border-radius: 16px; background: var(--capture-surface); box-shadow: none; }
#home-section .dropzone-content { gap: 14px; }
#home-section .dropzone-icon { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: #E8F5EC; color: #418D62; display: flex; align-items: center; justify-content: center; }
#home-section .dropzone-icon svg { width: 20px; height: 20px; }
#home-section .dropzone-text { margin: 0; font-size: 17px; line-height: 24px; font-weight: 500; }
#home-section .dropzone-formats { margin: 0; font-size: 12px; line-height: 18px; color: var(--capture-muted); }
#home-section .dropzone-format-badges { display: none; }
#home-section .custom-doctype-chip { padding: 7px 10px; border: 1px solid var(--capture-border); border-radius: 8px; color: var(--text-secondary); background: var(--capture-surface); font: inherit; cursor: pointer; }
#home-section .file-queue-container { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
#home-section .file-queue-header { padding: 18px 20px; border: 1px solid var(--capture-border); border-radius: 16px 16px 0 0; background: var(--capture-surface); }
#home-section .file-queue-header h3 { font-size: 14px; font-weight: 600; }
#home-section .file-queue-subtitle { font-size: 12px; }
#home-section .file-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--capture-border); border-top: 0; border-radius: 0 0 16px 16px; overflow: hidden; background: var(--capture-surface); }
#home-section .file-list-item { padding: 14px 20px; gap: 14px; border-bottom: 1px solid var(--capture-border); background: transparent; }
#home-section .file-list-item:last-child { border-bottom: 0; }
#home-section .file-name { font-size: 14px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }
#home-section .file-size { font-size: 12px; line-height: 16px; color: var(--capture-muted); }
#home-section .doc-type-picker-trigger { border: 0; border-radius: 16px; padding: 5px 10px; background: #E8F5EC; color: #2F6B49; font-size: 12px; }
#home-section .file-remove { flex-shrink: 0; width: 28px; height: 28px; background: transparent; border: 0; color: var(--capture-muted); cursor: pointer; font-size: 20px; }
#home-section .add-more-strip { margin-top: 16px; min-height: 52px; border: 1px dashed #D6D3D1; border-radius: 12px; background: transparent; color: var(--capture-muted); font-size: 13px; }
#home-section .process-bar { position: static; margin: 20px 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
#home-section #process-btn { border-radius: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; }
/* Saved custom types: one quiet row under the dropzone, like "Or try a sample". */
#home-section .custom-doctype-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; border: 0; background: none; font-size: 13px; color: #737373; }
#home-section #custom-doctype-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#home-section .custom-doctype-chip { display: inline-flex; align-items: center; gap: 6px; padding: 12px 14px; border: 1px solid #E7E5E4; border-radius: 10px; background: #FFFFFF; color: #18181B; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer; }
#home-section .custom-doctype-chip:hover { border-color: #D6D3D1; }
#home-section .custom-doctype-chip-dot { display: none; }
#home-section .custom-doctype-chip.selected { border-color: #418D62; background: #E8F5EC; color: #2F6B49; }
#home-section .custom-sample-workspace { border: 1px solid var(--capture-border); border-radius: 16px; background: var(--capture-surface); overflow: hidden; }
#home-section .custom-sample-review-banner { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--capture-border); border-radius: 0; background: transparent; font-size: 12px; }
#home-section .custom-sample-review-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; height: auto; min-height: 460px; }
#home-section .custom-sample-preview-pane { border: 0; border-right: 1px solid var(--capture-border); border-radius: 0; min-width: 0; }
#home-section .custom-sample-preview-stage { height: 440px; overflow: auto; }
#home-section .custom-sample-form-pane { padding: 24px; min-width: 0; }
#home-section .custom-sample-input { width: 100%; min-width: 0; }
#home-section .custom-sample-fields { max-height: 320px; overflow-y: auto; }
#home-section .custom-fields-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
#home-section .custom-fields-section h3 { margin: 14px 0 8px; font-size: 12px; font-weight: 500; text-transform: capitalize; color: var(--capture-muted); }
#home-section .custom-field-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 28px; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--capture-border); align-items: center; }
#home-section .custom-field-row select { min-width: 0; padding: 7px; border: 0; border-radius: 6px; color: var(--text-secondary); background: var(--bg-muted); font: inherit; font-size: 12px; }
#home-section .custom-sample-review-actions { flex-wrap: wrap; justify-content: flex-end; margin-top: 20px; }
#home-section .custom-sample-review-actions .btn-primary { border-radius: 10px; }
[data-theme="dark"] #home-section.capture-section.active { --capture-surface: #202423; --capture-border: #353B38; --capture-muted: #A3AAA6; background: transparent; }
[data-theme="dark"] #home-section .capture-dropzone, [data-theme="dark"] #home-section .add-more-strip { border-color: var(--capture-border); }
@media (max-width: 800px) {
    #home-section.capture-section.active { padding: 28px 24px; }
    #home-section .capture-mode-toolbar { gap: 24px; }
    #home-section .file-list-item { flex-wrap: wrap; }
    #home-section .file-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
    #home-section .custom-sample-review-split { grid-template-columns: minmax(0, 1fr); }
    #home-section .custom-sample-preview-pane { border-right: 0; border-bottom: 1px solid var(--capture-border); }
    #home-section .custom-sample-preview-stage { height: 300px; }
}
@media (max-width: 480px) {
    #home-section.capture-section.active { padding: 24px 16px; }
    #home-section .capture-mode-toolbar { gap: 20px; width: 100%; justify-content: space-between; }
    #home-section .capture-mode-btn { font-size: 13px; }
    #home-section .capture-dropzone { min-height: 280px; }
    #home-section .custom-sample-form-pane { padding: 16px; }
    #home-section .custom-field-row { grid-template-columns: minmax(0, 1fr) 82px 24px; gap: 4px; }
}
.main-content:has(#home-section.active) { padding: 0; }
#home-section.capture-section.active { width: 100%; max-width: 1120px; }
#home-section #combined-doc-type {
    width: auto; max-width: 240px; padding: 4px 26px 4px 10px;
    border: 0; border-radius: 999px;
    background: #E8F5EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%232F6B49' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none; -webkit-appearance: none;
    color: #2F6B49; font-size: 12px; font-weight: 500; line-height: 16px; cursor: pointer;
}
#home-section .dropzone-formats[hidden] { display: none; }

/* ---- Custom: review a suggested type (Paper "Custom — Sample added") ---- */
#home-section .custom-sample-review-split { min-height: 0; }
#home-section .custom-sample-preview-pane { background: #FAFAF9; }
#home-section .custom-sample-preview-head { padding: 12px 20px; font-size: 12px; color: #737373; }
#home-section .custom-sample-form-pane { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
#home-section .custom-sample-form-pane > div { margin: 0 !important; }
#home-section .custom-sample-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #3F3F46; }
#home-section #custom-sample-display-name { height: 44px; padding: 0 14px; border: 1px solid #D6D3D1; border-radius: 10px; background: #FFFFFF; font-size: 15px; color: #18181B; }
#home-section .custom-add-field-link { padding: 0; border: 0; background: none; color: #418D62; font-size: 13px; font-weight: 500; cursor: pointer; }
#home-section .custom-add-field-link:hover { color: #2F6B49; }
#home-section .custom-sample-fields { max-height: none; overflow: visible; border: 1px solid #E7E5E4; border-radius: 10px; background: #FFFFFF; }
#home-section .custom-fields-section h3 { margin: 0; padding: 10px 14px 4px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #A8A29E; }
#home-section .custom-fields-section:not(:first-child) h3 { border-top: 1px solid #F0EFEE; padding-top: 12px; }
#home-section .custom-field-row { grid-template-columns: minmax(0, 1fr) auto 24px; gap: 10px; padding: 4px 8px 4px 4px; border-bottom: 1px solid #F0EFEE; }
#home-section .custom-fields-section .custom-field-row:last-child { border-bottom: 0; }
#home-section .custom-field-row .custom-sample-input { height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 14px; color: #18181B; text-transform: capitalize; }
#home-section .custom-field-row .custom-sample-input:hover { border-color: #E7E5E4; }
#home-section .custom-field-row .custom-sample-input:focus { border-color: #418D62; outline: none; background: #FFFFFF; text-transform: none; }
#home-section .custom-field-row select {
    padding: 3px 22px 3px 10px; border: 0; border-radius: 6px;
    background: #F0EFEE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%2357534E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 7px center;
    appearance: none; -webkit-appearance: none;
    color: #57534E; font-size: 11px; font-weight: 500; line-height: 16px; cursor: pointer;
}
#home-section .custom-field-row select:disabled { cursor: default; background-image: none; padding-right: 10px; }
#home-section .custom-field-row .file-remove { width: 24px; height: 24px; font-size: 16px; color: #A8A29E; }
#home-section .custom-sample-review-actions { display: flex; align-items: center; justify-content: flex-start; gap: 20px; margin-top: 4px; }
#home-section .custom-sample-retry-link { padding: 0; border: 0; background: none; color: #737373; font-size: 13px; cursor: pointer; }
#home-section .custom-sample-retry-link:hover { color: #18181B; }
#home-section .custom-field-row .file-remove { align-self: center; margin: 0; }
#home-section #custom-sample-workspace[data-review="true"] ~ #custom-doctype-picker,
#home-section:has(#custom-sample-workspace[data-review="true"]:not([style*="none"])) #custom-doctype-picker { display: none !important; }

/* Queue header — Paper "List header": count left, quiet text actions right. */
#home-section .file-queue-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #F0EFEE; }
#home-section .file-queue-header-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
#home-section .file-queue-header h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; color: #18181B; }
#home-section .file-queue-subtitle { font-size: 12px; color: #B45309; }
#home-section .file-queue-subtitle:empty { display: none; }
#home-section .file-queue-actions { display: flex; align-items: center; gap: 20px; }
#home-section .file-queue-text-btn { padding: 0; border: 0; background: none; color: #737373; font-size: 13px; line-height: 18px; cursor: pointer; }
#home-section .file-queue-text-btn:hover { color: #18181B; }

/* ================================================================
   Capture v2 (Paper "Capture v2 — …", "Combine B — Composer button",
   "Combine — Result in normal flow"): intro row, demo strip + preview,
   classification states, combine composer, post-submit run card.
   ================================================================ */

/* Intro row: description left, two equal secondary buttons right. */
#home-section .capture-intro-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#home-section .capture-intro-row .capture-mode-description { color: #3F3F46; }
#home-section .capture-intro-actions { display: flex; align-items: center; gap: 8px; }
#home-section .capture-intro-actions[hidden] { display: none; }
#home-section .capture-intro-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #D6D3D1; border-radius: 8px; background: var(--capture-surface); color: #18181B; font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer; }
#home-section .capture-intro-btn svg { color: #57534E; flex-shrink: 0; }
#home-section .capture-intro-btn:hover { border-color: #A8A29E; }
#home-section .capture-intro-btn:focus-visible { outline: 2px solid #418D62; outline-offset: 2px; }
#home-section .capture-intro-chevron { transition: transform .15s ease; }
#home-section #demo-carousel-toggle[aria-expanded="true"] .capture-intro-chevron { transform: rotate(180deg); }
#home-section .capture-intro-btn.is-pressed { border-color: #418D62; background: #EEF5F0; color: #2F6B49; }

/* Demo strip: thumbnails only, native horizontal scroll, pushes the dropzone down. */
#home-section .demo-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
#home-section .demo-strip[hidden] { display: none; }
#home-section .demo-strip-card { display: flex; flex-direction: column; gap: 8px; flex: 0 0 136px; width: 136px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; scroll-snap-align: start; }
#home-section .demo-strip-thumb { display: flex; align-items: flex-start; justify-content: center; width: 136px; height: 172px; overflow: hidden; border: 1px solid #E7E5E4; border-radius: 6px; background: #FFFFFF; color: #A8A29E; font-size: 11px; }
#home-section .demo-strip-thumb canvas, #home-section .demo-strip-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
#home-section .demo-strip-card:hover .demo-strip-thumb { border-color: #A8A29E; }
#home-section .demo-strip-card:focus-visible { outline: none; }
#home-section .demo-strip-card:focus-visible .demo-strip-thumb { outline: 2px solid #418D62; outline-offset: 2px; }
#home-section .demo-strip-name { display: block; width: 136px; font-size: 12px; line-height: 16px; color: #57534E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home-section .capture-combine-hint { display: flex; align-items: center; gap: 8px; margin: -8px 0 0; font-size: 12px; line-height: 16px; color: #57534E; }
#home-section .capture-combine-hint svg { color: #737373; flex-shrink: 0; }
#home-section .capture-combine-hint[hidden] { display: none; }
/* With files queued and nothing open above them, the empty workspace must not add a second gap. */
#home-section .studio-layout:not(:has(> .demo-strip:not([hidden]), > #dropzone:not([style*="none"]), > #multi-image-type-selector[data-open="true"], > #custom-sample-workspace:not([style*="none"]), > #custom-doctype-picker:not([style*="none"]))) { display: none; }

/* Demo preview modal: header + one scrolling column of pages. */
.demo-preview-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(24, 24, 27, .45); }
.demo-preview-modal.active { display: flex; }
.demo-preview-content { display: flex; flex-direction: column; width: min(620px, 100%); max-height: min(700px, calc(100vh - 48px)); overflow: hidden; border-radius: 16px; background: #FFFFFF; box-shadow: 0 24px 48px rgba(24, 24, 27, .24); }
.demo-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px 16px; border-bottom: 1px solid #F0EFEE; }
.demo-preview-heading { min-width: 0; }
.demo-preview-header h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; color: #18181B; overflow-wrap: anywhere; }
.demo-preview-meta { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: #737373; }
.demo-preview-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.demo-preview-actions .btn-primary { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.demo-preview-close { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: #57534E; font-size: 22px; line-height: 1; cursor: pointer; }
.demo-preview-close:hover { background: #F5F5F4; color: #18181B; }
.demo-preview-body { position: relative; flex: 1; min-height: 0; display: flex; background: #F5F5F4; }
.demo-preview-pages { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 24px 56px; overflow-y: auto; }
.demo-preview-page { display: block; width: 100%; height: auto; border-radius: 2px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(24, 24, 27, .12); cursor: zoom-in; }
img.demo-preview-page { cursor: default; }
.demo-preview-loading { margin: auto; font-size: 13px; color: #737373; }
.demo-preview-page-pill { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(24, 24, 27, .78); color: #FFFFFF; font-size: 12px; font-weight: 500; line-height: 16px; pointer-events: none; }
.demo-preview-page-pill[hidden] { display: none; }

/* File list rows and type states. */
#home-section .file-list-item { padding: 12px 20px; border-bottom-color: #F0EFEE; }
#home-section .file-list-item .file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; }
#home-section .password-input-container { gap: 0; width: 200px; height: 30px; overflow: hidden; border: 1px solid #D6D3D1; border-radius: 8px; background: #FFFFFF; }
#home-section .password-input-container.has-error { border-color: #B45309; }
#home-section .password-input { flex: 1; width: auto; min-width: 0; height: 100%; padding: 0 10px; border: 0; border-radius: 0; background: transparent; font-size: 12px; }
#home-section .password-input:focus, #home-section .password-input.has-password, #home-section .password-input.password-invalid, #home-section .password-input.password-valid { border: 0; background: transparent; box-shadow: none; }
#home-section .btn-validate-password { height: 100%; padding: 0 10px; border-left: 1px solid #E7E5E4; border-radius: 0; background: transparent; color: #418D62; font-size: 12px; font-weight: 500; }
#home-section .btn-validate-password:hover:not(:disabled) { transform: none; box-shadow: none; background: #EEF5F0; }
#home-section .password-checking, #home-section .password-check { padding: 0 10px; font-size: 12px; color: #737373; }
#home-section .file-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
#home-section .file-list-item.is-combined { background: #F6FAF7; }
#home-section .file-list-item.is-suggested { box-shadow: inset 2px 0 0 #8FC6A4; }
#home-section .doc-type-picker-trigger { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 220px; padding: 4px 8px 4px 10px; border: 1px solid transparent; border-radius: 999px; background: #E8F5EC; color: #2F6B49; font-size: 12px; font-weight: 500; line-height: 16px; }
#home-section .doc-type-picker-trigger:hover { border-color: #8FC6A4; background: #E8F5EC; }
#home-section .doc-type-picker-trigger .doc-type-arrow { color: currentColor; }
#home-section .doc-type-picker-trigger.is-detecting { gap: 6px; border: 1px dashed #D6D3D1; background: var(--capture-surface); color: #57534E; }
#home-section .doc-type-picker-trigger.is-detecting .classify-spinner { width: 10px; height: 10px; border-width: 1.5px; }
#home-section .doc-type-picker-trigger.is-unsure { padding-block: 3px; border-color: #F3D9A4; background: #FBF1DC; color: #92400E; }
#home-section .doc-type-picker-trigger.is-unknown { gap: 6px; border-color: #D6D3D1; background: var(--capture-surface); color: #18181B; }
#home-section .doc-type-picker-trigger.is-unknown .doc-type-arrow { color: #57534E; }
#home-section .doc-type-dot { width: 6px; height: 6px; border-radius: 3px; background: #D97706; flex-shrink: 0; }
#home-section .doc-type-state { font-size: 12px; line-height: 16px; color: #A8A29E; white-space: nowrap; }
#home-section .doc-type-state.is-unsure { color: #92400E; }
#home-section .capture-row-link { padding: 3px 8px; border: 0; border-radius: 6px; background: none; color: #418D62; font: inherit; font-size: 12px; font-weight: 500; line-height: 16px; cursor: pointer; white-space: nowrap; }
#home-section .capture-row-link:hover { background: #EEF5F0; color: #2F6B49; }
#home-section .capture-row-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #D6D3D1; border-radius: 8px; background: var(--capture-surface); color: #18181B; font: inherit; font-size: 12px; font-weight: 500; line-height: 16px; cursor: pointer; white-space: nowrap; }
#home-section .capture-row-btn svg { color: #57534E; }
#home-section .capture-row-btn:hover { border-color: #A8A29E; }
#home-section .capture-row-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: #57534E; }
#home-section .capture-row-status .classify-spinner { width: 10px; height: 10px; border-width: 1.5px; }

/* Header: detection progress (2px) under the count. */
#home-section .file-queue-header { position: relative; flex-wrap: wrap; }
#home-section .file-queue-subtitle { font-size: 13px; line-height: 18px; color: #737373; }
#home-section .file-queue-subtitle.is-blocked { color: #B45309; }
#home-section .file-queue-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
#home-section .file-queue-progress[hidden] { display: none; }
#home-section .file-queue-progress > span { display: block; height: 100%; width: 0; background: #418D62; transition: width .3s ease; }

/* Process row: button then helper copy. */
#home-section .process-bar { display: flex; align-items: center; justify-content: flex-start; gap: 20px; margin: 0; padding: 8px 0 0; flex-wrap: wrap; }
#home-section .process-bar-helper { margin: 0; font-size: 12px; line-height: 16px; color: #737373; }
#home-section .process-bar-helper.is-error { color: #B45309; }
#home-section .process-bar-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
#home-section #process-btn { display: inline-flex; align-items: center; gap: 8px; }
#home-section #process-btn:disabled { opacity: .45; }
#home-section #process-btn.is-detecting { opacity: 1; border-color: transparent; background: #E7E5E4; color: #57534E; }
#home-section #process-btn .classify-spinner { width: 12px; height: 12px; border-width: 1.5px; }

/* Combine suggestion card, inline above its group. */
#home-section .combine-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid #F0EFEE; background: #F6FAF7; flex-wrap: wrap; }
#home-section .combine-suggestion-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#home-section .combine-suggestion-copy strong { font-size: 13px; font-weight: 600; line-height: 18px; color: #18181B; }
#home-section .combine-suggestion-copy span { font-size: 12px; line-height: 16px; color: #737373; overflow-wrap: anywhere; }
#home-section .combine-suggestion-actions { display: flex; align-items: center; gap: 8px; }
#home-section .combine-suggestion-actions .btn-primary { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; }

/* Combine composer. */
#home-section .capture-combine-card { width: 100%; padding: 0; border: 1.5px solid #418D62; border-radius: 16px; background: var(--capture-surface); box-shadow: 0 0 0 4px #E8F5EC; }
#home-section .combine-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 16px 20px; border-bottom: 1px solid #F0EFEE; }
#home-section .combine-card-heading { min-width: 0; }
#home-section .combine-card-heading h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: #18181B; }
#home-section .combine-order-hint { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: #737373; }
#home-section .combine-page-strip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin: 0; padding: 24px 20px 20px; list-style: none; }
#home-section .combine-page { position: relative; display: flex; flex-direction: column; gap: 8px; width: 112px; cursor: grab; }
#home-section .combine-page-thumb { display: flex; align-items: center; justify-content: center; width: 112px; height: 144px; padding: 0; overflow: hidden; border: 1px solid #E7E5E4; border-radius: 8px; background: #F5F5F4; cursor: grab; }
#home-section .combine-page-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
#home-section .combine-page-thumb:focus-visible { outline: 2px solid #418D62; outline-offset: 2px; }
#home-section .combine-page-kind { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #A8A29E; }
#home-section .combine-page-remove { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid #E7E5E4; border-radius: 999px; background: #FFFFFF; color: #737373; font-size: 13px; line-height: 1; cursor: pointer; }
#home-section .combine-page-remove:hover { color: #18181B; border-color: #A8A29E; }
#home-section .combine-page-caption { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; color: #3F3F46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home-section .combine-page-caption b { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; color: #418D62; }
#home-section .combine-page.is-dragging { opacity: .45; }
#home-section .combine-page.drop-before::before, #home-section .combine-page.drop-after::after { content: ''; position: absolute; top: 0; height: 144px; width: 2px; border-radius: 2px; background: #418D62; }
#home-section .combine-page.drop-before::before { left: -9px; }
#home-section .combine-page.drop-after::after { right: -9px; }
#home-section .combine-page-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 112px; height: 144px; border: 1.5px dashed #D6D3D1; border-radius: 8px; background: transparent; color: #57534E; font: inherit; font-size: 12px; font-weight: 500; line-height: 16px; cursor: pointer; }
#home-section .combine-page-add span { font-size: 18px; line-height: 1; }
#home-section .combine-page-add:hover { border-color: #418D62; color: #2F6B49; }
#home-section .combine-error { margin: 0; padding: 0 20px 12px; font-size: 12px; color: #B45309; }
#home-section .combine-error[hidden] { display: none; }
#home-section .combine-submit-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 20px; border-top: 1px solid #F0EFEE; border-radius: 0 0 16px 16px; background: #FAFAF9; }
#home-section .combine-cancel-btn { padding: 8px 14px; border: 0; border-radius: 8px; background: none; color: #57534E; font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer; }
#home-section .combine-cancel-btn:hover { background: #F0EFEE; color: #18181B; }
#home-section #confirm-combine-btn { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; line-height: 18px; }
#home-section #confirm-combine-btn:disabled { opacity: .45; }

/* Combine undo toast (bottom right, dark; sits above the Ask Kita launcher). */
#home-section .combine-undo-toast { position: fixed; right: 28px; bottom: 92px; z-index: 900; display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 10px; background: #18181B; color: #FFFFFF; font-size: 13px; line-height: 18px; box-shadow: 0 10px 24px rgba(24, 24, 27, .24); }
#home-section .combine-undo-toast[hidden] { display: none; }
#home-section .combine-undo-btn { padding: 0; border: 0; background: none; color: #8FC6A4; font: inherit; font-weight: 600; cursor: pointer; }

/* Post-submit run card replaces the intro, dropzone and queue. */
#home-section.is-run-view .capture-toolbar-row,
#home-section.is-run-view .capture-intro-row,
#home-section.is-run-view .studio-layout,
#home-section.is-run-view .file-queue-container { display: none !important; }
#home-section .capture-run-card { overflow: hidden; border: 1px solid #E7E5E4; border-radius: 16px; background: var(--capture-surface); }
#home-section .capture-run-card[hidden], #home-section .capture-run-footer[hidden] { display: none; }
#home-section .capture-run-head { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 18px; border-bottom: 1px solid #F0EFEE; }
#home-section .capture-run-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#home-section .capture-run-heading h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; color: #18181B; }
#home-section .capture-run-sub { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: #737373; }
#home-section .capture-run-head .completion-email-control { padding: 0; border: 0; background: none; }
#home-section .capture-run-head .completion-email-title { font-size: 13px; font-weight: 400; color: #3F3F46; }
#home-section .capture-run-head .completion-email-address { font-size: 11px; color: #A8A29E; }
#home-section .capture-run-progress { height: 4px; border-radius: 2px; background: #F0EFEE; overflow: hidden; }
#home-section .capture-run-progress > span { display: block; height: 100%; width: 0; border-radius: 2px; background: #418D62; transition: width .4s ease; }
#home-section .capture-run-list { margin: 0; padding: 0; list-style: none; }
#home-section .capture-run-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid #F0EFEE; }
#home-section .capture-run-row:last-child { border-bottom: 0; }
#home-section .capture-run-icon { display: flex; justify-content: center; width: 16px; flex-shrink: 0; }
#home-section .capture-run-spin { animation: spin 1s linear infinite; }
#home-section .capture-run-dot { width: 12px; height: 12px; border: 1.5px solid #D6D3D1; border-radius: 6px; }
#home-section .capture-run-file { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#home-section .capture-run-name { font-size: 14px; font-weight: 500; line-height: 20px; color: #18181B; overflow-wrap: anywhere; }
#home-section .capture-run-stage { font-size: 12px; line-height: 16px; color: #737373; }
#home-section .capture-run-row.is-queued .capture-run-name { color: #57534E; }
#home-section .capture-run-row.is-queued .capture-run-stage { color: #A8A29E; }
#home-section .capture-run-row.is-failed .capture-run-stage { color: #92400E; }
#home-section .capture-run-open { flex-shrink: 0; padding: 0; border: 0; background: none; color: #418D62; font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer; }
#home-section .capture-run-open:hover { color: #2F6B49; text-decoration: underline; }
#home-section .capture-run-mini { flex-shrink: 0; width: 120px; height: 4px; border-radius: 2px; background: #F0EFEE; overflow: hidden; }
#home-section .capture-run-mini > span { display: block; height: 100%; border-radius: 2px; background: #418D62; transition: width .4s ease; }
#home-section .capture-run-footer { display: flex; align-items: center; gap: 16px; }
#home-section .capture-run-link { padding: 0; border: 0; background: none; color: #737373; font: inherit; font-size: 13px; line-height: 18px; cursor: pointer; }
#home-section .capture-run-link.is-primary { color: #418D62; font-weight: 500; }
#home-section .capture-run-link:hover { text-decoration: underline; }

/* Type picker: detecting note and "Same as other files". */
.doc-type-detecting-note { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12px; color: #737373; }
.doc-type-detecting-note .classify-spinner { width: 10px; height: 10px; border-width: 1.5px; }
.doc-type-option-source { margin-left: auto; padding-left: 12px; max-width: 45%; font-size: 12px; color: #A8A29E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
    #home-section .capture-intro-actions { width: 100%; }
    #home-section .capture-intro-btn { flex: 1; justify-content: center; }
    #home-section .file-list-item { flex-wrap: wrap; }
    #home-section .file-actions { width: 100%; flex-wrap: wrap; }
    #home-section .capture-run-mini { width: 64px; }
    #home-section .combine-undo-toast { left: 16px; right: 16px; bottom: 88px; justify-content: space-between; }
    .demo-preview-header { flex-wrap: wrap; }
    .demo-preview-pages { padding-inline: 12px; }
}

/* ==============================================================================
   ASK KITA — floating assistant (bottom-right, every signed-in page)
   Copied from kita-cdfis AskKitaBar + globals.css (tokens, ask-kita-pop /
   ask-kita-rise / ask-kita-typing, .press). State lives on #ai-agent-widget:
   data-collapsed (launcher pill) · data-expanded (chips/panel above the input)
   · data-conversation (messages exist → panel instead of chips, unread dot).
   ============================================================================== */
#ai-agent-widget {
    --ak-paper: #FFFFFF;
    --ak-paper-soft: #FAF8F2;
    --ak-ink: #0F1A12;
    --ak-lichen: #73786E;
    --ak-lichen-soft: #6E7268;
    --ak-lichen-faint: #5C5F55;
    --ak-dry-grass: #E8E6DF;
    --ak-dry-grass-strong: #E0DDD3;
    --ak-forest: #1F4D2A;
    --ak-sage-bg: #ECF1EA;
    --ak-sage-bg-soft: #F4F7F2;
    --ak-sage-fg: #2F6536;
    --ak-amber-bg: #FBF6E8;
    --ak-amber-fg: #8B6B00;
    --ak-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ak-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --ak-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
    font-family: var(--font-body, 'Geist', -apple-system, BlinkMacSystemFont, sans-serif);
}
#ai-agent-widget *,
#ai-agent-widget *::before,
#ai-agent-widget *::after { box-sizing: border-box; }
#ai-agent-widget > * { pointer-events: auto; }

/* Which parts show */
#ai-agent-widget .ask-kita-launcher,
#ai-agent-widget .ask-kita-panel,
#ai-agent-widget .ask-kita-prompts,
#ai-agent-widget .ask-kita-bar { display: none; }
#ai-agent-widget[data-collapsed="true"] .ask-kita-launcher { display: flex; }
#ai-agent-widget[data-collapsed="false"] .ask-kita-bar { display: flex; }
#ai-agent-widget[data-collapsed="false"][data-expanded="true"][data-conversation="true"] .ask-kita-panel { display: flex; }
#ai-agent-widget[data-collapsed="false"][data-expanded="true"][data-conversation="false"] .ask-kita-prompts { display: flex; }

.ask-kita-mark { display: block; flex-shrink: 0; border-radius: 999px; object-fit: cover; }
.ask-kita-mark-16 { width: 16px; height: 16px; }
.ask-kita-mark-28 { width: 28px; height: 28px; }
.ask-kita-mark-32 { width: 32px; height: 32px; }

.ask-kita-press { transition: transform 0.12s ease, border-color 0.16s ease, opacity 0.16s ease; }
.ask-kita-press:active { transform: scale(0.97); }

/* Collapsed launcher pill */
#ai-agent-widget .ask-kita-launcher {
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 8px;
    border: 1px solid var(--ak-dry-grass-strong);
    border-radius: 999px;
    background: var(--ak-paper);
    color: var(--ak-ink);
    font: 600 13px/18px var(--font-body, 'Geist', sans-serif);
    box-shadow: var(--ak-shadow-lg);
    cursor: pointer;
    animation: ask-kita-pop 0.34s cubic-bezier(0.22, 1.2, 0.36, 1) both;
    transform-origin: bottom right;
}
#ai-agent-widget .ask-kita-launcher:hover { border-color: var(--ak-forest); }
.ask-kita-unread { position: relative; display: none; width: 8px; height: 8px; }
#ai-agent-widget[data-conversation="true"] .ask-kita-unread { display: inline-flex; }
.ask-kita-unread-ping,
.ask-kita-unread-dot { position: absolute; inset: 0; border-radius: 999px; background: var(--ak-forest); }
.ask-kita-unread-ping { opacity: 0.6; animation: ask-kita-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.ask-kita-unread-dot { box-shadow: 0 0 0 3px rgba(31, 77, 42, 0.18); }

/* Conversation panel */
#ai-agent-widget .ask-kita-panel {
    flex-direction: column;
    gap: 12px;
    width: 440px;
    max-width: calc(100vw - 3.5rem);
    padding: 16px;
    border: 1px solid var(--ak-dry-grass);
    border-radius: 16px;
    background: var(--ak-paper);
    box-shadow: var(--ak-shadow-xl);
    animation: ask-kita-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: bottom right;
}
.ask-kita-panel-head { display: flex; align-items: center; justify-content: space-between; }
.ask-kita-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ak-lichen);
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
#ai-agent-widget .ask-kita-minimize {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ak-lichen-faint);
    cursor: pointer;
}
#ai-agent-widget .ask-kita-minimize:hover { background: var(--ak-paper-soft); color: var(--ak-ink); }
.ask-kita-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 360px;
    overflow-y: auto;
    color: var(--ak-ink);
    font-size: 13px;
    line-height: 20px;
}

/* Messages (markup from addMessageToChat / sendAIAgentMessage) */
#ai-agent-widget .user-message {
    align-self: flex-end;
    max-width: 80%;
    padding: 10px 16px;
    border-radius: 16px;
    background: var(--ak-forest);
    color: #FFFFFF;
    font-size: 13px;
    line-height: 19px;
    overflow-wrap: anywhere;
    animation: ask-kita-msg-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#ai-agent-widget .user-message .ai-message-body { white-space: pre-wrap; }
#ai-agent-widget .agent-response {
    position: relative;
    align-self: stretch;
    padding-right: 24px;
    color: var(--ak-ink);
    font-size: 13px;
    line-height: 20px;
    overflow-wrap: anywhere;
    animation: ask-kita-msg-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#ai-agent-widget .agent-response p { margin: 0 0 8px; }
#ai-agent-widget .agent-response p:last-child,
#ai-agent-widget .agent-response ul:last-child,
#ai-agent-widget .agent-response ol:last-child { margin-bottom: 0; }
#ai-agent-widget .agent-response ul,
#ai-agent-widget .agent-response ol { margin: 0 0 8px; padding-left: 20px; }
#ai-agent-widget .agent-response li { margin: 2px 0; }
#ai-agent-widget .agent-response strong { font-weight: 600; }
#ai-agent-widget .agent-response a { color: var(--ak-forest); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
#ai-agent-widget .agent-response code { padding: 2px 4px; border-radius: 4px; background: rgba(232, 230, 223, 0.4); font-size: 12px; }
#ai-agent-widget .agent-response.is-error {
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--ak-amber-bg);
    color: var(--ak-amber-fg);
    font-size: 12px;
    line-height: 16px;
}
#ai-agent-widget .stream-content.ai-stream-update { animation: ask-kita-stream-reveal 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
#ai-agent-widget .ai-copy-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ak-lichen-faint);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.16s ease, background-color 0.16s ease;
}
#ai-agent-widget .agent-response:hover .ai-copy-btn,
#ai-agent-widget .ai-copy-btn:focus-visible,
#ai-agent-widget .ai-copy-btn.copied { opacity: 1; }
#ai-agent-widget .ai-copy-btn:hover { background: var(--ak-paper-soft); color: var(--ak-ink); }
#ai-agent-widget .ai-copy-btn.copied { color: var(--ak-sage-fg); }

/* Typing indicator: the reference's three lifting dots, plus the agent's
   short status phrase ("Searching documents"). */
#ai-agent-widget .ai-thinking-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin-top: 2px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--ak-paper-soft);
}
#ai-agent-widget .thinking-dots { display: inline-flex; align-items: center; gap: 6px; }
#ai-agent-widget .thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ak-lichen-soft);
    animation: ask-kita-typing 1.2s ease-in-out infinite;
}
#ai-agent-widget .thinking-dots span:nth-child(2) { animation-delay: 160ms; }
#ai-agent-widget .thinking-dots span:nth-child(3) { animation-delay: 320ms; }
#ai-agent-widget .thinking-text {
    color: var(--ak-lichen);
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#ai-agent-widget .stream-tool-indicator { color: var(--ak-lichen); font-size: 12px; }

/* Indexing status and markdown tables inside answers */
#ai-agent-widget .stream-indexing-status {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ak-dry-grass);
    border-radius: 12px;
    background: var(--ak-paper-soft);
    color: var(--ak-lichen-faint);
    font-size: 12px;
    line-height: 16px;
}
#ai-agent-widget .stream-indexing-label { margin-bottom: 6px; color: var(--ak-ink); font-weight: 600; }
#ai-agent-widget .stream-indexing-track { height: 4px; border-radius: 999px; background: var(--ak-dry-grass); overflow: hidden; }
#ai-agent-widget .stream-indexing-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--ak-forest);
    transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
#ai-agent-widget .stream-indexing-docs { margin-top: 8px; }
#ai-agent-widget .ai-markdown-table-wrap {
    width: 100%;
    margin: 8px 0 12px;
    overflow-x: auto;
    border: 1px solid var(--ak-dry-grass);
    border-radius: 10px;
}
#ai-agent-widget .ai-markdown-table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: 12px; line-height: 1.45; }
#ai-agent-widget .ai-markdown-table th,
#ai-agent-widget .ai-markdown-table td { padding: 8px 10px; border-bottom: 1px solid var(--ak-dry-grass); text-align: left; vertical-align: top; }
#ai-agent-widget .ai-markdown-table th { background: var(--ak-paper-soft); font-weight: 600; }
#ai-agent-widget .ai-markdown-table tr:last-child td { border-bottom: 0; }

/* Per-page prompt chips */
#ai-agent-widget .ask-kita-prompts {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 440px;
    max-width: calc(100vw - 3.5rem);
    animation: ask-kita-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: bottom right;
}
#ai-agent-widget .ask-kita-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--ak-dry-grass-strong);
    border-radius: 999px;
    background: var(--ak-sage-bg-soft);
    color: var(--ak-sage-fg);
    font: 500 12px/16px var(--font-body, 'Geist', sans-serif);
    box-shadow: var(--ak-shadow-sm);
    cursor: pointer;
    transition: background-color 0.16s ease;
}
#ai-agent-widget .ask-kita-chip:hover { background: var(--ak-sage-bg); }
#ai-agent-widget .ask-kita-chip svg { flex-shrink: 0; }

/* Input pill */
#ai-agent-widget .ask-kita-bar {
    align-items: center;
    gap: 10px;
    width: 440px;
    max-width: calc(100vw - 3.5rem);
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--ak-dry-grass-strong);
    border-radius: 999px;
    background: var(--ak-paper);
    box-shadow: var(--ak-shadow-lg);
    animation: ask-kita-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: bottom right;
}
#ai-agent-widget .ask-kita-bar:focus-within { border-color: var(--ak-forest); }
#ai-agent-widget .ask-kita-handle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}
#ai-agent-widget .ask-kita-handle:hover { opacity: 0.9; }
#ai-agent-widget #ai-agent-input {
    flex: 1;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    color: var(--ak-ink);
    font: 400 14px/20px var(--font-body, 'Geist', sans-serif);
}
#ai-agent-widget #ai-agent-input::placeholder { color: var(--ak-lichen-soft); }
#ai-agent-widget #ai-agent-input:disabled { opacity: 0.6; }
#ai-agent-widget .ask-kita-send {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ak-forest);
    color: var(--ak-paper);
    cursor: pointer;
}
#ai-agent-widget .ask-kita-send:hover { opacity: 0.9; }
#ai-agent-widget .ask-kita-send:disabled { opacity: 0.6; cursor: not-allowed; }
#ai-agent-widget button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ak-forest) 55%, transparent);
    outline-offset: 2px;
}

@keyframes ask-kita-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ask-kita-rise {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ask-kita-typing {
    0%, 70%, 100% { transform: translateY(0); opacity: 0.35; }
    35% { transform: translateY(-3px); opacity: 1; }
}
@keyframes ask-kita-msg-in {
    from { opacity: 0; transform: translateY(9px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ask-kita-stream-reveal {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ask-kita-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}
@media (max-width: 640px) {
    #ai-agent-widget { right: 16px; bottom: 16px; }
    #ai-agent-widget .ask-kita-panel,
    #ai-agent-widget .ask-kita-prompts,
    #ai-agent-widget .ask-kita-bar { max-width: calc(100vw - 2rem); }
}
@media (prefers-reduced-motion: reduce) {
    #ai-agent-widget .ask-kita-launcher,
    #ai-agent-widget .ask-kita-panel,
    #ai-agent-widget .ask-kita-prompts,
    #ai-agent-widget .ask-kita-bar,
    #ai-agent-widget .user-message,
    #ai-agent-widget .agent-response,
    #ai-agent-widget .stream-content.ai-stream-update { animation-duration: 0.01ms; animation-delay: 0ms; }
    .ask-kita-press { transition: none; }
    .ask-kita-press:active { transform: none; }
}
/* ==============================================================================
   END ASK KITA
   ============================================================================== */