:root, :root[data-theme="light"] {
    --radius: 22px; --text-muted: #526074; --primary: #a95305; --primary-contrast: #fff; --success: #116b4d; --danger: #b52e3b;
    --glass: rgba(255,255,255,.78); --glass-nav: rgba(255,255,255,.6);
    --glass-edge: rgba(255,255,255,.6); --glass-shadow: 0 12px 36px rgba(26,34,48,.09);
    --spring: cubic-bezier(.34,1.56,.64,1);
}
:root[data-theme="dark"] {
    --text-muted: #b5bfce; --primary: #f59e0b; --primary-contrast: #17120a;
    --glass: rgba(30,34,42,.83); --glass-nav: rgba(30,32,38,.55);
    --glass-edge: rgba(255,255,255,.14); --glass-shadow: 0 12px 36px rgba(0,0,0,.22);
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: glass-out .16s ease both; }
::view-transition-new(root) { animation: glass-enter .18s ease both; }
body { isolation: isolate; }
body::before {
    content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at 12% 10%,#f59e0b20,transparent 52%),radial-gradient(ellipse at 90% 70%,#56a5c514,transparent 55%);
}
.app-main { animation: glass-fade .18s ease; }
.header-sentinel { display: block; height: 1px; margin-bottom: -1px; pointer-events: none; }
.navigation-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 300; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .16s ease-out; pointer-events: none; }
.card, .stat-tile, .trade-card, .app-sidebar, .mobile-topbar, .modal-panel, .toast, .auth-experience {
    background: var(--glass); border-color: var(--glass-edge); box-shadow: var(--glass-shadow),inset 0 1px 0 var(--glass-edge);
    -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
}
.stat-tile, .trade-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-sidebar { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-right-color: var(--border); }
.card, .stat-tile, .trade-card { border-radius: 22px; }
.card, .stat-tile, .list-item, .trade-card, .page-header, .flex > *, .card-header > * { min-width: 0; }
.card, .stat-tile, .trade-card, .page-header, .notification-row, .profile-name { overflow-wrap: anywhere; }
.stat-value, .profile-highlight { font-variant-numeric: tabular-nums; }
.comparison .flex { flex-wrap: wrap; }
.comparison .flex > small { flex-shrink: 0; max-width: 100%; }
.glass-number { max-width: 100%; min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.glass-number[role="button"] { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.card, .stat-tile, .trade-card, .table-scroll { container-type: inline-size; }
@container (max-width: 200px) { .stat-value, .profile-highlight, .glass-number { font-size: clamp(14px,10cqi,22px); } }
.button, .nav-item, .theme-picker button, summary { min-height: 44px; }
.button, .theme-picker button, .icon-button { min-width: 44px; }
.button, .stat-tile, .trade-card { transition: transform .3s var(--spring),opacity .2s ease; }
.button:active, .stat-tile:active, .trade-card:active { transform: scale(.97); }
.icon-button { width: 44px; flex-shrink: 0; }
.input, .select, .textarea { min-height: 48px; min-width: 0; max-width: 100%; }
input[type="file"] { overflow: hidden; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.tabs { position: relative; flex-wrap: nowrap; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.tabs > a, .tabs > button { flex-shrink: 0; min-height: 48px; }
.tab-indicator { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 99px; background: var(--primary); pointer-events: none; transform-origin: left; }
.tabs.has-indicator .active { border-bottom-color: transparent; }
.tabs.has-indicator > a, .tabs.has-indicator > button { position: relative; z-index: 1; }
.table-scroll { max-width: 100%; overscroll-behavior-x: contain; }
.modal { padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
.modal-panel { position: relative; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); overscroll-behavior: contain; }
.modal:not([hidden]) .modal-panel { animation: glass-sheet .18s ease-out both; }
.sheet-grabber { display: block; width: 64px; min-height: 28px; margin: -8px auto 10px; padding: 10px; border: 0; background: transparent; touch-action: none; }
.sheet-grabber::after { content: ""; display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--text-muted); opacity: .6; }
.modal-panel > .card-header { touch-action: pan-x; overscroll-behavior: contain; }
.toast { color: var(--text); border-radius: 20px; animation: glass-enter .18s ease-out both; }
.skeleton { position: relative; overflow: hidden; animation: none; background: var(--surface-2); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg,transparent,rgba(160,170,185,.25),transparent); transform: translateX(-100%); animation: glass-shimmer 1.4s ease infinite; }
.skeleton-card { min-height: 150px; }
.glass-ready .glass-reveal { opacity: 0; transform: translateY(12px); }
.glass-ready .glass-reveal.is-visible { opacity: 1; transform: none; transition: opacity .18s ease var(--reveal-delay,0ms),transform .18s ease-out var(--reveal-delay,0ms); }
.glass-ready .glass-reveal.is-visible:is(.stat-tile,.trade-card,.podium-card,.achievement-card):active { transform: scale(.97); transition-delay: 0ms; }
.glass-progress { position: relative; display: block; height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.glass-progress > progress { position: absolute; inset: 0; opacity: 0; margin: 0; }
.glass-progress-fill { display: block; height: 100%; width: 100%; background: var(--primary); transform-origin: left; transform: scaleX(0); border-radius: inherit; }
.glass-progress:has(.average-bar) { opacity: .5; }
.biometric-account { display: grid; justify-items: center; gap: 8px; margin-bottom: 24px; }
.biometric-account .button { width: 100%; white-space: normal; text-align: center; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card, .stat-tile, .trade-card, .app-sidebar, .mobile-topbar, body .bottom-tabs, .modal-panel, .toast, .auth-experience { background: var(--surface); }
}
@media(max-width:899px) {
    a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
    .list-body > a { max-width: 100%; }
    .mobile-topbar { position: sticky; top: 0; height: calc(72px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left)); border-bottom-color: var(--glass-edge); }
    .mobile-topbar .brand { min-width: 0; max-width: calc(100% - 60px); transition: transform .3s var(--spring); transform-origin: left center; }
    .mobile-topbar.is-scrolled .mobile-brand-copy strong { transform: scale(.9); transform-origin: left center; }
    .mobile-brand-copy { min-width: 0; display: grid; }
    .mobile-brand-copy strong { font-size: 13px; letter-spacing: 1px; }
    .mobile-brand-copy small { font-size: 11px; font-weight: 500; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; transition: opacity .2s,transform .3s var(--spring); }
    .mobile-topbar.is-scrolled .mobile-brand-copy small { transform: translateY(-2px); opacity: .75; }
    .app-main { padding: 24px max(16px,env(safe-area-inset-right)) calc(116px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
    .bottom-tabs {
        display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); inset: auto max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
        padding: 8px; border: 0; border-radius: 999px; background: linear-gradient(180deg,rgba(255,255,255,.13),transparent 60%),var(--glass-nav);
        -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
        box-shadow: var(--glass-shadow),inset 0 0 0 .5px rgba(255,255,255,.25); isolation: isolate;
    }
    .bottom-tabs > a, .bottom-tabs > button { position: relative; z-index: 1; display: grid; gap: 5px; min-width: 0; min-height: 52px; padding: 4px 0; font-size: 10px; }
    .bottom-tabs > a i, .bottom-tabs > button i { display: grid; place-items: center; height: 24px; }
    .nav-glider { position: absolute; top: 9px; left: 8px; width: calc((100% - 16px)/5); height: 32px; z-index: 0; border-radius: 999px; background: color-mix(in srgb,var(--primary) 16%,transparent); box-shadow: inset 0 1px 0 var(--glass-edge); pointer-events: none; transition: transform .45s var(--spring); }
    .bottom-tabs .active { color: var(--primary); }
    .own-rank { top: calc(84px + env(safe-area-inset-top)); }
    .bottom-sheet { align-items: end; padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }
    .bottom-sheet .modal-panel { width: min(560px,100%); max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); padding: 18px 20px 24px; border: 1px solid var(--glass-edge); border-radius: 28px; }
    .modal .nav-item { display: flex; }
    .sheet-grabber { min-width: 64px; min-height: 44px; margin-top: -14px; margin-bottom: 0; }
    .page-header h1 { font-size: clamp(24px,6.4vw,30px); }
    .page-header > div, .page-header .flex { min-width: 0; max-width: 100%; }
    .page-header .flex > div { min-width: 0; }
    .card-header { align-items: center; }
    .stat-value { font-size: clamp(18px,4.7vw,23px); }
    .input, .select, .textarea { font-size: 16px; }
    label:has(input[type="checkbox"]), label:has(input[type="radio"]) { min-height: 44px; padding-block: 10px; }
    .auth-header { padding-top: max(20px,env(safe-area-inset-top)); padding-left: max(20px,env(safe-area-inset-left)); padding-right: max(20px,env(safe-area-inset-right)); }
    .auth-header .brand { min-width: 0; }
    .auth-main { width: 100%; padding: 0 max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
    .auth-form-area { padding: 28px 22px; }
    .auth-check a { display: inline-flex; padding-inline: 8px; }
    .auth-legal a { display: inline-flex; }
    .toast-container { bottom: calc(100px + env(safe-area-inset-bottom)); }
    .profile-skin img { max-width: 100%; }
}
@keyframes glass-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes glass-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes glass-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes glass-sheet { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
@keyframes glass-drift { to { transform: translate3d(3%,2%,0) scale(1.04); } }
@keyframes glass-shimmer { to { transform: translateX(100%); } }
.native-tabbar .bottom-tabs { display: none !important; }
.native-tabbar .app-main { padding-bottom: calc(env(safe-area-inset-bottom) + 72px); }
.native-tabbar .bottom-sheet { padding-bottom: calc(env(safe-area-inset-bottom) + 72px); }
.native-tabbar .bottom-sheet .modal-panel { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 96px); }
.app-performance *, .app-performance *::before, .app-performance *::after {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important;
    animation-duration: .16s !important; animation-iteration-count: 1 !important;
    transition-duration: .16s !important; transition-delay: 0s !important;
}
.app-performance body::before, .app-performance .auth-brand-panel::before, .app-performance .skeleton::after { content: none; }
.app-performance :is(.card,.stat-tile,.trade-card,.app-sidebar,.mobile-topbar,.modal-panel,.toast,.auth-experience,.bottom-tabs) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.app-performance .auth-shell, .app-performance .auth-brand-panel { background-image: none; }
@media(prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
    .glass-ready .glass-reveal { opacity: 1; transform: none; }
    .button:active, .stat-tile:active, .trade-card:active, .glass-ready .glass-reveal.is-visible:active { transform: none !important; }
}