/* ==========================================================================
   fluent-cupertino.css — Cầu Cupertino cho FluentUI Blazor v5.
   --------------------------------------------------------------------------
   Port từ "Golden Gate" theme (tahoe.css, solution MES — macOS 27 /
   Liquid Glass: kính mờ, bo lớn, ::part(control) xuyên shadow-DOM).
   Bảng màu: **Apple systemBlue** theo iOS/macOS HIG (không dùng tím):
     light #007AFF · hover/dark #0A84FF · active #0066D6 · tint rgba(0,122,255,.12)
     dark-mode text #0A84FF · dark-mode light text #64B5FF.
   FluentUI v5 render DOM riêng (fluent-*) nên KHÔNG style class .fluent-*;
   phải dùng element selector + ::part(control) như file gốc. Không sửa CSS
   gốc của FluentUI. Token dùng chung vẫn nằm ở ios-theme.css.
   Thứ tự link ở cả 2 host: bundle.scp.css → ios-theme.css →
   fluent-cupertino.css (file này) → UCAR.Shared.styles.css (isolation).

   Mapping control (tahoe → UCAR):
     .lg-card / .lg-toolbar / .lg-dialog-* / .lg-field / .lg-row-actions /
     .lg-actions / .lg-pager / .lg-error  →  giữ nguyên tên (không đụng
     .ios-* tồn tại).
     .uc-round-btn / .uc-pill-btn / .uc-confirm-btn / .uc-save-btn /
     .uc-dialog / .uc-voip-dialog / .uc-chat-dialog / .uc-auth-dialog  →
     class chính thức của UCAR cho nút/khung dialog (đổi từ rz-*/cupertino-rz-*
     đời Radzen sang tiền tố uc-*, dùng chung Web + MAUI).
   Sáng/tối: theo html[data-theme] (attr chuẩn FluentUI v5), fallback
   prefers-color-scheme khi không có attr.
   ========================================================================== */

:root {
    --uc-accent: #007AFF;
    --uc-accent-hover: #0A84FF;
    --uc-accent-active: #0066D6;
    --uc-accent-tint: rgba(0, 122, 255, 0.12);
    --uc-accent-dark: #0A84FF;
    --uc-radius: 18px;
    --uc-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --uc-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --uc-a: .55;          /* alpha mặt kính */
    --uc-blur: 28px;      /* blur mặt kính */
    /* Fluent tokens (xuyên shadow-DOM): bo + accent đồng bộ Cupertino */
    --control-corner-radius: 10px;
    --layer-corner-radius: 16px;
    --accent-fill-rest: #007AFF;
    --accent-fill-hover: #0A84FF;
    --accent-fill-active: #0066D6;
    color-scheme: light dark;
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

html, body {
    font-family: var(--uc-font);
    -webkit-font-smoothing: antialiased;
}

/* ---- Wallpaper "aurora" — cố định sau cửa sổ. Giá trị GIỮ NGUYÊN từ
       tahoe.css (solution MES) = bảng màu aurora của macOS 27 Liquid Glass.
       Nền sáng + panel kính làm nền, đúng cách MES dựng trang. ---- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1100px 600px at 12% -8%, rgba(64, 120, 255, .55), transparent 60%),
        radial-gradient(900px 620px at 88% 6%, rgba(190, 110, 255, .5), transparent 60%),
        radial-gradient(1000px 800px at 85% 95%, rgba(45, 200, 190, .45), transparent 62%),
        radial-gradient(800px 700px at 8% 90%, rgba(255, 150, 200, .4), transparent 60%),
        linear-gradient(180deg, #dfeaff 0%, #eef3ff 45%, #f6f2ff 100%);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) body::before {
        background:
            radial-gradient(1100px 600px at 12% -8%, rgba(40, 90, 220, .5), transparent 60%),
            radial-gradient(900px 620px at 88% 6%, rgba(140, 70, 220, .45), transparent 60%),
            radial-gradient(1000px 800px at 85% 95%, rgba(20, 150, 150, .4), transparent 62%),
            radial-gradient(800px 700px at 8% 90%, rgba(200, 80, 140, .32), transparent 60%),
            linear-gradient(180deg, #0b1026 0%, #101736 55%, #191225 100%);
    }
}
html[data-theme="dark"] body::before {
    background:
        radial-gradient(1100px 600px at 12% -8%, rgba(40, 90, 220, .5), transparent 60%),
        radial-gradient(900px 620px at 88% 6%, rgba(140, 70, 220, .45), transparent 60%),
        radial-gradient(1000px 800px at 85% 95%, rgba(20, 150, 150, .4), transparent 62%),
        radial-gradient(800px 700px at 8% 90%, rgba(200, 80, 140, .32), transparent 60%),
        linear-gradient(180deg, #0b1026 0%, #101736 55%, #191225 100%);
}

/* ---- FluentButton Cupertino (xuất shadow-DOM bằng CSS variables + host) ---- */
fluent-button {
    --control-corner-radius: 10px;
    --layer-corner-radius: 10px;
    font-family: var(--uc-font);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
fluent-button::part(control) {
    border-radius: var(--control-corner-radius);
    padding: 6px 16px;
    min-height: 36px;
    transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}
/* Primary = accent tím UCAR (chữ trắng cả 2 mode — AGENTS.md §2) */
fluent-button[appearance="primary"]::part(control) {
    background: var(--accent-fill-rest);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 122, 255, .25);
}
fluent-button[appearance="primary"]:hover::part(control) {
    background: var(--accent-fill-hover);
    box-shadow: 0 4px 14px rgba(0, 122, 255, .35);
}
fluent-button[appearance="primary"]:active::part(control) {
    background: var(--accent-fill-active);
    transform: scale(0.985);
}
fluent-button[appearance="primary"]:focus-visible::part(control) {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}
/* Outline = viền kính trong suốt */
fluent-button[appearance="outline"]::part(control) {
    background: transparent;
    border: 1px solid var(--colorTransparentStroke);
    color: inherit;
    backdrop-filter: blur(var(--uc-blur)) saturate(1.6);
}
fluent-button[appearance="outline"]:hover::part(control) {
    background: rgba(120,120,128,.12);
    border-color: rgba(120,120,128,.5);
}
fluent-button[appearance="outline"]:active::part(control) {
    background: rgba(120,120,128,.18);
}
fluent-button[appearance="outline"]:focus-visible::part(control) {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}
fluent-button[disabled]::part(control) { opacity: .5; cursor: not-allowed; }
fluent-button[appearance="primary"][disabled]::part(control) { box-shadow: none; }

/* Subtle/Transparent appearance fallback */
fluent-button[appearance="subtle"]::part(control),
fluent-button[appearance="transparent"]::part(control) {
    background: transparent;
    border: none;
}
fluent-button[appearance="subtle"]:hover::part(control),
fluent-button[appearance="transparent"]:hover::part(control) {
    background: var(--uc-accent-tint);
}

/* ---- Class Cupertino chuẩn của UCAR cho nút ---- */
/* Nút tròn icon-only (gọi/chat/VoIP): .uc-round-btn (+ .uc-round-lg) */
fluent-button.uc-round-btn::part(control) {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
fluent-button.uc-round-btn.uc-round-lg::part(control) {
    width: 56px;
    height: 56px;
    min-height: 56px;
}
/* Nút pill (lưu giá, cài đặt PWA, đăng xuất) */
fluent-button.uc-pill-btn::part(control),
fluent-button.uc-save-btn::part(control) {
    border-radius: 999px;
    font-weight: 700;
    padding-left: 16px;
    padding-right: 16px;
}
/* Nút hành động chính full-width (Đặt xe / Thanh toán / Hủy) */
fluent-button.uc-confirm-btn::part(control) {
    width: 100%;
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 16px;
    font-weight: 700;
}
fluent-button.uc-cancel-btn::part(control) { color: #ff3b30; }

/* ---- Thẻ kính (FluentCard + helper .lg-card) ---- */
.lg-card,
.booking-card,
.act-card {
    border-radius: 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(var(--uc-blur)) saturate(1.6);
    backdrop-filter: blur(var(--uc-blur)) saturate(1.6);
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 8px 28px rgba(30, 90, 200, .1), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.lg-card + .lg-card { margin-top: 10px; }
html[data-theme="dark"] .lg-card,
html[data-theme="dark"] .booking-card,
html[data-theme="dark"] .act-card {
    background: rgba(30, 30, 34, 0.85);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .lg-card,
    html:not([data-theme="light"]) .booking-card,
    html:not([data-theme="light"]) .act-card {
        background: rgba(30, 30, 34, 0.85);
        border-color: rgba(255, 255, 255, .5);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
    }
}
fluent-card.booking-card::part(control),
fluent-card.act-card::part(control) {
    border-radius: 16px;
    padding: 14px 16px;
}

/* ---- FluentDataGrid kiểu danh sách Cupertino (trang /admin) ---- */
fluent-data-grid {
    --control-corner-radius: 10px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(var(--uc-blur)) saturate(1.6);
    backdrop-filter: blur(var(--uc-blur)) saturate(1.6);
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 8px 28px rgba(30, 90, 200, .1);
}
html[data-theme="dark"] fluent-data-grid {
    background: rgba(30, 30, 34, 0.85);
    border-color: rgba(255, 255, 255, .5);
}
fluent-data-grid::part(row):hover {
    background: rgba(0, 122, 255, .07);
}
/* Cột số / cột hành động */
th.lg-num-col, td.lg-num-col {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
th.lg-actions-col, td.lg-actions-col { text-align: right; white-space: nowrap; }
/* Hàng nút hành động trong grid — KHÔNG đặt width/height/padding lên
   .lg-row-btn: FluentUI v5 render <button> trong shadow DOM nên bị cắt. */
.lg-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.lg-row-actions .lg-row-btn { white-space: nowrap; }
/* Pager admin */
.lg-pager { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; font-size: 13.5px; }
.lg-summary { display: flex; justify-content: flex-end; padding: 8px 4px 0; font-size: 13px; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }

/* ---- Nút hành động icon-only (Components) ---- */
.lg-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(120, 120, 128, .08);
    border: 1px solid rgba(120, 120, 128, .12);
}
.lg-actions .lg-act {
    border-color: transparent;
    background: transparent;
    color: rgba(60, 60, 67, .65);
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    transition: background .12s ease, color .12s ease;
}
.lg-actions .lg-act:hover {
    background: rgba(120, 120, 128, .18);
    color: rgba(60, 60, 67, .95);
}
.lg-actions .lg-act-danger:hover {
    background: rgba(255, 59, 48, .15);
    color: #ff3b30;
}
.lg-actions .lg-act svg { display: block; margin: 0 auto; }
html[data-theme="dark"] .lg-actions {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
}
html[data-theme="dark"] .lg-actions .lg-act { color: rgba(255, 255, 255, .6); }
html[data-theme="dark"] .lg-actions .lg-act:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
html[data-theme="dark"] .lg-actions .lg-act-danger:hover {
    background: rgba(255, 59, 48, .25);
    color: #ff6961;
}

/* ---- Bảng thuần kiểu danh sách Cupertino ---- */
.lg-content table.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(var(--uc-blur)) saturate(1.6);
    backdrop-filter: blur(var(--uc-blur)) saturate(1.6);
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 8px 28px rgba(30, 90, 200, .1);
}
html[data-theme="dark"] .lg-content table.table {
    background: rgba(30, 30, 34, 0.85);
    border-color: rgba(255, 255, 255, .5);
}
.lg-content table.table th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(120, 120, 128, .3);
}
.lg-content table.table td { padding: 9px 12px; border-bottom: 1px solid rgba(120, 120, 128, .2); vertical-align: top; }
.lg-content table.table tr:last-child td { border-bottom: none; }
.lg-content table.table tbody tr:hover { background: rgba(0, 122, 255, .07); }

/* ---- FluentDialog kiểu Cupertino (chat / VoIP / auth / permission) ---- */
/* Selector fluent-dialog[fuib] copy từ chính CSS của library (bundle.scp.css) */
body fluent-dialog[fuib]::part(dialog) {
    width: 620px;
    max-width: min(620px, calc(100vw - 48px));
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    backdrop-filter: blur(28px) saturate(1.6);
    box-shadow: 0 24px 70px rgba(30, 90, 200, .25), inset 0 1px 0 rgba(255,255,255,.6);
    padding: 0;
    color: #1d1d1f;
    font-family: var(--uc-font);
}
html[data-theme="dark"] body fluent-dialog[fuib]::part(dialog) {
    background: rgba(36,36,40,.88);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    color: #f5f5f7;
}
body fluent-dialog-body[fuib] > div[slot=action] {
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(120,120,128,.25);
}
/* Rộng tối đa 480px, co theo màn nhỏ (class="uc-dialog") */
body fluent-dialog[fuib].uc-dialog::part(dialog),
body fluent-dialog[fuib] .uc-dialog::part(dialog) {
    width: min(480px, calc(100vw - 32px));
    max-width: min(480px, calc(100vw - 32px));
}
body fluent-dialog[fuib].uc-voip-dialog::part(dialog) {
    background: #000;
    color: #fff;
    border-color: rgba(255,255,255,.14);
}
/* Dialog chat: khung cao, danh sách bubble bên trong tự cuộn */
body fluent-dialog[fuib].uc-chat-dialog::part(dialog) {
    width: min(560px, calc(100vw - 32px));
    max-width: min(560px, calc(100vw - 32px));
}
/* Dialog auth (login trong booking flow): hẹp kiểu sheet */
body fluent-dialog[fuib].uc-auth-dialog::part(dialog) {
    width: min(420px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
}
/* Section trong dialog */
.lg-dialog-head h4 { font-size: 17px; letter-spacing: -0.01em; margin: 2px 2px 12px; }
.lg-dialog-body { display: flex; flex-direction: column; gap: 10px; min-width: min(560px, 80vw); }
.lg-dialog-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.lg-pdlg { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 4px; }
.lg-pdlg-sec { display: flex; flex-direction: column; gap: 8px; }
.lg-pdlg-sec > h5 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .55; margin: 0; }
.lg-pdlg-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.lg-pdlg-row > * { flex: 1 1 150px; }
@media (max-width: 600px) { .lg-pdlg-row > * { flex-basis: 100%; } }

/* ---- Input FluentUI: bo Cupertino + focus tím ---- */
fluent-text-field,
fluent-text-input,
fluent-number-field,
fluent-select,
fluent-date-picker,
fluent-search,
fluent-text-area {
    --control-corner-radius: 12px;
    font-family: var(--uc-font);
    font-size: 15px;
}
fluent-text-field::part(control),
fluent-text-input::part(control),
fluent-number-field::part(control),
fluent-select::part(control),
fluent-date-picker::part(control),
fluent-search::part(control),
fluent-text-area::part(control) {
    border-radius: 12px;
}
fluent-text-field:focus-within::part(control),
fluent-text-input:focus-within::part(control),
fluent-number-field:focus-within::part(control),
fluent-select:focus-within::part(control),
fluent-date-picker:focus-within::part(control),
fluent-search:focus-within::part(control),
fluent-text-area:focus-within::part(control) {
    border-color: var(--uc-accent);
    box-shadow: 0 0 0 3px var(--uc-accent-tint);
}
/* Label bọc input */
.lg-field, .ios-field { display: inline-flex; flex-direction: column; gap: 4px; font-size: 13px; }
.lg-field > span, .lg-field > fluent-label,
.ios-field > span, .ios-field > fluent-label { font-weight: 600; opacity: .75; }
.lg-field fluent-text-input, .lg-field fluent-text-field { min-width: 180px; }
/* Form controls thuần: bo + accent tím */
select, input[type="text"], input[type="checkbox"] { accent-color: var(--uc-accent); }
.lg-error { color: #b3261e; background: rgba(255, 59, 48, .12); border: 1px solid rgba(255, 59, 48, .4); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .75rem; }

/* ---- FluentSwitch xanh iOS (online/offline tài xế) ---- */
fluent-switch {
    --accent-fill-rest: #34c759;
    --accent-fill-hover: #2db54e;
    --accent-fill-active: #269748;
    font-family: var(--uc-font);
}

/* ---- FluentBadge pill (trạng thái trip, render-mode, đếm TabBar) ---- */
fluent-badge {
    font-weight: 600;
    font-family: var(--uc-font);
}
fluent-badge[appearance="filled"]::part(control),
fluent-badge[appearance="Filled"]::part(control) {
    background: var(--uc-accent);
    color: #fff;
    border-radius: 999px;
}
fluent-badge[appearance="tint"]::part(control),
fluent-badge[appearance="Tint"]::part(control) {
    background: var(--uc-accent-tint);
    color: var(--uc-accent-active);
    border-radius: 999px;
}
html[data-theme="dark"] fluent-badge[appearance="tint"]::part(control),
html[data-theme="dark"] fluent-badge[appearance="Tint"]::part(control) {
    color: var(--uc-accent-dark);
}

/* ---- Toast / MessageBar kính mờ ---- */
fluent-toast::part(control) {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 12px 32px rgba(30, 90, 200, .18);
    font-family: var(--uc-font);
}
html[data-theme="dark"] fluent-toast::part(control) {
    background: rgba(36, 36, 40, .88);
    border-color: rgba(255, 255, 255, .14);
}

/* ---- Code/log kiểu SF Mono ---- */
.lg-content pre {
    font-family: var(--uc-mono);
    font-size: 12.5px;
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(120, 120, 128, .14);
    border: 1px solid rgba(120, 120, 128, .22);
    overflow: auto;
    white-space: pre-wrap;
}
.lg-content h3 { font-size: 22px; letter-spacing: -0.02em; margin: 6px 0 8px; }
.lg-content h4 { font-size: 16px; margin: 18px 0 10px; }

/* ---- App menu / popover kính mờ (port từ tahoe.css MES) ----
   Dùng cho CultureSelector: nút hiện ngôn ngữ đang chọn + popover danh sách.
   FluentUI v5 render <button> trong shadow DOM nên row phải style ::part(control). */
.appmenu { position: relative; display: inline-flex; }
.appmenu-overlay { position: fixed; inset: 0; z-index: 998; background: transparent; }
.appmenu-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 999;
    min-width: 230px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    backdrop-filter: blur(28px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 16px 40px rgba(30, 90, 200, .2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
html[data-theme="dark"] .appmenu-pop {
    background: rgba(44, 44, 48, .88);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.appmenu-row { width: 100%; }
.appmenu-pop .appmenu-row::part(control) {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 6px 10px;
}
.appmenu-row-in {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-size: 13.5px;
    text-align: left;
}
.appmenu-item { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; }
.appmenu-pop.settings-pop { left: auto; right: 0; min-width: 240px; padding: 12px 14px; }
.appmenu-home {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(120, 120, 128, .18);
}
.settings-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .55;
    margin-bottom: 8px;
}

/* ---- Scrollbar + selection + focus ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120, 120, 128, .45); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 128, .65); }
::selection { background: var(--uc-accent-tint); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--uc-accent-tint); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}