/* ═══════════════════════════════════════════════════════
   App Shell
   ═══════════════════════════════════════════════════════ */

.app-shell { display: flex; min-height: 100vh; }


/* ── Sidebar ────────────────────────────────────────── */

.sidebar {
    width: var(--sidebar-w);
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    background: var(--stone-50);                     /* same as page bg */
    border-right: 1px solid rgba(0,0,0,0.07);        /* very subtle */
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
}

/* Logo */
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.5rem 1rem;
    text-decoration: none;
    flex-shrink: 0;
}
.sidebar-logo:hover { opacity: 0.85; }
.sidebar-logo-icon {
    width: 2rem; height: 2rem;
    border-radius: 10px;                             /* rounded-xl */
    background: var(--teal-700);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.sidebar-logo-text {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--stone-900);
}

/* Nav */
.sidebar-nav {
    flex: 1;
    padding: 0.25rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
}

.sidebar-group-label {
    font-size: 0.625rem;                             /* 10px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--stone-400);
    padding: 0 0.75rem;
    margin-top: 1.25rem;
    margin-bottom: 0.375rem;
}
.sidebar-group-label:first-child { margin-top: 0.5rem; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;                                    /* gap-3 */
    padding: 0.5rem 0.75rem;                         /* py-2 px-3 */
    border-radius: var(--radius);                    /* rounded-lg */
    font-size: 0.875rem;                             /* text-sm */
    font-weight: 400;
    color: var(--stone-500);
    text-decoration: none;
    transition: all var(--transition);
    border: 1px solid transparent;
    line-height: 1.4;
}
.sidebar-link:hover {
    color: var(--stone-800);
    background: rgba(0,0,0,0.04);
}
.sidebar-link--active {
    background: #fff;
    color: var(--stone-900);
    font-weight: 500;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.sidebar-link--active:hover { background: #fff; color: var(--stone-900); }

/* Link icons */
.sidebar-link-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--stone-400);
    transition: color var(--transition);
}
.sidebar-link-icon--active { color: var(--teal-600); }
.sidebar-link:hover .sidebar-link-icon { color: var(--stone-600); }

/* Chevron on active */
.sidebar-link-chevron {
    margin-left: auto;
    display: flex; align-items: center;
    color: var(--stone-300);
    flex-shrink: 0;
}

/* Badge */
.sidebar-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.1rem; height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--red-500); color: #fff;
    font-size: 0.6rem; font-weight: 700; line-height: 1;
    margin-left: auto;
}

/* User chip */
.sidebar-user {
    display: flex; align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
}
.sidebar-user-avatar {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: var(--teal-100);
    color: var(--teal-700);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
.sidebar-user-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.05rem;
}
.sidebar-user-name {
    font-size: 0.8rem; font-weight: 500;
    color: var(--stone-800);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}
.sidebar-user-name:hover { color: var(--accent); }
.sidebar-user-email {
    font-size: 0.7rem;
    color: var(--stone-400);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}
.sidebar-logout-form { display: contents; }
.sidebar-logout-btn {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem;
    border-radius: 6px;
    color: var(--stone-400);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.sidebar-logout-btn:hover {
    background: rgba(239,68,68,0.08);
    color: var(--red-500);
}

/* ── Sidebar inbox status block (Variant A) ─────────── */

@keyframes sidebar-inbox-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}
.sidebar-inbox {
    margin: 0.5rem 0.75rem 0.5rem;
    border: 1px solid var(--stone-200);
    border-top: 3px solid var(--teal-700);
    border-radius: var(--radius);
    background: #fff;
    padding: 0.625rem 0.75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.09);
    flex-shrink: 0;
}
.sidebar-inbox-header {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.sidebar-inbox-dot {
    width: 0.5rem; height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--teal-500);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.18);
}
.sidebar-inbox-dot--scanning {
    animation: sidebar-inbox-pulse 1.5s ease-in-out infinite;
}
.sidebar-inbox-dot--error {
    background: var(--red-500);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}
.sidebar-inbox-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-700);
}
.sidebar-inbox-account {
    display: flex; flex-direction: column;
    margin-bottom: 0.25rem;
}
.sidebar-inbox-account:last-of-type { margin-bottom: 0; }
.sidebar-inbox-account-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--stone-800);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.sidebar-inbox-account-detail {
    font-size: 0.625rem;
    color: var(--stone-400);
    text-transform: capitalize;
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-inbox-footer {
    margin-top: 0.5rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--stone-100);
}
.sidebar-inbox-settings-link {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.1rem;
    transition: color var(--transition);
}
.sidebar-inbox-settings-link:hover { color: var(--accent-hover); }


/* ── Content area ───────────────────────────────────── */

.content-wrap {
    flex: 1;
    margin-left: var(--sidebar-w);
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-header {
    height: 3.5rem;
    border-bottom: 1px solid var(--stone-100);
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 50;
    flex-shrink: 0;
}
.content-header-left {
    font-size: 0.8rem;
    color: var(--stone-400);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.content-header-left strong { color: var(--stone-700); font-weight: 500; }
.content-header-right { display: flex; align-items: center; gap: 0.75rem; }

.content-wrap main {
    padding: 2.5rem 2.5rem 5rem;
    max-width: 960px;
}

main.main-unauthed {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    max-width: none;
}


/* ═══════════════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════════════ */

h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; color: var(--stone-900); line-height: 1.3; }
h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; letter-spacing: -0.01em; color: var(--stone-800); }
h3 { font-size: 0.875rem; font-weight: 600; color: var(--stone-700); }

.section-label {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--stone-400); margin-bottom: 0.5rem;
}


/* ═══════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════ */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-xs); }


/* ═══════════════════════════════════════════════════════
   Breadcrumbs
   ═══════════════════════════════════════════════════════ */

.breadcrumb { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; margin-bottom: 0.75rem; color: var(--stone-400); }
.breadcrumb a { color: var(--stone-400); font-weight: 500; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb a::after { content: '/'; margin-left: 0.3rem; color: var(--stone-300); font-weight: 400; }
.breadcrumb-current { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ═══════════════════════════════════════════════════════
   Flash Messages
   ═══════════════════════════════════════════════════════ */

.flash { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.875rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: 0.82rem; font-weight: 500; animation: flash-in 0.25s ease-out; }
.flash-icon { flex-shrink: 0; }
.flash-success { background: var(--success-bg); color: var(--success-fg); border: 1px solid #a7f3d0; }
.flash-error   { background: var(--error-bg);   color: var(--error-fg);   border: 1px solid #fecaca; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }


/* ═══════════════════════════════════════════════════════
   Shell Email Status
   ═══════════════════════════════════════════════════════ */

.shell-email-status {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--stone-200);
    border-radius: 999px;
    background: var(--stone-50);
    box-shadow: var(--shadow-xs);
}
.shell-email-status-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stone-500);
    flex-shrink: 0;
}
.shell-email-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--teal-500);
    box-shadow: 0 0 0 4px rgba(20,184,166,0.12);
}
.shell-email-status-link {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.shell-email-status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}
.shell-email-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--stone-200);
}
.shell-email-pill-account {
    min-width: 0;
}
.shell-email-pill-account strong {
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--stone-800);
}
.shell-email-pill-account span {
    display: block;
    font-size: 0.6875rem;
    color: var(--stone-400);
    text-transform: capitalize;
}
.shell-email-pill-state {
    min-width: 0;
}
.shell-email-pill-state .email-conn-status {
    display: inline-flex;
    min-width: 0;
}
.shell-email-pill-state .status {
    font-size: 0.6rem;
}
.shell-email-pill-state .status + text {
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface); color: var(--fg);
    text-decoration: none; font-size: 0.82rem; font-weight: 500;
    cursor: pointer; line-height: 1.4;
    transition: all var(--transition); box-shadow: var(--shadow-xs);
    white-space: nowrap; font-family: inherit;
}
.btn:hover { background: var(--stone-50); border-color: var(--stone-300); box-shadow: var(--shadow-sm); color: var(--fg); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-sm); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn-ghost:hover { background: var(--stone-100); color: var(--fg); border-color: transparent; box-shadow: none; }
.btn-small { padding: 0.28rem 0.625rem; font-size: 0.75rem; }

.email-archive-links { margin-top: 0.5rem; display: flex; gap: 0.5rem; }
.email-archive-links .btn { flex: 1; text-align: center; }


/* ═══════════════════════════════════════════════════════
   Forms
   ═══════════════════════════════════════════════════════ */

label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.3rem; margin-top: 0.85rem; color: var(--stone-600); letter-spacing: 0.01em; }
.label-optional { font-weight: 400; color: var(--muted); font-size: 0.72rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], select, textarea {
    display: block; width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.875rem; font-family: inherit;
    background: var(--surface); color: var(--fg);
    transition: all var(--transition);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
input::placeholder, textarea::placeholder { color: var(--stone-400); }
input[type="file"] { margin: 0.25rem 0; }
input[type="checkbox"] { display: inline; width: auto; margin-right: 0.4rem; accent-color: var(--accent); }
.form-error { color: var(--error-fg); font-size: 0.875rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: var(--error-bg); border-radius: var(--radius); border: 1px solid #fecaca; }
.form-actions { margin-top: 1.25rem; display: flex; gap: 0.5rem; }
.form-card { max-width: 600px; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-field { flex: 1; min-width: 140px; }

/* ── Edit receipt page layout ── */
.edit-receipt-form { display: flex; flex-direction: column; gap: 1.25rem; }
.edit-receipt-details { max-width: 620px; display: flex; flex-direction: column; gap: 1rem; }
.edit-receipt-details .form-row { margin: 0; }

/* ── Add category inline ── */
.add-cat-inline { margin-top: 0.5rem; }
.add-cat-toggle {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.8rem; font-weight: 500; color: var(--teal-700);
    cursor: pointer; list-style: none; user-select: none;
}
.add-cat-toggle::-webkit-details-marker { display: none; }
.add-cat-toggle::before { content: '+'; font-weight: 700; }
details[open] .add-cat-toggle::before { content: '−'; }
.add-cat-body { margin-top: 0.625rem; padding: 0.875rem; background: var(--stone-50); border: 1px solid var(--border); border-radius: var(--radius); }
.add-cat-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.add-cat-input { flex: 1; min-width: 180px; }
.add-cat-deductible { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.add-cat-deductible input { width: auto; margin: 0; }
.add-cat-hint { font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; }
.add-cat-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.625rem; }
.add-cat-error { margin: 0; padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* ── Line items section ── */
.edit-line-items { overflow: hidden; }
.edit-line-items-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.edit-section-title { font-size: 0.875rem; font-weight: 600; color: var(--stone-700); margin: 0; letter-spacing: 0.01em; text-transform: uppercase; }
.line-items-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.line-items-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.line-items-table th {
    text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted); padding: 0 0.375rem 0.5rem;
    border-bottom: 1px solid var(--border);
}
.line-items-table td { padding: 0.25rem 0.375rem; vertical-align: middle; }
.line-items-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--stone-100); }
.col-qty { width: 5rem; }
.col-price { width: 7.5rem; }
.col-cat { width: 11rem; }
.col-del { width: 2.25rem; }
.li-input {
    width: 100%; padding: 0.3rem 0.45rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); font-size: 0.8125rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.li-input:focus { outline: none; border-color: var(--teal-700); box-shadow: 0 0 0 2px rgba(15,118,110,0.12); }
.li-name { min-width: 140px; }
.li-qty { text-align: right; }
.li-price { text-align: right; }
.btn-row-delete {
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border: none; background: transparent;
    color: var(--stone-300); border-radius: var(--radius); cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.btn-row-delete:hover { color: var(--danger); background: #fee2e2; }
.line-items-empty { font-size: 0.875rem; color: var(--muted); text-align: center; padding: 1.5rem 0 0.5rem; }


/* ═══════════════════════════════════════════════════════
   Auth (Login)
   ═══════════════════════════════════════════════════════ */

.auth-page { width: 100%; max-width: 380px; }
.auth-card { background: var(--surface); padding: 2.5rem 2rem; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); border: 1px solid var(--border); }
.auth-header { text-align: center; margin-bottom: 2rem; }
.auth-logo { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 12px; background: var(--teal-700); color: #fff; font-weight: 800; font-size: 1.3rem; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(15,118,110,0.25); }
.auth-header h1 { font-size: 1.25rem; margin-bottom: 0.25rem; color: var(--stone-900); }
.auth-subtitle { color: var(--muted); font-size: 0.875rem; }
.auth-submit { width: 100%; margin-top: 1.25rem; padding: 0.65rem 1rem; font-size: 0.875rem; border-radius: var(--radius); }
.auth-footer { margin-top: 1.25rem; text-align: center; font-size: 0.8125rem; color: var(--muted); }
.auth-footer a { color: var(--teal-700); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.auth-help { font-size: 0.8125rem; color: var(--muted); margin-bottom: 1.25rem; line-height: 1.5; }
.form-success { color: #065f46; font-size: 0.875rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: #d1fae5; border-radius: var(--radius); border: 1px solid #6ee7b7; }

/* ── Invite codes ── */
.invite-code { font-family: 'Fira Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 0.8125rem; background: var(--stone-100); padding: 0.15rem 0.4rem; border-radius: 4px; letter-spacing: 0.02em; }
.btn-copy-link { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.5rem; padding: 0.15rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--muted); cursor: pointer; transition: all var(--transition); }
.btn-copy-link:hover { background: var(--stone-100); color: var(--fg); border-color: var(--stone-300); }
.invite-status { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.invite-status--active { background: #d1fae5; color: #065f46; }
.invite-status--used { background: var(--stone-100); color: var(--muted); }
.invite-status--expired { background: #fef3c7; color: #92400e; }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.75rem; }
.btn-danger-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--danger); }
.btn-danger-ghost:hover { background: #fee2e2; border-color: transparent; color: var(--danger-hover); box-shadow: none; }

/* ═══════════════════════════════════════════════════════
   Page Header
   ═══════════════════════════════════════════════════════ */

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; }
.page-header h1 { margin-bottom: 0; }
.actions { display: flex; gap: 0.5rem; align-items: center; }


/* ═══════════════════════════════════════════════════════
   Tables — editorial flat style
   ═══════════════════════════════════════════════════════ */

table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    font-size: 0.875rem;
}
th, td { text-align: left; padding: 0.75rem 0.5rem; }
th {
    font-weight: 600;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--stone-400);
    border-bottom: 1px solid var(--stone-100);
    padding-bottom: 0.625rem;
}
td { border-bottom: 1px solid var(--stone-50); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: rgba(0,0,0,0.02); }
th a { color: var(--stone-400); text-decoration: none; }
th a:hover { color: var(--accent); }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* Wrapped table (non-receipt tables that want a card feel) */
.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    margin-bottom: 1rem;
}
.table-card table { font-size: 0.82rem; }
.table-card th { background: var(--stone-50); }
.table-card td { border-bottom: 1px solid var(--stone-100); }


/* ═══════════════════════════════════════════════════════
   Status Badges
   ═══════════════════════════════════════════════════════ */

.status { font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 99px; background: var(--stone-100); color: var(--muted); display: inline-block; letter-spacing: 0.04em; white-space: nowrap; text-transform: uppercase; }
.status-pending  { background: var(--amber-50);   color: var(--amber-600);   }
.status-ocr_done { background: var(--blue-50);     color: var(--blue-600);    }
.status-parsed   { background: var(--violet-50);   color: var(--violet-600);  }
.status-complete,
.status-verified { background: var(--emerald-50);  color: var(--emerald-600); }
.status-review   { background: var(--amber-50);    color: var(--amber-600);   }
.status-error    { background: var(--error-bg);    color: var(--error-fg);    }
.status-admin    { background: var(--violet-50);   color: var(--violet-600);  font-weight: 700; }


/* ═══════════════════════════════════════════════════════
   Receipt List — editorial
   ═══════════════════════════════════════════════════════ */

.receipt-hero {
    margin-bottom: 2.5rem;
}
.receipt-hero-meta {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--stone-400);
    margin-bottom: 0.75rem;
}
.receipt-hero-total {
    font-size: 3.25rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--stone-900);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 0.625rem;
}
.receipt-hero-sub {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.875rem;
    color: var(--stone-400);
    margin-top: 0.5rem;
}
.receipt-hero-sub-item { display: flex; align-items: center; gap: 0.5rem; }
.receipt-hero-sub-item .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--teal-500); flex-shrink: 0; }
.receipt-hero-sub-item strong { color: var(--stone-700); font-weight: 500; }

/* Filter bar */
.filter-form {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--stone-100);
}
.filter-form label { margin: 0; font-size: 0.625rem; color: var(--stone-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; }
.filter-form select, .filter-form input[type="date"] { width: auto; padding: 0.35rem 0.6rem; font-size: 0.82rem; border-color: var(--stone-200); border-radius: var(--radius); background: var(--stone-50); }
.filter-form select:focus, .filter-form input[type="date"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Receipt controls bar */
.receipt-controls {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--stone-100);
}
.receipt-controls-label {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--stone-400);
}
.receipt-controls-actions {
    display: flex; gap: 1rem;
    font-size: 0.75rem; color: var(--stone-400);
}
.receipt-controls-actions a, .receipt-controls-actions button {
    color: var(--stone-400); background: none; border: none; cursor: pointer;
    font: inherit; padding: 0; display: flex; align-items: center; gap: 0.25rem;
    transition: color var(--transition);
}
.receipt-controls-actions a:hover, .receipt-controls-actions button:hover { color: var(--stone-700); }

/* Receipt table — flat editorial rows */
.receipt-table {
    width: 100%;
    border-collapse: collapse;
}
.receipt-table th {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--stone-400);
    padding: 0 0.5rem 0.625rem;
    border-bottom: 1px solid var(--stone-100);
    white-space: nowrap;
}

/* Sortable column headers */
.sortable-th { padding: 0; }
.sortable-th.num { text-align: right; }
.sort-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0 0.5rem 0.625rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius);
    transition: color var(--transition);
    width: 100%;
}
.sortable-th.num .sort-link { justify-content: flex-end; }
.sort-link:hover { color: var(--stone-700); }
.sortable-th--active .sort-link { color: var(--teal-700); }

.sort-icon { flex-shrink: 0; }
.sort-icon--off { opacity: 0; transition: opacity var(--transition); }
.sortable-th:hover .sort-icon--off { opacity: 0.4; }
.sort-icon--on { opacity: 1; }

.receipt-table td {
    padding: 0.875rem 0.5rem;
    border-bottom: 1px solid var(--stone-50);
    font-size: 0.875rem;
    vertical-align: middle;
}
.receipt-table tbody tr { transition: background var(--transition); cursor: pointer; }
.receipt-table tbody tr:hover { background: rgba(0,0,0,0.018); }
.receipt-table tbody tr:last-child td { border-bottom: none; }
.receipt-table tfoot td, .receipt-table tfoot th {
    padding: 0.75rem 0.5rem;
    border-top: 1px solid var(--stone-200);
    border-bottom: none;
}

/* Category display in receipt rows */
.cat-dot-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; color: var(--stone-400);
}
.cat-dot-row::before {
    content: '';
    display: inline-block;
    width: 0.375rem; height: 0.375rem;
    border-radius: 50%;
    background: var(--stone-300);
    flex-shrink: 0;
}

/* Category select in table */
.cat-cell { min-width: 140px; }
.cat-select { width: 100%; font-size: 0.8rem; padding: 0.2rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--stone-500); cursor: pointer; }
.cat-select:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.cat-display { font-size: 0.82rem; }
.htmx-swapping { opacity: 0.5; transition: opacity var(--transition); }

/* Bulk bar */
.bulk-bar { align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--accent-light); border: 1px solid var(--teal-400); border-radius: var(--radius); margin-bottom: 0.75rem; font-size: 0.82rem; font-weight: 500; flex-wrap: wrap; }
.bulk-category-select { width: auto; padding: 0.25rem 0.5rem; font-size: 0.78rem; }
.chk-col { width: 2rem; text-align: center; }
.thumb-col { width: 44px; padding: 0.375rem 0.25rem 0.375rem 0.5rem !important; }
.receipt-list-thumb { display: block; width: 36px; height: 48px; object-fit: cover; border-radius: 3px; border: 1px solid var(--stone-100); background: var(--stone-50); }


/* ═══════════════════════════════════════════════════════
   Receipt Detail
   ═══════════════════════════════════════════════════════ */

/* Top bar: back link + actions */
.detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.detail-back {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.82rem; font-weight: 500;
    color: var(--stone-400);
    text-decoration: none;
    transition: color var(--transition);
}
.detail-back:hover { color: var(--stone-800); }
.detail-actions { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }

/* Hero: vendor + amount */
.detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--stone-100);
    flex-wrap: wrap;
}
.detail-hero-left { flex: 1; min-width: 0; }
.detail-vendor {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--stone-900);
    margin-bottom: 0.75rem;
    line-height: 1.2;
}
.detail-hero-chips {
    display: flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap;
}
.detail-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 500;
    color: var(--stone-500);
    background: var(--stone-100);
    padding: 0.225rem 0.6rem;
    border-radius: 99px;
    white-space: nowrap;
}
.detail-chip--teal {
    color: var(--teal-700);
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
}
.detail-hero-right {
    text-align: right;
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: flex-end;
}
.detail-amount {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--stone-900);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.detail-amount--missing { color: var(--stone-300); }
.detail-tax-note {
    font-size: 0.78rem; color: var(--stone-400);
    font-variant-numeric: tabular-nums;
}

/* Details DL — clean rows, no card */
.detail-dl {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.125rem 1.25rem;
    font-size: 0.875rem;
    max-width: 520px;
}
.detail-dl dt {
    font-size: 0.625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--stone-400);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--stone-50);
}
.detail-dl dd {
    color: var(--stone-700);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--stone-50);
}

/* Two-column grid */
.detail-grid { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; align-items: start; }
.detail-main {}
.detail-sidebar {}

/* File card */
.file-card {
    background: var(--stone-50);
    border: 1px solid var(--stone-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.file-preview-link {
    display: block; position: relative;
    text-decoration: none;
    cursor: zoom-in;
}
.receipt-image {
    display: block;
    width: 100%;
    border-radius: 0;
}
.file-preview-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    font-size: 0.82rem; font-weight: 600; color: #fff;
    transition: background var(--transition);
    opacity: 0;
}
.file-preview-link:hover .file-preview-overlay {
    background: rgba(0,0,0,0.35);
    opacity: 1;
}
.file-preview-doc {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2.5rem 1.5rem; gap: 0.5rem;
    min-height: 180px;
    text-decoration: none;
    color: var(--stone-500);
    transition: background var(--transition);
}
.file-preview-doc:hover { background: var(--stone-100); }

/* Inline notes editor */
.notes-section { margin-top: 1.5rem; }
.notes-section-header { display: flex; align-items: center; margin-bottom: 0.375rem; }
.notes-section-header .section-label { margin: 0; }
.notes-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0;
    animation: notes-status-in 0.25s ease forwards;
}
.notes-status--saved { color: var(--teal-600); }
.notes-status--error { color: #dc2626; }
@keyframes notes-status-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.notes-inline {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--stone-700);
    resize: vertical;
    transition: border-color 150ms, background 150ms;
    box-sizing: border-box;
}
.notes-inline:hover {
    border-color: var(--stone-200);
    background: var(--stone-50);
}
.notes-inline:focus {
    border-color: var(--teal-400);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}

/* OCR text */
.ocr-text {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--stone-50);
    overflow: hidden;
}
.ocr-text summary {
    cursor: pointer; user-select: none; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.875rem;
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--stone-500);
    transition: background var(--transition), color var(--transition);
    gap: 0.5rem;
}
.ocr-text summary::-webkit-details-marker { display: none; }
.ocr-text summary:hover { background: rgba(0,0,0,0.03); color: var(--stone-700); }
.ocr-text summary::after {
    content: '';
    display: inline-block;
    width: 1rem; height: 1rem; flex-shrink: 0;
    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='%2378716c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
    transition: transform 200ms ease;
}
.ocr-text[open] summary::after { transform: rotate(180deg); }
.ocr-text[open] summary { color: var(--stone-700); border-bottom: 1px solid var(--border); }
.ocr-text pre { margin: 0; padding: 0.75rem 0.875rem; }

/* File modal (dialog) */
.file-modal {
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.35);
    width: min(92vw, 1000px);
    height: 90vh;
    overflow: hidden;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    margin: 0;
}
.file-modal[open] {
    display: flex;
}
.file-modal::backdrop {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
}
.file-modal-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.file-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.file-modal-header h2 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--stone-800);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.file-modal-close {
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem 0.625rem;
}
.file-modal-body {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--stone-900);
    min-height: 0;
}
.file-modal-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.file-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
    background: #fff;
}

/* Receipt preview modal (duplicates page) */
.rp-modal-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.rp-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.875rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.rp-modal-title {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.rp-modal-title strong {
    font-size: 0.95rem;
    color: var(--stone-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rp-modal-amount {
    font-size: 0.85rem;
    color: var(--stone-500);
}
.rp-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.rp-modal-body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.rp-modal-body--html {
    padding: 0;
    gap: 0;
}
.rp-modal-image-wrap {
    text-align: center;
    background: var(--stone-900);
    border-radius: var(--radius);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-modal-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.rp-modal-email-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    flex: 1;
    min-height: 0;
    display: flex;
    margin: 1rem 1rem 0;
}
.rp-modal-email-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
}
.rp-modal-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.rp-modal-dl--html {
    grid-template-columns: repeat(4, auto);
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.875rem 1rem 1rem;
    border-top: 1px solid var(--border);
    background: #fff;
}
.rp-modal-dl--html dt {
    margin-left: 0.75rem;
}
.rp-modal-dl--html dt:first-child {
    margin-left: 0;
}
.rp-modal-dl dt {
    color: var(--stone-500);
    font-weight: 500;
    white-space: nowrap;
}
.rp-modal-dl dd {
    margin: 0;
    color: var(--stone-700);
}

/* Email archive */
.email-archive-frame { width: 100%; height: 420px; border: none; display: block; }

/* Line items */
.receipt-items { margin-top: 2rem; }

/* Item details list */
.item-details-list { list-style: none; margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; }
.receipt-file h2 { margin-bottom: 0.25rem; }

.items-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.85rem; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs); border: 1px solid var(--border); }
.items-table th { text-align: left; border-bottom: 1px solid var(--border); padding: 0.45rem 0.75rem; font-size: 0.625rem; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.1em; background: var(--stone-50); font-weight: 700; }
.items-table th.num { text-align: right; }
.items-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--stone-100); }
.items-table tr:last-child td { border-bottom: none; }
.items-table tr.discount td { color: var(--muted); }

.item-name-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.item-expanded, .item-type { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.35rem; border-radius: 99px; vertical-align: middle; }
.item-expanded { background: var(--emerald-50); color: var(--emerald-600); }
.item-type     { background: var(--blue-50);    color: var(--blue-600); }
.item-details { margin-top: 0.3rem; }
.item-details summary { font-size: 0.72rem; font-weight: 500; color: var(--muted); cursor: pointer; user-select: none; padding: 0.15rem 0; }
.item-details summary:hover { color: var(--fg); }
.item-details ul { list-style: none; margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; }
.item-detail-row { display: flex; gap: 0.75rem; font-size: 0.78rem; }
.item-detail-key { font-weight: 600; color: var(--muted); text-transform: capitalize; min-width: 6rem; }
.item-detail-val { color: var(--fg); }
.detail-item-tags-grid {
    display: grid;
    gap: 0.75rem;
}
.detail-item-tag-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.detail-item-tag-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}
.detail-item-tag-header strong {
    font-size: 0.9rem;
    color: var(--stone-900);
}
.detail-item-tag-meta {
    font-size: 0.75rem;
    color: var(--stone-500);
}
.detail-item-tags-editor {
    gap: 0.45rem;
}
.detail-item-tags-editor .tag-add-form {
    width: 100%;
    max-width: 18rem;
}
.detail-item-tags-editor .tag-input {
    width: 100%;
    border-color: var(--border);
    background: var(--stone-50);
    min-width: 0;
    flex: 1 1 10rem;
}
.detail-item-tags-editor .tag-add-btn { flex: 0 0 auto; }


/* ═══════════════════════════════════════════════════════
   Search
   ═══════════════════════════════════════════════════════ */

.search-form { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; align-items: center; }
.search-form input[type="search"] { flex: 1; padding: 0.6rem 0.85rem; font-size: 0.95rem; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
/* Search spinner: keep it in flow so the input width stays stable */
.search-spinner {
    font-size: 0.82rem; color: var(--muted);
    display: inline !important; /* always in flow */
    opacity: 0;
    transition: opacity 0.15s;
    white-space: nowrap;
    pointer-events: none;
}
.htmx-request .search-spinner { opacity: 1; }


/* ═══════════════════════════════════════════════════════
   Categories
   ═══════════════════════════════════════════════════════ */

.category-add-form { background: var(--surface); padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 1.5rem; box-shadow: var(--shadow-xs); }
.category-add-form h2 { margin-top: 0; }
.category-add-form button { margin-top: 0.75rem; }


/* ═══════════════════════════════════════════════════════
   History / Audit Trail
   ═══════════════════════════════════════════════════════ */

.history-list { list-style: none; }
.history-entry { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 0.75rem; background: var(--surface); box-shadow: var(--shadow-xs); }
.history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.history-op { font-weight: 700; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.12rem 0.5rem; border-radius: 99px; }
.history-INSERT .history-op { background: var(--success-bg); color: var(--success-fg); }
.history-UPDATE .history-op { background: var(--blue-50); color: var(--blue-600); }
.history-DELETE .history-op { background: var(--error-bg); color: var(--error-fg); }
.history-header time { color: var(--muted); font-size: 0.78rem; }
.history-diff { margin-top: 0.25rem; width: 100%; table-layout: fixed; }
.history-diff col.col-field { width: 20%; }
.history-diff col.col-before, .history-diff col.col-after { width: 40%; }
.history-diff thead th, .history-diff tbody td { vertical-align: top; word-break: break-word; }
.history-diff .history-field { font-weight: 600; text-transform: capitalize; }
.history-old { color: var(--danger); text-decoration: line-through; opacity: 0.75; }
.history-new { color: var(--success-fg); }
.history-note { color: var(--muted); font-size: 0.875rem; }

/* ── Unified history timeline ── */
.htl-list { list-style: none; padding: 0; }
.htl-entry { display: flex; gap: 0; position: relative; }
.htl-entry:last-child .htl-line { display: none; }

.htl-dot-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 2rem; margin-right: 0.875rem; padding-top: 0.125rem; }
.htl-dot {
    width: 0.625rem; height: 0.625rem; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--border);
    background: var(--stone-300);
}
.htl-INSERT .htl-dot  { background: var(--success-fg); box-shadow: 0 0 0 2px #bbf7d0; }
.htl-DELETE .htl-dot  { background: var(--danger); box-shadow: 0 0 0 2px #fecaca; }
.htl-UPDATE .htl-dot  { background: var(--blue-600); box-shadow: 0 0 0 2px #bfdbfe; }
.htl-item .htl-dot    { border-style: dashed; }
.htl-line { flex: 1; width: 1px; background: var(--border); min-height: 1.25rem; margin: 0.25rem 0; }

.htl-body { flex: 1; min-width: 0; padding-bottom: 1.25rem; }
.htl-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.375rem; flex-wrap: wrap; }
.htl-title { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; }
.htl-subject { font-weight: 600; font-size: 0.875rem; color: var(--stone-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htl-time { color: var(--muted); font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.htl-kind-badge {
    font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.1rem 0.45rem; border-radius: 9999px; flex-shrink: 0;
}
.htl-kind-receipt { background: var(--stone-100); color: var(--stone-500); }
.htl-kind-item    { background: #ede9fe; color: #5b21b6; }

.htl-op { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 99px; flex-shrink: 0; }
.htl-op-insert { background: var(--success-bg); color: var(--success-fg); }
.htl-op-update { background: #dbeafe; color: var(--blue-600); }
.htl-op-delete { background: var(--error-bg); color: var(--error-fg); }

.htl-diff { margin-top: 0.375rem; width: 100%; table-layout: fixed; font-size: 0.8125rem; }
.htl-diff col.col-field  { width: 22%; }
.htl-diff col.col-before { width: 39%; }
.htl-diff col.col-after  { width: 39%; }
.htl-diff thead th { font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 0.25rem; }
.htl-diff tbody td { vertical-align: top; word-break: break-word; padding: 0.125rem 0; }
.htl-note { color: var(--muted); font-size: 0.875rem; margin: 0; }


/* ═══════════════════════════════════════════════════════
   Settings / Ingest
   ═══════════════════════════════════════════════════════ */

.ingest-card { margin-bottom: 1.5rem; border-color: var(--teal-400); border-width: 2px; }
.ingest-card--secondary {
    border-width: 1px;
    border-color: var(--border);
    box-shadow: none;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, var(--surface) 100%);
}
.ingest-card--secondary .ingest-card-header svg {
    color: var(--stone-400);
}
.ingest-card--secondary .ingest-card-header h2 {
    font-size: 1rem;
}
.ingest-card--secondary .ingest-card-header p,
.ingest-card--secondary .ingest-tip,
.ingest-card--secondary .ingest-advanced summary {
    color: var(--stone-500);
}
.ingest-card--secondary .ingest-email-box {
    background: var(--surface);
}
.ingest-card--secondary .btn-primary {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--border);
}
.ingest-card--secondary .btn-primary:hover {
    background: var(--stone-50);
    color: var(--fg);
    border-color: var(--stone-300);
}
.ingest-card-header { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 0.75rem; }
.ingest-card-header svg { flex-shrink: 0; color: var(--accent); margin-top: 0.15rem; }
.ingest-card-header h2 { margin-bottom: 0.15rem; }
.ingest-card-header p { color: var(--muted); font-size: 0.875rem; margin: 0; }
.ingest-email-box { display: flex; align-items: center; gap: 0.75rem; background: var(--stone-50); padding: 0.75rem 1rem; border-radius: var(--radius); margin: 1rem 0; border: 1px solid var(--border); }
.ingest-email-box code { font-size: 0.95rem; font-weight: 700; color: var(--accent); word-break: break-all; flex: 1; }
.ingest-steps { margin-top: 1rem; }
.ingest-steps h3 { font-size: 0.9rem; margin-bottom: 0.5rem; }
.ingest-steps ol { padding-left: 1.5rem; }
.ingest-steps li { margin-bottom: 0.5rem; font-size: 0.875rem; }
.ingest-tip { font-size: 0.8rem; color: var(--muted); margin-top: 0.75rem; }
.ingest-advanced { margin-top: 1rem; font-size: 0.875rem; }
.ingest-advanced summary { cursor: pointer; color: var(--muted); font-weight: 500; }
.ingest-advanced summary:hover { color: var(--fg); }
.ingest-advanced p { margin-top: 0.5rem; }
.settings-section { margin-bottom: 1.5rem; }
.settings-section h2 { margin-top: 0; margin-bottom: 0.85rem; }
.settings-table td {
    vertical-align: top;
}
.settings-dl { display: grid; grid-template-columns: 7rem 1fr; gap: 0.4rem 1rem; }
.settings-dl dt { font-weight: 700; color: var(--stone-400); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; padding-top: 0.1rem; }
.settings-dl dd { font-size: 0.875rem; }
.settings-email-account {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}
.settings-email-account-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.settings-email-account-meta strong,
.settings-email-account-meta small {
    min-width: 0;
    overflow-wrap: anywhere;
}
.settings-email-status {
    min-width: 0;
}
.settings-email-status .email-conn-status {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}
.settings-email-status .status {
    white-space: nowrap;
    flex: 0 0 auto;
}
.settings-email-status .email-conn-status-copy {
    min-width: 0;
    flex: 1 1 18rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
    color: var(--stone-600);
    font-size: 0.8rem;
}
.settings-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.settings-actions a,
.settings-actions form {
    flex: 0 0 auto;
}
.settings-actions form {
    display: inline-flex;
    margin: 0;
}
.settings-email-actions {
    margin-top: 0.1rem;
}
.gmail-connect-card { max-width: 48rem; }
.gmail-connect-card h1 { margin: 0 0 0.25rem; }
.inbox-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; margin-top: 1rem; }
.inbox-provider-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.inbox-provider-card:hover { border-color: var(--teal-400); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.inbox-provider-card-head { display: flex; align-items: center; gap: 0.75rem; }
.inbox-provider-card-head strong { display: block; font-size: 0.95rem; }
.inbox-provider-card-head small { color: var(--muted); font-size: 0.75rem; }
.inbox-provider-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--stone-50); }
.inbox-provider-card p { margin: 0; color: var(--stone-600); font-size: 0.84rem; line-height: 1.5; }
.inbox-provider-card-link { font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.gmail-connect-form { margin-top: 1rem; }
.gmail-scope-list { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.gmail-scope-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    cursor: pointer;
}
.gmail-scope-option input[type="radio"] { margin-top: 0.2rem; }
.gmail-scope-copy { display: flex; flex-direction: column; gap: 0.15rem; }
.gmail-scope-copy strong { font-size: 0.95rem; }
.gmail-scope-copy small { color: var(--muted); font-size: 0.8rem; }
.gmail-custom-date { max-width: 16rem; margin-bottom: 1rem; }
.gmail-custom-date p { margin: 0.35rem 0 0; font-size: 0.8rem; }
.gmail-connect-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.gmail-review-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.gmail-review-value { font-size: 1.8rem; }
.gmail-review-note { margin: 0 0 1rem; color: var(--stone-700); font-size: 0.9rem; }
.gmail-review-adjust { margin-top: 1.25rem; }
.gmail-review-adjust h2 { margin-top: 0; }
.imap-connect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; margin-top: 1rem; }
.imap-connect-panel { padding: 1rem 1.1rem; }
.imap-connect-panel h2 { margin-top: 0; margin-bottom: 0.5rem; font-size: 0.95rem; }
.imap-connect-panel .help-list { margin: 0; padding-left: 1.1rem; }
.imap-connect-panel .help-list li { margin-bottom: 0.45rem; font-size: 0.84rem; color: var(--stone-700); }
.imap-connect-panel .text-muted { margin-bottom: 0; font-size: 0.8rem; }
.imap-folder-picker { display: grid; gap: 0.75rem; }
.imap-folder-picker-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.imap-folder-browser {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--stone-50) 0%, var(--surface) 100%);
    padding: 0.85rem 0.9rem;
}
.imap-folder-browser-summary {
    margin-bottom: 0.65rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--stone-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.imap-folder-browser-empty strong { display: block; margin-bottom: 0.3rem; font-size: 0.88rem; }
.imap-folder-browser-empty p { margin: 0; color: var(--stone-600); font-size: 0.82rem; line-height: 1.5; }
.imap-folder-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.imap-folder-tree .imap-folder-tree {
    margin-top: 0.35rem;
    margin-left: 1.2rem;
    padding-left: 0.8rem;
    border-left: 1px solid var(--stone-200);
}
.imap-folder-node {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.2rem 0;
    font-size: 0.86rem;
    color: var(--stone-800);
}
.imap-folder-node input[type="checkbox"] { margin-right: 0.1rem; }
.imap-folder-node small {
    color: var(--stone-500);
    font-size: 0.72rem;
    font-family: 'Fira Mono', 'Cascadia Code', 'Consolas', monospace;
}


/* ═══════════════════════════════════════════════════════
   Onboarding
   ═══════════════════════════════════════════════════════ */

.onboarding-card { background: var(--surface); border: 1px dashed var(--stone-300); border-radius: var(--radius-lg); padding: 2.5rem 2rem; text-align: center; }
.onboarding-card h2 { margin-top: 0; font-size: 1.1rem; }
.onboarding-intro { color: var(--stone-400); font-size: 0.875rem; margin-bottom: 0; }
.onboarding-list { padding-left: 1.5rem; text-align: left; display: inline-block; margin-top: 0.75rem; }
.onboarding-list li { margin-bottom: 0.875rem; font-size: 0.875rem; }
.onboarding-note { color: var(--stone-400); }
.onboarding-note-link { color: var(--stone-400); }
.onboarding-note-link:hover { color: var(--accent); }
.onboarding-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ingest-email-inline { background: var(--accent-light); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.875rem; display: inline-block; margin-top: 0.25rem; color: var(--accent); font-weight: 600; }


/* ═══════════════════════════════════════════════════════
   Tags
   ═══════════════════════════════════════════════════════ */

.tags-container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.tag { display: inline-flex; align-items: center; gap: 0.15rem; background: var(--accent-light); color: var(--accent); padding: 0.12rem 0.45rem; border-radius: 99px; font-size: 0.7rem; font-weight: 600; transition: background var(--transition); }
.tag:hover { background: var(--teal-100); }
.tag-remove { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 0.85rem; padding: 0 0.1rem; line-height: 1; opacity: 0.6; transition: opacity var(--transition); }
.tag-remove:hover { opacity: 1; color: var(--danger); }
.tag-add-form { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tag-input { border: 1px solid transparent; background: transparent; padding: 0.15rem 0.4rem; font-size: 0.78rem; width: 7.5rem; min-height: 2rem; border-radius: var(--radius-sm); transition: all var(--transition); }
.tag-input:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.tag-add-btn { white-space: nowrap; }
.tag-small { font-size: 0.65rem; padding: 0.08rem 0.35rem; text-decoration: none; }
.tags-cell { max-width: 180px; }
.tags-cell .tag { margin: 0.1rem; }
.bulk-tag-input { width: 110px; padding: 0.28rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.78rem; background: var(--surface); }
.item-tags-cell { min-width: 120px; }
.item-tags-cell .tag { margin: 0.1rem; }
.tag-input-sm { width: 50px; padding: 0.15rem 0.3rem; font-size: 0.7rem; }
.tags-page .tag-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.tags-page .inline-form { display: flex; gap: 0.25rem; align-items: center; }
.tags-page .tag-input { width: 100px; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; background: var(--surface); }


/* ═══════════════════════════════════════════════════════
   Duplicate Warning
   ═══════════════════════════════════════════════════════ */

.duplicate-warning { display: flex; align-items: flex-start; gap: 0.6rem; background: var(--warning-bg); color: var(--warning-fg); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--amber-400); }
.duplicate-warning svg { flex-shrink: 0; margin-top: 0.1rem; }
.duplicate-warning a { color: var(--warning-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dupe-warning-content { flex: 1; }
.dupe-warning-item { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.35rem; }
.dupe-warning-item:first-child { margin-top: 0.5rem; }
.dupe-warning-item a { flex: 1; min-width: 0; }
.dupe-warning-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.dupe-warning-actions .btn-small { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
.dupe-card { padding: 1.25rem; margin-bottom: 0.875rem; }
.dupe-card.dupe-resolved { opacity: 0.55; }

.dupe-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.dupe-card-title {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--stone-500);
}
.dupe-hint { font-size: 0.78rem; color: var(--muted); font-style: italic; }

.dupe-pair {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: stretch; gap: 0.75rem; margin-bottom: 1rem;
}
.dupe-vs-col { display: flex; align-items: center; justify-content: center; }
.dupe-vs {
    font-size: 0.7rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    background: var(--stone-100); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.2rem 0.5rem;
}

.dupe-receipt { display: flex; flex-direction: column; gap: 0.5rem; }
.dupe-receipt-num {
    font-size: 0.625rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--stone-400);
}
.dupe-link {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.75rem 0.875rem; border-radius: var(--radius);
    background: var(--stone-50); border: 1px solid var(--border);
    text-decoration: none; color: var(--fg);
    transition: border-color var(--transition), box-shadow var(--transition);
    flex: 1;
}
.dupe-link:hover { border-color: var(--teal-400); box-shadow: 0 0 0 3px var(--accent-glow); }
.dupe-link::after {
    content: '↗ view receipt';
    font-size: 0.68rem; color: var(--teal-600); margin-top: 0.3rem;
    font-weight: 500;
}
.dupe-vendor { font-weight: 600; font-size: 0.925rem; color: var(--stone-900); }
.dupe-amount { font-size: 1.125rem; font-weight: 700; color: var(--stone-900); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dupe-date { font-size: 0.78rem; color: var(--stone-500); }
.dupe-source {
    display: flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: var(--muted); text-transform: capitalize;
    margin-top: 0.1rem;
}
.dupe-id-label { font-size: 0.68rem; color: var(--stone-300); font-family: monospace; }

.dupe-trash-btn { display: flex; align-items: center; gap: 0.3rem; width: 100%; justify-content: center; }
.dupe-receipt-action { margin-top: 0; }

.dupe-dismiss {
    padding-top: 0.75rem; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end;
}
.dupe-dismiss .btn { display: flex; align-items: center; gap: 0.35rem; }


/* ═══════════════════════════════════════════════════════
   Tax Summary Cards
   ═══════════════════════════════════════════════════════ */

.summary-page table + h2 { margin-top: 2rem; }
.summary-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0.75rem; margin-bottom: 2rem; }
.summary-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.125rem; box-shadow: var(--shadow-xs); }
.summary-label { display: block; font-size: 0.625rem; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 0.25rem; }
.summary-value { display: block; font-size: 1.5rem; font-weight: 700; margin-top: 0.15rem; letter-spacing: -0.025em; color: var(--stone-900); font-variant-numeric: tabular-nums; }
tfoot th, tfoot td { border-top: 1px solid var(--stone-200); font-size: 0.85rem; }


/* ═══════════════════════════════════════════════════════
   Queue
   ═══════════════════════════════════════════════════════ */

.queue-summary { margin-bottom: 1.5rem; }
.queue-summary .status { margin-right: 0.5rem; }
.queue-summary .quota-usage { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted); }
.queue-summary .quota-usage strong { color: var(--stone-700); }
.queue-housekeeping-note { margin: 0.65rem 0 1rem; font-size: 0.85rem; color: var(--muted); }
.queue-housekeeping-note a { color: var(--accent); text-decoration: none; }
.queue-housekeeping-note a:hover { text-decoration: underline; }
.queue-page h2 { margin-top: 1.5rem; }


/* ═══════════════════════════════════════════════════════
   Upload
   ═══════════════════════════════════════════════════════ */

.upload-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 3rem 1.5rem; border: 1px dashed var(--stone-300); border-radius: var(--radius-lg); background: var(--stone-50); text-align: center; cursor: pointer; transition: all var(--transition); color: var(--muted); margin-bottom: 1.5rem; }
.upload-dropzone:hover, .upload-dropzone.dragover { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.upload-dropzone.has-file { border-color: var(--emerald-600); background: var(--emerald-50); color: var(--emerald-600); }
.upload-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone-text { font-size: 0.95rem; font-weight: 500; margin: 0; }
.dropzone-browse { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dropzone-hint { font-size: 0.75rem; margin: 0; }
.dropzone-filename { font-size: 0.875rem; font-weight: 600; color: var(--fg); margin: 0; min-height: 1.2em; }
.upload-fields { max-width: 540px; }
.upload-fields > .btn { margin-top: 1.25rem; }


/* ═══════════════════════════════════════════════════════
   Admin
   ═══════════════════════════════════════════════════════ */

.admin-nav { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; padding: 0.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.admin-nav .btn { box-shadow: none; border: 1px solid transparent; font-weight: 500; }
.admin-nav .btn:hover { background: var(--stone-50); color: var(--accent); border-color: transparent; }
.admin-nav .btn-primary { background: var(--stone-900); color: #fff; border-color: var(--stone-900); }
.admin-nav .btn-primary:hover { background: var(--stone-800); border-color: var(--stone-800); box-shadow: none; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.125rem; box-shadow: var(--shadow-xs); transition: box-shadow var(--transition); }
.stat-card:hover { box-shadow: var(--shadow-sm); }
.stat-card-danger { border-color: var(--red-400); border-width: 2px; }
.stat-label { display: block; font-size: 0.625rem; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.stat-value { display: block; font-size: 1.5rem; font-weight: 700; margin-top: 0.15rem; letter-spacing: -0.02em; color: var(--stone-900); font-variant-numeric: tabular-nums; }
.stat-detail { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 0.1rem; }

.admin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.admin-section { margin-bottom: 1.25rem; background: var(--surface); padding: 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.admin-section h2 { margin-top: 0; }
.admin-edit-form { max-width: 600px; }
.queue-error { max-width: 300px; font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-viewing-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.875rem; margin-bottom: 1rem; background: #fefce8; border: 1px solid #fde047; border-radius: var(--radius); font-size: 0.8125rem; color: #713f12; }
.admin-viewing-banner svg { flex-shrink: 0; color: #ca8a04; }
.admin-viewing-banner a { color: #92400e; font-weight: 600; text-decoration: underline; }

.queue-changes { max-width: 340px; }
.qchange { display: inline-block; font-size: 0.7rem; padding: 0.15rem 0.4rem; border-radius: 3px; background: var(--stone-100); border: 1px solid var(--border); color: var(--stone-600); white-space: nowrap; margin: 0.1rem 0.15rem 0.1rem 0; }
.qchange b { color: var(--stone-500); font-weight: 600; }
.qchange em { font-style: normal; color: var(--stone-400); }
.qchange-set { background: #f0fdf4; border-color: #86efac; color: #166534; }
.qchange-set b { color: #15803d; }
.qchange-unset { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.qchange-unset b { color: #b91c1c; }


/* ═══════════════════════════════════════════════════════
   Receipt list footer + Pagination
   ═══════════════════════════════════════════════════════ */

/* Footer row: total + pager side by side */
.receipt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0.5rem 0;
    margin-top: 0.125rem;
    border-top: 1px solid var(--stone-200);
    gap: 1rem;
    flex-wrap: wrap;
}
.receipt-footer-total {
    display: flex; align-items: center; gap: 1rem;
    font-size: 0.875rem;
}
.receipt-footer-amount {
    font-weight: 700; color: var(--stone-900);
    font-variant-numeric: tabular-nums;
}

/* Editorial pager */
.pager {
    display: flex; align-items: center; gap: 0.25rem;
}
.pager-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--stone-200);
    background: var(--surface);
    color: var(--stone-500);
    text-decoration: none;
    transition: all var(--transition);
    box-shadow: var(--shadow-xs);
}
.pager-btn:hover { background: var(--stone-50); border-color: var(--stone-300); color: var(--stone-800); }
.pager-btn--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.pager-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem;
    padding: 0 0.375rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 0.82rem; font-weight: 500;
    color: var(--stone-500);
    text-decoration: none;
    transition: all var(--transition);
}
.pager-num:hover { background: var(--stone-100); color: var(--stone-800); }
.pager-num--active {
    background: var(--teal-700);
    color: #fff;
    border-color: var(--teal-700);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15,118,110,0.25);
}
.pager-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem;
    font-size: 0.82rem; color: var(--stone-400);
    user-select: none;
}

/* Legacy pagination (other pages) */
.pagination { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.pagination-info { font-size: 0.8rem; color: var(--muted); font-weight: 500; }


/* ═══════════════════════════════════════════════════════
   Log Viewer
   ═══════════════════════════════════════════════════════ */

.log-viewer { background: var(--stone-900); color: var(--stone-300); padding: 1.25rem; border-radius: var(--radius-lg); font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace; font-size: 0.72rem; max-height: 600px; overflow-y: auto; box-shadow: var(--shadow-lg); line-height: 1.75; }
.log-line { padding: 0.1rem 0; white-space: pre-wrap; word-break: break-all; border-bottom: 1px solid rgba(255,255,255,0.04); }


/* ═══════════════════════════════════════════════════════
   Error Page
   ═══════════════════════════════════════════════════════ */

.error-page { display: flex; justify-content: center; padding: 5rem 1rem; }
.error-content { text-align: center; }
.error-code { display: block; font-size: 5rem; font-weight: 800; color: var(--stone-200); line-height: 1; letter-spacing: -0.04em; }
.error-content h1 { font-size: 1.25rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }
.error-content p { color: var(--muted); margin-bottom: 1.5rem; }


/* ═══════════════════════════════════════════════════════
   Utilities
   ═══════════════════════════════════════════════════════ */

.inline { display: inline; }
.empty-state { color: var(--muted); font-size: 0.875rem; padding: 2rem 0; }
.text-muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success-fg); }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; }


/* ═══════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════ */

/* Mobile topbar — hidden on desktop */
.mobile-topbar { display: none; }
.sidebar-close  { display: none; }

/* Utility: hidden on mobile (set below) */
.hide-mobile { /* desktop: visible */ }

/* Receipt table scroll wrapper */
.receipt-table-wrap { width: 100%; }

/* Docs shell (public docs pages) */
.docs-shell {
    display: flex;
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    gap: 3rem;
    min-height: calc(100vh - 120px);
    align-items: flex-start;
}
.docs-sidebar {
    width: 200px;
    flex-shrink: 0;
    position: sticky;
    top: 5rem;
}
.docs-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--stone-400);
    margin: 0 0 0.375rem;
    padding: 0 0.5rem;
}
.docs-nav-link {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    color: var(--stone-600);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
}
.docs-nav-link:hover { background: var(--stone-100); color: var(--stone-900); }
.docs-nav-link--active { background: var(--teal-50); color: var(--teal-800); font-weight: 500; }
.docs-content { flex: 1; min-width: 0; }

/* Help / forwarding setup page */
.help-page { max-width: 720px; }
.help-page .page-subtitle { color: var(--stone-500); margin-top: 0.25rem; }
.help-toc { padding: 1rem 1.25rem; margin-bottom: 0.5rem; }
.help-toc .section-label { margin-bottom: 0.5rem; }
.help-toc-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.help-toc-links a { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.82rem; color: var(--teal-700); text-decoration: none; padding: 0.2rem 0.625rem; border: 1px solid var(--teal-200); border-radius: 999px; background: var(--teal-50); transition: background var(--transition), border-color var(--transition); }
.help-toc-links a:hover { background: var(--teal-100); border-color: var(--teal-400); }
.help-section { padding: 1.5rem; margin-bottom: 0.5rem; }
.help-section h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.help-section p { color: var(--stone-600); margin: 0.75rem 0 0; font-size: 0.9rem; }
.help-section-header { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.help-section-header svg { flex-shrink: 0; }
.help-badge { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--stone-100); color: var(--stone-500); border: 1px solid var(--stone-200); }
.help-badge-download { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-200); }
.help-steps { margin: 1rem 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.help-steps li { color: var(--stone-600); font-size: 0.9rem; line-height: 1.55; }
.help-steps li strong { color: var(--stone-800); }
.help-steps li code { font-size: 0.82rem; }
.help-list { margin: 0.75rem 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.help-list li { color: var(--stone-600); font-size: 0.9rem; }
.help-note { font-size: 0.82rem !important; color: var(--stone-500) !important; margin-top: 0.875rem !important; }
.help-download-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 0.875rem 1rem; background: var(--stone-50); border: 1px solid var(--stone-200); border-radius: var(--radius); }
.help-download-desc { display: block; font-size: 0.8rem; color: var(--stone-500); margin-top: 0.125rem; }
.help-warning { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.875rem; padding: 0.75rem 0.875rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); font-size: 0.85rem; color: #92400e; }
.help-warning svg { flex-shrink: 0; margin-top: 0.1rem; color: #d97706; }
.help-code { margin: 0.875rem 0 0; padding: 0.875rem 1rem; background: var(--stone-900); border-radius: var(--radius); overflow-x: auto; }
.help-code code { font-size: 0.8rem; color: #e2e8f0; line-height: 1.6; white-space: pre; }
.help-manual { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.help-manual summary { cursor: pointer; font-size: 0.82rem; color: var(--stone-500); user-select: none; list-style: none; }
.help-manual summary::-webkit-details-marker { display: none; }
.help-manual summary::before { content: '▶  '; font-size: 0.6rem; }
.help-manual[open] summary::before { content: '▼  '; }
.help-screenshot { margin: 0 0 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.help-screenshot img { display: block; width: 100%; height: auto; }
.help-screenshot figcaption { font-size: 0.78rem; color: var(--stone-500); padding: 0.5rem 0.875rem; border-top: 1px solid var(--border); background: var(--stone-50); }
.help-section h3 { font-size: 0.9rem; font-weight: 700; color: var(--stone-800); margin: 1.25rem 0 0; }
.help-fields { display: flex; flex-direction: column; gap: 0; margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.help-field { display: grid; grid-template-columns: 9rem 1fr; border-bottom: 1px solid var(--border); }
.help-field:last-child { border-bottom: none; }
.help-field-name { font-size: 0.82rem; font-weight: 600; color: var(--stone-700); padding: 0.625rem 0.875rem; background: var(--stone-50); }
.help-field-desc { font-size: 0.82rem; color: var(--stone-600); padding: 0.625rem 0.875rem; line-height: 1.5; }
@media (max-width: 600px) {
    .help-field { grid-template-columns: 1fr; }
    .help-field-name { border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
}

/* ── 768px breakpoint: sidebar slides, topbar appears ── */
@media (max-width: 768px) {

    /* ── Mobile topbar ── */
    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 3.25rem;
        padding: 0 1rem;
        background: var(--stone-50);
        border-bottom: 1px solid rgba(0,0,0,0.07);
        position: sticky;
        top: 0;
        z-index: 200;
        flex-shrink: 0;
    }
    .mobile-hamburger {
        background: none; border: none;
        padding: 0.5rem; margin: -0.5rem;
        cursor: pointer; color: var(--stone-600);
        display: flex; align-items: center; justify-content: center;
        border-radius: var(--radius);
        transition: background var(--transition);
        min-width: 2.75rem; min-height: 2.75rem;
    }
    .mobile-hamburger:hover { background: rgba(0,0,0,0.05); }
    .mobile-topbar-logo {
        display: flex; align-items: center; gap: 0.5rem;
        text-decoration: none; color: var(--stone-900);
        font-weight: 700; font-size: 0.9375rem;
        letter-spacing: -0.02em;
        font-family: ui-monospace, 'Cascadia Code', monospace;
    }
    .mobile-topbar-logo-icon {
        width: 1.75rem; height: 1.75rem;
        background: var(--teal-700); color: #fff;
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .mobile-topbar-action {
        color: var(--stone-500); display: flex; align-items: center;
        padding: 0.5rem; margin: -0.5rem;
        border-radius: var(--radius);
        min-width: 2.75rem; min-height: 2.75rem; justify-content: center;
        transition: color var(--transition);
    }
    .mobile-topbar-action:hover { color: var(--teal-700); }

    /* ── Sidebar overlay ── */
    .sidebar-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 90;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .sidebar-overlay.open { display: block; }

    /* ── Sidebar ── */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(0.4,0,0.2,1);
        top: 0;
        z-index: 210; /* above mobile topbar (200) */
        box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay { z-index: 205; } /* between sidebar and topbar so topbar is hidden under overlay */
    .sidebar-close {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: 0.75rem; right: 0.75rem;
        width: 2rem; height: 2rem;
        background: none; border: none;
        color: var(--stone-400); cursor: pointer;
        border-radius: var(--radius);
        transition: all var(--transition);
    }
    .sidebar-close:hover { background: rgba(0,0,0,0.06); color: var(--stone-700); }

    /* ── Content area ── */
    .content-wrap { margin-left: 0; overflow-x: hidden; }
    .content-wrap main { padding: 1.5rem 1rem 4rem; overflow-x: hidden; }
    h1, h2 { word-break: break-word; }

    /* ── Receipt list ── */
    .receipt-hero { margin-bottom: 1.5rem; }
    .receipt-hero-total { font-size: 2.25rem; }
    .filter-form { gap: 0.5rem; }
    .filter-form > div { flex: 1 1 calc(50% - 0.5rem); min-width: 110px; }
    .filter-form > div:last-child { flex: 1 1 100%; margin-left: 0 !important; justify-content: flex-end; }
    .receipt-controls { flex-wrap: wrap; gap: 0.5rem; }
    .receipt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; }
    .hide-mobile { display: none !important; }
    .chk-col { display: none !important; }
    .cat-cell { display: none !important; }
    .receipt-td-vendor { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .receipt-footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .bulk-bar { flex-wrap: wrap; gap: 0.375rem; }
    .bulk-tag-input { min-width: 0; flex: 1 1 100%; }

    /* ── Receipt detail ── */
    .detail-topbar { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .detail-actions { flex-wrap: wrap; gap: 0.375rem; }
    .detail-hero { flex-direction: column; gap: 1rem; }
    .detail-hero-right { text-align: left; align-items: flex-start; }
    .detail-amount { font-size: 2rem; }
    .detail-vendor { font-size: 1.5rem; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-dl { max-width: 100%; grid-template-columns: 5.5rem 1fr; }
    .detail-item-tag-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .detail-item-tags-editor .tag-add-form { max-width: none; }
    .detail-item-tags-editor .tag-add-btn { width: 100%; justify-content: center; }

    /* ── Page headers ── */
    .page-header { flex-wrap: wrap; gap: 0.5rem; }

    /* ── Duplicates ── */
    .dupe-pair { grid-template-columns: 1fr; }
    .dupe-vs-col { padding: 0.25rem 0; }

    /* ── Admin ── */
    .admin-columns { grid-template-columns: 1fr; }
    .admin-nav { flex-wrap: wrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; }
    .admin-section { overflow-x: hidden; }
    .settings-dl { grid-template-columns: 1fr; gap: 0.25rem; }
    .settings-dl dt { padding-top: 0; }
    .ingest-email-box { flex-wrap: wrap; }
    .ingest-email-box code { word-break: break-all; flex: 1 1 100%; margin-bottom: 0.5rem; }
    .ingest-email-box .btn { flex: none; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); overflow-x: auto; }

    /* ── Admin tables ── */
    .admin-nav ~ table,
    .admin-section > table,
    main > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    .admin-nav ~ table td,
    main > table td {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Tables (non-receipt) ── */
    .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Pager ── */
    .pager { flex-wrap: wrap; gap: 0.25rem; }

    /* ── Misc ── */
    .form-row { flex-direction: column; gap: 0.5rem; }
    .actions { flex-wrap: wrap; }
    .email-archive-links { flex-direction: column; }
    .email-archive-links .btn { flex: none; }
    .docs-sidebar { display: none; }
    .docs-shell { padding: 1.5rem 1rem; }
    .shell-email-status {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--radius-lg);
    }
    .shell-email-status-list {
        width: 100%;
    }
    .shell-email-pill {
        width: 100%;
        border-radius: var(--radius);
        align-items: flex-start;
        flex-direction: column;
    }
    .shell-email-status-link,
    .shell-email-pill-state {
        white-space: normal;
        text-align: left;
    }
    .shell-email-pill-state .email-conn-status {
        display: block;
    }

    .settings-table,
    .settings-table tbody,
    .settings-table tr,
    .settings-table td {
        display: block;
    }

    .settings-table thead {
        display: none;
    }

    .settings-table tr {
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--stone-100);
    }

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

    .settings-table td {
        padding: 0;
        border-bottom: none;
    }

    .settings-email-account-cell {
        margin-bottom: 0.85rem;
    }

    .settings-actions {
        justify-content: flex-start;
    }
}

/* ── Admin waitlist (.wl-admin-*) ── */
.wl-admin-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--stone-100);
    gap: 1rem; flex-wrap: wrap;
}
.wl-admin-section-title {
    font-size: 0.875rem; font-weight: 600; color: var(--stone-700);
    display: flex; align-items: center; gap: 0.5rem; margin: 0;
}
.wl-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem;
    background: var(--stone-100); color: var(--stone-600);
    border-radius: 9999px; font-size: 0.72rem; font-weight: 700;
}
.wl-badge--invited    { background: #dbeafe; color: #1e40af; }
.wl-badge--registered { background: #d1fae5; color: #065f46; }
.wl-invite-batch-form {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap;
}
.wl-count-label { font-size: 0.8125rem; color: var(--stone-600); white-space: nowrap; }
.wl-count-input {
    width: 4rem; padding: 0.3rem 0.5rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.875rem; font-family: inherit; text-align: center;
    background: var(--surface); color: var(--fg);
}
.wl-admin-empty { padding: 1.5rem 1.25rem; color: var(--stone-400); font-size: 0.875rem; margin: 0; }
.wl-admin-results {
    margin-bottom: 1.5rem; border: 1px solid #bbf7d0;
    background: #f0fdf4; padding: 1.25rem 1.5rem;
}
.wl-admin-results-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.9375rem; font-weight: 600; color: #166534; margin-bottom: 0.35rem;
}
.wl-admin-results-hint { font-size: 0.8125rem; color: #4d7c60; margin-bottom: 1rem; }
.wl-admin-links { display: flex; flex-direction: column; gap: 0.75rem; }
.wl-admin-link-row {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.875rem 1rem; background: #fff;
    border: 1px solid #bbf7d0; border-radius: var(--radius);
}
.wl-admin-link-meta { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.875rem; }
.wl-admin-link-url { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wl-invite-url { font-size: 0.72rem; word-break: break-all; }


/* ── Billing ──────────────────────────────────────────────────────────────── */
.billing-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
.billing-plan { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; background: var(--stone-50); }
.billing-plan--featured { border-color: var(--accent); background: #f0fdfa; }
.billing-plan-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 99px; margin-bottom: 0.625rem; }
.billing-plan-name { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone-400); margin-bottom: 0.25rem; }
.billing-plan-price { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--fg); }
.billing-plan-period { font-size: 0.875rem; font-weight: 400; color: var(--muted); }
.billing-plan-sub { font-size: 0.75rem; color: var(--muted); margin: 0.2rem 0 1rem; }
.billing-plan-btn { width: 100%; justify-content: center; margin-top: 0.25rem; }
@media (max-width: 480px) { .billing-plans { grid-template-columns: 1fr; } }

/* ── Subscribe (post-registration) ───────────────────────────────────────── */
.subscribe-page { max-width: 540px; padding: 2rem 0 3rem; }
.subscribe-step-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.75rem; }
.subscribe-heading { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.4rem; letter-spacing: -0.02em; }
.subscribe-sub { color: var(--muted); margin: 0 0 2rem; font-size: 0.9375rem; }
.subscribe-plans { margin-top: 0; }
.subscribe-footer { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--muted); }
.subscribe-footer a { color: var(--accent); }