:root {
    --bg: #fafaf8;
    --surface: #ffffff;
    --primary: #c9921a;
    --primary-dark: #a87716;
    --primary-light: #fef3c7;
    --text: #1c1917;
    --text-muted: #78716c;
    --border: #e7e5e4;
    --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --sidebar-width: 220px;
    --status-pending: #b45309;
    --status-processing: #c9921a;
    --status-completed: #15803d;
    --status-failed: #dc2626;
    --radius: 0.5rem;
}

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

body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }

/* ── Login ── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg);
}

.login-card {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    padding: 2rem 2rem 1.75rem;
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.login-logo img { width: 28px; height: 35px; }
.login-logo span { font-size: 1.4rem; font-weight: 700; color: var(--primary); letter-spacing: -0.02em; }

.login-card h2 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.form-field { margin-bottom: 0.875rem; }
.form-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; }
.form-field input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 0.4rem;
    font-size: 0.95rem;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(201,146,26,.15);
    background: var(--surface);
}

.login-submit {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.65rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.login-submit:hover { background: var(--primary-dark); }

.login-error {
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

/* ── App shell ── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.75rem;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.75rem; padding: 0 0.25rem; }
.sidebar-header h1 { font-size: 1.2rem; font-weight: 700; color: var(--primary); letter-spacing: -0.01em; }
.sidebar-logo { width: 26px; height: 33px; flex-shrink: 0; }

.nav-links { list-style: none; flex: 1; }
.nav-links li { margin-bottom: 0.125rem; }
.nav-links a {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.1s, color 0.1s;
}
.nav-links a:hover { background: var(--bg); color: var(--text); }
.nav-links a.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }

.nav-footer { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.logout-btn {
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: none;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: left;
}
.logout-btn:hover { background: var(--bg); color: var(--text); }

.content { margin-left: var(--sidebar-width); flex: 1; padding: 2rem 2rem 2rem; min-width: 0; }

/* ── Typography ── */
h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.25rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }

/* ── Buttons ── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.15s;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 0.375rem;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}
.btn-secondary:hover { background: var(--bg); }

/* ── Cards ── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ── Stats ── */
.stats { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.25rem; min-width: 120px; }
.stat-number { display: block; font-size: 1.75rem; font-weight: 700; color: var(--primary); line-height: 1.1; }
.stat-label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Table ── */
.receipt-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }
.receipt-table th { background: var(--bg); text-align: left; padding: 0.65rem 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.receipt-table td { padding: 0.7rem 1rem; border-top: 1px solid var(--border); font-size: 0.875rem; }
.receipt-table tr.clickable { cursor: pointer; }
.receipt-table tr.clickable:hover td { background: #fdf8f0; }
.thumb-cell { width: 56px; padding: 0.4rem 0.5rem 0.4rem 1rem; }
.thumb-cell img { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: 0.25rem; border: 1px solid var(--border); background: var(--bg); }

/* ── Status badges ── */
.status { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.status.pending { background: #fef3c7; color: #92400e; }
.status.processing { background: #dbeafe; color: #1e40af; }
.status.completed { background: #d1fae5; color: #065f46; }
.status.failed { background: #fee2e2; color: #991b1b; }

/* ── Upload ── */
.upload-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; max-width: 480px; }
.upload-form input[type="file"] { display: block; margin-bottom: 1rem; width: 100%; }
.file-preview { padding: 0.65rem 0.75rem; background: var(--bg); border-radius: 0.375rem; margin-bottom: 1rem; font-size: 0.875rem; border: 1px solid var(--border); }
.uploading { color: var(--primary); font-size: 0.875rem; margin-bottom: 1rem; font-weight: 500; }
.error { color: var(--status-failed); font-size: 0.875rem; margin-bottom: 1rem; }

/* ── Receipt detail ── */
.receipt-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; max-width: 680px; }
.receipt-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.receipt-header h2 { margin-bottom: 0; }
.totals-banner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #fef7e0 0%, #fef3c7 100%);
    border: 1px solid #f0d670;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.total-block { display: flex; flex-direction: column; gap: 0.2rem; }
.total-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.total-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1c1917;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.total-value small { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.total-block--primary .total-value {
    font-size: 1.85rem;
    color: var(--primary-dark);
}
@media (max-width: 540px) {
    .totals-banner { grid-template-columns: 1fr; }
}

.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.result-field label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.2rem; }
.result-field span { font-size: 0.95rem; font-weight: 500; }
.category-select {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1.5px solid var(--border);
    border-radius: 0.375rem;
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
.category-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(201,146,26,.15); }
.processing-indicator { padding: 0.875rem 1rem; background: #dbeafe; border-radius: var(--radius); font-size: 0.875rem; color: #1e40af; }
.items-section, .vat-breakdown { padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.items-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.875rem; }
.items-table th { text-align: left; padding: 0.5rem 0.5rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.items-table td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--border); }
.items-table tr:last-child td { border-bottom: none; }
.items-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.items-table th.num { text-align: right; }

.stepper--done .step--done .step-dot { background: var(--status-completed); border-color: var(--status-completed); }

/* ── Quick actions ── */
.quick-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ── Page header ── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem; }
.page-header h2 { margin-bottom: 0; }

/* ── Text utilities ── */
.text-muted { color: var(--text-muted); font-size: 0.9rem; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state p { margin-bottom: 1rem; }

/* ── Table extras ── */
.filename-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-cell { white-space: nowrap; color: var(--text-muted); font-size: 0.8rem; }

/* ── Tag chips ── */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid #f0e0a0;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: default;
    white-space: nowrap;
}
.tag-chip--active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    cursor: pointer;
}
button.tag-chip { cursor: pointer; background: none; border: 1px solid var(--border); color: var(--text-muted); }
button.tag-chip:hover { background: var(--bg); color: var(--text); }
button.tag-chip.tag-chip--active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tag-chip--sm { font-size: 0.7rem; padding: 0.15rem 0.45rem; }
.tag-chip--removable button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--primary-dark);
    padding: 0 0 0 0.1rem;
}
.tag-chip--removable button:hover { color: var(--status-failed); }

/* ── Tag filter ── */
.tag-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }

/* ── Upload page ── */
.upload-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    gap: 1.25rem;
}

.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

.upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: min(420px, 90vw);
    padding: 3rem 2rem;
    background: var(--surface);
    border: 2.5px dashed var(--border);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.upload-zone:hover, label.upload-zone:hover { border-color: var(--primary); background: #fffbf0; }
.upload-zone--ready { border-style: solid; border-color: var(--primary); cursor: default; }
.upload-zone--progress { border-style: solid; border-color: var(--border); cursor: default; }

.upload-icon {
    width: 64px;
    height: 64px;
    color: var(--primary);
}
.upload-icon svg { width: 64px; height: 64px; }

@keyframes spin { to { transform: rotate(360deg); } }
.upload-icon--spin svg { animation: spin 1s linear infinite; color: var(--text-muted); }
.upload-icon--ok svg { color: var(--status-completed); }

.upload-title { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.upload-hint { font-size: 0.85rem; color: var(--text-muted); }

.upload-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.upload-error { color: var(--status-failed); font-size: 0.875rem; text-align: center; }

/* Photo tips shown under the upload zone — teaches users to take scans that
   actually OCR well. Positioned to match the upload-zone width so the page
   stays visually balanced on desktop AND mobile. */
.photo-tips {
    width: min(560px, 92vw);
    margin: 0.5rem auto 0;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.photo-tips h3 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-dark);
    margin-bottom: 0.6rem;
}
.photo-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.photo-tips li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text);
}
.photo-tips li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: 700;
}
.photo-tips strong { color: var(--text); font-weight: 600; }

@media (max-width: 540px) {
    .photo-tips { padding: 0.875rem 1rem; }
    .photo-tips li { font-size: 0.82rem; }
}

/* ── Detail layout ── */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
/* ── Mobile hamburger ── */
/* Topbar + backdrop are display:none on desktop; on ≤768px the topbar shows
   and the sidebar transforms into a slide-in drawer driven by the hidden
   checkbox state. Pure CSS so it works on the login page (no Blazor circuit
   for client JS) and survives Blazor server DOM patches. */
.topbar, .nav-backdrop { display: none; }

@media (max-width: 768px) {
    .detail-layout { grid-template-columns: 1fr; }

    .topbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 30;
        height: 56px;
        padding: 0 1rem;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }
    .topbar-brand {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 700;
        color: var(--primary);
    }
    .topbar-logo { width: 22px; height: 28px; }

    .nav-toggle-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 20px;
        cursor: pointer;
        padding: 2px;
    }
    .nav-toggle-btn span {
        display: block;
        height: 2px;
        background: var(--text);
        border-radius: 2px;
        transition: transform 0.2s, opacity 0.2s;
    }

    /* Sidebar becomes a slide-in drawer */
    .sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        height: calc(100vh - 56px);
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
    }
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 56px 0 0 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
        z-index: 35;
    }

    /* Open state, driven by the hidden checkbox */
    .nav-toggle:checked ~ .layout .sidebar { transform: translateX(0); }
    .nav-toggle:checked ~ .nav-backdrop { opacity: 1; pointer-events: auto; }
    /* Hamburger morphs into an X when open */
    .nav-toggle:checked ~ .topbar .nav-toggle-btn span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav-toggle:checked ~ .topbar .nav-toggle-btn span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .topbar .nav-toggle-btn span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .content { margin-left: 0; }
}

.detail-image {
    position: relative;
    display: block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: zoom-in;
    max-height: 520px;
}
.detail-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: contain;
    transition: transform 0.25s ease;
}
.detail-image:hover img { transform: scale(1.02); }
.detail-image-zoom {
    position: absolute;
    bottom: 0.6rem;
    right: 0.6rem;
    padding: 0.3rem 0.6rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.detail-image:hover .detail-image-zoom { opacity: 1; }

.failure-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
}
.failure-box .error { margin: 0; flex: 1; color: #991b1b; font-weight: 500; }

/* Re-analyze panel */
.reanalyze-panel {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.reanalyze-row { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.5rem; }
.reanalyze-row .category-select { flex: 1; }
.reanalyze-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.5rem; }

.detail-data {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.detail-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* ── Tags section ── */
.tags-section { padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.tags-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; min-height: 1.5rem; }
.tag-add { display: flex; gap: 0.5rem; align-items: center; }
.tag-input {
    flex: 1;
    padding: 0.45rem 0.65rem;
    border: 1.5px solid var(--border);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: var(--bg);
    color: var(--text);
}
.tag-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(201,146,26,.15); }

.tags-empty { font-style: italic; }

/* ── Tag suggestions ── */
.tag-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); }
.tag-suggestions-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.15rem; }
.tag-chip--suggestion { background: var(--bg); border: 1px dashed var(--border); color: var(--text-muted); cursor: pointer; }
.tag-chip--suggestion:hover { background: var(--primary-light); border-color: var(--primary); border-style: solid; color: var(--primary-dark); }

/* ── Tags cell in receipt list ── */
.tags-cell { max-width: 220px; }
.tags-cell .tag-chip { margin-right: 0.25rem; margin-bottom: 0.15rem; }
.total-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Dashboard grid ── */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}
@media (max-width: 900px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

.dashboard-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.25rem 1rem;
}
.dashboard-card h3 { margin-bottom: 0.875rem; }

/* Recent receipts list */
.recent-list { list-style: none; }
.recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--border);
}
.recent-item:last-child { border-bottom: none; }
.recent-item:hover { background: #fdf8f0; }
.recent-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.recent-merchant { font-size: 0.92rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
.recent-date { color: var(--text-muted); }
.recent-amount { font-size: 0.95rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.status--xs { padding: 0.1rem 0.45rem; font-size: 0.65rem; }

/* Category bars */
.category-list { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.category-row { display: grid; grid-template-columns: 110px 1fr 32px; align-items: center; gap: 0.65rem; font-size: 0.85rem; }
.category-name { color: var(--text); font-weight: 500; }
.category-bar { height: 8px; background: var(--bg); border-radius: 9999px; overflow: hidden; border: 1px solid var(--border); }
.category-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); border-radius: 9999px; transition: width 0.3s ease; }
.category-count { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.8rem; }

.empty-state--inline { padding: 1.5rem 1rem; }

/* ── Duplicate banner ── */
.duplicate-banner {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    background: #fef3c7;
    border: 1px solid #f0d670;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.duplicate-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}
.duplicate-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.duplicate-text strong { font-size: 0.92rem; color: #78350f; }
.duplicate-text span { font-size: 0.82rem; color: #92400e; }
.duplicate-banner .btn-secondary { flex-shrink: 0; }

/* ── Stepper ── */
.stepper {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1.25rem 1rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    position: relative;
    counter-reset: step;
}
.stepper::before {
    content: "";
    position: absolute;
    top: calc(1.25rem + 14px);
    left: calc(1rem + 14px);
    right: calc(1rem + 14px);
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    z-index: 1;
}
.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.step-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.25;
}
.step--done .step-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.step--done .step-dot::before {
    content: "✓";
    font-size: 0.85rem;
    color: #fff;
}
.step--done .step-dot { font-size: 0; }
.step--done .step-label {
    color: var(--text);
    font-weight: 600;
}
.step--active .step-dot {
    background: #fff;
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px rgba(201,146,26,.18);
    animation: step-pulse 1.6s ease-in-out infinite;
}
.step--active .step-label {
    color: var(--primary-dark);
    font-weight: 600;
}
@keyframes step-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(201,146,26,.18); transform: scale(1); }
    50%      { box-shadow: 0 0 0 8px rgba(201,146,26,.08); transform: scale(1.06); }
}

.stepper--failed .step--active .step-dot {
    border-color: var(--status-failed);
    color: var(--status-failed);
    box-shadow: 0 0 0 4px rgba(220,38,38,.15);
    animation: none;
}
.stepper--failed .step--active .step-label { color: var(--status-failed); }

.stepper-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.25rem;
}

@media (max-width: 540px) {
    .stepper { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 1rem; }
    .stepper::before { display: none; }
    .step { flex-direction: row; justify-content: flex-start; gap: 0.75rem; }
    .step-label { text-align: left; }
}

/* ── OCR comparison page ───────────────────────────────────────────── */

/* Centered container for the whole comparison page (same idea as
   .upload-page — caps width and centers horizontally on every screen size).
   Without this the cards hug the left edge of the content area on mobile. */
.compare-page {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}
/* Center the upload zone on the compare page (the upload page already centers its
   own version via flex on .upload-page; doing it here scoped so we don't disturb that). */
.compare-page .upload-zone { margin-left: auto; margin-right: auto; }

/* Collapsible settings wrapper — closed by default so the controls don't eat
   the viewport on mobile. Desktop users who want to change defaults click it open. */
.compare-settings {
    margin: 0.75rem 0 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.compare-settings > summary {
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    list-style: none;
    user-select: none;
}
.compare-settings > summary::before {
    content: "▸ ";
    display: inline-block;
    color: var(--primary);
    margin-right: 0.2rem;
    transition: transform 0.12s;
}
.compare-settings[open] > summary::before { content: "▾ "; }
.compare-settings > summary:hover { color: var(--text); }
.compare-settings > .compare-controls { padding: 0 0.85rem 0.85rem; margin: 0; }

.compare-controls {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem 0.9rem;
    margin: 1rem 0;
    flex-wrap: wrap;
    font-size: 0.9rem;
}
.compare-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 220px;
    min-width: 0;
}
.compare-controls label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.compare-controls select {
    flex: 1 1 240px;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border: 1.5px solid var(--border);
    border-radius: 0.375rem;
    background: var(--surface);
    color: var(--text);
    /* 16px minimum prevents iOS Safari from zooming the whole page when the select
       gets focus. At 14px iOS bumps the viewport scale and the dropdown looks
       "super large" because the whole page is zoomed in. */
    font-size: 16px;
    line-height: 1.3;
    height: auto;
}
.compare-controls select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(201,146,26,0.15);
}
.compare-controls select:disabled { opacity: 0.6; cursor: not-allowed; }

/* History bar */
.compare-history {
    margin: 1rem 0 1.25rem;
    padding: 0.875rem 1rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.compare-history h2 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}
.compare-history h2 .muted {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    margin-left: 0.25rem;
}
.compare-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.compare-history-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-start;
    padding: 0.5rem 0.75rem;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 0.4rem;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    text-align: left;
    transition: border-color 0.1s, background 0.1s, transform 0.05s;
    max-width: 100%;
}
.compare-history-item:hover:not(:disabled) {
    border-color: var(--primary);
    background: #fffbf0;
}
.compare-history-item:active:not(:disabled) { transform: translateY(1px); }
.compare-history-item:disabled { opacity: 0.55; cursor: not-allowed; }
.compare-history-item.is-active {
    border-color: var(--primary);
    background: var(--primary-light);
}
.compare-history-name {
    font-size: 0.85rem;
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compare-history-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Result toolbar */
.compare-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.compare-toolbar-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}
.compare-toolbar-name {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compare-toolbar-stats { font-size: 0.78rem; color: var(--text-muted); }
.compare-toolbar-stats code {
    background: var(--bg);
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.78rem;
}
.compare-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Engine cards grid */
.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}
.compare-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.compare-card header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    gap: 0.5rem;
}
.compare-card h2 { font-size: 1rem; margin: 0; color: var(--text); }
.compare-card h3 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.6rem 0 0.3rem;
    font-weight: 600;
}
.compare-duration {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}
.compare-parsed {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 0.75rem;
    margin: 0;
    font-size: 0.88rem;
}
.compare-parsed dt { color: var(--text-muted); font-weight: 500; }
.compare-parsed dd {
    margin: 0;
    color: var(--text);
    word-break: break-word;
}

/* Boxed section panels — make the regex/LLM split visually obvious so users
   don't mistake one for the other or miss the LLM section entirely. */
.compare-section {
    margin-top: 0.5rem;
    padding: 0.75rem 0.85rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
}
.compare-section--regex {
    background: #fdfaf3;             /* warm cream */
    border-color: #ead9b0;
}
.compare-section--llm {
    background: #f0f7ff;             /* cool blue */
    border-color: #b8d4f0;
}
.compare-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--text) !important;
    margin: 0 0 0.5rem !important;
    font-weight: 600 !important;
}
.compare-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.compare-badge--regex {
    background: #c9921a;
    color: #fff;
}
.compare-badge--llm {
    background: #2563eb;
    color: #fff;
}
.compare-section .compare-duration {
    margin-left: auto;
}

/* Raw text is collapsed into a <details> so it doesn't dominate the card.
   Users open it on demand instead of scrolling past it to find the parsed fields. */
.compare-raw-wrapper {
    margin-top: 0.5rem;
}
.compare-raw-wrapper > summary {
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0;
    user-select: none;
}
.compare-raw-wrapper > summary:hover { color: var(--text); }
.compare-raw {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 0.6rem 0.75rem;
    border-radius: 0.375rem;
    max-height: 320px;
    overflow: auto;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    margin-top: 0.4rem;
}
.muted { color: var(--text-muted); font-size: 0.85rem; }

/* Mobile tweaks: stack the toolbar, full-width history items, smaller raw text. */
@media (max-width: 640px) {
    .compare-page { padding: 0 0.25rem; }

    /* Settings panel: stack each control on its own row and compact the spacing.
       The <details> wrapper is closed by default so it barely takes up any
       vertical real estate unless the user opens it. */
    .compare-settings > summary { padding: 0.5rem 0.7rem; font-size: 0.82rem; }
    .compare-controls { gap: 0.45rem; padding-bottom: 0.6rem; }
    .compare-control-group { flex: 1 1 100%; min-width: 0; gap: 0.15rem; }
    .compare-controls label { font-size: 0.65rem; }
    .compare-controls select {
        width: 100%;
        padding: 0.35rem 0.5rem;
        /* Keep 16px — iOS auto-zoom protection. */
        font-size: 16px;
    }

    .compare-toolbar { flex-direction: column; align-items: stretch; }
    .compare-toolbar-actions { justify-content: space-between; }
    .compare-toolbar-actions .btn-secondary { flex: 1 1 auto; justify-content: center; }

    .compare-history-list { flex-direction: column; }
    .compare-history-item { width: 100%; }
    .compare-history-name { max-width: none; }

    .compare-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .compare-card { padding: 0.875rem; }
    .compare-raw { max-height: 240px; font-size: 0.72rem; }

    /* Stack the dt/dd pairs vertically so values don't get squashed on narrow screens. */
    .compare-parsed { grid-template-columns: 1fr; gap: 0.1rem 0; }
    .compare-parsed dt { margin-top: 0.35rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
    .compare-parsed dt:first-child { margin-top: 0; }
}