:root {
    /* Brand */
    --brand-start: #0E2A47;
    --brand-end: #1565C0;
    --accent: #2F80ED; /* primary */
    --accent-weak: #E8F1FF; /* accent-tinted surface */
    --accent-secondary: #F59E0B; /* gold */
    --accent-outline: rgba(47, 128, 237, 0.45);
    --accent-ring: rgba(47, 128, 237, 0.22);
    --accent-500: #0e9683;
    --accent-600: #0f766e;
    --accent-700: #115e59;
    --accent-800: #134e4a;

    /* Core UI tokens (light) */
    --bg-primary: #f4f5fb;
    --bg-surface: #ffffff;
    --bg-surface-muted: #f8fafc;
    --bg-surface-hover: #f1f5f9;
    --bg-surface-active: #e2e8f0;

    --bg-input: #ffffff;
    --border-input: #cbd5f5;
    --code-bg: #edeafe;
    --code-fg: #4c1d95;

    --text-primary: #111827;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    --text-disabled: rgba(15, 23, 42, 0.45);

    --border-muted: #e2e8f0;
    --border-subtle: #e5e7eb;
    --border-strong: #cbd5f5;

    --table-head-bg: #F0F6FF;
    --table-head-fg: #1E3A8A;
    --table-border: var(--border-muted);
    --table-row-hover: var(--bg-surface-hover);
    --table-stripe-odd: var(--bg-surface-muted);
    --table-stripe-even: var(--bg-surface);

    --sidebar-bg: #f8fafc;
    --sidebar-border: var(--border-muted);
    --sidebar-surface: var(--bg-surface);
    --sidebar-surface-border: var(--border-muted);
    --sidebar-hover-bg: var(--bg-surface-hover);
    --sidebar-active-bg: var(--bg-surface-active);
    --sidebar-active-indicator: #0f172a;
    --sidebar-icon: #6b7280;
    --sidebar-icon-active: var(--text-primary);
    --sidebar-avatar-bg: #e2e8f0;
    --sidebar-avatar-fg: var(--text-secondary);
    --sidebar-caret: var(--text-subtle);

    --topbar-bg: #ffffff;
    --topbar-border: #e2e8f0;
    --topbar-control-bg: #ffffff;
    --topbar-control-border: #e2e8f0;
    --topbar-control-fg: #334155;
    --topbar-control-hover-bg: #f1f5f9;
    --topbar-control-hover-fg: #0f172a;
    --topbar-search-bg: #f8fafc;
    --topbar-search-border: #e2e8f0;
    --topbar-search-fg: #0f172a;
    --topbar-search-icon: #475569;
    --topbar-dropdown-bg: #ffffff;
    --topbar-dropdown-border: #e2e8f0;
    --topbar-overlay-bg: rgba(15, 23, 42, 0.4);
    --impersonation-bg: #fffbeb;
    --impersonation-border: #f59e0b;
    --impersonation-fg: #92400e;

    --statusbar-bg: rgba(247, 248, 250, 0.96);
    --statusbar-border: #d1d5db;
    --statusbar-link: #374151;
    --statusbar-link-hover: #111827;
    --statusbar-version: #4b5563;
    --statusbar-button-bg: #f3f4f6;
    --statusbar-button-border: #9ca3af;
    --statusbar-button-fg: #374151;
    --statusbar-button-hover-bg: #e5e7eb;
    --statusbar-button-hover-fg: #1f2937;
    --statusbar-focus: #4b5563;

    --shadow-soft: 0 4px 10px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 12px 24px rgba(0, 0, 0, 0.05);
    --shadow-popover: 0 16px 30px rgba(15, 23, 42, 0.16);
    --shadow-modal: 0 30px 80px rgba(15, 23, 42, 0.35);

    --overlay-backdrop: rgba(15, 23, 42, 0.55);
    --track-bg: rgba(15, 23, 42, 0.12);
    --track-bg-strong: rgba(15, 23, 42, 0.2);

    /* Layering */
    --z-overlay-inline-backdrop: 60;
    --z-overlay-sidebar-flyout-backdrop: 165;
    --z-overlay-sidebar-flyout: 170;
    --z-overlay-dropdown-backdrop: 180;
    --z-overlay-dropdown: 190;
    --z-overlay-notification: 195;
    --z-overlay-search: 800;

    /* State tokens */
    --state-info-bg: #eef3ff;
    --state-info-fg: #2f2f44;
    --state-success-bg: #ecfdf5;
    --state-success-fg: #065f46;
    --state-warning-bg: #fff7ed;
    --state-warning-fg: #b45309;
    --state-danger-bg: #fef2f2;
    --state-danger-fg: #b91c1c;
    --state-info-border: rgba(47, 128, 237, 0.35);
    --state-success-border: rgba(22, 163, 74, 0.35);
    --state-warning-border: rgba(249, 115, 22, 0.45);
    --state-danger-border: rgba(220, 38, 38, 0.45);

    --info: #0ea5e9;
    --success: #16a34a;
    --warning: #f97316;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-ring: rgba(220, 38, 38, 0.2);

    /* Legacy aliases used in existing CSS */
    --text: var(--text-primary);
    --surface: var(--bg-surface);
    --surface-muted: var(--bg-surface-muted);
    --surface-elevated: var(--bg-surface);
    --border-color: var(--border-muted);
    --border-default: var(--border-muted);

    /* Bootstrap alignment (keep components consistent in both modes) */
    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-border-color: var(--border-muted);
    --bs-primary: var(--accent);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: #1d4ed8;
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-bg: var(--bg-surface-muted);
    --bs-card-bg: var(--bg-surface);
    --bs-card-color: var(--text-primary);
}

/* Self-hosted Inter Variable */
@font-face {
    font-family: 'Inter var';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter var';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/InterVariable-Italic.woff2') format('woff2');
}

html,
body {
    font-family: 'Inter var', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
    background: var(--bg-primary);
    height: 100%;
    min-height: 100%;
    color: var(--text-primary);
}

body {
    margin: 0;
}

body.gallery-open {
    overflow: hidden;
}

.page-shell {
    width: min(1100px, 100%);
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .page-shell {
        margin: 1.5rem auto;
    }
}

.dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: var(--z-overlay-inline-backdrop, 60);
}

.account-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.account-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface);
}

.account-section h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.account-section input,
.account-section select,
.account-section textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    font: inherit;
    background: var(--bg-input);
    color: var(--text-primary);
}

.account-section input:focus-visible,
.account-section select:focus-visible,
.account-section textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.account-section input:disabled,
.account-section select:disabled,
.account-section textarea:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.account-section .section-description {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.field-hint {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.info-button {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-muted);
    border-radius: 50%;
    background: var(--bg-surface-muted);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    padding: 0;
}

.info-button.inline {
    width: 22px;
    height: 22px;
}

.info-button::before {
    content: "i";
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}

.info-button:hover {
    background: var(--bg-surface-hover);
}

.info-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Shared cases form controls used on /cases and /cases/{id}. */
.cases-field {
    display: grid;
    gap: 0.32rem;
}

.cases-field-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cases-field > label,
.cases-field-label > label {
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}

.cases-field-label .info-button.inline {
    width: 20px;
    height: 20px;
}

.cases-input {
    width: 100%;
    min-height: 2.35rem;
    border: 1px solid var(--border-default, #d5ddeb);
    border-radius: 0.65rem;
    padding: 0.55rem 0.72rem;
    background: var(--surface-elevated, #fff);
    color: var(--text-primary, #0f172a);
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.cases-input:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent-500, #0e9683) 45%, #ffffff);
}

.cases-input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-500, #0e9683) 30%, transparent);
    outline-offset: 1px;
    border-color: color-mix(in srgb, var(--accent-500, #0e9683) 60%, #ffffff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-500, #0e9683) 12%, transparent);
}

.cases-input:disabled {
    background: color-mix(in srgb, var(--surface-muted, #f8fafc) 86%, #fff);
    color: var(--text-disabled, rgba(15, 23, 42, 0.45));
    border-color: color-mix(in srgb, var(--border-muted, #e2e8f0) 88%, #fff);
    cursor: not-allowed;
}

textarea.cases-input {
    min-height: 5rem;
    resize: vertical;
}

.account-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.9rem;
}

.account-form-grid.single {
    grid-template-columns: minmax(0, 1fr);
}

.account-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.account-status {
    margin-left: 0.75rem;
    font-weight: 500;
    color: #2563eb;
}

.account-status.success {
    color: #15803d;
}

.account-status.error {
    color: #b91c1c;
}

.account-avatar-preview {
    display: inline-flex;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #dbeafe;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    background: #eef2ff;
    color: #475569;
    font-size: 1.5rem;
    font-weight: 600;
}

.account-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-avatar-fallback {
    text-transform: uppercase;
}

.account-avatar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.avatar-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.account-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.account-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--border-muted);
    background: var(--bg-surface-muted);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.account-link-card:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-strong);
}

.brand-mark,
.brand-mark-inline {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    gap: 0;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}

.brand-mark-inline {
    font-size: inherit;
}

.brand-prefix {
    color: #4b5563;
}

.brand-suffix {
    color: #000000;
}

[data-theme='dark'] .brand-mark,
[data-theme='dark'] .brand-mark-inline {
    border-color: rgba(226, 232, 240, 0.25);
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.4);
}

[data-theme='dark'] .brand-prefix {
    color: #f8fafc;
}

[data-theme='dark'] .brand-suffix {
    color: #f4f4f5;
}

.page-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.page-title {
    margin: 0;
    font-size: clamp(1.9rem, 2vw + 1rem, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 62ch;
}

a,
.btn-link {
    color: var(--accent);
}

.brand {
    font-weight: 800;
    letter-spacing: -0.02em;
}

a {
    color: var(--accent);
}

a:hover {
    opacity: 0.9;
}
/* Bootstrap helpers override */
.btn-primary{--bs-btn-bg:var(--bs-primary);--bs-btn-border-color:var(--bs-primary)}
.btn-outline-primary{--bs-btn-color:var(--bs-primary);--bs-btn-border-color:var(--bs-primary)}
.text-primary{color:var(--bs-primary)!important}
.link-primary{color:var(--bs-link-color)!important}
/* Admin tables */
.table { color: var(--text-primary); }
.table thead th { background: var(--table-head-bg); color: var(--table-head-fg); border-bottom: 1px solid var(--table-border); }
.table tbody tr td { border-bottom: 1px solid var(--table-border); }




.primary:hover{background-color:#0e9683}
:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:2px}


/* Dark theme */
[data-theme='dark'] {
    --brand-start: #0B1220;
    --brand-end: #0E2A47;
    --accent: #60A5FA;
    --accent-weak: rgba(96, 165, 250, 0.18);
    --accent-outline: rgba(96, 165, 250, 0.55);
    --accent-ring: rgba(96, 165, 250, 0.28);
    --accent-500: #0e9683;
    --accent-600: #0f766e;
    --accent-700: #115e59;
    --accent-800: #134e4a;

    --bg-primary: #0B1220;
    --bg-surface: #0f172a;
    --bg-surface-muted: #111c2f;
    --bg-surface-hover: rgba(148, 163, 184, 0.16);
    --bg-surface-active: rgba(148, 163, 184, 0.24);

    --bg-input: #1e293b;
    --border-input: #334155;
    --code-bg: rgba(96, 165, 250, 0.18);
    --code-fg: #bfdbfe;

    --text-primary: #e2e8f0;
    --text-secondary: rgba(226, 232, 240, 0.85);
    --text-muted: #94a3b8;
    --text-subtle: rgba(226, 232, 240, 0.72);
    --text-disabled: rgba(148, 163, 184, 0.55);

    --border-muted: #1f2a44;
    --border-subtle: rgba(226, 232, 240, 0.12);
    --border-strong: #334155;

    --table-head-bg: var(--bg-surface-muted);
    --table-head-fg: #BFDBFE;
    --table-border: var(--border-muted);
    --table-row-hover: var(--bg-surface-hover);
    --table-stripe-odd: var(--bg-surface-muted);
    --table-stripe-even: var(--bg-surface);

    --sidebar-bg: #0b1220;
    --sidebar-border: #1f2a44;
    --sidebar-surface: #0f172a;
    --sidebar-surface-border: #334155;
    --sidebar-hover-bg: rgba(148, 163, 184, 0.16);
    --sidebar-active-bg: rgba(96, 165, 250, 0.22);
    --sidebar-active-indicator: #93c5fd;
    --sidebar-icon: #cbd5e1;
    --sidebar-icon-active: #f8fafc;
    --sidebar-avatar-bg: #1e293b;
    --sidebar-avatar-fg: #e2e8f0;
    --sidebar-caret: #cbd5e1;

    --topbar-bg: #0f172a;
    --topbar-border: #1f2a44;
    --topbar-control-bg: #0f172a;
    --topbar-control-border: #1f2a44;
    --topbar-control-fg: #e2e8f0;
    --topbar-control-hover-bg: rgba(148, 163, 184, 0.16);
    --topbar-control-hover-fg: #f8fafc;
    --topbar-search-bg: #0f172a;
    --topbar-search-border: #1f2a44;
    --topbar-search-fg: #e2e8f0;
    --topbar-search-icon: #94a3b8;
    --topbar-dropdown-bg: #0f172a;
    --topbar-dropdown-border: #1f2a44;
    --topbar-overlay-bg: rgba(2, 6, 23, 0.7);
    --impersonation-bg: rgba(245, 158, 11, 0.22);
    --impersonation-border: rgba(245, 158, 11, 0.5);
    --impersonation-fg: #fef3c7;

    --statusbar-bg: rgba(15, 23, 42, 0.95);
    --statusbar-border: rgba(71, 85, 105, 0.7);
    --statusbar-link: #d1d5db;
    --statusbar-link-hover: #f9fafb;
    --statusbar-version: #d1d5db;
    --statusbar-button-bg: #111827;
    --statusbar-button-border: #4b5563;
    --statusbar-button-fg: #d1d5db;
    --statusbar-button-hover-bg: #1f2937;
    --statusbar-button-hover-fg: #f3f4f6;
    --statusbar-focus: #e2e8f0;

    --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.5);
    --shadow-popover: 0 30px 80px rgba(0, 0, 0, 0.75);
    --shadow-modal: 0 30px 90px rgba(0, 0, 0, 0.7);

    --overlay-backdrop: rgba(2, 6, 23, 0.72);
    --track-bg: rgba(226, 232, 240, 0.16);
    --track-bg-strong: rgba(226, 232, 240, 0.24);

    --state-info-bg: rgba(96, 165, 250, 0.12);
    --state-info-fg: #bfdbfe;
    --state-success-bg: rgba(34, 197, 94, 0.14);
    --state-success-fg: #bbf7d0;
    --state-warning-bg: rgba(251, 146, 60, 0.16);
    --state-warning-fg: #fed7aa;
    --state-danger-bg: rgba(248, 113, 113, 0.14);
    --state-danger-fg: #fecaca;
    --state-info-border: rgba(96, 165, 250, 0.45);
    --state-success-border: rgba(34, 197, 94, 0.45);
    --state-warning-border: rgba(251, 146, 60, 0.5);
    --state-danger-border: rgba(239, 68, 68, 0.5);

    --info: #38bdf8;
    --success: #22c55e;
    --warning: #fb923c;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --danger-ring: rgba(239, 68, 68, 0.25);

    --text: var(--text-primary);
    --surface: var(--bg-surface);
    --surface-muted: var(--bg-surface-muted);
    --surface-elevated: var(--bg-surface);
    --border-color: var(--border-muted);
    --border-default: var(--border-muted);

    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-border-color: var(--border-muted);
    --bs-primary: var(--accent);
    --bs-link-color: #93C5FD;
    --bs-link-hover-color: #BFDBFE;
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-bg: var(--bg-surface-muted);
    --bs-card-bg: var(--bg-surface);
    --bs-card-color: var(--text-primary);
}


/* Dark: striped/hover table tweaks */
[data-theme='dark'] .table-striped>tbody>tr:nth-of-type(odd){background-color:var(--table-stripe-odd)}
[data-theme='dark'] .table-striped>tbody>tr:nth-of-type(even){background-color:var(--table-stripe-even)}
[data-theme='dark'] .table-hover tbody tr:hover{background-color:var(--table-row-hover)}

/* Initial Blazor loader — center and animate */
#app { position: relative; height: 100%; min-height: 100%; }
.loading-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    z-index: 10000;
}
.loading-progress circle:first-child { /* track */
    stroke: rgba(0,0,0,0.12);
    fill: none;
    stroke-width: 6;
}
.loading-progress circle:last-child { /* animated arc */
    fill: none;
    stroke: var(--accent, #2F80ED);
    stroke-width: 6;
    stroke-linecap: round;
    transform-origin: 50% 50%;
    animation: lp-rotate 1.4s linear infinite, lp-dash 1.4s ease-in-out infinite;
}
.loading-progress-text {
    position: fixed;
    top: calc(50% + 48px);
    left: 50%;
    transform: translateX(-50%);
    color: #6b7280; /* neutral-500 */
    font-size: 0.95rem;
}
@keyframes lp-rotate { to { transform: rotate(360deg); } }
@keyframes lp-dash {
    0%   { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* Initial loader: top indeterminate progress bar */
svg.loading-progress { display: none !important; }
.loading-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: transparent; z-index: 10000; }
.loading-bar__inner { position: absolute; left: 0; height: 100%; width: 20%; background: var(--accent, #2F80ED); border-radius: 0 2px 2px 0; animation: lb-indeterminate 1.2s ease-in-out infinite; }
@keyframes lb-indeterminate { 0% { left: -20%; width: 20%; } 50% { left: 30%; width: 40%; } 100% { left: 100%; width: 20%; } }

/* Boot splash overlay spinner (visible until Blazor mounts) */
#boot-splash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #ffffff; z-index: 10000; }
:root[data-theme='dark'] #boot-splash { background: #0B1220; }
.boot-spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(0,0,0,0.12); border-top-color: var(--accent, #2F80ED); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Breadcrumbs */
.app-breadcrumbs {
    width: 100%;
}

.app-breadcrumbs ol {
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.app-breadcrumbs .crumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.app-breadcrumbs .crumb-item::after {
    content: "›";
    color: rgba(71, 85, 105, 0.6);
    font-size: 0.75rem;
}

.app-breadcrumbs .crumb-item:last-child::after {
    content: none;
}

.app-breadcrumbs a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.app-breadcrumbs a:hover {
    color: var(--accent);
}

.app-breadcrumbs .crumb-item.current span {
    color: #111827;
    letter-spacing: 0.05em;
}

[data-theme='dark'] .app-breadcrumbs ol {
    color: #cbd5f5;
}

[data-theme='dark'] .app-breadcrumbs .crumb-item::after {
    color: rgba(148, 163, 184, 0.85);
}

[data-theme='dark'] .app-breadcrumbs .crumb-item.current span {
    color: var(--text);
}

/* Filter and notification sections */
.filter-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin-bottom:1rem; }
.filter-actions { display:flex; gap:0.5rem; align-items:flex-end; }
[data-theme='dark'] .notification-preferences { background:#0f172a; border-color:#1f2a44; }
.notification-preferences { margin-top:2rem; padding:1.5rem; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.notification-preferences .actions { display:flex; gap:0.75rem; align-items:center; flex-wrap:wrap; }
.broadcast-form { margin-top:2rem; padding:1.5rem; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
[data-theme='dark'] .broadcast-form { background:#0f172a; border-color:#1f2a44; }
.broadcast-form .channel-options { display:flex; gap:1rem; flex-wrap:wrap; font-size:0.9rem; }
.broadcast-form textarea { width:100%; min-height:120px; }
.broadcast-form .status { font-size:0.9rem; font-weight:500; }
.broadcast-form .status.error { color:#b91c1c; }
.broadcast-form .status.success { color:#059669; }
.mono { font-family:'JetBrains Mono','Cascadia Mono','Consolas',monospace; font-size:0.85rem; }
.notifications-list { display:flex; flex-direction:column; gap:1rem; }
.notification-card { border:1px solid #e5e7eb; border-radius:12px; padding:1rem; background:#fff; transition:border-color 0.15s ease, box-shadow 0.15s ease; }
.notification-card header { position:relative; }
.notification-card header { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.notification-card.clickable { cursor:pointer; }
.notification-card.clickable:hover { border-color:#0ea5e9; box-shadow:0 6px 18px rgba(14,165,233,0.15); }
.notification-event { font-weight:600; }
.notification-meta { font-size:0.75rem; color:#94a3b8; }
.notification-error { margin-top:0.5rem; font-size:0.85rem; color:#b91c1c; }
[data-theme='dark'] .notification-card { background:#0f172a; border-color:#1f2a44; }
[data-theme='dark'] .notification-meta { color:#64748b; }
.notification-card.unread { border-color:#93c5fd; box-shadow:0 0 0 1px rgba(59,130,246,0.25); }
[data-theme='dark'] .notification-card.unread { border-color:#38bdf8; box-shadow:0 0 0 1px rgba(56,189,248,0.3); }
.notification-card.danger { border-left:4px solid #dc2626; }
.notification-card.warning { border-left:4px solid #f97316; }
.notification-actions { display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:flex-end; }
.notification-title { font-weight:600; margin:0 0 .25rem; }
.notification-body { margin:0; color:#475569; }
[data-theme='dark'] .notification-body { color:#cbd5f5; }
.notification-payload { margin-top:0.75rem; padding:0.75rem; background:#f8fafc; border-radius:10px; font-size:0.8rem; overflow:auto; }
[data-theme='dark'] .notification-payload { background:#111c2f; border:1px solid #1f2a44; }
.notification-card .notification-toggle { font-size:0.8rem; color:#64748b; margin-left:0.5rem; }

.notification-bell { position:relative; margin-right:1rem; }
.notification-bell.open { z-index:var(--z-overlay-notification, 195); }
.notification-bell .icon-button { position:relative; z-index:calc(var(--z-overlay-notification, 195) + 1); border:none; background:transparent; color:inherit; padding:0.25rem; border-radius:999px; transition:background-color 0.2s ease; }
.notification-bell .icon-button:hover { background-color:rgba(15,23,42,0.08); }
[data-theme='dark'] .notification-bell .icon-button:hover { background-color:rgba(148,163,184,0.2); }
.notification-bell .badge { position:absolute; top:-4px; right:-4px; min-width:1.25rem; height:1.25rem; border-radius:999px; background:#ef4444; color:#fff; font-size:0.7rem; font-weight:600; display:flex; align-items:center; justify-content:center; padding:0 0.25rem; z-index:calc(var(--z-overlay-notification, 195) + 2); }
.notification-dropdown { position:fixed; top:calc(var(--layout-top-bar-height, 3.5rem) + 0.45rem); right:1rem; width:min(calc(100vw - 1rem), 360px); max-height:calc(100vh - (var(--layout-top-bar-height, 3.5rem) + 1rem)); background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 30px 80px rgba(15,23,42,0.25); z-index:var(--z-overlay-notification, 195); display:flex; flex-direction:column; overflow:hidden; pointer-events:auto; }
[data-theme='dark'] .notification-dropdown { background:#0f172a; border-color:#1f2a44; box-shadow:0 30px 80px rgba(0,0,0,0.75); }
.notification-dropdown .dropdown-header,
.notification-dropdown .dropdown-footer { padding:0.75rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.notification-dropdown .dropdown-header strong { display:block; color:#0f172a; }
[data-theme='dark'] .notification-dropdown .dropdown-header strong { color:#e2e8f0; }
.notification-dropdown .dropdown-header .meta { font-size:0.8rem; color:#6b7280; display:block; }
[data-theme='dark'] .notification-dropdown .dropdown-header .meta { color:#94a3b8; }
.notification-dropdown .dropdown-content { max-height:360px; overflow-y:auto; display:flex; flex-direction:column; gap:0.75rem; padding:0.75rem 1rem; }
.notification-dropdown .dropdown-item { border:1px solid #e5e7eb; border-radius:12px; padding:0.75rem; background:#f8fafc; cursor:pointer; transition:border-color 0.2s ease, background-color 0.2s ease; position:relative; }
.notification-dropdown .dropdown-item:hover { border-color:#0ea5e9; background:#eef9fd; }
.notification-dropdown .dropdown-item.unread { border-color:#93c5fd; background:#eff6ff; }
.notification-dropdown .dropdown-item.just-read { border-color:#93c5fd; background:#eff6ff; }
.notification-dropdown .dropdown-item.severity-danger { border-left:4px solid #dc2626; }
.notification-dropdown .dropdown-item.severity-warning { border-left:4px solid #f97316; }
[data-theme='dark'] .notification-dropdown .dropdown-item { border-color:#1f2a44; background:#111c2f; }
[data-theme='dark'] .notification-dropdown .dropdown-item.unread { border-color:#3b82f6; background:#0b2545; }
[data-theme='dark'] .notification-dropdown .dropdown-item.just-read { border-color:#3b82f6; background:#0b2545; }
.notification-dropdown .dropdown-item .title { font-weight:600; margin-bottom:0.15rem; color:#0f172a; display:flex; gap:0.35rem; align-items:center; }
.notification-dropdown .dropdown-item:active .title { color:#0f172a; }
[data-theme='dark'] .notification-dropdown .dropdown-item .title { color:#f8fafc; }
[data-theme='dark'] .notification-dropdown .dropdown-item:active .title { color:#f8fafc; }
.notification-dropdown .severity-icon { width:1.4rem; height:1.4rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#e2e8f0; color:#0f172a; }
.notification-dropdown .dropdown-item.severity-warning .severity-icon { background:#fef3c7; color:#b45309; }
.notification-dropdown .dropdown-item.severity-danger .severity-icon { background:#fee2e2; color:#b91c1c; }
.notification-dropdown .dropdown-item.severity-success .severity-icon { background:#dcfce7; color:#15803d; }
.notification-dropdown .dropdown-item .body { font-size:0.9rem; color:#475569; word-break:break-word; white-space:normal; }
[data-theme='dark'] .notification-dropdown .dropdown-item .body { color:#cbd5f5; }
.notification-dropdown .dropdown-item .meta { word-break:break-word; white-space:normal; font-size:0.75rem; color:#94a3b8; }
[data-theme='dark'] .notification-dropdown .dropdown-item .meta { color:#94a3b8; }
.notification-dropdown .dropdown-item .item-status { margin-top:0.35rem; font-size:0.8rem; font-weight:600; color:#0f172a; display:flex; gap:0.35rem; align-items:center; }
[data-theme='dark'] .notification-dropdown .dropdown-item .item-status { color:#f8fafc; }
.state-icon { width:1.25rem; height:1.25rem; border-radius:999px; font-size:0.85rem; display:inline-flex; align-items:center; justify-content:center; }
.state-icon.completed { background:#dcfce7; color:#15803d; }
.state-icon.expired { background:#fee2e2; color:#b91c1c; }
[data-theme='dark'] .state-icon.completed { background:#14532d; color:#bbf7d0; }
[data-theme='dark'] .state-icon.expired { background:#7f1d1d; color:#fecaca; }
.notification-dropdown .item-actions { display:flex; gap:0.5rem; margin-top:0.5rem; flex-wrap:wrap; }
.notification-dropdown .dropdown-status { text-align:center; padding:1rem; font-size:0.9rem; color:#475569; border:1px dashed #cbd5f5; border-radius:12px; background:#f8fafc; }
.notification-dropdown .dropdown-status.error { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }
.notification-dropdown .dropdown-status.empty { color:#6b7280; }
.notification-dropdown .ghost { font-size:0.85rem; text-transform:none; }
.notification-dropdown .ghost.small { font-size:0.75rem; padding:0.1rem 0.4rem; }
.link-action { border:none; background:none; padding:0; font-size:0.85rem; color:#0ea5e9; cursor:pointer; text-decoration:underline; transition:color 0.2s ease,text-shadow 0.2s ease; }
.link-action.primary { font-weight:600; }
[data-theme='dark'] .link-action { color:#22d3ee; }
.link-action:hover { text-decoration:none; text-shadow:0 0 8px currentColor; }
[data-theme='dark'] .link-action:hover { text-shadow:0 0 10px currentColor; }
.link-action:focus-visible { outline:2px solid #0ea5e9; outline-offset:2px; }
.link-action.danger { color:#dc2626; }
.link-action.danger:hover { text-shadow:0 0 8px currentColor; }
[data-theme='dark'] .link-action.danger { color:#f87171; }
[data-theme='dark'] .link-action.danger:hover { text-shadow:0 0 10px currentColor; }
.button-pill,
button.primary,
a.primary,
.btn.primary,
label.primary,
button.secondary,
a.secondary,
.btn.secondary,
label.secondary,
button.danger,
a.danger,
.btn.danger,
label.danger,
button.ghost,
a.ghost,
.btn.ghost,
label.ghost,
button.btn-outline-primary,
a.btn-outline-primary,
.btn.btn-outline-primary {
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}
.button-pill.primary,
button.primary,
a.primary,
.btn.primary,
label.primary {
    background:#0e9683;
    color:#fff;
    box-shadow:0 12px 25px rgba(14,150,131,0.25);
}
.button-pill.primary:not(:disabled):hover,
button.primary:not(:disabled):hover,
a.primary:hover,
.btn.primary:hover,
label.primary:hover {
    transform:translateY(-1px);
    box-shadow:0 16px 28px rgba(14,150,131,0.28);
}
.button-pill.secondary,
button.secondary,
a.secondary,
.btn.secondary,
label.secondary {
    background:#f4f5fb;
    color:#1f2937;
    border:1px solid #d8d8e5;
    box-shadow:none;
}
.button-pill.secondary:not(:disabled):hover,
button.secondary:not(:disabled):hover,
a.secondary:hover,
.btn.secondary:hover,
label.secondary:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(148,163,184,0.35);
}
.button-pill.ghost,
button.ghost,
a.ghost,
.btn.ghost,
label.ghost,
button.btn-outline-primary,
a.btn-outline-primary,
.btn.btn-outline-primary {
    background:#fff;
    color:#0e9683;
    border:1px solid rgba(14,150,131,0.25);
    box-shadow:none;
}
.button-pill.ghost:not(:disabled):hover,
button.ghost:not(:disabled):hover,
a.ghost:hover,
.btn.ghost:hover,
label.ghost:hover,
button.btn-outline-primary:hover,
a.btn-outline-primary:hover,
.btn.btn-outline-primary:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(148,163,184,0.35);
}
.button-pill.danger,
button.danger,
a.danger,
.btn.danger,
label.danger,
button.secondary.danger,
a.secondary.danger,
.btn.secondary.danger,
label.secondary.danger {
    background:#e11d48;
    color:#fff;
    border:none;
    box-shadow:0 12px 24px rgba(225,29,72,0.35);
}
.button-pill.danger:not(:disabled):hover,
button.danger:not(:disabled):hover,
a.danger:hover,
.btn.danger:hover,
label.danger:hover,
button.secondary.danger:not(:disabled):hover,
a.secondary.danger:hover,
.btn.secondary.danger:hover,
label.secondary.danger:hover {
    transform:translateY(-1px);
    box-shadow:0 16px 28px rgba(225,29,72,0.45);
}
.button-pill:disabled,
button.primary:disabled,
button.secondary:disabled,
button.danger:disabled,
button.ghost:disabled,
.btn.primary:disabled,
.btn.secondary:disabled,
.btn.danger:disabled,
.btn.ghost:disabled {
    opacity:0.6;
    cursor:not-allowed;
}

.icon-button.close.timestamp-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d8d8e5;
    background: #f4f5fb;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: none;
}

.icon-button.close.timestamp-modal-close:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(148, 163, 184, 0.35);
}

.icon-button.close.timestamp-modal-close:focus-visible {
    outline: 2px solid rgba(14, 150, 131, 0.45);
    outline-offset: 2px;
}

.icon-button.close.timestamp-modal-close svg {
    width: 18px;
    height: 18px;
}

.button-pill.secondary.timestamp-copy-button {
    flex-shrink: 0;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
}

.button-pill.secondary.timestamp-copy-button svg {
    width: 16px;
    height: 16px;
}

[data-theme='dark'] .icon-button.close.timestamp-modal-close {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(51, 65, 85, 0.7);
    color: #e2e8f0;
}

button.link-action {
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
}

.notification-modal { position:fixed; inset:0; background:rgba(15,23,42,0.55); display:flex; align-items:center; justify-content:center; padding:1.5rem; z-index:600; }
.notification-modal .modal-content { background:#fff; border-radius:16px; max-width:640px; width:100%; padding:1.5rem; box-shadow:0 30px 80px rgba(15,23,42,0.35); display:flex; flex-direction:column; gap:1rem; }
[data-theme='dark'] .notification-modal .modal-content { background:#0f172a; color:#e2e8f0; }
.notification-modal .modal-header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.notification-modal .modal-header h2 { margin:0; font-size:1.35rem; }
.notification-modal .modal-header p { margin:0.15rem 0 0; color:#64748b; font-size:0.8rem; }
[data-theme='dark'] .notification-modal .modal-header p { color:#94a3b8; }
.notification-modal .modal-actions { display:flex; flex-wrap:wrap; gap:0.5rem; }
.notification-modal .modal-metadata { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0.75rem; }
.notification-modal .metadata-entry { background:#f8fafc; border-radius:10px; padding:0.75rem; font-size:0.85rem; }
[data-theme='dark'] .notification-modal .metadata-entry { background:#1e293b; }
.notification-modal .metadata-entry .label { display:block; font-weight:600; margin-bottom:0.15rem; color:#475569; }
[data-theme='dark'] .notification-modal .metadata-entry .label { color:#cbd5f5; }
.notification-modal .metadata-entry .value { display:block; color:#0f172a; }
[data-theme='dark'] .notification-modal .metadata-entry .value { color:#e2e8f0; }
.notification-modal .close { font-size:1.25rem; line-height:1; padding:0.25rem 0.5rem; }

.notification-banner { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.25rem; border-radius:16px; margin-bottom:1rem; border-left:4px solid #0ea5e9; background:#f8fafc; }
[data-theme='dark'] .notification-banner { background:#0f172a; border-color:#0ea5e9; }
.notification-banner.danger { border-color:#dc2626; }
.notification-banner.warning { border-color:#f97316; }
.notification-banner .banner-text { flex:1; }
.notification-banner .banner-actions { display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:flex-end; }
.comment-thread {
    padding-top: 0.25rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 0;
    height: 100%;
}

.comment-thread h3 {
    font-size: 0.95rem;
    margin: 0;
    color: var(--text-muted, #475569);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.comment-thread-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}

.comment-scroll {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.35rem;
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment-item {
    background: var(--surface, #fff);
    border: 1px solid var(--border-muted, #e2e8f0);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}

[data-theme='dark'] .comment-item {
    background: #0f172a;
    border-color: #1f2a44;
}

.comment-meta {
    font-size: 0.9rem;
    color: var(--text-muted, #475569);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
    align-items: center;
}

.comment-body {
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: text;
}

.comment-actions {
    display: flex;
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.comment-actions .link-action {
    font-size: 0.85rem;
    text-decoration: none;
}

.comment-new {
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.comment-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    border: 1px solid var(--border-muted, #e2e8f0);
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.4rem;
}

[data-theme='dark'] .comment-input-row {
    background: #0f172a;
    border-color: #1f2a44;
}

.comment-input-row textarea {
    resize: vertical;
    min-height: 3.25rem;
    border: none;
    background: transparent;
    padding: 0.35rem 0.5rem;
}

.comment-input-row textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent, #2f80ed);
    border-radius: 0.5rem;
}

.comment-input-row .form-control.compact {
    box-shadow: none;
}

.comment-input-actions {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.comment-input-actions .icon-button {
    width: 36px;
    height: 36px;
}

.comment-input-actions .icon-button.submit {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #0b192f;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-input-actions .icon-button.submit:disabled {
    background: rgba(148, 163, 184, 0.4);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.7);
}

.comment-input-actions .icon-button.info {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
}

.comment-input-actions .icon-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    margin: 0;
}

.comment-input-actions .icon-button.info svg {
    width: 14px;
    height: 14px;
}

.receipt-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-weight: 600;
    color: #2f2f44;
}

.receipt-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.receipt-bundle {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.receipt-bundle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-left: 4px solid var(--accent, #2F80ED);
    border-radius: 12px;
    opacity: 0.9;
    pointer-events: none;
}

.bundle-header {
    padding: 0;
    background: linear-gradient(120deg, #f1f5f9 0%, #e2e8f0 100%);
}

.bundle-header-main {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border: none;
    background: transparent;
    padding: 0.95rem 1.15rem;
    text-align: left;
    cursor: pointer;
}

.bundle-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--accent-weak, #e8f1ff);
    color: var(--accent, #2F80ED);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(47, 128, 237, 0.12);
}

.bundle-icon svg {
    width: 22px;
    height: 22px;
}

.bundle-title {
    display: grid;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}

.bundle-title h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
    line-height: 1.3;
}

.bundle-label {
    margin: 0;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}

.bundle-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #64748b;
    font-size: 0.9rem;
}

.bundle-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease;
}

.bundle-toggle svg {
    width: 18px;
    height: 18px;
}

.receipt-bundle.expanded .bundle-toggle {
    transform: rotate(180deg);
}

.bundle-items {
    padding: 0.8rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #f8fafc;
}

.receipt-row-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.receipt-row-card.duplicate-highlight {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25), 0 10px 24px rgba(15, 23, 42, 0.08);
}

.receipt-row-card.nested {
    border-left: 4px solid var(--accent, #2F80ED);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.receipt-row-main {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.receipt-thumb-link {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.receipt-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.receipt-rotate-90,
.receipt-rotate-180,
.receipt-rotate-270 {
    transform-origin: center center;
}

.receipt-rotate-90 {
    transform: rotate(90deg);
}

.receipt-rotate-180 {
    transform: rotate(180deg);
}

.receipt-rotate-270 {
    transform: rotate(270deg);
}

.receipt-thumb.fallback {
    background: #edeafe;
    color: #3f3f59;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.receipt-thumb.fallback .fallback-text {
    font-size: 0.75rem;
}

.receipt-thumb.fallback .fallback-icon {
    width: 24px;
    height: 24px;
}

.receipt-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.receipt-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.receipt-name-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.receipt-status-row,
.gallery-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.doc-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #ecfdf3;
    color: #0f766e;
    border: 1px solid rgba(15, 118, 110, 0.25);
}

.doc-type-select {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #ecfdf3;
    color: #0f766e;
    border: 1px solid rgba(15, 118, 110, 0.25);
}

.doc-type-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.receipt-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.receipt-status-badge.sealed {
    background: #e0f2fe;
    color: #0369a1;
    border-color: rgba(2, 132, 199, 0.3);
}

.receipt-status-badge.pending {
    background: #fef3c7;
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.35);
}

.receipt-status-badge.grace {
    background: #ede9fe;
    color: #6d28d9;
    border-color: rgba(109, 40, 217, 0.3);
}

.receipt-status-badge.unsealed {
    background: #f3f4f6;
    color: #4b5563;
    border-color: rgba(107, 114, 128, 0.35);
}

.receipt-status-badge.excluded {
    background: #fee2e2;
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.3);
}

.receipt-analysis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.receipt-analysis-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
}

.receipt-analysis.queued {
    color: #64748b;
}

.receipt-analysis.processing {
    color: #0f766e;
    background: #ecfdf3;
    border-color: #ccfbf1;
}

.receipt-analysis.indexed {
    color: #15803d;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.receipt-analysis.failed {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}

.receipt-analysis.non-indexable {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.receipt-content-type {
    font-size: 0.8rem;
    color: #6b6b7a;
}

.receipt-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: #6b6b7a;
}

.receipt-payment-method {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.payment-method-control {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.payment-method-trigger,
.payment-method-value {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
}

.payment-method-trigger {
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.2s ease;
}

.payment-method-trigger:hover {
    background: #eef2f6;
}

.payment-method-trigger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.payment-method-caret {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.payment-method-caret.open {
    transform: rotate(180deg);
}

.payment-method-info {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.payment-method-info svg {
    width: 14px;
    height: 14px;
}

.payment-method-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    z-index: 10;
}

.payment-method-option {
    background: transparent;
    border: none;
    text-align: left;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.payment-method-option:hover {
    background: #f1f5f9;
}

.payment-method-error {
    color: #b91c1c;
    font-size: 0.75rem;
    padding: 0.35rem 0.4rem 0.2rem;
}

[data-theme='dark'] .payment-method-trigger,
[data-theme='dark'] .payment-method-value {
    background: #0f172a;
    border-color: #1f2a44;
    color: #e2e8f0;
}

[data-theme='dark'] .payment-method-trigger:hover {
    background: #1e293b;
}

[data-theme='dark'] .payment-method-info {
    background: #0f172a;
    border-color: #1f2a44;
    color: #94a3b8;
}

[data-theme='dark'] .payment-method-menu {
    background: #0f172a;
    border-color: #1f2a44;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

[data-theme='dark'] .payment-method-option {
    color: #e2e8f0;
}

[data-theme='dark'] .payment-method-option:hover {
    background: #1e293b;
}

[data-theme='dark'] .receipt-bundle {
    background: var(--bg-surface);
    border-color: var(--border-muted);
    box-shadow: var(--shadow-card);
}

[data-theme='dark'] .receipt-bundle::before {
    border-left-color: var(--accent-500, #0e9683);
}

[data-theme='dark'] .bundle-header {
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, #0b1220);
}

[data-theme='dark'] .bundle-icon {
    background: color-mix(in srgb, var(--accent-500, #0e9683) 16%, var(--bg-surface));
    color: #d1fae5;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-500, #0e9683) 35%, transparent);
}

[data-theme='dark'] .bundle-title h3 {
    color: var(--text-primary);
}

[data-theme='dark'] .bundle-label,
[data-theme='dark'] .bundle-meta {
    color: var(--text-secondary);
}

[data-theme='dark'] .bundle-toggle {
    background: var(--bg-surface);
    border-color: var(--border-muted);
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
}

[data-theme='dark'] .bundle-items {
    background: var(--bg-surface-muted);
}

[data-theme='dark'] .receipt-row-card {
    background: var(--bg-surface);
    border-color: var(--border-muted);
    box-shadow: var(--shadow-soft);
}

[data-theme='dark'] .receipt-row-card.nested {
    border-left-color: var(--accent-500, #0e9683);
}

[data-theme='dark'] .receipt-name {
    color: var(--text-primary);
}

[data-theme='dark'] .receipt-thumb.fallback {
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, #334155);
    color: var(--text-secondary);
}

[data-theme='dark'] .doc-type-badge,
[data-theme='dark'] .doc-type-select {
    background: color-mix(in srgb, var(--accent-500, #0e9683) 18%, var(--bg-surface));
    border-color: color-mix(in srgb, var(--accent-500, #0e9683) 35%, var(--border-muted));
    color: #d1fae5;
}

[data-theme='dark'] .receipt-analysis {
    background: var(--bg-surface-muted);
    border-color: var(--border-muted);
    color: var(--text-secondary);
}

[data-theme='dark'] .receipt-content-type,
[data-theme='dark'] .receipt-meta,
[data-theme='dark'] .receipt-author {
    color: var(--text-secondary);
}

[data-theme='dark'] .email-chip.subtle {
    background: var(--bg-surface-muted);
    color: var(--text-primary);
    border-color: var(--border-muted);
}

[data-theme='dark'] .gallery-email-context {
    background: var(--bg-surface-muted);
    border-color: var(--border-muted);
}

[data-theme='dark'] .email-context-titles h3,
[data-theme='dark'] .sibling-label {
    color: var(--text-primary);
}

[data-theme='dark'] .email-context-label,
[data-theme='dark'] .email-context-meta,
[data-theme='dark'] .sibling-source {
    color: var(--text-secondary);
}

[data-theme='dark'] .email-sibling {
    background: var(--bg-surface);
    border-color: var(--border-muted);
}

[data-theme='dark'] .email-sibling.active {
    background: color-mix(in srgb, var(--accent-500, #0e9683) 16%, var(--bg-surface));
    border-color: color-mix(in srgb, var(--accent-500, #0e9683) 52%, var(--border-muted));
}

.receipt-row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.receipt-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.receipt-grid .receipt-action-group {
    justify-content: flex-start;
}

.receipt-row-actions .receipt-action-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.receipt-author {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: #475569;
}

.receipt-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef2f6;
}

.duplicate-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--state-warning-bg);
    color: var(--state-warning-fg);
    border: 1px solid var(--state-warning-border);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.duplicate-chip:hover {
    border-color: var(--warning);
}

.upload-duplicate-warning {
    border-radius: 14px;
    border: 1px solid var(--state-warning-border);
    border-left: 4px solid var(--warning);
    background: var(--state-warning-bg);
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow: var(--shadow-soft);
}

.upload-duplicate-title {
    font-weight: 600;
    color: var(--state-warning-fg);
}

.upload-duplicate-list {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.35rem;
    color: var(--state-warning-fg);
    font-size: 0.9rem;
}

.upload-duplicate-name {
    font-weight: 600;
    margin-right: 0.35rem;
}

.duplicate-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.duplicate-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.duplicate-subtitle {
    margin: 0.4rem 0 0;
    color: #6b7280;
    font-size: 0.95rem;
    max-width: 60ch;
}

.duplicate-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.duplicate-resolved {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.duplicate-banner {
    margin-top: 1rem;
    padding: 0.95rem 1.1rem;
    border-radius: 16px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.duplicate-banner-title {
    margin: 0;
    font-weight: 600;
    color: #b45309;
}

.duplicate-banner-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: #92400e;
}

.duplicate-banner-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.duplicate-banner-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.duplicate-banner-label {
    font-weight: 600;
    color: #78350f;
}

.duplicate-banner-link {
    font-weight: 600;
}

.duplicate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.duplicate-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.duplicate-card.highlight {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25), 0 12px 26px rgba(15, 23, 42, 0.08);
}

.duplicate-preview {
    height: 190px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.duplicate-preview-button {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.duplicate-preview-button:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: -2px;
}

.duplicate-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.duplicate-preview-fallback {
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748b;
    font-size: 0.9rem;
}

.duplicate-body {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.duplicate-body h2 {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
}

.duplicate-meta {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #6b7280;
}

.duplicate-author {
    font-size: 0.9rem;
    color: #475569;
}

.duplicate-card-actions {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[data-theme='dark'] .duplicate-card {
    background: #0f172a;
    border-color: #1f2a44;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

[data-theme='dark'] .duplicate-preview {
    background: #111c2f;
}

[data-theme='dark'] .duplicate-body h2 {
    color: #e2e8f0;
}

[data-theme='dark'] .duplicate-subtitle,
[data-theme='dark'] .duplicate-meta,
[data-theme='dark'] .duplicate-author {
    color: rgba(226, 232, 240, 0.75);
}

[data-theme='dark'] .duplicate-resolved {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
}

[data-theme='dark'] .duplicate-banner {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(251, 146, 60, 0.4);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.35);
}

[data-theme='dark'] .duplicate-banner-title {
    color: #fbbf24;
}

[data-theme='dark'] .duplicate-banner-subtitle,
[data-theme='dark'] .duplicate-banner-label {
    color: rgba(254, 215, 170, 0.95);
}

[data-theme='dark'] .receipt-row-card.duplicate-highlight {
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3), 0 12px 24px rgba(15, 23, 42, 0.2);
}

.comment-link-label {
    white-space: nowrap;
}

.comment-link-icon {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.comment-link-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.comment-link-count {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    background: #2f80ed;
    color: #fff;
    font-size: 0.65rem;
    line-height: 1;
    min-width: 1.1rem;
    border-radius: 999px;
    padding: 0.05rem 0.25rem;
    font-weight: 600;
}

[data-theme='dark'] .comment-link-count {
    background: #34d399;
    color: #0f172a;
}

.receipt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(81, 43, 212, 0.12);
    color: #4020a0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
}

.tag-chip.more {
    background: rgba(15, 23, 42, 0.08);
    color: rgba(15, 23, 42, 0.7);
}

[data-theme='dark'] .tag-chip {
    background: rgba(129, 140, 248, 0.22);
    color: #e0e7ff;
}

[data-theme='dark'] .tag-chip.more {
    background: rgba(226, 232, 240, 0.14);
    color: rgba(226, 232, 240, 0.85);
}

.email-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--accent-weak, #e8f1ff);
    color: var(--accent, #2F80ED);
    font-weight: 600;
    border: 1px solid rgba(47, 128, 237, 0.18);
}

.email-chip svg {
    width: 16px;
    height: 16px;
}

.email-chip.subtle {
    background: #eef2ff;
    color: #1f2937;
    border-color: #e2e8f0;
}

.receipt-grid .email-chip.subtle {
    display: inline-flex;
    margin: 0.35rem 0 0.15rem;
}

.gallery-email-context {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.email-context-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.email-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent-weak, #e8f1ff);
    color: var(--accent, #2F80ED);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.email-icon svg {
    width: 20px;
    height: 20px;
}

.email-context-titles h3 {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
}

.email-context-label {
    margin: 0;
    font-size: 0.85rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.email-context-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #64748b;
    font-size: 0.9rem;
}

.email-context-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.email-sibling-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.email-sibling {
    width: 100%;
    text-align: left;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.45rem 0.75rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}

.email-sibling.active {
    background: var(--accent-weak, #e8f1ff);
    border-color: var(--accent, #2F80ED);
}

.sibling-label {
    font-weight: 600;
}

.sibling-source {
    color: #64748b;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .receipt-row-main {
        flex-direction: column;
    }

    .receipt-row-card {
        padding: 0.75rem;
    }

    .receipt-row-actions {
        justify-content: flex-start;
    }

    .bundle-header-main {
        align-items: flex-start;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.receipt-gallery .icon-button svg,
.receipt-gallery .gallery-nav svg,
.receipt-gallery .gallery-nav-icon,
.receipt-gallery .control-icon {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    fill: none;
}



.comments-drawer-container {
    position: relative;
    z-index: 300;
}

.comments-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    background: #fff;
    box-shadow: -24px 0 45px rgba(15, 23, 42, 0.25);
    transform: translateX(100%);
    transition: transform 0.25s ease, opacity 0.25s ease;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    z-index: 320;
}

.comments-drawer.open {
    transform: translateX(0);
    opacity: 1;
}

[data-theme='dark'] .comments-drawer {
    background: #0f172a;
    color: #e2e8f0;
    box-shadow: -24px 0 45px rgba(0, 0, 0, 0.7);
}

.comments-drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    border: none;
    padding: 0;
    margin: 0;
    z-index: 300;
}

.comments-drawer-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.comments-drawer-header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.drawer-subtitle {
    font-size: 0.85rem;
    margin: 0 0 0.25rem;
    color: #64748b;
}

[data-theme='dark'] .drawer-subtitle {
    color: #94a3b8;
}

.comments-drawer-body {
    flex: 1;
    overflow: hidden;
}

.comments-drawer .comment-thread {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    height: 100%;
}

.comments-drawer .comment-thread-body {
    height: 100%;
}

.comments-drawer .comment-scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.35rem;
}

@media (prefers-color-scheme: dark) {
    .comment-item {
        background: #0f172a;
        border-color: #1e293b;
    }

    .comment-thread {
        border-top-color: #1e293b;
    }

    .comment-new {
        border-color: #1e293b;
    }
}
.dismiss-icon { border:none; background:none; color:#94a3b8; cursor:pointer; font-size:1rem; line-height:1; padding:0.15rem; }
.dismiss-icon:hover { color:#0f172a; }
[data-theme='dark'] .dismiss-icon:hover { color:#e2e8f0; }
.notification-dropdown .dismiss-icon { position:absolute; top:8px; right:8px; }
.notification-card .dismiss-icon { position:absolute; top:12px; right:12px; }

.session-table { width:100%; border-collapse:collapse; margin-top:8px; }
.session-table th, .session-table td { padding:8px; border-bottom:1px solid #e2e8f0; text-align:left; vertical-align:top; }
.session-table tbody tr:nth-child(odd) { background:#f8fafc; }
.session-device { font-weight:600; color:#0b2e2a; }
.session-meta { color:#475569; font-size:0.9rem; }
.session-actions { text-align:right; }
.badge.primary { background:#0e9683; color:#fff; padding:4px 8px; border-radius:999px; font-size:0.8rem; }

/* External login buttons */
.external-login { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.external-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.external-btn { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid #e5e7eb; background: #fff; color: #0f172a; padding: 0.65rem 0.9rem; border-radius: 10px; font-weight: 600; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05); }
.external-btn.google { border-color: #d7e3ff; }
.external-btn.facebook { border-color: #dbeafe; }
.external-btn.apple { border-color: #0f172a; background: #0f172a; color: #fff; }
.external-btn.microsoft { border-color: #cfe1ff; }
.external-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.provider-icon { width: 18px; height: 18px; border-radius: 4px; display: inline-block; }
.provider-icon.google { background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc05 75%, #ea4335 100%); }
.provider-icon.facebook { background: #1877f2; }
.provider-icon.apple { background: #0f172a; }
.provider-icon.microsoft { background: linear-gradient(135deg, #2f6fed 0%, #3c8dff 50%, #61b0ff 100%); }
.external-list { list-style: none; padding: 0; margin: 0 0 0.5rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.external-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.external-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.external-provider { font-weight: 700; color: #0b2e2a; }
.external-email { color: #334155; font-size: 0.95rem; }
.external-last { color: #64748b; font-size: 0.85rem; }
.external-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }

.inline-spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.receipt-gallery .gallery-processing {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.receipt-gallery .processing-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #f8fafc;
    color: #0f172a;
}

.receipt-gallery .processing-status.processed {
    background: #e6f7f1;
    color: #0f766e;
}

.receipt-gallery .processing-icon svg {
    display: block;
}

.receipt-gallery .processing-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.receipt-gallery .processing-label {
    font-weight: 600;
    font-size: 0.95rem;
}

.Spam-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid transparent;
}

.Spam-status.status-pending {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fdba74;
}

.Spam-status.status-releasing {
    background: #e0f2fe;
    color: #075985;
    border-color: #7dd3fc;
}

.Spam-status.status-released {
    background: #ecfdf3;
    color: #166534;
    border-color: #86efac;
}

.Spam-status.status-deleted,
.Spam-status.status-error {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

[data-theme='dark'] .Spam-status.status-pending {
    background: rgba(251, 146, 60, 0.15);
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.45);
}

[data-theme='dark'] .Spam-status.status-releasing {
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    border-color: rgba(125, 211, 252, 0.4);
}

[data-theme='dark'] .Spam-status.status-released {
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.35);
}

[data-theme='dark'] .Spam-status.status-deleted,
[data-theme='dark'] .Spam-status.status-error {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.45);
}