:root {
  --bg: #f4f4ef; --surface: #fff; --surface-muted: #f8f9f5; --ink: #202c2a; --muted: #64736e;
  --line: #dfe5dd; --line-strong: #c8d2c8; --accent: #246558; --accent-hover: #194e43; --accent-tint: #e7f1e9;
  --download: #267767; --upload: #946020; --danger: #b64032; --danger-tint: #fff0ec; --warning: #916122; --warning-tint: #fff5de;
  --nav-bg: #1e302b; --nav-ink: #d7e4db; --nav-muted: #94aaa0; --nav-active: #344d41;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 26px; --text-kpi: 29px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-sm: 5px; --radius: 9px; --radius-lg: 14px; --shadow: 0 12px 44px #122f2424;
  --sidebar-width: 218px; --page-inset: 32px; --content-max: 1580px; --control-height: 38px; --table-cell-padding: 14px;
  --header-height: 74px; --chart-height: 220px; --dialog-width: 520px; --dialog-wide: 860px;
}
* { box-sizing: border-box; }
html { color: var(--ink); background: var(--bg); font-family: var(--font); font-size: var(--text-base); line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
a { color: var(--accent); text-underline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--upload); outline-offset: 3px; }
button { color: inherit; }
h1,h2,h3,p { margin: 0; } h1 { font-size: var(--text-xl); font-weight: 660; } h2 { font-size: var(--text-md); font-weight: 650; } h3 { font-size: var(--text-base); font-weight: 650; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mono, .number { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); }
.muted { color: var(--muted); } .small { font-size: var(--text-sm); } .nowrap { white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.boot-state { min-height: 70vh; display: flex; gap: var(--space-3); align-items: center; justify-content: center; color: var(--muted); }
.spinner { width: 17px; height: 17px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn { min-height: var(--control-height); padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--surface-muted); border-color: var(--muted); } .btn.primary { color: white; border-color: var(--accent); background: var(--accent); } .btn.primary:hover { background: var(--accent-hover); }
.btn.danger { color: var(--danger); border-color: #e5beb6; } .btn.danger:hover { background: var(--danger-tint); }
.btn.ghost { background: transparent; border-color: transparent; } .btn.ghost:hover { background: var(--accent-tint); }
.btn.small-btn { min-height: 32px; padding: var(--space-1) var(--space-3); } .btn.icon-btn { width: var(--control-height); padding: var(--space-2); }
.btn.block { width: 100%; }
.shell { min-height: 100vh; }
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-width); background: var(--nav-bg); color: var(--nav-ink); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-8); }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 36px; height: 40px; color: #d8ecbb; }
.brand-mark .icon { width: 32px; height: 32px; stroke-width: 1.5; }
.brand strong { display: block; font-size: var(--text-md); font-weight: 650; }
.brand small { color: var(--nav-muted); display: block; font-size: var(--text-xs); margin-top: 2px; letter-spacing: .09em; }
.nav-caption { padding: 0 var(--space-3) var(--space-3); color: var(--nav-muted); font-size: var(--text-xs); letter-spacing: .1em; }
.nav-link { text-decoration: none; color: var(--nav-ink); padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-1); display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-base); }
.nav-link:hover { background: #ffffff0b; } .nav-link.active { background: var(--nav-active); color: #eef7de; }
.nav-link.active::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #c8dea9; margin-left: auto; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid #ffffff17; padding: var(--space-5) var(--space-3) var(--space-2); color: var(--nav-muted); font-size: var(--text-sm); }
.sidebar-bottom .server-name { color: var(--nav-ink); margin: var(--space-2) 0; overflow-wrap: anywhere; }
.server-label { display: flex; align-items: center; gap: var(--space-2); }
.server-dot,.live-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: #a7c87d; flex: 0 0 auto; }
.main-shell { margin-left: var(--sidebar-width); }
.topbar { height: var(--header-height); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-4); justify-content: space-between; padding: 0 var(--page-inset); background: var(--surface-muted); }
.breadcrumb { color: var(--muted); font-size: var(--text-sm); display: flex; gap: var(--space-3); align-items: center; } .breadcrumb strong { color: var(--ink); font-weight: 550; }
.topbar-right { display: flex; align-items: center; gap: var(--space-5); }
.sync-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.sync-label .live-dot { background: var(--accent); }.sync-label.stale { color: var(--warning); }.sync-label.stale .live-dot { background: var(--warning); }
.admin-label { color: var(--muted); font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); }
.menu-button { display: none; }
.page { max-width: var(--content-max); padding: var(--space-8) var(--page-inset) var(--space-10); margin: auto; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); margin-bottom: var(--space-6); }
.page-heading p { color: var(--muted); margin-top: var(--space-2); font-size: var(--text-sm); }
.heading-actions { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-1); flex-wrap: wrap; }
.eyebrow { color: var(--accent); font-size: var(--text-xs); letter-spacing: .13em; font-weight: 650; margin-bottom: var(--space-2); }
.notice { border: 1px solid var(--line); background: var(--surface-muted); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); color: var(--muted); font-size: var(--text-sm); display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
.notice.warning { border-color: #ead7b1; background: var(--warning-tint); color: var(--warning); }.notice.error { border-color: #e9c5bc; background: var(--danger-tint); color: var(--danger); }
.notice p { flex: 1; }.notice .icon { margin-top: 1px; }.notice .btn { margin-left: auto; }
.kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--space-6); overflow: hidden; }
.kpi { padding: var(--space-5) var(--space-6); position: relative; border-right: 1px solid var(--line); } .kpi:last-child { border: 0; }
.kpi-label { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.kpi-value { margin-top: var(--space-3); font-size: var(--text-kpi); line-height: 1.2; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-value small { font-size: var(--text-sm); font-weight: 400; color: var(--muted); margin-left: var(--space-1); }
.kpi-note { color: var(--muted); margin-top: var(--space-3); font-size: var(--text-xs); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.download { color: var(--download); }.upload { color: var(--upload); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.panel-header { padding: var(--space-5) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--line); }
.panel-header p { color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.panel-body { padding: var(--space-5) var(--space-6); }.panel + .panel { margin-top: var(--space-6); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); margin-bottom: var(--space-6); }.overview-grid .panel + .panel { margin-top: 0; }
.legend { display: flex; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.legend span { display: flex; align-items: center; gap: var(--space-2); }.legend i { width: 14px; height: 3px; display: inline-block; background: var(--download); }.legend i.up { background: var(--upload); }
.chart-wrap { padding: var(--space-4) var(--space-5) var(--space-3); }
.chart { display: block; width: 100%; height: var(--chart-height); overflow: visible; }.chart text { font-family: var(--font); font-size: 11px; fill: var(--muted); }.chart .grid { stroke: var(--line); stroke-dasharray: 3 5; }.chart .line-down { stroke: var(--download); stroke-width: 2.2; fill: none; }.chart .line-up { stroke: var(--upload); stroke-width: 1.8; fill: none; }.chart .area { fill: var(--accent-tint); opacity: .65; }
.chart-footer { border-top: 1px solid var(--line); padding: var(--space-3) var(--space-6); color: var(--muted); font-size: var(--text-xs); display: flex; justify-content: space-between; gap: var(--space-4); }
.resource { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }.resource:first-child { padding-top: 0; }.resource:last-child { border-bottom: 0; padding-bottom: 0; }
.resource-heading { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }.resource-heading span:last-child { color: var(--muted); }
.meter { height: 5px; border-radius: var(--radius-sm); background: var(--line); overflow: hidden; margin-top: var(--space-3); }.meter > span { display: block; height: 100%; width: var(--meter,0%); background: var(--accent); border-radius: inherit; }.meter.warning > span { background: var(--warning); }
.resource-sub { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-2); }
.meta-row { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); font-size: var(--text-sm); }.meta-row span:first-child { color: var(--muted); }.meta-row span:last-child { text-align: right; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); white-space: nowrap; }
.data-table th { background: var(--surface-muted); font-size: var(--text-xs); font-weight: 500; text-align: left; color: var(--muted); padding: var(--space-3) var(--table-cell-padding); border-bottom: 1px solid var(--line); }
.data-table td { padding: var(--table-cell-padding); border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }.data-table tbody tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover { background: var(--surface-muted); }
.data-table th:first-child,.data-table td:first-child { padding-left: var(--space-6); }.data-table th:last-child,.data-table td:last-child { padding-right: var(--space-6); }
.cell-name { font-weight: 600; font-size: var(--text-base); max-width: 230px; display: block; overflow: hidden; text-overflow: ellipsis; }.cell-sub { display: block; color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.cell-dual { display: flex; flex-direction: column; gap: var(--space-1); }.cell-dual span { display: flex; align-items: center; gap: var(--space-1); }.cell-dual .icon { width: 12px; height: 12px; }
.row-actions { display: flex; align-items: center; gap: var(--space-1); }.link-button { appearance: none; border: 0; padding: 0; background: transparent; color: var(--accent); text-align: left; cursor: pointer; }.link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px var(--space-2); background: var(--accent-tint); color: var(--accent); font-size: var(--text-xs); border-radius: var(--radius-sm); font-weight: 500; white-space: nowrap; }.badge::before { content: ''; height: 5px; width: 5px; border-radius: 50%; background: currentColor; }.badge.neutral { background: #eef0ec; color: var(--muted); }.badge.warning { background: var(--warning-tint); color: var(--warning); }.badge.danger { background: var(--danger-tint); color: var(--danger); }
.table-footer { border-top: 1px solid var(--line); padding: var(--space-3) var(--space-6); font-size: var(--text-xs); color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.toolbar .search { flex: 1 1 180px; max-width: 360px; }.toolbar .spacer { flex: 1; }.toolbar select { width: auto; max-width: 260px; }
.search { position: relative; }.search .icon { position: absolute; top: 50%; left: var(--space-3); transform: translateY(-50%); color: var(--muted); }.search input { padding-left: var(--space-10); }
.field { margin-bottom: var(--space-5); }.field label,.field-label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); }
input,select,textarea { width: 100%; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); min-height: var(--control-height); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
input::placeholder,textarea::placeholder { color: #89958e; }.field small,.field-help { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-2); }
textarea { min-height: 82px; resize: vertical; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.user-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }.user-chip { border: 1px solid var(--line); background: var(--surface); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); min-height: var(--control-height); max-width: 230px; }.user-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.user-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }.user-chip small { color: var(--muted); font-variant-numeric: tabular-nums; }.user-tools { margin-left: auto; display: flex; gap: var(--space-2); }
.empty { text-align: center; padding: var(--space-10) var(--space-6); color: var(--muted); }.empty .icon { width: 28px; height: 28px; margin-bottom: var(--space-3); }.empty h3 { color: var(--ink); margin-bottom: var(--space-2); }.empty p { font-size: var(--text-sm); max-width: 420px; margin: auto; }.empty .btn { margin-top: var(--space-5); }
.activity-list { list-style: none; padding: 0; margin: 0; }.activity-item { display: grid; grid-template-columns: 150px 75px minmax(0,1fr); align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); font-size: var(--text-sm); }.activity-item:last-child { border: 0; }.activity-item time { color: var(--muted); font-size: var(--text-xs); }.activity-item p { overflow-wrap: anywhere; }.activity-item .badge { justify-self: start; }
.settings-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-6); align-items: start; }.settings-grid .panel + .panel { margin-top: 0; }.definition-list { margin: 0; }.definition-list > div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }.definition-list > div:first-child { padding-top: 0; }.definition-list > div:last-child { border: 0; }.definition-list dt { color: var(--muted); }.definition-list dd { margin: 0; overflow-wrap: anywhere; }.fineprint { font-size: var(--text-xs); color: var(--muted); line-height: 1.8; }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, .9fr) minmax(480px, 1.1fr); }
.login-aside { background: var(--nav-bg); color: var(--nav-ink); padding: 8vh 8vw; display: flex; flex-direction: column; justify-content: space-between; }.login-aside .brand { padding: 0; }.login-aside h1 { font-size: 36px; line-height: 1.5; color: #edf3e8; font-weight: 500; margin: var(--space-8) 0 var(--space-5); }.login-aside p { color: var(--nav-muted); max-width: 300px; line-height: 1.9; }.login-aside .aside-footer { font-size: var(--text-xs); }
.login-main { display: flex; justify-content: center; align-items: center; padding: var(--space-10); }.login-form { width: 100%; max-width: 350px; }.login-form h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }.login-form > p { color: var(--muted); margin-bottom: var(--space-8); }.login-form .btn { margin-top: var(--space-2); min-height: 44px; }.login-form footer { font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-6); }.password-wrap { position: relative; }.password-wrap input { padding-right: 46px; min-height: 44px; }.password-wrap button { position: absolute; right: 4px; top: 3px; }
dialog { padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); width: calc(100% - 32px); max-width: var(--dialog-width); max-height: calc(100dvh - 48px); overflow: auto; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog.wide { max-width: var(--dialog-wide); } dialog::backdrop { background: #152d2570; }
.dialog-header { display: flex; align-items: flex-start; gap: var(--space-4); justify-content: space-between; padding: var(--space-6); border-bottom: 1px solid var(--line); }.dialog-header h2 { font-size: var(--text-lg); }.dialog-header p { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); }.dialog-header .btn { margin-top: -4px; }
.dialog-body { padding: var(--space-6); }.dialog-body .field:last-child { margin-bottom: 0; }.dialog-footer { padding: var(--space-4) var(--space-6); background: var(--surface-muted); border-top: 1px solid var(--line); display: flex; gap: var(--space-2); justify-content: flex-end; }.dialog-footer .left { margin-right: auto; }.dialog-footer .btn { min-height: 40px; }.dialog-message { margin-bottom: var(--space-5); color: var(--muted); overflow-wrap: anywhere; }.form-error { color: var(--danger); background: var(--danger-tint); padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size: var(--text-sm); }.form-error:empty { display: none; }
.access-url { font-family: var(--mono); font-size: var(--text-sm); padding: var(--space-3); background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-wrap: anywhere; user-select: all; }
.access-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-6); }.divider { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }.action-explanation { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: var(--space-5) 0; }.action-explanation p { color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-1); }.access-yaml { margin-top: var(--space-3); }.access-yaml summary { cursor: pointer; color: var(--accent); font-size: var(--text-sm); }.access-yaml pre { max-height: 240px; overflow: auto; font: var(--text-xs)/1.6 var(--mono); background: var(--surface-muted); padding: var(--space-4); border: 1px solid var(--line); }
.detail-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-4); padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--line); }.detail-stat span { color: var(--muted); font-size: var(--text-xs); }.detail-stat strong { display: block; font-size: var(--text-lg); font-weight: 600; margin-top: var(--space-1); font-variant-numeric: tabular-nums; }.detail-stats .small { margin-top: var(--space-1); color: var(--muted); }.detail-section { margin-top: var(--space-6); }.detail-section h3 { margin-bottom: var(--space-3); }.detail-section .data-table td:first-child,.detail-section .data-table th:first-child { padding-left: var(--space-3); }.detail-section .data-table td:last-child,.detail-section .data-table th:last-child { padding-right: var(--space-3); }.detail-section .data-table { border: 1px solid var(--line); }.truncate-host { max-width: 240px; overflow: hidden; text-overflow: ellipsis; display: block; }
.toasts { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 1000; display: grid; gap: var(--space-2); max-width: min(430px,calc(100vw - 32px)); }.toast { border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow); border-radius: var(--radius); padding: var(--space-3) var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); }.toast.error { color: var(--danger); border-color: #e9c5bc; }.toast .icon { color: var(--accent); }.toast.error .icon { color: var(--danger); }
.mobile-overlay { display: none; }.noscript { margin: var(--space-6); }.quota-cell { min-width: 140px; }.quota-cell .meter { margin-top: var(--space-2); height: 3px; }.traffic-summary { display: flex; gap: var(--space-8); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--line); }.traffic-summary span { color: var(--muted); font-size: var(--text-xs); }.traffic-summary strong { display: block; font-size: var(--text-lg); font-weight: 600; margin-top: var(--space-1); }
@media (min-width: 1500px) { :root { --page-inset: 40px; }.overview-grid { grid-template-columns: minmax(0,1fr) 330px; } }
@media (max-width: 1180px) { :root { --sidebar-width: 192px; --page-inset: 24px; --text-kpi: 24px; }.overview-grid { grid-template-columns: minmax(0,1fr) 260px; }.kpi { padding: var(--space-5); }.settings-grid { grid-template-columns: minmax(0,1fr); }.settings-grid .panel + .panel { margin-top: 0; }.topbar-right { gap: var(--space-3); } }
@media (max-width: 960px) { :root { --sidebar-width: 178px; --page-inset: 20px; }.brand { padding-left: var(--space-1); padding-right: var(--space-1); }.brand strong { font-size: var(--text-base); }.brand small { font-size: 10px; }.nav-link { font-size: var(--text-sm); gap: var(--space-2); }.kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.kpi:nth-child(2) { border-right: 0; }.kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.overview-grid { grid-template-columns: minmax(0,1fr); }.resource-panel .panel-body { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-5); }.resource-panel .resource { border: 0; padding: 0; }.resource-panel .meta-row { grid-column: 1/-1; padding: 0; }.resource-panel .meta-row + .meta-row { margin-top: calc(-1 * var(--space-3)); }.admin-label { display: none; }.login-aside { padding: 8vh 6vw; }.login-aside h1 { font-size: 30px; }.login { grid-template-columns: minmax(240px,.8fr) minmax(420px,1.2fr); }.activity-item { grid-template-columns: 130px 70px minmax(0,1fr); gap: var(--space-3); } }
@media (max-width: 720px) { :root { --page-inset: 16px; --header-height: 60px; --text-xl: 23px; --text-kpi: 25px; --chart-height: 200px; --control-height: 40px; }.main-shell { margin-left: 0; }.sidebar { transform: translateX(-100%); transition: transform .18s ease; width: 236px; padding-bottom: max(var(--space-6),env(safe-area-inset-bottom)); }.shell.nav-open .sidebar { transform: translateX(0); }.shell.nav-open .mobile-overlay { display: block; position: fixed; inset: 0; z-index: 15; background: #152d2570; border: 0; }.menu-button { display: flex; }.topbar { gap: var(--space-3); }.topbar .breadcrumb { margin-right: auto; gap: var(--space-2); }.breadcrumb .root-crumb { display: none; }.topbar-right { gap: var(--space-1); }.topbar-right .btn { padding: var(--space-2); }.sync-label { font-size: var(--text-xs); }.page { padding-top: var(--space-6); }.page-heading { flex-wrap: wrap; gap: var(--space-3); }.heading-actions { padding: 0; }.page-heading p { line-height: 1.65; }.kpi { padding: var(--space-4); }.kpi-note { font-size: 10px; }.panel-header { padding: var(--space-4); gap: var(--space-3); }.panel-body { padding: var(--space-4); }.chart-wrap { padding: var(--space-3); }.chart-footer { padding: var(--space-3) var(--space-4); font-size: 10px; }.resource-panel .panel-body { display: block; }.resource-panel .resource { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }.resource-panel .resource:first-child { padding-top: 0; }.resource-panel .meta-row { padding-top: var(--space-3); }.resource-panel .meta-row + .meta-row { margin-top: 0; }.toolbar { padding: var(--space-3) var(--space-4); gap: var(--space-2); }.toolbar select { max-width: 100%; }.toolbar .search { max-width: none; flex-basis: 100%; }.toolbar .spacer { display: none; }.table-footer { padding: var(--space-3) var(--space-4); align-items: flex-start; }.data-table th:first-child,.data-table td:first-child { padding-left: var(--space-4); }.data-table th:last-child,.data-table td:last-child { padding-right: var(--space-4); }.user-tools { margin-left: 0; }.activity-item { grid-template-columns: 1fr auto; padding: var(--space-4); gap: var(--space-2); }.activity-item p { grid-column: 1/-1; }.activity-item .badge { grid-column: 2; grid-row: 1; }.legend { gap: var(--space-3); font-size: 10px; }.dialog-header,.dialog-body { padding: var(--space-5); }.dialog-footer { padding: var(--space-4) var(--space-5); flex-wrap: wrap; }.detail-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }.field-row { grid-template-columns: 1fr; gap: 0; }.action-explanation { flex-wrap: wrap; }.login { display: block; }.login-aside { padding: var(--space-6); }.login-aside h1,.login-aside > p,.login-aside .aside-footer,.login-aside .login-copy { display: none; }.login-main { padding: var(--space-10) var(--space-6); min-height: calc(100vh - 100px); align-items: flex-start; }.login-form { margin-top: 6vh; }.traffic-summary { gap: var(--space-6); padding: var(--space-4); flex-wrap: wrap; }.definition-list > div { grid-template-columns: 110px minmax(0,1fr); }.toasts { right: var(--space-4); bottom: max(var(--space-4),env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }