/*
 * Brand palette (logo: deep green, gold, leaf green, clock orange).
 * light-dark() when supported; fallback for older browsers.
 */
@supports (color: light-dark(white, black)) {
    :root {
        color-scheme: light dark;
        --color-bg: light-dark(#eef5f0, #0c1610);
        --color-surface: light-dark(#ffffff, #15251b);
        --color-text: light-dark(#142318, #e8f5e9);
        --color-text-muted: light-dark(#3d5c48, #9fb8a8);
        --color-text-subtle: light-dark(#4f7160, #9bb0a2);
        --color-border: light-dark(#b5d0bf, #2a4034);
        --color-table-border: light-dark(#cfe8d6, #1f3326);
        --color-thead: light-dark(#e4f3e8, #1a2e22);
        --color-bar-track: light-dark(#cde5d4, #24392c);
        --color-accent: light-dark(#1b5e20, #81c784);
        --color-accent-emphasis: light-dark(#1b5e20, #c8e6c9);
        --color-accent-hover: light-dark(#2e7d32, #a5d6a7);
        --color-cta-fill: light-dark(#1b5e20, #2e7d32);
        --color-cta-hover: light-dark(#2e7d32, #1b5e20);
        --color-on-brand-gold: #1a1508;
        --color-brand-gold: light-dark(#b8941f, #e4c76a);
        --color-focus: light-dark(#1b5e20, #a5d6a7);
        --color-focus-glow: light-dark(rgba(27, 94, 32, 0.22), rgba(165, 214, 167, 0.38));
        --color-success-bg: light-dark(#e8f5e9, rgba(56, 142, 60, 0.28));
        --color-success-text: light-dark(#1b5e20, #c8e6c9);
        --color-error-bg: light-dark(#fef2f2, rgba(185, 28, 28, 0.2));
        --color-error-text: light-dark(#b91c1c, #fecaca);
        --color-error-border: light-dark(rgba(185, 28, 28, 0.4), rgba(254, 202, 202, 0.5));
        --shadow-sm: light-dark(0 1px 2px rgba(20, 35, 24, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4));
        --shadow-card: light-dark(0 1px 3px rgba(20, 35, 24, 0.08), 0 1px 4px rgba(0, 0, 0, 0.45));
        --shadow-panel: light-dark(0 4px 24px rgba(20, 35, 24, 0.08), 0 8px 32px rgba(0, 0, 0, 0.48));
        --radius: 0.75rem;
        --radius-pill: 9999px;
        --font-sans: "Cairo", "Segoe UI", Tahoma, sans-serif;
        --touch-min: 44px;
        --accent-gold: light-dark(#b8941f, #e4c76a);
        --accent-green: light-dark(#1b5e20, #66bb6a);
        --accent-amber: light-dark(#e65100, #ffab91);
        --accent-slate: light-dark(#4d6f58, #8faa9c);
        --accent-sky: light-dark(#00695c, #4db6ac);
        --value-gold: light-dark(#c9a227, #f0d875);
        --value-green: light-dark(#2e7d32, #a5d6a7);
        --value-amber: light-dark(#e65100, #ffccbc);
        --value-slate: light-dark(#3d5c48, #c8e6c9);
        --value-sky: light-dark(#004d40, #80cbc4);
        --help-bg: light-dark(#f0f8f2, #132219);
        --help-border: light-dark(#c5e0cd, #2d4a38);
        --color-on-accent: #ffffff;
    }
}

@supports not (color: light-dark(white, black)) {
    :root {
        color-scheme: light dark;
        --color-bg: #eef5f0;
        --color-surface: #ffffff;
        --color-text: #142318;
        --color-text-muted: #3d5c48;
        --color-text-subtle: #4f7160;
        --color-border: #b5d0bf;
        --color-table-border: #cfe8d6;
        --color-thead: #e4f3e8;
        --color-bar-track: #cde5d4;
        --color-accent: #1b5e20;
        --color-accent-emphasis: #1b5e20;
        --color-accent-hover: #2e7d32;
        --color-cta-fill: #1b5e20;
        --color-cta-hover: #2e7d32;
        --color-on-brand-gold: #1a1508;
        --color-brand-gold: #b8941f;
        --color-focus: #1b5e20;
        --color-focus-glow: rgba(27, 94, 32, 0.22);
        --color-success-bg: #e8f5e9;
        --color-success-text: #1b5e20;
        --color-error-bg: #fef2f2;
        --color-error-text: #b91c1c;
        --color-error-border: rgba(185, 28, 28, 0.4);
        --shadow-sm: 0 1px 2px rgba(20, 35, 24, 0.06);
        --shadow-card: 0 1px 3px rgba(20, 35, 24, 0.08);
        --shadow-panel: 0 4px 24px rgba(20, 35, 24, 0.08);
        --radius: 0.75rem;
        --radius-pill: 9999px;
        --font-sans: "Cairo", "Segoe UI", Tahoma, sans-serif;
        --touch-min: 44px;
        --accent-gold: #b8941f;
        --accent-green: #1b5e20;
        --accent-amber: #e65100;
        --accent-slate: #4d6f58;
        --accent-sky: #00695c;
        --value-gold: #c9a227;
        --value-green: #2e7d32;
        --value-amber: #e65100;
        --value-slate: #3d5c48;
        --value-sky: #004d40;
        --help-bg: #f0f8f2;
        --help-border: #c5e0cd;
        --color-on-accent: #ffffff;
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            color-scheme: dark;
            --color-bg: #0c1610;
            --color-surface: #15251b;
            --color-text: #e8f5e9;
            --color-text-muted: #9fb8a8;
            --color-text-subtle: #9bb0a2;
            --color-border: #2a4034;
            --color-table-border: #1f3326;
            --color-thead: #1a2e22;
            --color-bar-track: #24392c;
            --color-accent: #81c784;
            --color-accent-emphasis: #c8e6c9;
            --color-accent-hover: #a5d6a7;
            --color-cta-fill: #2e7d32;
            --color-cta-hover: #1b5e20;
            --color-on-brand-gold: #1a1508;
            --color-brand-gold: #e4c76a;
            --color-focus: #a5d6a7;
            --color-focus-glow: rgba(165, 214, 167, 0.38);
            --color-success-bg: rgba(56, 142, 60, 0.28);
            --color-success-text: #c8e6c9;
            --color-error-bg: rgba(185, 28, 28, 0.2);
            --color-error-text: #fecaca;
            --color-error-border: rgba(254, 202, 202, 0.5);
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
            --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.45);
            --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.48);
            --accent-gold: #e4c76a;
            --accent-green: #66bb6a;
            --accent-amber: #ffab91;
            --accent-slate: #8faa9c;
            --accent-sky: #4db6ac;
            --value-gold: #f0d875;
            --value-green: #a5d6a7;
            --value-amber: #ffccbc;
            --value-slate: #c8e6c9;
            --value-sky: #80cbc4;
            --help-bg: #132219;
            --help-border: #2d4a38;
            --color-on-accent: #ffffff;
        }
    }

    :root[data-theme="light"] {
        color-scheme: light;
        --color-bg: #eef5f0;
        --color-surface: #ffffff;
        --color-text: #142318;
        --color-text-muted: #3d5c48;
        --color-text-subtle: #4f7160;
        --color-border: #b5d0bf;
        --color-table-border: #cfe8d6;
        --color-thead: #e4f3e8;
        --color-bar-track: #cde5d4;
        --color-accent: #1b5e20;
        --color-accent-emphasis: #1b5e20;
        --color-accent-hover: #2e7d32;
        --color-cta-fill: #1b5e20;
        --color-cta-hover: #2e7d32;
        --color-on-brand-gold: #1a1508;
        --color-brand-gold: #b8941f;
        --color-focus: #1b5e20;
        --color-focus-glow: rgba(27, 94, 32, 0.22);
        --color-success-bg: #e8f5e9;
        --color-success-text: #1b5e20;
        --color-error-bg: #fef2f2;
        --color-error-text: #b91c1c;
        --color-error-border: rgba(185, 28, 28, 0.4);
        --shadow-sm: 0 1px 2px rgba(20, 35, 24, 0.06);
        --shadow-card: 0 1px 3px rgba(20, 35, 24, 0.08);
        --shadow-panel: 0 4px 24px rgba(20, 35, 24, 0.08);
        --accent-gold: #b8941f;
        --accent-green: #1b5e20;
        --accent-amber: #e65100;
        --accent-slate: #4d6f58;
        --accent-sky: #00695c;
        --value-gold: #c9a227;
        --value-green: #2e7d32;
        --value-amber: #e65100;
        --value-slate: #3d5c48;
        --value-sky: #004d40;
        --help-bg: #f0f8f2;
        --help-border: #c5e0cd;
        --color-on-accent: #ffffff;
    }

    :root[data-theme="dark"] {
        color-scheme: dark;
        --color-bg: #0c1610;
        --color-surface: #15251b;
        --color-text: #e8f5e9;
        --color-text-muted: #9fb8a8;
        --color-text-subtle: #9bb0a2;
        --color-border: #2a4034;
        --color-table-border: #1f3326;
        --color-thead: #1a2e22;
        --color-bar-track: #24392c;
        --color-accent: #81c784;
        --color-accent-emphasis: #c8e6c9;
        --color-accent-hover: #a5d6a7;
        --color-cta-fill: #2e7d32;
        --color-cta-hover: #1b5e20;
        --color-on-brand-gold: #1a1508;
        --color-brand-gold: #e4c76a;
        --color-focus: #a5d6a7;
        --color-focus-glow: rgba(165, 214, 167, 0.38);
        --color-success-bg: rgba(56, 142, 60, 0.28);
        --color-success-text: #c8e6c9;
        --color-error-bg: rgba(185, 28, 28, 0.2);
        --color-error-text: #fecaca;
        --color-error-border: rgba(254, 202, 202, 0.5);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.45);
        --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.48);
        --accent-gold: #e4c76a;
        --accent-green: #66bb6a;
        --accent-amber: #ffab91;
        --accent-slate: #8faa9c;
        --accent-sky: #4db6ac;
        --value-gold: #f0d875;
        --value-green: #a5d6a7;
        --value-amber: #ffccbc;
        --value-slate: #c8e6c9;
        --value-sky: #80cbc4;
        --help-bg: #132219;
        --help-border: #2d4a38;
        --color-on-accent: #ffffff;
    }
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

/* Skip link (keyboard / AT) */
.skip-link {
    position: absolute;
    inset-inline-start: 0.5rem;
    top: -100px;
    z-index: 9999;
    padding: 0.6rem 1rem;
    background: var(--color-cta-fill);
    color: var(--color-on-accent);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: top 0.15s ease, background 0.15s ease;
}

.skip-link:hover {
    background: var(--color-cta-hover);
}

.skip-link:focus {
    top: 0.5rem;
}

.skip-link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

/* Keyboard focus */
:where(a, button, input, select, textarea, summary):focus {
    outline: none;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    scroll-margin: 0.35rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Inline SVG icons (stroke uses currentColor) */
.icon {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

/* Theme bar: absolute in doc flow on mobile; fixed corner from 640px up */
.theme-bar-shell {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

@media (min-width: 640px) {
    .theme-bar-shell {
        position: fixed;
    }
}

.theme-bar__caption {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
    line-height: 1;
}

.theme-bar {
    display: flex;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.theme-bar__btn {
    margin: 0;
    border: none;
    border-inline-end: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    padding: 0.45rem 0.6rem;
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-bar__btn:last-child {
    border-inline-end: none;
}

.theme-bar__btn:hover {
    background: var(--color-thead);
    color: var(--color-text);
}

.theme-bar__btn[aria-pressed="true"] {
    background: var(--color-brand-gold);
    color: var(--color-on-brand-gold);
}

.site-footer {
    margin-top: 2.5rem;
    padding: 1rem 1.25rem 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    border-top: 1px solid var(--color-table-border);
}

.site-footer__inner {
    max-width: 900px;
    margin: 0 auto;
}

.site-footer a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}

.site-footer a:hover {
    color: var(--color-brand-gold);
    text-decoration: underline;
}

/* ——— Report page (mobile-first) ——— */
body.page-report {
    padding: clamp(0.75rem, 3.5vw, 2rem);
    padding-inline: max(0.75rem, calc(env(safe-area-inset-left, 0px) + 4px)) max(0.75rem, calc(env(safe-area-inset-right, 0px) + 4px));
    overflow-x: hidden;
    overflow-x: clip;
}

.page-report .container {
    width: 100%;
    max-width: 900px;
    min-width: 0;
    margin-inline: auto;
}

.page-report .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    width: 100%;
}

.page-report .brand-logo {
    display: block;
    height: 4rem;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    border-radius: 0.5rem;
}

.page-report .brand-text {
    max-width: 38rem;
    margin: 0 auto;
}

.page-report h1 {
    font-size: clamp(1.35rem, 4vw, 1.6rem);
    font-weight: 800;
    margin-bottom: 0;
}

.page-report .report-year {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.35rem 0 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-thead);
    border: 1px solid var(--color-table-border);
    font-weight: 800;
    font-size: clamp(1.05rem, 2.8vw, 1.2rem);
    color: var(--color-text);
    line-height: 1.2;
}

.page-report .report-year__prefix {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.page-report .report-year__value {
    font-variant-numeric: tabular-nums;
}

.page-report .subtitle {
    color: var(--color-text-subtle);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.page-report .subtitle .subtitle-hint {
    color: var(--color-text-muted);
}

.page-report .header-subtitle {
    max-width: 38rem;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 1.25rem;
    text-align: center;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.page-report .site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.page-report .filter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.9rem;
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
    padding: 0.65rem 0.75rem;
    background: var(--help-bg);
    border: 1px solid var(--help-border);
    border-radius: var(--radius);
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .page-report .filter {
        width: auto;
        max-width: none;
        margin-inline: 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
    }
}

.page-report .filter label {
    font-weight: 600;
    color: var(--color-text-muted);
}

.page-report .filter select {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem;
    min-height: var(--touch-min);
    font-size: 0.9rem;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-report .filter .btn-apply {
    background: var(--color-cta-fill);
    color: var(--color-on-accent);
    border: none;
    border-radius: 0.5rem;
    padding: 0.55rem 1.1rem;
    min-height: var(--touch-min);
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.page-report .filter .btn-apply:hover {
    background: var(--color-cta-hover);
}

.page-report .filter .btn-apply:active {
    transform: scale(0.98);
}

.page-report .sign-out {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: var(--touch-min);
    padding: 0 0.65rem;
    margin-inline-start: 0.25rem;
    font-size: 0.82rem;
    color: var(--color-text-subtle);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0.5rem;
    transition: color 0.15s ease, background 0.15s ease;
}

.page-report .sign-out:hover {
    color: var(--color-brand-gold);
    text-decoration: underline;
    background: color-mix(in srgb, var(--color-brand-gold) 14%, transparent);
}

[dir="rtl"] .page-report .sign-out__icon {
    transform: scaleX(-1);
}

/* KPI: primary pair + expandable secondary metrics */
.page-report .kpi-section {
    margin-bottom: 1.25rem;
}

.page-report .cards--primary {
    display: grid;
    gap: 1rem 0.85rem;
    margin-bottom: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
}

@media (min-width: 640px) {
    .page-report .cards--primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.page-report .cards-extra {
    border: 1px solid var(--help-border);
    border-radius: var(--radius);
    background: var(--help-bg);
    padding: 0.35rem 0.85rem 0.85rem;
}

.page-report .cards-extra summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: 0.5rem 0;
    list-style-position: outside;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.page-report .cards-extra__icon {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.page-report .cards-extra[open] .cards-extra__icon {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .page-report .cards-extra__icon {
        transition: none;
    }
}

.page-report .cards--nested {
    display: grid;
    gap: 0.75rem;
    padding-top: 0.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.page-report .cards--nested .card {
    padding: 0.85rem 1rem;
}

.page-report .cards--nested .card-value {
    font-size: 1.45rem;
}

.page-report .card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.05rem 1.25rem;
    border: 1px solid var(--color-table-border);
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--color-border);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.page-report .card--lead {
    border-top-color: var(--color-brand-gold);
}

@media (prefers-reduced-motion: no-preference) {
    .page-report .card:hover {
        box-shadow: var(--shadow-card);
        transform: translateY(-1px);
    }
}

.page-report .card-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.page-report .card-value {
    font-size: 1.65rem;
    font-weight: 800;
    margin-top: 0.25rem;
    color: var(--color-text);
}

.page-report .card--lead .card-value {
    font-size: 2.1rem;
    color: var(--color-accent-emphasis);
}

/* Column help — keyboard-accessible (native <details>) */
.page-report .table-help {
    margin-bottom: 1rem;
    border: 1px solid var(--help-border);
    border-radius: var(--radius);
    background: var(--help-bg);
    padding: 0.35rem 0.85rem 0.85rem;
}

.page-report .table-help summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: 0.5rem 0;
    list-style-position: outside;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.page-report .table-help .table-help__summary-icon {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.page-report .table-help[open] .table-help__summary-icon {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .page-report .table-help .table-help__summary-icon {
        transition: none;
    }
}

.page-report .column-help {
    display: grid;
    gap: 0.65rem 1rem;
    padding-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-subtle);
}

@media (min-width: 520px) {
    .page-report .column-help {
        grid-template-columns: minmax(5rem, 8rem) 1fr;
    }
}

.page-report .column-help dt {
    font-weight: 700;
    color: var(--color-text-muted);
}

.page-report .column-help dd {
    margin: 0;
}

.page-report .table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
}

/* Real table fits the container on mobile (no min-width overflow); fixed layout shares column width */
.page-report .data-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.page-report .data-table thead {
    background: var(--color-thead);
}

.page-report .data-table th {
    min-width: 0;
    padding: 0.6rem 0.7rem;
    text-align: start;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.page-report .data-table tbody td {
    min-width: 0;
    padding: 0.6rem 0.7rem;
    font-size: 0.8125rem;
    border-top: 1px solid var(--color-table-border);
    vertical-align: middle;
}

.page-report .data-table tbody td.data-table__level {
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.page-report .data-table thead th:nth-child(1) {
    width: 2.75rem;
}

.page-report .data-table thead th:nth-child(2) {
    width: 26%;
}

.page-report .data-table thead th:nth-child(7) {
    width: 22%;
}

.page-report .data-table .bar-cell {
    min-width: 0;
}

.page-report .data-table th.num,
.page-report .data-table td.num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.page-report .data-table tbody td.empty {
    padding: 2rem 1rem;
    text-align: center;
}

@media (min-width: 640px) {
    .page-report .data-table th {
        padding: 0.8rem 1.25rem;
        font-size: clamp(0.8125rem, 1.6vw, 0.875rem);
    }

    .page-report .data-table tbody td {
        padding: 0.85rem 1.25rem;
        font-size: 0.9rem;
    }

    .page-report .data-table tbody td.empty {
        padding: 3rem 1.5rem;
    }
}

@media (hover: hover) {
    .page-report .data-table tbody tr.data-table__row:hover td {
        background: var(--color-thead);
    }
}

.page-report .rank {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.page-report .badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
}

.page-report .badge.has {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.page-report .badge.none {
    background: var(--color-bg);
    color: var(--color-text-muted);
}

.page-report .bar-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    direction: ltr;
    min-width: 0;
}

.page-report .bar-bg {
    flex: 1;
    background: var(--color-bar-track);
    border-radius: var(--radius-pill);
    height: 8px;
    overflow: hidden;
}

.page-report .bar-fill {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(calc(var(--pct, 0) / 100));
    background: linear-gradient(90deg, var(--color-accent), var(--color-brand-gold));
    border-radius: var(--radius-pill);
    transition: transform 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .page-report .bar-fill {
        transition: none;
    }

    .page-report .filter .btn-apply:active {
        transform: none;
    }
}

.page-report .bar-pct {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    min-width: 2.75rem;
    text-align: end;
}

.page-report .empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--color-text-subtle);
    line-height: 1.7;
    max-width: min(36rem, 100%);
    margin: 0 auto;
    box-sizing: border-box;
}

.page-report .empty strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-size: 1.05rem;
}

/* ——— Unlock page ——— */
body.page-unlock {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1rem, 4vw, 2rem);
    padding-inline: max(1rem, calc(env(safe-area-inset-left, 0px) + 4px)) max(1rem, calc(env(safe-area-inset-right, 0px) + 4px));
    overflow-x: hidden;
    overflow-x: clip;
}

.page-unlock .panel {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-panel);
    text-align: center;
    border: 1px solid var(--color-table-border);
}

.page-unlock .panel .brand-logo {
    height: 3.5rem;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    margin-bottom: 1.25rem;
    border-radius: 0.5rem;
}

.page-unlock__title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.page-unlock__product {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.65rem;
}

.page-unlock .lead {
    color: var(--color-text-subtle);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.page-unlock label {
    display: block;
    text-align: start;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.page-unlock input[type="password"] {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    min-height: var(--touch-min);
    font-size: 1rem;
    margin-bottom: 1rem;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-unlock input[type="password"]:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus-glow);
}

.page-unlock .btn-unlock {
    width: 100%;
    background: var(--color-cta-fill);
    color: var(--color-on-accent);
    border: none;
    border-radius: 0.5rem;
    padding: 0.65rem 1rem;
    min-height: var(--touch-min);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.page-unlock .btn-unlock:hover {
    background: var(--color-cta-hover);
}

.page-unlock .err {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    font-size: 0.82rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    text-align: start;
    border: 1px solid var(--color-error-border);
}

.page-unlock .unlock-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.15rem 0;
    color: var(--color-text-subtle);
    font-size: 0.8rem;
    font-weight: 700;
}

.page-unlock .unlock-or::before,
.page-unlock .unlock-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.page-unlock .unlock-or__text {
    flex-shrink: 0;
}

.page-unlock .btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--touch-min);
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-unlock .btn-google:hover {
    background: var(--color-thead);
    border-color: var(--color-table-border);
    box-shadow: var(--shadow-card);
}

.page-unlock .btn-google:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}