/* Shared tokens: palette, readable type, spacing, and control dimensions. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink); background: var(--bg); font-synthesis: none;
  --bg: #f6f8f3; --paper: #fff; --ink: #26372d; --muted: #647365;
  --line: #e0e7db; --green: #355b43; --pale: #e9f0e2; --danger: #a33e35;
  --sidebar-bg: #eef2e8; --hover: #f2f6ed; --chart-bar: #9eb883;
  --warn-ink: #826222; --warn-bg: #faf3df; --danger-bg: #fbebe7;
  --mono: "SF Mono", Menlo, Consolas, monospace;
  --text-small: 13px; --text-body: 15px; --text-control: 14px;
  --text-section: 18px; --text-title: 32px; --text-metric: 36px;
  --space-xs: 6px; --space-sm: 12px; --space-md: 20px; --space-lg: 28px; --space-xl: 36px;
  --radius: 12px; --control-radius: 7px; --touch: 44px; --icon: 20px;
  --sidebar-width: 238px; --page-inset: 36px; --panel-inset: 24px; --content-width: 1680px;
  --menu-width: 208px; --shadow: 0 14px 36px #26372d16;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: var(--text-body); line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { outline-offset: 3px; }
:focus-visible { outline: 2px solid var(--green); }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
[hidden] { display: none !important; }
.icon { width: var(--icon); height: var(--icon); flex-shrink: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.skip-link { position: fixed; top: -80px; left: var(--sidebar-width); z-index: 100; padding: var(--space-sm); background: var(--paper); }
.skip-link:focus { top: var(--space-sm); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); padding: var(--space-lg) var(--space-md); border-right: 1px solid var(--line); background: var(--sidebar-bg); display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: var(--space-sm); font-size: 30px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.2; padding: var(--space-sm); }
.brand-dot { color: var(--green); }
.brand-mark { width: 28px; height: 30px; display: grid; grid-template: repeat(2, 1fr) / repeat(2, 1fr); gap: 3px; flex-shrink: 0; }
.brand-mark i { background: var(--green); border-radius: 2px; }
.brand-mark i:first-child { grid-row: 1 / 3; }
.brand-mark i:nth-child(2) { opacity: .4; }
.workspace { margin: var(--space-lg) 0; padding: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); background: var(--paper); border: 1px solid var(--line); border-radius: var(--control-radius); }
.workspace-symbol { display: grid; place-items: center; width: 32px; height: 32px; color: var(--green); background: var(--pale); border-radius: var(--control-radius); }
.workspace strong { display: block; font-size: var(--text-small); font-weight: 600; }
.workspace div > span { font-size: var(--text-small); color: var(--muted); }
.local-badge { display: none; }
.nav-label { font-size: var(--text-small); color: var(--muted); margin: 0 var(--space-sm) var(--space-sm); }
nav { display: flex; flex-direction: column; gap: var(--space-xs); }
nav a { min-height: 48px; display: flex; align-items: center; gap: var(--space-sm); border-radius: var(--control-radius); padding: var(--space-sm); color: var(--muted); font-size: var(--text-body); }
nav a:hover { background: var(--paper); color: var(--ink); }
nav a.active { background: #dfe9d4; color: var(--green); font-weight: 600; }
.nav-count { margin-left: auto; padding: 0 var(--space-xs); background: var(--paper); border-radius: 4px; font: var(--text-small) var(--mono); }
.sidebar-bottom { margin-top: auto; padding: var(--space-md) var(--space-sm) 0; }
.server-label { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-small); }
.server-label strong { font-weight: 500; }
.sidebar-bottom > .mono { display: block; margin-top: var(--space-xs); color: var(--muted); font-size: var(--text-small); overflow-wrap: anywhere; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex-shrink: 0; background: #73935c; border-radius: 50%; }
.status-dot.offline { background: var(--danger); }
.app-shell { margin-left: var(--sidebar-width); min-height: 100svh; display: flex; flex-direction: column; }
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--page-inset); border-bottom: 1px solid var(--line); background: var(--paper); }
.breadcrumb { display: flex; align-items: center; gap: var(--space-sm); color: var(--muted); font-size: var(--text-control); }
.breadcrumb strong { font-weight: 500; color: var(--ink); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-sm); }
.connection-state { display: none; }
.avatar { font-size: var(--text-control); color: var(--muted); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border: 0; background: transparent; border-radius: var(--control-radius); flex-shrink: 0; }
.icon-button:hover, .session-button:hover { background: var(--pale); color: var(--green); }
.session-button { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--touch); padding: 0 var(--space-sm); font-size: var(--text-control); color: var(--muted); border: 0; border-radius: var(--control-radius); background: transparent; }
.app-shell > main { padding: var(--page-inset); width: 100%; max-width: var(--content-width); min-width: 0; align-self: center; flex: 1; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.page-heading h1 { font-size: var(--text-title); line-height: 1.3; margin: 0; font-weight: 650; letter-spacing: -.8px; }
.page-heading p { color: var(--muted); margin: var(--space-xs) 0 0; font-size: var(--text-body); }
.heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); flex-shrink: 0; }
.eyebrow { color: var(--muted); font-size: var(--text-small); margin-bottom: var(--space-xs); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--touch); padding: var(--space-sm) 16px; border: 1px solid transparent; border-radius: var(--control-radius); font-size: var(--text-control); font-weight: 500; line-height: 1.3; white-space: nowrap; }
.primary { background: var(--green); color: #fff; border-color: var(--green); }
.primary:hover { background: #294b35; }
.secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.secondary:hover { background: var(--hover); }
.danger { background: var(--danger); color: #fff; }
.text-button, .row-detail { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--touch); padding: var(--space-xs) var(--space-sm); border: 0; border-radius: var(--control-radius); background: transparent; color: var(--green); font-size: var(--text-control); white-space: nowrap; }
.text-button:hover, .row-detail:hover { background: var(--pale); }
.text-button .icon { width: 16px; height: 16px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); margin-bottom: var(--space-lg); }
.metric { padding: var(--panel-inset); min-width: 0; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); color: var(--muted); font-size: var(--text-control); }
.metric-head .icon { opacity: .65; }
.metric-value { font: var(--text-metric) / 1.2 var(--mono); color: var(--ink); margin: var(--space-md) 0 var(--space-sm); letter-spacing: -1px; }
.metric-value small { font: var(--text-control) var(--mono); color: var(--muted); margin-left: var(--space-xs); letter-spacing: 0; }
.metric-foot { color: var(--muted); font-size: var(--text-small); }
.positive { color: var(--green); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.panel { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--panel-inset); }
.panel-heading h2 { font-size: var(--text-section); font-weight: 600; margin: 0; }
.panel-heading p { color: var(--muted); font-size: var(--text-small); margin: var(--space-xs) 0 0; }
.range-label { font-size: var(--text-small); color: var(--muted); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--line); border-radius: var(--control-radius); white-space: nowrap; }
.chart-wrap { position: relative; padding: 0 var(--panel-inset) var(--space-md); }
.chart-plot { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); }
.chart { height: 190px; width: 100%; overflow: visible; }
.chart-axis { display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font: var(--text-small) var(--mono); text-align: right; }
.chart .grid { stroke: var(--line); stroke-dasharray: 3 4; }
.chart .bar { fill: var(--chart-bar); }
.chart .bar-error { fill: #c78a73; }
.chart .baseline { stroke: var(--line); }
.chart-labels { display: flex; justify-content: space-between; margin: var(--space-sm) 0 0 40px; color: var(--muted); font: var(--text-small) var(--mono); }
.chart-empty { min-height: 242px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-xs); color: var(--muted); text-align: center; padding: var(--space-md); background: var(--hover); border-radius: var(--control-radius); }
.chart-empty strong { color: var(--ink); font-size: var(--text-body); font-weight: 500; }
.chart-empty span { font-size: var(--text-small); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legend i, .tiny-square { width: 8px; height: 8px; border-radius: 2px; background: var(--chart-bar); flex-shrink: 0; }
.legend i.error { background: #c78a73; }
.health-content { padding: 0 var(--panel-inset) var(--panel-inset); }
.health-count { margin-bottom: var(--space-md); color: var(--muted); font-size: var(--text-control); }
.health-count strong { font: var(--text-metric) var(--mono); color: var(--green); margin-right: var(--space-xs); }
.health-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.health-list > div { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-control); color: var(--muted); }
.health-list b { margin-left: auto; font: var(--text-body) var(--mono); color: var(--ink); }
.tiny-square.warn { background: #c5a563; }
.tiny-square.off { background: #b3bdab; }
.health-footer { border-top: 1px solid var(--line); padding: var(--space-sm) var(--panel-inset); font-size: var(--text-small); color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: var(--space-sm) var(--panel-inset); font-size: var(--text-small); font-weight: 500; color: var(--muted); background: var(--hover); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 16px var(--panel-inset); border-bottom: 1px solid var(--line); font-size: var(--text-control); color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfdf9; }
.account-name { display: flex; align-items: center; gap: var(--space-sm); min-width: 170px; }
.account-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--control-radius); background: var(--pale); color: var(--green); font: var(--text-control) var(--mono); flex-shrink: 0; }
.account-name strong { font-size: var(--text-body); font-weight: 550; overflow-wrap: anywhere; }
.subtle-text { font-size: var(--text-small); color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 4px 9px; border-radius: 5px; background: var(--pale); color: var(--green); font-size: var(--text-small); white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.badge.pending, .badge.cooling, .badge.retry { color: var(--warn-ink); background: var(--warn-bg); }
.badge.error, .badge.expired { color: var(--danger); background: var(--danger-bg); }
.badge.disabled, .badge.cancelled { color: var(--muted); background: #eff1ed; }
.row-actions { display: flex; align-items: center; gap: var(--space-xs); }
.menu { display: inline-block; }
.menu > summary { display: grid; place-items: center; width: var(--touch); height: var(--touch); border-radius: var(--control-radius); list-style: none; cursor: pointer; font-size: var(--text-section); color: var(--muted); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { color: var(--green); background: var(--pale); }
.menu-items { display: none; position: fixed; inset: auto; margin: 0; width: var(--menu-width); max-width: calc(100vw - 24px); padding: var(--space-xs); background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--control-radius); box-shadow: var(--shadow); z-index: 50; }
.menu-items:popover-open, .menu[open] .menu-items:not([popover]) { display: grid; }
.menu-items > button { min-height: var(--touch); text-align: left; padding: var(--space-xs) var(--space-sm); border: 0; border-radius: 4px; background: transparent; font-size: var(--text-control); }
.menu-items > button:hover { background: var(--pale); }
.menu-items .delete { color: var(--danger); }
.table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); border-top: 1px solid var(--line); padding: var(--space-sm) var(--panel-inset); color: var(--muted); font-size: var(--text-small); }
.table-footer > span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.table-footer .icon { width: 16px; height: 16px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.search-box { display: flex; align-items: center; position: relative; min-width: 0; width: min(380px, 100%); }
.search-box .icon { position: absolute; left: var(--space-sm); color: var(--muted); }
.search-box input { width: 100%; min-width: 0; padding-left: 40px; }
.filter-group { display: flex; align-items: center; gap: var(--space-sm); }
.app-shell input:not([type="checkbox"]):not([type="hidden"]), .app-shell select, .modal input:not([type="checkbox"]):not([type="hidden"]), .modal select, .modal textarea { color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--control-radius); padding: var(--space-sm); font-size: var(--text-control); }
.app-shell input:not([type="checkbox"]):not([type="hidden"]), .app-shell select, .modal input:not([type="checkbox"]):not([type="hidden"]), .modal select { min-height: var(--touch); }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
.empty-state { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-sm); text-align: center; padding: var(--space-xl) var(--panel-inset); }
.empty-state > .icon { width: 28px; height: 28px; color: var(--muted); }
.empty-state h3 { margin: 0; font-size: var(--text-section); font-weight: 550; }
.empty-state p { margin: 0; max-width: 460px; color: var(--muted); font-size: var(--text-control); }
.section-gap { margin-top: var(--space-lg); }
.model-name { font: var(--text-control) var(--mono); overflow-wrap: anywhere; min-width: 160px; }
.latency-bar { display: flex; align-items: center; gap: var(--space-sm); }
.latency-track { background: var(--pale); width: 60px; height: 4px; border-radius: 2px; }
.latency-track i { background: var(--chart-bar); display: block; height: 100%; border-radius: inherit; }
.pagination { display: flex; align-items: center; gap: var(--space-sm); }
.pagination button { border: 1px solid var(--line); background: var(--paper); border-radius: var(--control-radius); min-height: var(--touch); padding: var(--space-xs) var(--space-sm); font-size: var(--text-small); }
.security-caption { margin: var(--space-md) 0 0; color: var(--muted); font-size: var(--text-small); }
.notice { margin-top: var(--space-md); padding: var(--space-md); background: var(--pale); border-radius: var(--control-radius); font-size: var(--text-control); color: var(--muted); }
.notice summary { cursor: pointer; font-weight: 500; color: var(--green); min-height: var(--touch); display: flex; align-items: center; }
.notice p { margin: var(--space-xs) 0; }
.error-text { color: var(--danger); font-size: var(--text-small); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-error { margin: var(--space-md) var(--page-inset) 0; padding: var(--space-sm) var(--space-md); background: var(--danger-bg); color: var(--danger); border-radius: var(--control-radius); font-size: var(--text-control); }
.page-footer { width: 100%; max-width: var(--content-width); align-self: center; padding: 0 var(--page-inset) var(--space-md); color: var(--muted); font-size: var(--text-small); display: flex; justify-content: space-between; gap: var(--space-sm); }
.tiny-dot { display: none; }
.loading-state { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 300px; color: var(--muted); }
.loader { width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal { width: 580px; max-width: calc(100vw - 32px); max-height: calc(100svh - 32px); overflow-y: auto; margin: auto; padding: var(--panel-inset); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.modal::backdrop { background: #20302455; backdrop-filter: blur(3px); }
.small-modal { width: 460px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.modal-header h2 { margin: 0; font-size: 24px; font-weight: 600; }
.modal-description { color: var(--muted); font-size: var(--text-control); margin: var(--space-sm) 0 var(--space-md); }
.modal label { display: block; margin: var(--space-md) 0 var(--space-xs); font-size: var(--text-control); font-weight: 500; }
.modal label > input:not([type="checkbox"]), .modal label > textarea { display: block; width: 100%; min-width: 0; margin-top: var(--space-xs); font-weight: 400; }
.modal .checkbox-label { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--touch); }
.checkbox-label input { accent-color: var(--green); width: 17px; height: 17px; margin: 0; }
.required, .form-error { color: var(--danger); }
.field-hint { font-size: var(--text-small); color: var(--muted); line-height: 1.7; margin: var(--space-xs) 0; overflow-wrap: anywhere; }
.field-hint li { margin-bottom: var(--space-xs); }
.form-error { font-size: var(--text-control); }
.token-details { border-top: 1px solid var(--line); margin-top: var(--space-md); }
.token-details > summary { cursor: pointer; min-height: var(--touch); display: flex; align-items: center; font-size: var(--text-control); color: var(--green); }
.token-details > summary::before { content: "+"; margin-right: var(--space-sm); }
.token-details[open] > summary::before { content: "−"; }
.modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.secret-note { display: flex; align-items: center; gap: var(--space-xs); margin-right: auto; color: var(--muted); font-size: var(--text-small); }
.secret-note .icon { width: 16px; height: 16px; }
.copy-field { display: flex; align-items: center; gap: var(--space-sm); border: 1px solid var(--line); border-radius: var(--control-radius); padding: var(--space-xs) var(--space-sm); background: var(--bg); }
.copy-field code { flex: 1; min-width: 0; font-size: var(--text-control); overflow-wrap: anywhere; }
.copy-field .text-button { flex-shrink: 0; }
.integration-panel { padding: var(--panel-inset); }
.integration-panel h2 { margin: 0; font-size: var(--text-section); }
.integration-panel p { color: var(--muted); font-size: var(--text-control); }
.code-block { position: relative; background: #23382b; color: #e0edda; padding: var(--space-md); border-radius: var(--control-radius); overflow: auto; }
.code-block pre { font: var(--text-small) / 1.8 var(--mono); margin: var(--space-lg) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-copy { position: absolute; right: var(--space-sm); top: var(--space-xs); min-height: var(--touch); padding: var(--space-xs) var(--space-sm); color: inherit; border: 0; background: transparent; font-size: var(--text-small); }
.details-list { margin: var(--space-md) 0 0; }
.details-list > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--line); font-size: var(--text-control); }
.details-list dt { color: var(--muted); }
.details-list dd { margin: 0; overflow-wrap: anywhere; }
.error-detail { color: var(--danger); }
.toasts { position: fixed; bottom: var(--space-md); right: var(--space-md); display: grid; gap: var(--space-sm); max-width: min(420px, calc(100vw - 40px)); z-index: 1000; }
.toast { border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--paper); color: var(--ink); padding: var(--space-sm) var(--space-md); box-shadow: var(--shadow); font-size: var(--text-control); }
.toast.error { border-color: var(--danger); color: var(--danger); }
@media (max-width: 1240px) {
  :root { --page-inset: 24px; --panel-inset: 20px; --space-lg: 24px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .page-heading { flex-wrap: wrap; }
  .metric { padding: var(--space-md); }
  td, th { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1000px) {
  :root { --sidebar-width: 212px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .health-content { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-md); align-items: center; }
  .health-count { margin: 0; }
  .topbar-actions { gap: var(--space-xs); }
  .toolbar { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  :root { --page-inset: 20px; --panel-inset: 18px; --text-title: 28px; --text-metric: 32px; }
  .sidebar { position: static; width: 100%; padding: var(--space-sm) var(--page-inset); border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .brand { font-size: 25px; padding: 0 0 var(--space-sm); }
  .sidebar .brand-mark { width: 23px; height: 25px; }
  .workspace, .nav-label, .sidebar-bottom { display: none; }
  .sidebar nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .sidebar nav a { min-width: 0; min-height: 52px; padding: var(--space-xs) 2px; gap: 4px; flex-direction: column; font-size: var(--text-small); line-height: 1.4; }
  .nav-count { display: none; }
  .app-shell { margin-left: 0; min-height: calc(100svh - 126px); }
  .topbar { min-height: 64px; }
  .breadcrumb > .breadcrumb-root, .breadcrumb > span, .avatar { display: none; }
  .session-button { padding: 0 var(--space-xs); font-size: var(--text-small); }
  .topbar-actions { gap: 4px; }
  .app-shell > main { padding-top: var(--space-lg); }
  .heading-actions { width: 100%; gap: var(--space-sm); }
  .page-heading p { font-size: var(--text-control); }
  .metrics { margin-bottom: var(--space-md); }
  .metric { padding: var(--space-md) var(--space-sm); }
  .metric-head .icon { display: none; }
  .metric-foot { line-height: 1.6; }
  .health-content { grid-template-columns: 1fr; }
  .panel-heading { align-items: flex-start; }
  .panel-heading .range-label { padding: var(--space-xs); }
  .panel-heading > .text-button { padding-right: 0; }
  .toolbar > .search-box { width: 100%; }
  .filter-group { width: 100%; justify-content: space-between; }
  .filter-group select { flex: 1; min-width: 0; }
  .responsive-table thead { display: none; }
  .responsive-table tbody { display: block; }
  .responsive-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); padding: var(--panel-inset); border-top: 1px solid var(--line); }
  .responsive-table td { display: block; border: 0; padding: 0; min-width: 0; white-space: normal; grid-column: 1 / -1; }
  .responsive-table td[data-label] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
  .responsive-table td[data-label]::before { content: attr(data-label); font-size: var(--text-small); color: var(--muted); min-width: 86px; flex-shrink: 0; }
  .responsive-table td.row-controls { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: var(--space-xs); }
  .responsive-table .row-actions { justify-content: flex-end; }
  .account-name { min-width: 0; }
  .model-name { min-width: 0; }
  .latency-track { display: none; }
  .error-text { max-width: 100%; }
  .page-footer { flex-wrap: wrap; font-size: var(--text-small); }
  .chart-labels span:nth-child(even) { display: none; }
  .modal { padding: var(--space-md); }
  .modal-header h2 { font-size: 22px; }
  .modal-footer .secret-note { width: 100%; }
  .details-list > div { grid-template-columns: 86px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; } }