@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #07111b;
  --panel: rgba(13, 27, 40, .85);
  --panel-soft: rgba(16, 34, 48, .72);
  --line: rgba(112, 166, 195, .15);
  --line-bright: rgba(94, 202, 227, .32);
  --text: #e9f4fa;
  --muted: #829bac;
  --dim: #547082;
  --cyan: #53e1ed;
  --blue: #51aaff;
  --green: #67f0b2;
  --violet: #b691ff;
  --orange: #ffbb6e;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  font-family: 'Manrope', 'Noto Sans SC', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body {
  min-height: 100vh;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(51, 117, 147, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 117, 147, .04) 1px, transparent 1px),
    radial-gradient(ellipse at 50% -25%, rgba(24, 111, 154, .18), transparent 55%),
    linear-gradient(145deg, #06101a 0%, #091723 48%, #07121c 100%);
  background-size: 44px 44px, 44px 44px, auto, auto;
}
button, input { font: inherit; }
.ambient { position: fixed; width: 38vw; height: 38vw; border-radius: 50%; filter: blur(110px); opacity: .1; pointer-events: none; z-index: 0; }
.ambient-a { background: #00b9cf; top: -24vw; left: 12%; }
.ambient-b { background: #2365bd; right: -25vw; bottom: -24vw; }
.screen-shell {
  position: relative; z-index: 1; width: 100vw; height: 100vh; min-height: 680px;
  padding: clamp(13px, 1.16vw, 44px) clamp(16px, 1.7vw, 66px) clamp(9px, .65vw, 25px);
  display: grid; grid-template-rows: auto auto minmax(0, 1.02fr) minmax(0, 1fr) auto; gap: clamp(10px, .85vw, 32px);
}
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: clamp(52px, 4.3vw, 165px); border-bottom: 1px solid var(--line); padding: 0 0 clamp(9px, .8vw, 31px); }
.brand-lockup { display: flex; align-items: center; gap: clamp(10px, .82vw, 31px); min-width: 28%; }
.brand-mark { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: clamp(28px, 1.86vw, 71px); height: clamp(28px, 1.86vw, 71px); padding: 6px; border: 1px solid rgba(82, 225, 237, .45); border-radius: 9px; transform: rotate(45deg); box-shadow: 0 0 22px rgba(83, 225, 237, .16), inset 0 0 15px rgba(83, 225, 237, .08); }
.brand-mark span { border: 1px solid var(--cyan); border-radius: 2px; background: rgba(83, 225, 237, .13); }
.brand-mark span:nth-child(2), .brand-mark span:nth-child(3) { background: rgba(83, 225, 237, .45); }
.eyebrow { margin: 0 0 3px; color: #608096; font: 500 clamp(8px, .53vw, 20px)/1.2 var(--mono); letter-spacing: .15em; }
h1, h2, p { margin-top: 0; }
h1 { margin: 0; color: #f1f9fd; font-size: clamp(17px, 1.16vw, 45px); line-height: 1.1; letter-spacing: .07em; font-weight: 800; }
h1 span { color: #9cb4c2; font-size: .72em; font-weight: 500; letter-spacing: .08em; margin-left: .5em; }
.top-center { display: flex; align-items: center; gap: .65em; color: #a5bdca; font-size: clamp(10px, .68vw, 26px); letter-spacing: .09em; }
.top-center i { display: block; width: .52em; height: .52em; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.top-center b { margin-left: .3em; padding: .3em .55em; border: 1px solid rgba(83,225,237,.27); border-radius: 4px; color: var(--cyan); font: 500 .72em var(--mono); letter-spacing: .15em; }
.top-status { display: flex; align-items: center; gap: clamp(11px, 1.1vw, 42px); }
.connection-state { display: flex; align-items: center; gap: .55em; color: var(--green); font-size: clamp(9px, .62vw, 24px); white-space: nowrap; }
.pulse-dot { display: inline-block; width: .57em; height: .57em; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(103,240,178,.7); animation: pulse 2s infinite; }
.pulse-dot.offline { background: #ff777b; box-shadow: 0 0 10px rgba(255,119,123,.6); animation: none; }
@keyframes pulse { 50% { opacity: .35; box-shadow: 0 0 2px rgba(103,240,178,.3); } }
.clock-stack { display: grid; gap: 3px; text-align: right; font-family: var(--mono); }
.clock-stack strong { font-size: clamp(13px, .98vw, 38px); letter-spacing: .08em; font-weight: 500; }
.clock-stack small { color: var(--muted); font-size: clamp(8px, .56vw, 21px); }
.icon-button { display: grid; place-items: center; width: clamp(29px, 2vw, 76px); height: clamp(29px, 2vw, 76px); color: var(--cyan); font-size: clamp(17px, 1.2vw, 46px); border: 1px solid var(--line-bright); border-radius: 8px; background: rgba(30, 66, 82, .28); cursor: pointer; transition: .2s; }
.icon-button:hover { background: rgba(39, 125, 143, .35); transform: rotate(24deg); }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(9px, .8vw, 31px); }
.metric-card, .panel { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: clamp(7px, .48vw, 18px); background: linear-gradient(145deg, rgba(18, 37, 52, .82), rgba(9, 22, 33, .86)); box-shadow: 0 9px 32px rgba(0, 0, 0, .13), inset 0 1px rgba(255,255,255,.018); }
.metric-card { min-height: clamp(88px, 7vw, 268px); padding: clamp(12px, .92vw, 35px) clamp(13px, 1.05vw, 40px); display: flex; flex-direction: column; justify-content: space-between; }
.metric-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent); opacity: .72; box-shadow: 0 0 14px var(--accent); }
.metric-cyan { --accent: var(--cyan); }.metric-blue { --accent: var(--blue); }.metric-green { --accent: var(--green); }.metric-violet { --accent: var(--violet); }.metric-orange { --accent: var(--orange); }
.metric-heading, .metric-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: clamp(9px, .63vw, 24px); }
.metric-icon { display: grid; place-items: center; width: 1.65em; height: 1.65em; color: var(--accent); border-radius: 5px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 1.2em; }
.metric-value { overflow: hidden; color: #f1f9fd; font: 500 clamp(20px, 1.72vw, 66px)/1.1 var(--mono); letter-spacing: -.055em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 25px color-mix(in srgb, var(--accent) 15%, transparent); }
.metric-value small { color: var(--accent); font-size: .38em; letter-spacing: .08em; margin-left: .6em; }
.metric-foot { font-size: clamp(8px, .52vw, 20px); }
.metric-foot-value { color: var(--accent); font-family: var(--mono); }
.metric-foot b { color: #b4c9d5; font-weight: 500; font-family: var(--mono); }
.mini-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.metric-glow { position: absolute; right: -15%; bottom: -80%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); filter: blur(70px); opacity: .07; pointer-events: none; }

.middle-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(9px, .8vw, 31px); }
.panel { padding: clamp(13px, 1vw, 38px); min-height: 0; }
.panel-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.panel-heading h2 { margin: 0; color: #e7f2f8; font-size: clamp(13px, .88vw, 34px); font-weight: 600; letter-spacing: .02em; }
.panel-heading h2 small { margin-left: .45em; color: #7995a6; font: 400 .64em var(--mono); }
.legend { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: clamp(8px, .65vw, 25px); color: #92aab8; font-size: clamp(8px, .53vw, 20px); }
.legend span { display: flex; align-items: center; gap: .45em; }
.legend i { display: inline-block; width: .55em; height: .55em; border-radius: 50%; }
.legend-rpm { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }.legend-tpm { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.legend b, .panel-tag { padding: .33em .6em; color: #91aab7; border: 1px solid var(--line); border-radius: 4px; font: 400 clamp(8px, .5vw, 19px) var(--mono); white-space: nowrap; }
.trend-panel, .model-panel, .split-panel { display: flex; flex-direction: column; }
.chart-wrap { position: relative; flex: 1; min-height: 70px; margin: clamp(8px, .8vw, 31px) -3px 2px; }
canvas { display: block; width: 100%; height: 100%; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #668294; font-size: clamp(9px, .58vw, 22px); pointer-events: none; }
.chart-empty.hidden { display: none; }
.chart-axis { display: flex; justify-content: space-between; padding-top: 4px; color: #5d7b8d; font: 400 clamp(8px, .48vw, 18px) var(--mono); }
.model-chart-wrap { position: relative; height: 42%; min-height: 80px; margin: clamp(8px, .55vw, 21px) 0 0; }
.model-list { display: grid; gap: clamp(5px, .4vw, 15px); padding-top: clamp(7px, .45vw, 17px); overflow: auto; }
.model-row { display: grid; grid-template-columns: 1.5em minmax(0, 1fr) auto; gap: .65em; align-items: center; color: #bdd0da; font-size: clamp(8px, .54vw, 21px); }
.model-rank { color: #66889b; font: 500 .88em var(--mono); }.model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.model-count { color: var(--cyan); font: 500 .9em var(--mono); }
.split-inner { display: grid; grid-template-columns: minmax(88px, .9fr) minmax(0, 1.1fr); align-items: center; gap: 4%; min-height: 0; flex: 1; padding: 2% 0; }
.donut-box { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; justify-self: center; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center b { font: 500 clamp(15px, 1.1vw, 42px) var(--mono); color: #e9f6fb; }.donut-center small { margin-top: 4px; color: var(--muted); font-size: clamp(8px, .48vw, 18px); }
.split-legend { display: grid; gap: clamp(5px, .48vw, 18px); align-content: center; overflow: hidden; }
.split-legend-row { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; gap: .58em; align-items: center; color: #9ab0bd; font-size: clamp(8px, .52vw, 20px); }
.split-legend-row i { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--c); box-shadow: 0 0 7px var(--c); }
.split-legend-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.split-legend-row b { color: #d9e8ef; font: 400 .9em var(--mono); }
.channel-strip { display: flex; flex-wrap: wrap; gap: 6px; min-height: 1.7em; border-top: 1px solid var(--line); padding-top: clamp(7px, .5vw, 19px); }
.channel-chip { max-width: 100%; overflow: hidden; padding: .32em .65em; color: #8ea9b7; background: rgba(48, 91, 109, .18); border: 1px solid rgba(92, 150, 170, .18); border-radius: 4px; font-size: clamp(7px, .45vw, 17px); text-overflow: ellipsis; white-space: nowrap; }
.channel-chip b { color: var(--cyan); font-family: var(--mono); font-weight: 500; margin-left: .45em; }

.bottom-grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(300px, 1.2fr) minmax(245px, .8fr); min-height: 0; gap: clamp(9px, .8vw, 31px); }
.log-panel { display: flex; flex-direction: column; }
.log-heading { align-items: center; padding-bottom: clamp(9px, .68vw, 26px); }
.log-tools { display: flex; align-items: center; gap: clamp(5px, .42vw, 16px); }
.search-box { display: flex; align-items: center; gap: 7px; width: clamp(135px, 14vw, 538px); height: clamp(28px, 1.8vw, 69px); padding: 0 .7em; color: #7090a1; border: 1px solid var(--line); border-radius: 5px; background: rgba(5, 17, 27, .56); }
.search-box span { font-size: 1.5em; line-height: 1; }.search-box input { min-width: 0; width: 100%; color: #d7e6ed; border: 0; outline: 0; background: transparent; font-size: clamp(8px, .51vw, 20px); }.search-box input::placeholder { color: #587386; }
.pager-button { width: clamp(24px, 1.5vw, 58px); height: clamp(24px, 1.5vw, 58px); color: var(--cyan); border: 1px solid var(--line-bright); border-radius: 4px; background: rgba(32, 81, 94, .24); cursor: pointer; font-size: 1.35em; line-height: 1; }.pager-button:disabled { opacity: .3; cursor: default; }
.page-readout { min-width: 3.8em; text-align: center; color: #9bb2bf; font: 400 clamp(8px, .49vw, 19px) var(--mono); }
.table-wrap { flex: 1; overflow: auto; scrollbar-color: rgba(81, 140, 164, .35) transparent; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
thead { position: sticky; top: 0; z-index: 1; background: #102332; }
th { padding: clamp(6px, .45vw, 17px) clamp(5px, .42vw, 16px); color: #6f8b9d; border-bottom: 1px solid var(--line); text-align: left; font-size: clamp(7px, .47vw, 18px); font-weight: 500; letter-spacing: .05em; white-space: nowrap; }
td { padding: clamp(6px, .45vw, 17px) clamp(5px, .42vw, 16px); color: #c1d3dd; border-bottom: 1px solid rgba(101, 144, 164, .09); font-size: clamp(7px, .49vw, 19px); }
tbody tr.log-row { transition: background .15s; cursor: pointer; } tbody tr.log-row:hover { background: rgba(45, 111, 134, .14); }
td, th { overflow: hidden; text-overflow: ellipsis; }
th:nth-child(1) { width: 12%; } th:nth-child(2) { width: 14%; } th:nth-child(3) { width: 16%; } th:nth-child(4) { width: 9%; } th:nth-child(5) { width: 13%; } th:nth-child(6) { width: 10%; } th:nth-child(7) { width: 9%; } th:nth-child(8) { width: 12%; } th:nth-child(9) { width: 5%; }
.mono { font-family: var(--mono); font-size: .92em; }.log-user { display: block; color: #cadbe3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.log-token { display: block; margin-top: 2px; color: #668294; font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.tokens-cell { color: #94adc0; font-family: var(--mono); }.tokens-cell em { color: #5f7d8f; font-style: normal; margin: 0 .18em; }.detail-button { padding: .25em .5em; color: var(--cyan); border: 1px solid rgba(83,225,237,.22); border-radius: 4px; background: rgba(36,104,119,.16); cursor: pointer; font-size: .9em; }
.empty-cell { padding: 2em; text-align: center; color: #6c8797; }
.table-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: clamp(7px, .48vw, 18px); color: #638093; font-size: clamp(7px, .45vw, 17px); }
.token-panel { display: flex; flex-direction: column; }
.token-tools { display: flex; align-items: center; gap: clamp(4px, .32vw, 12px); }
.token-tools .search-box { width: clamp(100px, 8vw, 307px); }
.token-table-wrap { flex: 1; min-height: 0; overflow: auto; scrollbar-color: rgba(81, 140, 164, .35) transparent; scrollbar-width: thin; }
.token-table th { font-size: clamp(7px, .43vw, 16px); }
.token-table th:nth-child(1) { width: 29%; }.token-table th:nth-child(2) { width: 13%; }.token-table th:nth-child(3) { width: 16%; }.token-table th:nth-child(4) { width: 15%; }.token-table th:nth-child(5) { width: 16%; }.token-table th:nth-child(6) { width: 11%; }
.token-table td { padding: clamp(6px, .42vw, 16px) clamp(4px, .3vw, 11px); font-size: clamp(7px, .45vw, 17px); }
.token-row:hover { background: rgba(45, 111, 134, .1); }
.token-infinite { color: var(--orange); font-family: 'Noto Sans SC', sans-serif; font-size: .9em !important; }
.token-balance { color: var(--green); }
.token-status { display: inline-block; padding: .26em .42em; border-radius: 3px; font-size: .83em; }
.token-status.is-active { color: var(--green); background: rgba(103,240,178,.08); }
.token-status.is-disabled { color: #ff8b8e; background: rgba(255,139,142,.08); }
.side-stack { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(8px, .68vw, 26px); min-height: 0; }
.account-panel, .detail-panel, .footer-panel { padding: clamp(11px, .78vw, 30px); }
.compact-heading { align-items: center; }.status-pill { display: inline-flex; align-items: center; gap: .5em; padding: .35em .7em; color: var(--green); border: 1px solid rgba(103,240,178,.22); border-radius: 99px; background: rgba(103,240,178,.06); font: 400 clamp(7px, .45vw, 17px) var(--mono); white-space: nowrap; }.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, .68vw, 26px) 16px; padding-top: clamp(11px, .78vw, 30px); }
.info-grid div { min-width: 0; display: grid; gap: 3px; }.info-grid span { color: #6e899a; font-size: clamp(7px, .46vw, 18px); }.info-grid b { overflow: hidden; color: #d1e0e7; font: 500 clamp(8px, .54vw, 21px) var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.detail-panel { display: flex; flex-direction: column; overflow: hidden; }.detail-id { max-width: 46%; overflow: hidden; color: #6b8898; font: 400 clamp(7px, .43vw, 16px) var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.detail-content { min-height: 0; flex: 1; overflow: auto; margin-top: clamp(9px, .65vw, 25px); scrollbar-color: rgba(81, 140, 164, .35) transparent; scrollbar-width: thin; }
.detail-placeholder { display: grid; place-content: center; height: 100%; min-height: 75px; text-align: center; color: #688395; font-size: clamp(8px, .5vw, 19px); }.detail-placeholder span { color: #3f8095; font-size: 1.8em; }.detail-placeholder p { margin: .3em 0 0; line-height: 1.6; }
.detail-fields { display: grid; grid-template-columns: minmax(72px, .65fr) minmax(0, 1.35fr); gap: 1px 9px; }.detail-fields dt, .detail-fields dd { margin: 0; padding: .36em .1em; border-bottom: 1px solid rgba(101,144,164,.08); font-size: clamp(7px, .44vw, 17px); line-height: 1.35; overflow-wrap: anywhere; }.detail-fields dt { color: #648193; font-family: var(--mono); }.detail-fields dd { color: #c4d6df; }
.footer-panel { display: flex; align-items: center; gap: .8em; min-height: 52px; }.footer-emblem { display: grid; place-items: center; flex: 0 0 auto; width: 2.25em; height: 2.25em; color: var(--cyan); border: 1px solid rgba(83,225,237,.35); border-radius: 6px; background: rgba(83,225,237,.07); font: 700 1em var(--mono); }.footer-panel b { color: #bed1db; font-size: clamp(7px, .48vw, 18px); font-weight: 500; }.footer-panel p { margin: 3px 0 0; color: #6c8798; font-size: clamp(7px, .43vw, 16px); }.footer-panel p strong { color: var(--cyan); font-family: var(--mono); font-weight: 500; }.divider-dot { margin: 0 .35em; color: #48697a; }
.mini-signal { display: flex; align-items: end; gap: 2px; height: 22px; margin-left: auto; }.mini-signal i { width: 3px; border-radius: 2px; background: var(--cyan); opacity: .7; animation: signal 1.1s ease-in-out infinite alternate; }.mini-signal i:nth-child(1) { height: 35%; }.mini-signal i:nth-child(2) { height: 80%; animation-delay: .2s; }.mini-signal i:nth-child(3) { height: 55%; animation-delay: .35s; }.mini-signal i:nth-child(4) { height: 100%; animation-delay: .1s; }.mini-signal i:nth-child(5) { height: 65%; animation-delay: .45s; }.mini-signal i:nth-child(6) { height: 85%; animation-delay: .25s; }.mini-signal i:nth-child(7) { height: 45%; animation-delay: .5s; }
@keyframes signal { to { height: 22%; opacity: .35; } }
.bottomline { display: flex; justify-content: space-between; color: #486577; font: 400 clamp(7px, .44vw, 17px) var(--mono); letter-spacing: .11em; }.bottomline span:last-child { color: #5d8293; }.bottomline i { display: inline-block; width: 5px; height: 5px; margin-left: .5em; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); vertical-align: 2px; }
.toast { position: fixed; left: 50%; bottom: 3vh; z-index: 9; max-width: 80vw; padding: .8em 1.2em; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; color: #f2d4bc; border: 1px solid rgba(255,187,110,.35); border-radius: 6px; background: rgba(28, 26, 25, .94); font-size: clamp(11px, .65vw, 25px); transition: .25s; box-shadow: 0 12px 40px rgba(0,0,0,.3); }.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-aspect-ratio: 16/10) and (min-width: 1024px) {
  body { overflow: auto; }
  .screen-shell { height: auto; min-height: 100vh; grid-template-rows: auto auto auto auto auto; }
  .middle-grid { min-height: 360px; }.bottom-grid { min-height: 460px; }
}
@media (max-width: 1100px) {
  body { overflow: auto; }
  .screen-shell { width: 100%; height: auto; min-height: 100vh; grid-template-rows: auto auto auto auto auto; }
  .top-center { display: none; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric-card:last-child { grid-column: span 2; }
  .middle-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(310px, 40vh); }
  .trend-panel { grid-column: span 2; }.bottom-grid { grid-template-columns: 1fr; }.token-panel { min-height: 350px; }.side-stack { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(170px, auto) minmax(200px, 30vh); }.detail-panel { grid-column: span 2; }.footer-panel { grid-column: span 2; }
  .bottomline { padding: 5px 0 10px; }
}
@media (max-width: 640px) {
  .screen-shell { padding: 12px; gap: 10px; }.brand-mark { display: none; }.topbar { align-items: flex-start; }.top-status { gap: 9px; }.connection-state { font-size: 0; }.clock-stack strong { font-size: 14px; }.clock-stack small { font-size: 8px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }.metric-card { min-height: 92px; padding: 11px; }.metric-card:last-child { grid-column: span 2; }.metric-value { font-size: clamp(18px, 6vw, 27px); }.metric-heading, .metric-foot { font-size: 8px; }
  .middle-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }.trend-panel { grid-column: auto; }.panel { padding: 12px; }.bottom-grid { min-height: auto; }.log-panel { min-height: 390px; }.token-panel { min-height: 390px; }.log-heading { align-items: flex-start; flex-direction: column; }.log-tools, .token-tools { width: 100%; }.search-box, .token-tools .search-box { flex: 1; width: auto; }.table-wrap { min-height: 245px; }.token-table-wrap { min-height: 240px; }.table-foot span:nth-child(2) { display: none; }
  .side-stack { grid-template-columns: 1fr; grid-template-rows: auto 220px auto; }.detail-panel, .footer-panel { grid-column: auto; }.bottomline { font-size: 7px; }.bottomline span:nth-child(2) { display: none; }
}