/*
 * 小白超人统一界面系统
 * Porcelain (#f6f6f4) / Ink (#171719) / Graphite (#71717a)
 * 圆角比例：8 / 12 / 16 / 20 / 24px
 */
:root {
    color-scheme: light dark;
    --ui-canvas: #f6f6f4;
    --ui-surface: #fbfbfa;
    --ui-surface-raised: #f0f0ee;
    --ui-ink: #171719;
    --ui-muted: #68686f;
    --ui-faint: #929299;
    --ui-line: rgba(23, 23, 25, .09);
    --ui-line-strong: rgba(23, 23, 25, .15);
    --ui-solid: #1c1c1f;
    --ui-on-solid: #f8f8f6;
    --ui-acrylic: color-mix(in srgb, var(--ui-surface) 68%, transparent);
    --ui-acrylic-soft: color-mix(in srgb, var(--ui-surface) 46%, transparent);
    --ui-header-acrylic: rgba(251, 251, 250, .64);
    --ui-overlay: rgba(12, 12, 14, .52);
    --ui-focus: rgba(23, 23, 25, .24);
    --ui-shadow-sm: 0 1px 2px rgba(18, 18, 20, .04), 0 8px 24px rgba(18, 18, 20, .05);
    --ui-shadow-md: 0 18px 52px rgba(18, 18, 20, .11);
    --ui-shadow-lg: 0 32px 90px rgba(18, 18, 20, .16);
    --ui-r-sm: 8px;
    --ui-r-md: 12px;
    --ui-r-lg: 16px;
    --ui-r-xl: 20px;
    --ui-r-2xl: 24px;
    --ui-ease: cubic-bezier(.16, 1, .3, 1);
    --ui-fast: 160ms;
    --ui-normal: 280ms;
}

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

/* 禁用 WebView 点按高亮（蓝色选中态） */
* {
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ui-canvas: #101011;
        --ui-surface: #18181a;
        --ui-surface-raised: #222225;
        --ui-ink: #f1f1ef;
        --ui-muted: #aaaab0;
        --ui-faint: #77777f;
        --ui-line: rgba(241, 241, 239, .09);
        --ui-line-strong: rgba(241, 241, 239, .16);
        --ui-solid: #eeeeec;
        --ui-on-solid: #151517;
        --ui-acrylic: color-mix(in srgb, var(--ui-surface) 68%, transparent);
        --ui-acrylic-soft: color-mix(in srgb, var(--ui-surface) 46%, transparent);
        --ui-header-acrylic: rgba(238, 238, 236, .07);
        --ui-overlay: rgba(3, 3, 4, .68);
        --ui-focus: rgba(241, 241, 239, .28);
        --ui-shadow-sm: 0 1px 2px rgba(2, 2, 3, .22), 0 10px 28px rgba(2, 2, 3, .18);
        --ui-shadow-md: 0 20px 56px rgba(2, 2, 3, .32);
        --ui-shadow-lg: 0 36px 100px rgba(2, 2, 3, .46);
    }
}

html {
    background: var(--ui-canvas);
}

body {
    color: var(--ui-ink);
    background-color: var(--ui-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    animation: ui-page-in 560ms var(--ui-ease) both;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: .022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.ui-page-leaving {
    animation: ui-page-out 180ms ease-in both;
    pointer-events: none;
}

h1, h2, h3, .header-title, .panel-title {
    letter-spacing: -.025em;
    text-wrap: balance;
}

p, .tip, .hint, .auth-subtitle, .lost-modal-subtitle {
    text-wrap: pretty;
}

button, input, select, textarea, a {
    -webkit-tap-highlight-color: transparent;
}

button, [role="button"], a {
    transition: color var(--ui-fast) ease, background-color var(--ui-fast) ease,
        border-color var(--ui-fast) ease, box-shadow var(--ui-fast) ease,
        opacity var(--ui-fast) ease, transform var(--ui-fast) var(--ui-ease);
}

button:not(:disabled):active, [role="button"]:active {
    transform: scale(.975);
}

button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--ui-ink) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px var(--ui-focus) !important;
}

input, select, textarea {
    min-height: 44px;
    border-color: var(--ui-line-strong) !important;
    border-radius: var(--ui-r-md) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
}

input::placeholder, textarea::placeholder {
    color: var(--ui-faint);
}

button:disabled, input:disabled, select:disabled {
    opacity: .46;
    cursor: not-allowed;
}

/* Map + analytics share the same semantic variable names. */
body {
    --bg-primary: var(--ui-canvas);
    --bg-secondary: var(--ui-surface-raised);
    --bg-card: var(--ui-surface);
    --text-primary: var(--ui-ink);
    --text-secondary: var(--ui-muted);
    --text-tertiary: var(--ui-faint);
    --border-color: var(--ui-line);
    --accent-color: var(--ui-solid);
    --accent-contrast: var(--ui-on-solid);
    --accent-hover: color-mix(in srgb, var(--ui-solid) 82%, var(--ui-canvas));
    --accent-soft: color-mix(in srgb, var(--ui-solid) 9%, transparent);
    --overlay: var(--ui-overlay);
    --shadow-sm: var(--ui-shadow-sm);
    --shadow-md: var(--ui-shadow-md);
    --shadow-lg: var(--ui-shadow-lg);
    --shadow-up: 0 -18px 52px rgba(18, 18, 20, .09);
    --radius-sm: var(--ui-r-sm);
    --radius-md: var(--ui-r-md);
    --radius-lg: var(--ui-r-lg);
    --radius-xl: var(--ui-r-xl);
    --transition: var(--ui-normal) var(--ui-ease);
    --ease-spring: var(--ui-ease);
}

/* App chrome */
.header {
    border-color: var(--ui-line) !important;
    background: color-mix(in srgb, var(--ui-canvas) 86%, transparent) !important;
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.header-title, h1 {
    font-weight: 720 !important;
}

.header-sub, .stat-label, .stat-sub, .tip, .hint {
    color: var(--ui-muted) !important;
}

.stats-card, .stat-card, .panel, table, .container,
.bike-card, .auth-content, .bell-content, .qr-content, .return-content,
.token-expired-content, .return-confirm-content, .unlock-confirm-content,
.lost-modal-content, .login-gate-card, .modal {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.stats-card, .panel, table { border-radius: var(--ui-r-lg) !important; }
.stat-card { border-radius: var(--ui-r-md) !important; }
.bike-card, .auth-content, .bell-content, .qr-content, .return-content,
.token-expired-content, .return-confirm-content, .unlock-confirm-content,
.lost-modal-content, .login-gate-card, .modal {
    border-radius: var(--ui-r-xl) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

.stats-analysis-btn, .header-btn, .header-back, .auth-close, .qr-close,
.bike-card-close, .bike-card-find-btn {
    border: 1px solid var(--ui-line) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
    box-shadow: none !important;
}

.stats-analysis-btn:hover, .header-btn:hover, .header-back:hover,
.auth-close:hover, .qr-close:hover, .bike-card-close:hover,
.bike-card-find-btn:hover {
    border-color: var(--ui-line-strong) !important;
    background: var(--ui-surface-raised) !important;
}

.auth-submit:not(.danger):not(.warning):not(.success),
.return-confirm-btn.confirm, .unlock-confirm-btn.confirm,
.lost-modal-btn.confirm, .btn-primary, .btn-cancel,
.progress-fill:not(.done), #confirm-btn {
    border-color: transparent !important;
    background: var(--ui-solid) !important;
    color: var(--ui-on-solid) !important;
    box-shadow: none !important;
}

.auth-submit:not(.danger):not(.warning):not(.success):hover,
.return-confirm-btn.confirm:hover, .unlock-confirm-btn.confirm:hover,
.lost-modal-btn.confirm:hover, .btn-primary:hover, .btn-cancel:hover,
#confirm-btn:hover {
    background: color-mix(in srgb, var(--ui-solid) 84%, var(--ui-canvas)) !important;
}

.auth-submit.ghost, .return-confirm-btn.cancel, .unlock-confirm-btn.cancel,
.lost-modal-btn.cancel, .btn-gray, .btn-close, .btn-secondary {
    border: 1px solid var(--ui-line) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-ink) !important;
}

.tab-nav, .tabs, .filter-bar, .info, .log {
    border: 1px solid var(--ui-line) !important;
    background: var(--ui-surface-raised) !important;
    box-shadow: none !important;
}

.tab-nav, .tabs { border-radius: var(--ui-r-md) !important; padding: 4px !important; }
.tab-btn, .tab { border-radius: var(--ui-r-sm) !important; color: var(--ui-muted) !important; }
.tab-btn.active, .tab.active {
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
    box-shadow: 0 1px 4px rgba(18, 18, 20, .08) !important;
}

.panel-title::before { background: var(--ui-ink) !important; }
.stat-value { color: var(--ui-ink) !important; font-variant-numeric: tabular-nums; }

/* Data tables */
table { overflow: clip; }
th {
    background: var(--ui-surface-raised) !important;
    color: var(--ui-muted) !important;
    letter-spacing: .02em;
}
th, td { border-color: var(--ui-line) !important; }
tbody tr { transition: background-color var(--ui-fast) ease; }
tbody tr:hover { background: color-mix(in srgb, var(--ui-ink) 3.5%, transparent) !important; }
td .mono, td:nth-child(n+2) { font-variant-numeric: tabular-nums; }

/* Overlays use visibility rather than display so removing .show animates out. */
.auth-modal, .bell-modal, .qr-modal, .return-modal, .token-expired-modal,
.return-confirm-modal, .unlock-confirm-modal, .lost-modal, .login-gate,
.modal-overlay {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--ui-overlay) !important;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.auth-modal.show, .bell-modal.show, .qr-modal.show, .return-modal.show,
.token-expired-modal.show, .return-confirm-modal.show,
.unlock-confirm-modal.show, .lost-modal.show, .login-gate.show,
.modal-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms ease, visibility 0s;
}

.auth-modal > *, .bell-modal > *, .qr-modal > *, .return-modal > *,
.token-expired-modal > *, .return-confirm-modal > *,
.unlock-confirm-modal > *, .lost-modal > *, .login-gate > *,
.modal-overlay > * {
    opacity: 0;
    transform: translateY(14px) scale(.985);
    transition: opacity 180ms ease, transform 300ms var(--ui-ease);
}

.auth-modal.show > *, .bell-modal.show > *, .qr-modal.show > *,
.return-modal.show > *, .token-expired-modal.show > *,
.return-confirm-modal.show > *, .unlock-confirm-modal.show > *,
.lost-modal.show > *, .login-gate.show > *, .modal-overlay.show > * {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.card-overlay {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.card-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.toast {
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-md) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

/* Admin */
body:has(.tabs) {
    --bg: var(--ui-canvas);
    --card: var(--ui-surface);
    --text: var(--ui-ink);
    --sec: var(--ui-muted);
    --border: var(--ui-line);
    --accent: var(--ui-solid);
    padding: 28px clamp(16px, 3vw, 40px) !important;
}

body:has(.tabs) > .header,
body:has(.tabs) > .stats,
body:has(.tabs) > .tabs,
body:has(.tabs) > .tab-content {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

body:has(.tabs) > .header {
    position: relative;
    padding: 0 0 20px !important;
    background: transparent !important;
    backdrop-filter: none;
}

.stats { gap: 10px !important; }
.stat-card .num { letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.filter-bar { border-radius: var(--ui-r-md) !important; padding: 10px !important; }

/* Ring progress page */
body:has(#progress-fill) {
    background: var(--ui-canvas) !important;
    color: var(--ui-ink) !important;
}

body:has(#progress-fill) .container {
    max-width: 460px;
    padding: 30px !important;
    border-radius: var(--ui-r-2xl) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

body:has(#progress-fill) .header {
    background: transparent !important;
    backdrop-filter: none;
    border: 0 !important;
}

body:has(#progress-fill) .stat {
    background: var(--ui-surface-raised) !important;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md) !important;
}
body:has(#progress-fill) .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body:has(#progress-fill) .stat-value:not(.success):not(.failed) { color: var(--ui-ink) !important; }
body:has(#progress-fill) .stat-label,
body:has(#progress-fill) .header p,
body:has(#progress-fill) .log { color: var(--ui-muted) !important; }
body:has(#progress-fill) .progress-bar {
    height: 12px !important;
    border: 1px solid var(--ui-line);
    border-radius: 999px !important;
    background: var(--ui-surface-raised) !important;
}
body:has(#progress-fill) .progress-fill {
    min-width: 0;
    border-radius: 999px !important;
    color: var(--ui-on-solid) !important;
    transition: width 400ms var(--ui-ease) !important;
}
body:has(#progress-fill) .log { border-radius: var(--ui-r-md) !important; }

/* Email return page */
body:has(#return-form), body:has(> #card) {
    background: var(--ui-canvas) !important;
}

body:has(> #card) > .card {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-2xl) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    backdrop-filter: none !important;
}

body:has(> #card) .brand { color: var(--ui-muted) !important; letter-spacing: .08em; }
body:has(> #card) .icon {
    background: var(--ui-surface-raised) !important;
    color: var(--ui-ink) !important;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg) !important;
}
body:has(> #card) h1 { color: var(--ui-ink); }
body:has(> #card) p, body:has(> #card) .label { color: var(--ui-muted) !important; }
body:has(> #card) .info { border-radius: var(--ui-r-lg) !important; }
body:has(> #card) .row { border-color: var(--ui-line) !important; }

/* Standalone authentication page */
.auth-page {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--ui-canvas) !important;
}

.login-box {
    width: min(100%, 380px);
    padding: 32px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-2xl);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-lg);
    animation: ui-rise-in 520ms var(--ui-ease) both;
}

.login-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);
    background: var(--ui-surface-raised);
    color: var(--ui-ink);
    font-size: 17px;
    font-weight: 760;
}

.login-box h1 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 24px;
    line-height: 1.15;
}

.login-subtitle {
    margin: 8px 0 24px;
    color: var(--ui-muted);
    font-size: 14px;
}

.login-box label {
    display: block;
    margin: 16px 0 7px;
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 600;
}

.login-box input {
    width: 100%;
    padding: 11px 13px;
    font-size: 15px;
}

.login-box button {
    width: 100%;
    min-height: 46px;
    margin-top: 24px;
    border: 0;
    border-radius: var(--ui-r-md);
    background: var(--ui-solid);
    color: var(--ui-on-solid);
    font-size: 15px;
    font-weight: 680;
    cursor: pointer;
}

.login-box button:hover {
    background: color-mix(in srgb, var(--ui-solid) 84%, var(--ui-canvas));
}

.form-error {
    margin: 18px 0 2px;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--danger, #d93b35) 28%, transparent);
    border-radius: var(--ui-r-md);
    background: color-mix(in srgb, var(--danger, #d93b35) 10%, transparent);
    color: var(--danger, #d93b35);
    font-size: 13px;
    line-height: 1.5;
}

.panel-title::before { display: none !important; }

/* Acrylic map chrome: one material recipe across browser and native WebView. */
html:not(.in-native-shell) .header {
    background: var(--ui-header-acrylic) !important;
    border-color: var(--ui-line-strong) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
    backdrop-filter: blur(24px) saturate(1.4) !important;
}

.legend,
html.in-native-shell .bike-card {
    background: var(--ui-acrylic) !important;
    border-color: var(--ui-line-strong) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
    backdrop-filter: blur(20px) saturate(1.35) !important;
}

/* 原生壳：native-tools 卡壳保留，材质换成顶部栏同款透明亚克力 */
html.in-native-shell #native-tools {
    background: var(--ui-header-acrylic) !important;
    border-color: var(--ui-line-strong) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
    backdrop-filter: blur(24px) saturate(1.4) !important;
}

/* Keep the legend pinned to the viewport, with breathing room below the web header. */
.legend {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
}

/* Analysis card uses the same translucent acrylic recipe in browser and native shell. */
.stats-card {
    background: var(--ui-acrylic) !important;
    border-color: var(--ui-line-strong) !important;
    box-shadow: var(--ui-shadow-md) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
    backdrop-filter: blur(20px) saturate(1.35) !important;
}

/* 图例、数据分析卡、版本号、找车按钮、底部扫码栏、车牌输入框与顶部栏同一亚克力材质（浏览器与原生壳统一） */
.legend,
.stats-card,
.version-badge,
.locate-fab,
.scan-bar,
.scan-input {
    background: var(--ui-header-acrylic) !important;
    border-color: var(--ui-line-strong) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
    backdrop-filter: blur(24px) saturate(1.4) !important;
}

/* 车牌输入框 placeholder 用图例文字同款灰（--ui-muted），深浅色自适应 */
.scan-input::placeholder {
    color: var(--ui-muted) !important;
}

html.in-native-shell #native-tools #auth-btn.logged-in {
    background: var(--ui-acrylic-soft) !important;
    background-image: none !important;
    color: var(--ui-ink) !important;
    border: 1px solid var(--ui-line-strong) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-ink) 7%, transparent),
        var(--ui-shadow-sm) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
    backdrop-filter: blur(18px) saturate(1.3) !important;
}

html.in-native-shell .scan-input {
    background: var(--ui-acrylic-soft) !important;
    border-color: var(--ui-line-strong) !important;
}

/* Keep the map as a full-viewport underlay so translucent chrome always reveals map tiles. */
#map-container {
    position: relative;
    z-index: 0;
    background: transparent !important;
}

#baidu_map {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
}

.header,
.order-banner,
.auth-expiry-banner,
#share-banners,
.rental-bar,
.scan-bar {
    position: relative;
}

#share-banners {
    z-index: 150;
}

@media (max-width: 480px) {
    .legend { top: 10px !important; right: 10px !important; }
}

/* Semantic acrylic status banners keep the map visible without losing meaning. */
.rental-bar,
.order-banner,
.auth-expiry-banner,
.share-banner {
    color: #fbfbfa !important;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--ui-shadow-sm);
    -webkit-backdrop-filter: blur(20px) saturate(1.45) !important;
    backdrop-filter: blur(20px) saturate(1.45) !important;
}

.rental-bar,
.order-banner {
    background: rgba(198, 80, 0, .56) !important;
}

/* 登录态到期提醒：临近用琥珀色，不足 1 天转红 */
.auth-expiry-banner {
    background: rgba(186, 104, 0, .62) !important;
}

.auth-expiry-banner.urgent {
    background: rgba(218, 32, 55, .62) !important;
}

.order-banner.warning {
    background: rgba(218, 32, 55, .60) !important;
}

.order-banner.riding {
    background: rgba(0, 82, 168, .56) !important;
}

.share-banner {
    background: rgba(72, 59, 164, .56) !important;
}

.share-banner.rider {
    background: rgba(0, 115, 85, .56) !important;
}

.rental-bar-btn,
.order-banner-btn,
.auth-expiry-banner-btn,
.share-banner-btn {
    color: #fbfbfa !important;
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .34) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    backdrop-filter: blur(12px) saturate(1.25);
}

.rental-bar-btn:hover,
.order-banner-btn:hover,
.auth-expiry-banner-btn:hover,
.share-banner-btn:hover {
    background: rgba(255, 255, 255, .22) !important;
}

/* Layered reveal is limited to primary content groups. */
.stats-grid > *, .stats > *, .panel, body:has(#progress-fill) .container,
body:has(> #card) > .card {
    animation: ui-rise-in 520ms var(--ui-ease) both;
}
.stats-grid > *:nth-child(2), .stats > *:nth-child(2) { animation-delay: 45ms; }
.stats-grid > *:nth-child(3), .stats > *:nth-child(3) { animation-delay: 90ms; }
.stats-grid > *:nth-child(4), .stats > *:nth-child(4) { animation-delay: 135ms; }
.stats-grid > *:nth-child(n+5), .stats > *:nth-child(n+5) { animation-delay: 180ms; }

@keyframes ui-page-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-page-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-4px); }
}

@keyframes ui-rise-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    body:has(.tabs) { padding: 18px 12px !important; }
    body:has(.tabs) h1 { font-size: 22px !important; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .stats-card, .panel { border-radius: var(--ui-r-md) !important; }
    body:has(#progress-fill) .container,
    body:has(> #card) > .card { padding: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    body, body.ui-page-leaving { transform: none !important; opacity: 1 !important; }
}