:root {
    color-scheme: dark;
    --bg-base: #050608;
    --bg-deep: #020305;
    --blob-blue: #0a4d9c;
    --blob-violet: #240a59;
    --blob-cyan: #08484d;
    --text-primary: rgba(255, 255, 255, 0.94);
    --text-secondary: rgba(255, 255, 255, 0.64);
    --text-muted: rgba(255, 255, 255, 0.42);
    --glass-bg: rgba(18, 21, 27, 0.46);
    --glass-bg-strong: rgba(13, 16, 22, 0.76);
    --glass-bg-hover: rgba(32, 37, 48, 0.58);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-highlight: rgba(255, 255, 255, 0.2);
    --accent-blue: #0a84ff;
    --accent-blue-hover: #2995ff;
    --accent-green: #30d158;
    --accent-red: #ff453a;
    --sidebar-width: 260px;
    --header-height: 76px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-data: "SF Pro Rounded", "Segoe UI Variable", "PingFang SC", var(--font-sans);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { min-width: 0; background: var(--bg-base); }
body { min-height: 100vh; overflow-x: hidden; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: #68adff; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(90, 174, 255, 0.95); outline-offset: 3px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

.ambient-bg { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% -20%, rgba(46, 91, 138, 0.14), transparent 42%), linear-gradient(145deg, var(--bg-base), var(--bg-deep)); }
.ambient-bg::after { position: absolute; content: ""; inset: 0; opacity: 0.18; background-image: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 72%); }
.blob { position: absolute; border-radius: 50%; filter: blur(88px); opacity: 0.54; will-change: transform; animation: ambient-float 20s ease-in-out infinite alternate; }
.blob-1 { top: -18vw; left: -14vw; width: 58vw; height: 58vw; background: radial-gradient(circle, var(--blob-blue), transparent 68%); }
.blob-2 { right: -18vw; bottom: -26vw; width: 68vw; height: 68vw; animation-delay: -7s; background: radial-gradient(circle, var(--blob-violet), transparent 68%); }
.blob-3 { top: 28%; left: 38%; width: 44vw; height: 44vw; animation-delay: -13s; background: radial-gradient(circle, var(--blob-cyan), transparent 68%); }
@keyframes ambient-float { from { transform: translate3d(-2%, -2%, 0) scale(1); } to { transform: translate3d(6%, 5%, 0) scale(1.09); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.app-container { position: relative; z-index: 1; display: flex; min-height: 100vh; }
.sidebar { position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; display: flex; width: var(--sidebar-width); flex-direction: column; border-right: 1px solid rgba(255, 255, 255, 0.055); background: linear-gradient(90deg, rgba(8, 10, 14, 0.78), rgba(8, 10, 14, 0.38)); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
.sidebar-header { display: flex; min-height: var(--header-height); align-items: center; gap: 12px; padding: 18px 28px 16px; font-size: 1.18rem; font-weight: 650; letter-spacing: -0.025em; }
.brand-icon, .auth-logo { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0879f0 5%, #36c7ff 100%); box-shadow: 0 10px 28px rgba(10, 132, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.5); }
.brand-icon { width: 30px; height: 30px; border-radius: 9px; }
.brand-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 16px 24px; }
.nav-title { padding: 0 12px; margin-bottom: 8px; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.nav-title-spaced { margin-top: 26px; }
.nav-item { display: flex; width: 100%; align-items: center; gap: 12px; margin-bottom: 4px; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; font-size: 0.93rem; text-align: left; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.nav-item:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.045); }
.nav-item.active { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.075); border-top-color: rgba(255, 255, 255, 0.17); background: linear-gradient(135deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.055)); box-shadow: 0 5px 18px rgba(0, 0, 0, 0.16), inset 0 1px rgba(255, 255, 255, 0.035); font-weight: 550; }
.nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.88; }
.sidebar-scrim { position: fixed; z-index: 95; inset: 0; display: none; border: 0; background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.main-content { display: flex; width: calc(100% - var(--sidebar-width)); min-width: 0; flex: 1; flex-direction: column; margin-left: var(--sidebar-width); }
.top-header { position: sticky; z-index: 90; top: 0; display: flex; min-height: var(--header-height); align-items: center; justify-content: space-between; gap: 18px; padding: 0 40px; background: linear-gradient(180deg, rgba(5, 6, 8, 0.88), rgba(5, 6, 8, 0.22) 76%, transparent); backdrop-filter: blur(15px) saturate(140%); -webkit-backdrop-filter: blur(15px) saturate(140%); }
.top-header-title, .user-profile { display: flex; align-items: center; }
.page-title { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 650; letter-spacing: -0.035em; }
.mobile-menu-toggle { display: none; margin-left: -8px; padding: 8px; border: 0; color: var(--text-primary); background: transparent; cursor: pointer; }
.user-profile { min-width: 0; gap: 12px; color: var(--text-secondary); font-size: 0.88rem; }
.avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 255, 255, 0.17); border-top-color: rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(255, 255, 255, 0.09); color: var(--text-primary); font-weight: 650; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.17); }
.page-container { display: none; width: 100%; padding: 22px 40px 64px; }
.page-container.active { display: block; animation: fade-up 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }

.status-banner, .card, .chart-card, .auth-card { border: 1px solid var(--glass-border); border-top-color: var(--glass-highlight); background: var(--glass-bg); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.025); backdrop-filter: blur(24px) saturate(175%); -webkit-backdrop-filter: blur(24px) saturate(175%); }
.status-banner { display: none; margin: 0 40px 2px; padding: 11px 15px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.86rem; }
.status-banner.is-visible { display: block; }
.status-banner.is-error { border-color: rgba(255, 69, 58, 0.28); color: #ff8d86; background: rgba(87, 19, 18, 0.34); }
.grid-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl); }
.card, .chart-card { border-radius: var(--radius-md); transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.card:hover, .chart-card:hover { border-color: rgba(255, 255, 255, 0.14); border-top-color: rgba(255, 255, 255, 0.28); background: var(--glass-bg-hover); }
.card { position: relative; overflow: hidden; min-height: 154px; padding: 23px 24px; }
.card::after { position: absolute; top: -70px; right: -55px; width: 130px; height: 130px; border-radius: 50%; content: ""; background: rgba(10, 132, 255, 0.14); filter: blur(30px); pointer-events: none; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: 14px; color: var(--text-secondary); }
.card-header svg { width: 18px; height: 18px; }
.card-title { color: var(--text-secondary); font-size: 0.88rem; font-weight: 520; letter-spacing: 0.005em; }
h3.card-title { color: var(--text-primary); font-size: 1rem; font-weight: 570; }
.card-value { position: relative; z-index: 1; color: var(--text-primary); font-family: var(--font-data); font-size: clamp(1.9rem, 3vw, 2.3rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.055em; }
.card-trend { margin-top: 6px; color: var(--text-muted); font-size: 0.82rem; }
.trend-up { color: var(--accent-green); }
.trend-down { color: var(--accent-red); }
.trend-neutral { color: var(--text-muted); }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-lg); }
.chart-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chart-grid.region-primary-grid { grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); }
.chart-card { min-width: 0; padding: 24px; }
.chart-card.full-width { grid-column: 1 / -1; }
.chart-card-scroll { max-height: 560px; overflow-y: auto; }
.chart-card-narrow { max-width: 820px; }
.chart-card-separated { margin-bottom: var(--space-xl); }
.chart-container { width: 100%; height: 310px; min-width: 0; margin-top: var(--space-md); }
.cols-3 .chart-container { height: 260px; }
.chart-container.map { height: 490px; }
.empty-state { display: grid; min-height: 140px; place-items: center; padding: var(--space-lg); color: var(--text-muted); text-align: center; }

.filter-tabs { display: flex; width: max-content; max-width: 100%; gap: 4px; overflow-x: auto; margin-bottom: var(--space-lg); padding: 4px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.16); }
.filter-tab { padding: 7px 16px; border: 0; border-radius: 9px; color: var(--text-secondary); background: transparent; font-size: 0.84rem; white-space: nowrap; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.filter-tab:hover { color: var(--text-primary); }
.filter-tab.active { color: var(--text-primary); background: rgba(255, 255, 255, 0.13); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.08); }
.filter-tab:disabled { opacity: 0.55; cursor: wait; }
.mod-version-tabs { margin-top: var(--space-md); margin-bottom: 0; }
.table-container { width: 100%; overflow-x: auto; border-radius: var(--radius-sm); }
.table-container-spaced { margin-top: var(--space-md); }
.data-table { width: 100%; border-collapse: collapse; color: var(--text-primary); font-size: 0.87rem; text-align: left; }
.data-table th, .data-table td { padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.data-table th { color: var(--text-secondary); background: rgba(0, 0, 0, 0.2); font-size: 0.8rem; font-weight: 540; white-space: nowrap; }
.data-table td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.data-table tbody tr:hover td { background: rgba(255, 255, 255, 0.032); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.numeric-column, .numeric-value-cell { text-align: right; }
.numeric-value-cell { font-weight: 600; }
.empty-table-cell { color: var(--text-muted); text-align: center; }
.wide-table { margin-top: var(--space-sm); }
.wide-table .data-table { min-width: 1080px; }
.device-id-cell { min-width: 112px; color: #8fc7ff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.multiline-cell { min-width: 128px; white-space: pre-line; }
.audit-detail-cell { min-width: 180px; white-space: pre-line; }

.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.section-heading h2, .settings-title { margin-bottom: 5px; font-size: 1.17rem; font-weight: 600; letter-spacing: -0.018em; }
.section-heading p, .settings-copy { color: var(--text-muted); font-size: 0.85rem; }
.settings-copy { margin-bottom: var(--space-lg); }
.filter-form { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)) auto; gap: 10px; margin-bottom: var(--space-lg); }
.form-group { display: flex; max-width: 620px; flex-direction: column; margin-bottom: var(--space-lg); }
.form-label { margin-bottom: var(--space-sm); color: var(--text-primary); font-size: 0.87rem; font-weight: 540; }
.form-label-compact { margin-bottom: 0; }
.form-group-switch { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.045); border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.form-input, .form-textarea, .table-control { border: 1px solid var(--glass-border); color: var(--text-primary); background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.14); transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.form-input, .form-textarea { width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 0.92rem; }
.form-input:is(select), .table-control:is(select) { color-scheme: dark; background-color: #0b0f15; }
.form-input:is(select) option, .form-input:is(select) optgroup, .table-control:is(select) option, .table-control:is(select) optgroup { color: var(--text-primary); background-color: #11151c; }
.form-input:is(select) option:hover, .form-input:is(select) option:focus, .table-control:is(select) option:hover, .table-control:is(select) option:focus { color: #fff; background-color: #153453; }
.form-input:is(select) option:checked, .table-control:is(select) option:checked { color: #fff; background-color: #174f86; }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.form-input:focus, .form-textarea:focus, .table-control:focus { border-color: rgba(10, 132, 255, 0.86); outline: none; background: rgba(0, 0, 0, 0.42); box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.13), inset 0 2px 5px rgba(0, 0, 0, 0.12); }
.form-input:read-only { color: var(--text-secondary); background: rgba(255, 255, 255, 0.035); }
.form-textarea { min-height: 130px; resize: vertical; }
.form-hint { margin-top: 6px; color: var(--text-muted); font-size: 0.78rem; }
.form-actions-separated { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--glass-border); }
.form-actions-separated #text-updated-at { margin-right: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, 0.11); border-top-color: rgba(255, 255, 255, 0.22); border-radius: var(--radius-sm); color: var(--text-primary); background: rgba(255, 255, 255, 0.09); font-size: 0.9rem; font-weight: 540; cursor: pointer; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.14); }
.btn:active { transform: translateY(1px); }
.btn-primary { border-color: rgba(10, 132, 255, 0.8); border-top-color: rgba(255, 255, 255, 0.35); background: var(--accent-blue); box-shadow: 0 8px 22px rgba(10, 132, 255, 0.23), inset 0 1px rgba(255, 255, 255, 0.24); }
.btn-primary:hover { background: var(--accent-blue-hover); box-shadow: 0 10px 28px rgba(10, 132, 255, 0.35); }
.btn-quiet { color: var(--text-secondary); }
.btn-quiet:hover { color: var(--text-primary); }
.btn-danger { border-color: rgba(255, 69, 58, 0.34); color: #ff8d86; background: rgba(255, 69, 58, 0.11); }
.btn-danger:hover { background: rgba(255, 69, 58, 0.18); }
.btn-compact { min-height: 34px; padding: 6px 11px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { width: 0; height: 0; opacity: 0; }
.slider { position: absolute; inset: 0; border: 1px solid var(--glass-border); border-radius: 26px; background: rgba(255, 255, 255, 0.1); cursor: pointer; transition: 0.25s ease; }
.slider::before { position: absolute; bottom: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; content: ""; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.32); transition: 0.25s ease; }
input:checked + .slider { border-color: var(--accent-green); background: var(--accent-green); }
input:checked + .slider::before { transform: translateX(20px); }
.version-settings-title { margin-bottom: var(--space-lg); }
.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-md); color: var(--text-muted); font-size: 0.82rem; }
.inline-editor { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 10px; margin-bottom: var(--space-lg); padding: var(--space-md); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.18); }
.is-hidden { display: none !important; }
.notice-panel { margin-bottom: var(--space-lg); padding: var(--space-md); border: 1px solid var(--glass-border); border-left: 3px solid var(--accent-green); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.22); font-size: 0.84rem; }
.notice-panel p { margin-top: 8px; }
.notice-panel pre { overflow-x: auto; margin-top: 10px; padding: 11px; border-radius: 9px; color: var(--text-primary); background: rgba(0, 0, 0, 0.35); }
.break-all { overflow-wrap: anywhere; }
.table-control { max-width: 150px; padding: 7px 9px; border-radius: 8px; }
.table-action { padding: 4px 0; border: 0; color: #68adff; background: none; font-size: 0.8rem; cursor: pointer; }
.table-action:hover { color: #9ac8ff; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }

.auth-body { min-height: 100vh; background: var(--bg-base); }
.auth-shell { position: relative; z-index: 1; display: grid; min-height: 100vh; place-items: center; padding: var(--space-lg); }
.auth-card { width: min(100%, 420px); padding: 40px; border-radius: var(--radius-lg); text-align: center; animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.auth-logo { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 18px; }
.auth-logo svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-brand { margin-bottom: 22px; color: var(--text-secondary); font-size: 0.72rem; font-weight: 680; letter-spacing: 0.13em; text-transform: uppercase; }
.auth-card h1 { font-size: 1.55rem; font-weight: 640; letter-spacing: -0.035em; }
.auth-copy { margin: 8px 0 28px; color: var(--text-secondary); font-size: 0.87rem; }
.auth-card .form-group { max-width: none; text-align: left; }
.auth-submit { width: 100%; }
.auth-error { min-height: 24px; margin: -8px 0 10px; color: #ff8d86; font-size: 0.82rem; text-align: left; }
.auth-code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.14em; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: -4px 0 18px; color: var(--text-muted); font-size: 0.77rem; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; content: ""; background: var(--glass-border); }
.auth-link { display: block; margin-top: 18px; font-size: 0.83rem; }

@media (max-width: 1180px) {
    .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-grid.cols-3 > :last-child { grid-column: 1 / -1; }
    .filter-form { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

@media (max-width: 900px) {
    .chart-grid, .chart-grid.cols-3, .chart-grid.region-primary-grid, .settings-grid { grid-template-columns: minmax(0, 1fr); }
    .chart-grid.cols-3 > :last-child { grid-column: auto; }
    .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    :root { --sidebar-width: 0px; }
    .blob { filter: blur(58px); opacity: 0.38; animation-duration: 28s; }
    .blob-1 { width: 86vw; height: 86vw; }
    .blob-2 { width: 96vw; height: 96vw; }
    .blob-3 { width: 74vw; height: 74vw; left: 20%; }
    .sidebar { width: 272px; transform: translateX(-105%); background: rgba(8, 10, 14, 0.88); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 20px 0 50px rgba(0, 0, 0, 0.3); }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar.mobile-open + .sidebar-scrim { display: block; }
    .main-content { width: 100%; margin-left: 0; }
    .mobile-menu-toggle { display: inline-flex; }
    .top-header { min-height: 68px; padding: 0 16px; }
    .page-container { padding: 14px 16px 54px; }
    .status-banner { margin: 0 16px 2px; }
    .user-profile { gap: 8px; }
    .user-profile #current-user-name { display: none; }
    .avatar { width: 34px; height: 34px; }
    .grid-cards { gap: 14px; margin-bottom: 18px; }
    .chart-grid { gap: 16px; margin-bottom: 16px; }
    .card, .chart-card { backdrop-filter: blur(15px) saturate(150%); -webkit-backdrop-filter: blur(15px) saturate(150%); }
    .card { min-height: 136px; padding: 19px; }
    .chart-card { padding: 18px; }
    .chart-container { height: 280px; }
    .chart-container.map { height: 390px; }
    .cols-3 .chart-container { height: 250px; }
    .section-heading { flex-direction: column; }
    .filter-form, .inline-editor { grid-template-columns: minmax(0, 1fr); }
    .form-actions-separated { flex-wrap: wrap; justify-content: space-between; }
    .form-actions-separated #text-updated-at { width: 100%; }
    .auth-card { padding: 32px 22px; }
    .mod-version-tabs .filter-tab { padding-right: 10px; padding-left: 10px; }
}

@media (max-width: 480px) {
    .grid-cards { grid-template-columns: minmax(0, 1fr); }
    .card { min-height: 125px; }
    .filter-form { grid-template-columns: minmax(0, 1fr); }
    .form-group-switch { align-items: flex-start; }
    .pagination-bar { align-items: flex-start; flex-direction: column; }
    .auth-shell { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .blob { animation: none; will-change: auto; }
    .btn:hover, .card:hover, .chart-card:hover, .nav-item:hover { transform: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sidebar, .status-banner, .card, .chart-card, .auth-card { background: var(--glass-bg-strong); }
}