/* Shared interface refinements; printed reports keep their existing layout. */
@media screen {
    :root {
        --ui-surface: var(--theme-surface);
        --ui-border: var(--border);
        --ui-shadow: 0 2px 3px #12243303, 0 8px 24px #12243304;
        --ui-radius: 15px;
    }
    :root[data-bs-theme="dark"] {
        --ui-shadow: 0 4px 16px #00000012;
    }
    body { font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
    h1 { font-size: clamp(28px, 2.6vw, 35px); letter-spacing: -1.1px; font-weight: 650; line-height: 1.2; }
    h2 { font-size: 18px; font-weight: 650; letter-spacing: -.35px; }
    h3 { font-weight: 600; }
    .overline { font-size: 10px; letter-spacing: 1.6px; font-weight: 650; margin-bottom: 10px; }
    .main-content { padding: 32px 34px 0; max-width: 1560px; }
    .page-heading { margin-bottom: 28px; gap: 24px; }
    .page-heading p { font-size: 14px; line-height: 1.7; max-width: 640px; }
    .page-heading h1 { margin-bottom: 9px; }
    .page-footer { font-size: 11px; padding: 30px 0 24px; }

    .sidebar { padding: 26px 16px 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent-sidebar-line) transparent; border-right: 1px solid var(--accent-sidebar-line); }
    .sidebar .brand { padding: 0 9px; font-size: 25px; gap: 10px; }
    .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
    .sidebar-caption { margin: 17px 11px 25px; font-size: 9px; letter-spacing: 1.2px; }
    .nav-heading { font-size: 10px; letter-spacing: 1.3px; margin: 13px 0 9px; }
    .nav-item { min-height: 43px; padding: 10px 13px; gap: 12px; border-radius: 9px; font-size: 13px; margin-bottom: 4px; }
    .nav-item svg { width: 18px; height: 18px; }
    .sidebar-bottom { padding-top: 28px; }
    .garage-note { border-radius: 12px; padding: 14px; font-size: 11px; line-height: 1.65; }
    .topbar { position: sticky; top: 0; z-index: 40; height: 76px; padding: 0 34px; }
    [data-colour] .topbar { background: var(--ui-surface); border-bottom-color: var(--ui-border); }
    .breadcrumb-text { font-size: 13px; }
    .breadcrumb-text .breadcrumb-label { padding: 0; color: var(--muted); }
    .breadcrumb-text .breadcrumb-separator { padding: 0 11px; color: var(--muted); opacity: .6; }
    .breadcrumb-text strong { font-weight: 600; }
    .topbar-right { gap: 12px; }
    .today { font-size: 12px; margin-right: 8px; }
    .icon-button { width: 40px; height: 40px; border-radius: 10px; }
    .topbar .theme-summary { min-width: 40px; height: 40px; font-size: 12px; border-radius: 10px; }
    .avatar { width: 36px; height: 36px; font-size: 13px; }

    .btn { min-height: 43px; padding: 10px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; gap: 8px; }
    .btn-sm { min-height: 35px; padding: 7px 11px; font-size: 12px; }
    .btn:focus-visible, .icon-button:focus-visible, .theme-summary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 3px; }
    .btn-primary { box-shadow: 0 1px 2px #0000000d; }
    [data-colour] :is(.panel, .stat-card, .vehicle-card, .quick-actions > a) { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--ui-shadow); }
    .panel, .stat-card, .vehicle-card { border-radius: var(--ui-radius); }
    .panel-heading { padding: 24px 25px 21px; gap: 16px; }
    .panel-heading p { font-size: 12px; margin-top: 5px; line-height: 1.6; }
    .subtle-tag { font-size: 11px; padding: 5px 10px; border-radius: 7px; }
    .count-pill { width: 24px; height: 24px; font-size: 11px; border-radius: 7px; }
    .text-link, .panel-bottom-link { font-size: 12px; font-weight: 500; }

    .stats-grid { gap: 18px; }
    .stat-card { position: relative; padding: 21px 22px 20px; }
    .stat-card:first-child { border-top: 2px solid var(--accent-line); padding-top: 20px; }
    .stat-top { font-size: 12px; gap: 8px; }
    .stat-icon { width: 36px; height: 36px; border-radius: 11px; }
    .stat-value { font-size: clamp(25px, 2.2vw, 32px); letter-spacing: -.9px; font-weight: 650; margin-top: 12px; font-variant-numeric: tabular-nums; }
    .stat-value small { font-size: 12px; font-weight: 500; }
    .stat-caption { font-size: 11px; line-height: 1.6; margin-top: 5px; }
    .quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px 18px; margin: 23px 0 0; }
    .quick-actions > span { grid-column: 1 / -1; font-size: 10px; letter-spacing: 1.3px; margin: 0; }
    .quick-actions > a { min-width: 0; min-height: 76px; padding: 14px; gap: 11px; border-radius: 12px; }
    .quick-action-copy { min-width: 0; flex: 1; }
    .quick-action-copy strong { display: block; font-size: 13px; color: var(--ink); font-weight: 600; }
    .quick-action-copy small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
    .quick-actions > a > svg { margin-left: auto; width: 16px; }
    .quick-actions .quick-action-icon svg { margin: 0; width: 19px; height: 19px; color: inherit; }
    .quick-actions .quick-action-icon { width: 36px; height: 36px; border-radius: 10px; }
    .dashboard-middle { margin-top: 24px; gap: 22px; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
    .spending-chart { margin-top: 20px; height: 221px; }
    .bar-space { height: 182px; }
    .chart-grid > span, .chart-bar span { font-size: 10px; font-variant-numeric: tabular-nums; }
    .chart-bar { border-radius: 7px 7px 0 0; max-width: 52px; }
    .bar-label { font-size: 11px; }
    .chart-legend, .chart-legend a { font-size: 12px; }
    .chart-legend { padding-top: 22px; padding-bottom: 24px; }
    .reminder-item { padding: 18px 0; gap: 11px; }
    .reminder-item strong { font-size: 13px; line-height: 1.5; }
    .reminder-item small { font-size: 11px; line-height: 1.6; }
    .mini-label { font-size: 10px; }
    .reminder-dot { margin-top: 7px; }
    .panel-bottom-link { padding-top: 15px; padding-bottom: 15px; }

    .records-table { font-size: 13px; }
    .records-table th { font-size: 10px; letter-spacing: .7px; font-weight: 600; padding-top: 14px; padding-bottom: 14px; }
    .records-table td { padding-top: 18px; padding-bottom: 18px; }
    .records-table tbody tr { transition: background-color .14s ease; }
    [data-colour] .records-table tbody tr:hover { background: var(--row-hover); }
    .record-title { gap: 13px; }
    .record-title > div > a { font-size: 13px; font-weight: 600; line-height: 1.5; }
    .record-title small { font-size: 11px; line-height: 1.5; margin-top: 4px; }
    .type-icon { width: 39px; height: 39px; border-radius: 11px; }
    .type-icon svg { width: 19px; height: 19px; }
    .plate-small { font-size: 11px; padding: 4px 8px; letter-spacing: .3px; border-radius: 6px; }
    .status-pill { font-size: 11px; padding: 4px 9px; border-radius: 6px; font-weight: 500; }
    .status-pill.paid { color: #356344; background: #eaf4ec; }
    .status-pill.unpaid { color: #815416; background: #faf0dc; }
    .status-pill.disputed { color: #684494; background: #f1eaf8; }
    .amount { font-variant-numeric: tabular-nums; font-weight: 650; }
    .table-action { width: 36px; height: 36px; border-radius: 8px; }
    .attachment-view, .attachment-download, .record-title .attachment-view { font-size: 12px; min-height: 28px; line-height: 1.4; }
    .record-title .attachment-actions { margin-top: 5px; }
    .filter-bar { padding: 23px 25px; gap: 14px; }
    .filter-bar label { font-size: 12px; font-weight: 500; }
    .filter-bar .btn { height: 45px; }
    .reset-filter { font-size: 12px; }
    .table-summary { font-size: 12px; padding-top: 14px; padding-bottom: 14px; }

    .form-panel { max-width: 1060px; padding: 32px; }
    .form-section-heading { gap: 14px; margin-bottom: 25px; }
    .form-section-heading h2 { font-size: 18px; }
    .form-section-heading p { font-size: 12px; line-height: 1.7; }
    .form-section-heading:not(:first-of-type) { margin-top: 31px; padding-top: 29px; }
    .section-number { width: 39px; height: 39px; border-radius: 11px; font-size: 12px; flex-shrink: 0; }
    .form-grid { gap: 23px 28px; }
    .form-grid > * { min-width: 0; }
    .form-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
    .form-control, .form-select { min-height: 45px; font-size: 14px; border-radius: 9px; padding: 10px 12px; }
    .form-control::placeholder { font-size: 13px; }
    .form-text, .check-label small { font-size: 12px; line-height: 1.65; }
    .check-label { font-size: 13px; }
    .check-label input { width: 18px; height: 18px; }
    .form-actions { font-size: 12px; margin-top: 30px; padding-top: 24px; }
    .attachment-input { padding: 18px; border: 1px dashed var(--accent-line); border-radius: 12px; background: var(--accent-inset); }
    .attachment-input .form-control { font-size: 12px; max-width: 100%; }
    .attachment-camera-option { gap: 8px; }
    .attachment-camera-option .form-text { font-size: 11px; }
    .attachment-selection { background: var(--ui-surface); }
    .search-field svg { top: 14px; }
    .search-field input { padding-left: 38px; }

    .vehicle-card { padding: 24px; }
    .vehicle-card h2 { font-size: 21px; }
    .vehicle-card-art { border-radius: 14px; height: 140px; }
    .vehicle-card-meta, .vehicle-year, .vehicle-card-stats small { font-size: 12px; }
    .vehicle-card-stats strong { font-size: 20px; font-variant-numeric: tabular-nums; }
    .vehicle-card-link { font-size: 13px; padding-top: 18px; }
    .garage-vehicle { padding: 18px; gap: 13px; border-radius: 12px; }
    .garage-vehicle > div strong { font-size: 14px; }
    .garage-vehicle > div span { font-size: 11px; }
    .garage-vehicle .plate-small { font-size: 10px; }
    .vehicle-symbol { width: 48px; height: 48px; border-radius: 12px; }
    .document-mini { border-radius: 11px; }
    .document-mini strong { font-size: 14px; }
    .document-mini small { font-size: 12px; }
    .report-meta, .economy-row strong { font-size: 13px; }
    .report-total { font-variant-numeric: tabular-nums; font-size: 38px; }
    .breakdown-list > div { font-size: 14px; }
    .outstanding-note { border-radius: 10px; }
    .outstanding-note small { font-size: 12px; }
    .notice { font-size: 13px; border-radius: 11px; }
    .empty-state { padding: 44px 24px; }
    .empty-state h3 { font-size: 18px; }
    .empty-state p { font-size: 13px; line-height: 1.7; }
    .empty-state.compact h3 { font-size: 16px; }
    .empty-state.compact p { font-size: 12px; }

    .theme-options { width: 360px; padding: 14px; border-radius: 16px; border-color: var(--ui-border); box-shadow: 0 16px 48px #0b162425; }
    [data-colour] .theme-options { background: var(--ui-surface); }
    .appearance-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 3px 13px; }
    .appearance-heading strong { display: block; font-size: 16px; font-weight: 650; color: var(--ink); }
    .appearance-heading span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
    .appearance-heading .icon-button { width: 32px; height: 32px; flex-shrink: 0; }
    .theme-option { font-size: 12px; padding: 8px 4px; min-height: 38px; border-radius: 8px; }
    .theme-help { padding-top: 7px; font-size: 11px; }
    .theme-heading { font-size: 10px; letter-spacing: 1px; padding-left: 5px; }
    .theme-variants { margin-top: 10px; padding-top: 11px; }
    .theme-variant-option { border-radius: 9px; font-size: 11px; gap: 4px; }
    .theme-variant-help { font-size: 11px; padding-left: 5px; padding-top: 6px; }
    .theme-bases { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 11px; }
    .theme-base-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .theme-base-option { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--ink); font-size: 11px; }
    .theme-base-option:hover { background: var(--theme-hover); }
    .theme-base-option[aria-pressed="true"] { background: var(--theme-selected); border-color: var(--green); font-weight: 600; }
    .theme-base-option .theme-colour-swatch { width: 76px; height: 40px; }
    .theme-base-option .theme-colour-swatch::before { width: 21px; }
    .theme-base-option .theme-colour-swatch::after { left: 29px; top: 9px; right: 8px; height: 7px; box-shadow: 0 12px 0 color-mix(in srgb, var(--preview-primary) 20%, var(--preview-canvas)); }
    .theme-base-help { display: block; font-size: 11px; line-height: 1.5; color: var(--muted); padding: 7px 5px 0; min-height: 40px; }
    .theme-colours { margin-top: 11px; padding-top: 11px; }
    .theme-colour-heading > [data-colour-current] { font-size: 11px; font-weight: 500; }
    .theme-colour-grid { gap: 4px; }
    .theme-colour-option { font-size: 11px; padding: 5px 2px; gap: 4px; border-radius: 9px; }
    .theme-colour-swatch { width: 54px; height: 29px; }
    .theme-colour-swatch::after { top: 7px; }
    .theme-colour-swatch svg { top: 6px; }
    .theme-scroll-hint { display: block; margin: 0 5px 6px; font-size: 11px; }

    .auth-panel { max-width: 450px; padding: 34px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 20px; box-shadow: var(--ui-shadow); }
    .auth-panel h2 { font-size: 30px; line-height: 1.25; }
    .auth-panel > .muted { font-size: 14px; line-height: 1.7; }
    .auth-panel .form-control { height: 48px; }
    .auth-panel .btn-lg { font-size: 14px; min-height: 47px; }
    .auth-pitch h1 { font-size: clamp(34px, 3.3vw, 49px); letter-spacing: -1.5px; }
    [data-colour] .auth-story .auth-pitch .overline { color: var(--accent-sidebar-muted); }
    .auth-foot { font-size: 12px; }
    .scanner-modal .btn, .attachment-modal .btn { min-height: 38px; font-size: 12px; }
    .scanner-options .form-select { font-size: 13px; }
    .scanner-heading .icon-button, .attachment-modal-close { width: 40px; height: 40px; }

    @media (min-width: 1200px) {
        .sidebar { width: 244px; }
        .workspace { margin-left: 244px; }
    }
    @media (max-width: 1199px) {
        .main-content { padding: 28px 24px 0; }
        .topbar { padding: 0 24px; }
        .stats-grid { gap: 13px; }
        .stat-card { padding: 18px 15px; }
        .stat-card:first-child { padding-top: 17px; }
        .stat-top { font-size: 11px; }
        .stat-icon { width: 30px; height: 30px; }
        .stat-value { font-size: 26px; }
        .quick-actions { gap: 11px 13px; }
        .quick-actions > a { padding: 12px 10px; gap: 8px; }
        .quick-actions > a > svg { display: none; }
        .quick-action-copy strong { font-size: 12px; }
        .quick-action-copy small { font-size: 10px; }
        .dashboard-middle { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
        .auth-panel { padding: 28px; }
    }
    @media (max-width: 991px) {
        .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .quick-actions > a { min-height: 69px; padding: 13px; }
        .quick-action-copy strong { font-size: 13px; }
        .quick-action-copy small { font-size: 11px; }
        .quick-actions > a > svg { display: block; }
        .dashboard-middle { grid-template-columns: 1fr; }
        .reminder-list { display: block; }
        .reminder-list .reminder-item { border-bottom: 1px solid var(--ui-border); }
        .reminder-list .reminder-item:last-child { border-bottom: 0; }
        .garage-strip { grid-template-columns: 1fr; }
        .form-panel { padding: 25px; }
        .page-heading { flex-wrap: wrap; gap: 16px; }
        .auth-panel { padding: 25px; }
    }
    @media (max-width: 767px) {
        .sidebar { width: 244px; }
        .workspace { margin-left: 0; }
        .topbar { height: 68px; padding: 0 16px; }
        .topbar-right { gap: 2px; }
        .topbar .breadcrumb-label, .topbar .breadcrumb-separator { display: none; }
        .breadcrumb-text { font-size: 12px; }
        .main-content { padding: 25px 16px 0; }
        .page-heading { margin-bottom: 22px; }
        .page-heading h1 { font-size: 28px; }
        .page-heading p { font-size: 13px; }
        .page-heading > .btn, .page-heading .no-print .btn { font-size: 12px; padding: 9px 12px; }
        .stats-grid { gap: 12px; }
        .stat-card { padding: 16px 14px; }
        .stat-card:first-child { padding-top: 15px; }
        .stat-top { align-items: flex-start; font-size: 11px; }
        .stat-icon { width: 27px; height: 27px; flex-shrink: 0; border-radius: 8px; }
        .stat-icon svg { width: 15px; height: 15px; }
        .stat-value { font-size: 25px; white-space: normal; margin-top: 10px; line-height: 1.35; }
        .stat-value small { font-size: 10px; }
        .stat-caption { font-size: 10px; }
        .quick-actions { margin-top: 21px; gap: 9px 12px; }
        .quick-actions > a { padding: 12px 10px; min-height: 72px; }
        .quick-actions > a > svg { display: none; }
        .quick-action-copy strong { font-size: 12px; }
        .quick-action-copy small { font-size: 10px; }
        .quick-actions .quick-action-icon { width: 30px; height: 32px; border-radius: 8px; }
        .panel-heading { padding: 20px 18px; }
        .panel-heading h2 { font-size: 17px; }
        .panel-heading p { font-size: 12px; }
        .panel-heading .text-link { font-size: 11px; }
        .dashboard-middle { margin-top: 22px; gap: 20px; }
        .spending-chart { margin: 12px 19px 0 17px; padding-left: 38px; height: 215px; }
        .chart-bars { gap: 12px; padding: 0 4px; }
        .bar-space { height: 176px; }
        .chart-grid > span, .chart-bar span { font-size: 9px; }
        .chart-legend { padding: 18px; gap: 12px; font-size: 11px; }
        .chart-legend a { font-size: 11px; }
        .records-table { min-width: 680px; font-size: 12px; }
        .records-table th:first-child, .records-table td:first-child { padding-left: 18px; }
        .records-table td { padding-top: 16px; padding-bottom: 16px; }
        .record-title > div > a { font-size: 13px; }
        .record-title small { font-size: 11px; }
        .filter-bar { padding: 18px; gap: 13px; }
        .filter-bar > div { min-width: 110px; }
        .table-summary { padding: 13px 18px; font-size: 11px; flex-wrap: wrap; }
        .form-panel { padding: 22px 18px; }
        .form-grid { gap: 21px; }
        .form-section-heading h2 { font-size: 17px; }
        .form-section-heading p { font-size: 12px; }
        .form-control, .form-select { font-size: 16px; }
        .form-actions { gap: 12px; flex-wrap: wrap; }
        .form-actions > .btn { margin-left: auto; }
        .attachment-input { padding: 15px; }
        .attachment-input .form-control { font-size: 12px; }
        .garage-strip { padding: 0 18px 20px; gap: 12px; }
        .garage-vehicle { padding: 16px 13px; }
        .vehicle-mileage { display: none; }
        .vehicle-card { padding: 20px; }
        .vehicle-card-art { height: 115px; }
        .page-footer { font-size: 10px; gap: 6px; padding: 26px 0; }
        .theme-options { max-width: calc(100vw - 24px); max-height: calc(100dvh - 82px); padding: 12px; }
        .topbar .theme-options { right: 12px; top: calc(100% - 3px); }
        .auth-theme .theme-options { max-width: calc(100vw - 36px); }
        .auth-main { padding: 96px 18px 30px; }
        .auth-panel { padding: 27px 22px; }
        .auth-panel:before { font-size: 23px; margin-bottom: 25px; }
        .auth-panel h2 { font-size: 26px; }
        .auth-theme { top: 23px; right: 22px; }
        .scanner-options .form-select { font-size: 12px; }
    }
    @media (max-width: 380px) {
        .topbar { padding: 0 12px; }
        .topbar > div:first-child { gap: 5px !important; }
        .topbar .icon-button, .topbar .theme-summary { width: 36px; min-width: 36px; }
        .avatar { width: 32px; height: 32px; }
        .main-content { padding-right: 12px; padding-left: 12px; }
        .stat-card { padding: 14px 11px; }
        .stat-card:first-child { padding-top: 13px; }
        .stat-value { font-size: 23px; }
        .stat-top { gap: 5px; font-size: 10px; }
        .quick-actions > a { gap: 7px; padding: 11px 8px; }
        .quick-action-copy strong { font-size: 11px; }
        .quick-action-copy small { font-size: 9px; }
        .theme-colour-swatch { width: 49px; }
        .theme-colour-option { font-size: 10px; }
        .theme-variant-help { font-size: 10px; }
    }
    @media (max-height: 700px) and (min-width: 768px) {
        .sidebar { padding-top: 18px; }
        .sidebar-caption { margin-bottom: 15px; }
        .garage-note { display: none; }
        .sidebar-bottom { padding-top: 14px; }
    }
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
        .quick-actions > a, .vehicle-card, .garage-vehicle { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
        .quick-actions > a:hover, .vehicle-card:hover, .garage-vehicle:hover { transform: translateY(-2px); border-color: var(--accent-line); }
    }
    @media (prefers-reduced-motion: reduce) {
        .records-table tbody tr, .nav-item, .btn, .sidebar { transition: none; }
    }
    [data-bs-theme="dark"] .status-pill.paid { color: #b8d8be; background: #233b2d; }
    [data-bs-theme="dark"] .status-pill.unpaid { color: #e4c58f; background: #423724; }
    [data-bs-theme="dark"] .status-pill.disputed { color: #d3b5eb; background: #3b2e49; }
}