:root {
  color-scheme: dark;
  --canvas: #090e17;
  --canvas-soft: #0d1420;
  --sidebar: #0b111c;
  --surface: #111a28;
  --surface-raised: #151f30;
  --surface-hover: #1a2638;
  --stroke: #1e2a3b;
  --stroke-strong: #2b3a50;
  --text: #f2f6fc;
  --text-soft: #bac7d8;
  --muted: #7f91a9;
  --blue: #6189ff;
  --blue-bright: #83a4ff;
  --cyan: #56c8dc;
  --violet: #a181ff;
  --green: #59d5a0;
  --amber: #e7b76b;
  --red: #f18086;
  --radius: 15px;
  --sidebar-width: 242px;
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  background: var(--canvas);
  color: var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 70% -20%, rgba(58, 88, 164, .13), transparent 44%), var(--canvas); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
::selection { background: rgba(97, 137, 255, .34); color: #fff; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; transform: translateY(-150%); padding: 10px 14px; border-radius: 8px; color: white; background: var(--blue); }
.skip-link:focus { transform: translateY(0); }
.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--muted); font-size: 13px; }
.boot-screen .brand-mark { width: 44px; height: 44px; }
.brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; color: #fff; font: 800 19px/1 "Avenir Next", "Segoe UI", sans-serif; background: linear-gradient(145deg, #78a0ff, #5d6ce8 56%, #9769e9); box-shadow: 0 4px 14px rgba(81, 112, 230, .34), inset 0 1px rgba(255,255,255,.35); }
.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-name { font-size: 13px; font-weight: 800; letter-spacing: .015em; color: #f5f7fb; white-space: nowrap; }
.brand-caption { display: block; margin-top: 2px; color: #73859d; font: 9px/1.2 "DM Mono", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column; width: var(--sidebar-width); padding: 27px 15px 15px; background: rgba(10, 16, 26, .92); border-right: 1px solid rgba(42, 57, 78, .57); backdrop-filter: blur(18px); }
.sidebar-brand { padding: 0 10px 26px; }
.workspace-switch { display: flex; align-items: center; gap: 10px; margin: 0 0 21px; padding: 10px; border: 1px solid var(--stroke); border-radius: 11px; background: linear-gradient(135deg, rgba(24, 36, 55, .92), rgba(14, 22, 34, .92)); }
.workspace-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: #d8e3ff; background: #263756; font-size: 11px; font-weight: 800; }
.workspace-meta { min-width: 0; flex: 1; }
.workspace-meta strong { display: block; overflow: hidden; color: #dfe8f4; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.workspace-meta span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.workspace-switch .icon { color: #70839d; }
.nav-label { padding: 0 12px 8px; color: #5f7188; font: 9px/1.4 "DM Mono", Consolas, monospace; letter-spacing: .15em; text-transform: uppercase; }
.nav-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 39px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; color: #8e9eb3; font-size: 12px; font-weight: 600; transition: color .18s, background .18s, border-color .18s; }
.nav-item .icon { width: 16px; height: 16px; color: #71839a; transition: color .18s; }
.nav-item:hover { color: #dce7f5; background: rgba(34, 48, 70, .45); }
.nav-item.active { color: #f2f6ff; border-color: rgba(102, 137, 239, .16); background: linear-gradient(90deg, rgba(87, 118, 224, .19), rgba(69, 91, 157, .09)); box-shadow: inset 2px 0 0 #7897ff; }
.nav-item.active .icon { color: #8eabff; }
.nav-spacer { height: 21px; }
.sidebar-footer { margin-top: auto; }
.sidebar-help { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; padding: 11px; border: 1px solid rgba(44, 61, 86, .68); border-radius: 11px; color: #b7c4d6; background: linear-gradient(135deg, rgba(21, 32, 48, .88), rgba(16, 24, 37, .78)); }
.sidebar-help .icon { color: #8aa5ff; }
.sidebar-help strong { display: block; font-size: 10px; }
.sidebar-help small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.side-account { display: flex; align-items: center; gap: 9px; padding: 12px 6px 2px; border-top: 1px solid rgba(42, 57, 78, .58); }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; color: #d9e5ff; background: linear-gradient(145deg, #31476d, #26334c); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.account-copy { min-width: 0; flex: 1; }
.account-copy strong, .account-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: #cad6e5; font-size: 10px; font-weight: 700; }
.account-copy span { margin-top: 3px; color: #77889f; font-size: 9px; }
.icon-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 9px; color: #8091a8; background: transparent; cursor: pointer; }
.icon-button:hover { border-color: var(--stroke-strong); color: var(--text); background: var(--surface-raised); }
.icon { display: inline-block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.main-column { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 65px; padding: 0 39px; border-bottom: 1px solid rgba(38, 52, 72, .66); background: rgba(9, 14, 23, .8); backdrop-filter: blur(18px); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }
.mobile-brand { display: none; }
.crumbs { display: flex; align-items: center; gap: 8px; color: #71839a; font-size: 11px; }
.crumbs .current { color: #d5dfed; font-weight: 700; }
.topbar-divider { width: 1px; height: 17px; background: var(--stroke-strong); }
.topbar-context { color: #8293a9; font-size: 10px; }
.topbar-right .text-button { color: #98a8bd; font-size: 10px; }
.topbar-right .text-button:hover { color: #f3f7fd; }
.locale-switch { display: flex; padding: 3px; border: 1px solid var(--stroke); border-radius: 8px; background: #0e1622; }
.locale-switch button { padding: 4px 6px; border: 0; border-radius: 5px; color: #6e819a; background: transparent; font: 9px "DM Mono", Consolas, monospace; cursor: pointer; }
.locale-switch button.active { color: #e7edff; background: #263858; }
.mobile-menu { display: none; }
.content { max-width: 1390px; margin: 0 auto; padding: 34px 39px 50px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.eyebrow { margin: 0 0 8px; color: #71849e; font: 9px/1.4 "DM Mono", Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; color: #f5f7fb; font-size: clamp(23px, 2vw, 29px); font-weight: 700; letter-spacing: -.045em; line-height: 1.18; }
.page-subtitle { max-width: 670px; margin: 0; color: #8192a8; font-size: 11px; line-height: 1.7; }
.heading-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.range-control { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--stroke); border-radius: 9px; background: #0d1521; }
.range-control button { padding: 7px 10px; border: 0; border-radius: 6px; color: #7789a1; background: transparent; font-size: 9px; cursor: pointer; }
.range-control button.active { color: #edf2ff; background: #273853; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid var(--stroke-strong); border-radius: 8px; color: #d7e2f1; background: #121c2b; font-size: 10px; font-weight: 700; cursor: pointer; transition: border-color .16s, transform .16s, background .16s; }
.button:hover { transform: translateY(-1px); border-color: #526b91; background: #172438; }
.button.primary { border-color: #718ef7; color: white; background: linear-gradient(115deg, #587be3, #7268df); box-shadow: 0 4px 15px rgba(77, 98, 208, .2); }
.button.primary:hover { border-color: #95aaff; background: linear-gradient(115deg, #678af2, #8177ed); }
.button.quiet { color: #94a5bb; background: transparent; }
.button.danger { border-color: rgba(210, 98, 108, .34); color: #ff9da1; background: rgba(118, 39, 52, .12); }
.button.small { min-height: 28px; padding: 0 9px; font-size: 9px; }
.button .icon { width: 13px; height: 13px; }
.icon-spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 11px 13px; border: 1px solid rgba(103, 137, 229, .22); border-radius: 10px; color: #c1d0ea; background: rgba(47, 70, 123, .15); font-size: 10px; line-height: 1.6; }
.notice .icon { flex: 0 0 auto; margin-top: 1px; color: #91aaff; }
.notice.warning { border-color: rgba(230, 184, 107, .24); color: #e9d5b5; background: rgba(113, 83, 37, .13); }
.notice.warning .icon { color: var(--amber); }
.notice.error { border-color: rgba(230, 117, 124, .24); color: #f0c2c5; background: rgba(110, 40, 47, .15); }
.notice.error .icon { color: var(--red); }
.notice.success { border-color: rgba(89, 213, 160, .22); color: #c6ecd9; background: rgba(29, 100, 70, .13); }
.notice.success .icon { color: var(--green); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.metric-card { position: relative; overflow: hidden; min-height: 123px; padding: 17px 18px; border: 1px solid rgba(40, 56, 78, .78); border-radius: var(--radius); background: linear-gradient(145deg, rgba(19, 29, 44, .96), rgba(14, 22, 34, .96)); box-shadow: 0 7px 24px rgba(0,0,0,.12); }
.metric-card::after { position: absolute; top: -34px; right: -31px; width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle, var(--metric-glow, rgba(89,131,255,.14)), transparent 70%); content: ""; pointer-events: none; }
.metric-card.accent-blue { --metric-glow: rgba(86, 125, 243, .20); }
.metric-card.accent-cyan { --metric-glow: rgba(70, 196, 216, .14); }
.metric-card.accent-violet { --metric-glow: rgba(152, 105, 238, .18); }
.metric-card.accent-green { --metric-glow: rgba(81, 205, 149, .13); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-label { color: #91a0b4; font-size: 10px; font-weight: 600; }
.metric-icon { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(101, 131, 199, .15); border-radius: 8px; color: var(--metric-color, #90aaff); background: rgba(71, 98, 163, .12); }
.metric-icon .icon { width: 14px; height: 14px; }
.accent-cyan .metric-icon { --metric-color: #6ad4e0; border-color: rgba(73, 184, 200, .17); background: rgba(47, 132, 149, .12); }
.accent-violet .metric-icon { --metric-color: #b197ff; border-color: rgba(153, 118, 223, .18); background: rgba(112, 78, 170, .12); }
.accent-green .metric-icon { --metric-color: #70dbae; border-color: rgba(72, 181, 130, .18); background: rgba(48, 131, 91, .12); }
.metric-value { margin: 15px 0 0; color: #f5f7fc; font: 700 24px/1 "Manrope", "Avenir Next", sans-serif; letter-spacing: -.045em; }
.metric-foot { margin: 7px 0 0; color: #657991; font-size: 9px; }
.metric-foot .up { color: var(--green); }
.metric-foot .neutral { color: #74869c; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.86fr) minmax(265px, .94fr); gap: 14px; margin-bottom: 14px; }
.panel { min-width: 0; border: 1px solid rgba(40, 56, 78, .78); border-radius: var(--radius); background: linear-gradient(140deg, rgba(17, 26, 40, .96), rgba(14, 22, 34, .96)); box-shadow: 0 7px 24px rgba(0,0,0,.1); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.panel-title { margin: 0; color: #dce5f1; font-size: 11px; font-weight: 700; }
.panel-description { margin: 5px 0 0; color: #72849c; font-size: 9px; }
.panel-link { display: inline-flex; align-items: center; gap: 5px; color: #95aaff; font-size: 9px; font-weight: 700; }
.panel-link:hover { color: white; }
.chart-panel { min-height: 260px; }
.chart-legend { display: flex; align-items: center; gap: 14px; color: #7c8da4; font-size: 9px; }
.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #7f9aff; box-shadow: 0 0 9px rgba(127,154,255,.45); }
.legend-dot.tokens { background: #4cc6d0; box-shadow: 0 0 9px rgba(76,198,208,.38); }
.chart-wrap { height: 202px; padding: 13px 18px 12px; }
.chart-wrap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-gridline { stroke: rgba(119, 143, 175, .13); stroke-width: 1; }
.chart-label { fill: #667990; font: 9px "DM Mono", Consolas, monospace; }
.chart-area { opacity: .24; }
.chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.chart-line.requests { stroke: #829dff; filter: drop-shadow(0 2px 4px rgba(105,135,245,.35)); }
.chart-line.tokens { stroke: #59c8d3; stroke-width: 2; }
.chart-empty { display: grid; place-items: center; height: 100%; color: #71839a; font-size: 10px; text-align: center; }
.chart-empty span { display: block; margin-top: 6px; color: #566a84; font-size: 9px; }
.traffic-panel { padding-bottom: 14px; }
.traffic-body { padding: 12px 18px 0; }
.traffic-highlight { position: relative; overflow: hidden; margin-bottom: 12px; padding: 14px; border: 1px solid rgba(84, 116, 194, .2); border-radius: 11px; background: linear-gradient(120deg, rgba(54, 76, 132, .2), rgba(23, 34, 54, .25)); }
.traffic-highlight::after { position: absolute; inset: auto -30px -56px auto; width: 130px; height: 90px; border-radius: 50%; background: rgba(107, 128, 235, .14); filter: blur(28px); content: ""; }
.traffic-highlight-label { color: #93a7ca; font-size: 9px; }
.traffic-highlight-value { margin: 8px 0 4px; color: #f1f5ff; font: 700 21px/1 "Manrope", sans-serif; letter-spacing: -.04em; }
.traffic-highlight-note { color: #7185a3; font-size: 9px; }
.traffic-list { display: grid; gap: 10px; }
.traffic-row { display: flex; align-items: center; gap: 10px; }
.traffic-symbol { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--stroke); border-radius: 8px; color: #a0b1c6; background: #141f2f; }
.traffic-symbol .icon { width: 13px; height: 13px; }
.traffic-copy { min-width: 0; flex: 1; }
.traffic-copy strong { display: block; color: #cbd6e5; font-size: 9px; font-weight: 600; }
.traffic-copy span { display: block; overflow: hidden; margin-top: 3px; color: #6e8098; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.traffic-value { color: #cdd8e8; font: 10px "DM Mono", Consolas, monospace; }
.progress-track { overflow: hidden; height: 4px; margin-top: 8px; border-radius: 99px; background: #202e40; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #678af0, #68c6d4); }
.progress-label { display: flex; justify-content: space-between; margin-top: 6px; color: #70839a; font-size: 8px; }
.quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.quick-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--stroke); border-radius: 11px; color: #c2cfe0; background: rgba(16, 24, 37, .83); transition: border-color .16s, background .16s, transform .16s; }
.quick-card:hover { transform: translateY(-1px); border-color: #425775; background: #141f2f; }
.quick-icon { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; color: #a4b5ff; background: rgba(83, 109, 189, .13); }
.quick-icon .icon { width: 14px; height: 14px; }
.quick-card strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.quick-card span { display: block; overflow: hidden; margin-top: 3px; color: #73849a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.table-panel { overflow: hidden; }
.table-panel .panel-header { padding-bottom: 13px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
thead { background: rgba(9, 15, 24, .42); }
th { padding: 9px 14px; color: #697c94; font: 8px "DM Mono", Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
td { padding: 11px 14px; border-top: 1px solid rgba(34, 48, 66, .56); color: #afbdd0; font-size: 9px; white-space: nowrap; }
tbody tr:hover { background: rgba(56, 75, 110, .12); }
td:first-child, th:first-child { padding-left: 18px; }
td:last-child, th:last-child { padding-right: 18px; }
.model-cell { display: flex; align-items: center; gap: 9px; }
.model-glyph { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid rgba(114, 142, 224, .2); border-radius: 8px; color: #a7bbff; background: linear-gradient(145deg, rgba(90, 115, 194, .2), rgba(81, 72, 158, .13)); font: 9px "DM Mono", Consolas, monospace; }
.model-cell strong, .model-cell small { display: block; }
.model-cell strong { color: #d0dbe9; font-size: 9px; font-weight: 700; }
.model-cell small { margin-top: 3px; color: #7789a0; font-size: 8px; }
.mono { color: #9aacc2; font-family: "DM Mono", Consolas, monospace; font-size: 9px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid rgba(90, 192, 143, .16); border-radius: 99px; color: #8be0b4; background: rgba(43, 119, 82, .13); font-size: 8px; font-weight: 700; }
.status-pill::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-pill.warning { border-color: rgba(232, 186, 104, .18); color: #e4bb77; background: rgba(138, 96, 39, .12); }
.status-pill.danger { border-color: rgba(237, 130, 136, .18); color: #f38f95; background: rgba(135, 51, 61, .13); }
.empty-state { display: grid; justify-items: center; padding: 36px 20px; color: #8495ab; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 11px; border: 1px solid var(--stroke-strong); border-radius: 13px; color: #90a8ff; background: rgba(66, 91, 151, .15); }
.empty-icon .icon { width: 18px; height: 18px; }
.empty-state strong { color: #c7d2e1; font-size: 11px; }
.empty-state p { max-width: 330px; margin: 6px 0 13px; color: #7789a0; font-size: 9px; line-height: 1.6; }
.loading-state { display: grid; min-height: 120px; place-content: center; justify-items: center; gap: 11px; color: #798ca4; font-size: 10px; }
.loading-state .icon { color: #86a1ff; }
.error-state { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; color: #e99da2; font-size: 10px; text-align: center; }
.error-state .icon { flex: 0 0 auto; width: 15px; height: 15px; }
.pagination-note { padding: 11px 18px; border-top: 1px solid rgba(34, 48, 66, .56); color: #71839a; font-size: 8px; }

.filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 0 15px; }
.search-wrap { position: relative; display: flex; align-items: center; min-width: 210px; flex: 1; max-width: 365px; }
.search-wrap .icon { position: absolute; left: 11px; width: 14px; height: 14px; color: #71839a; pointer-events: none; }
.search-wrap input { width: 100%; height: 35px; padding: 0 12px 0 34px; border: 1px solid var(--stroke); border-radius: 8px; color: var(--text); outline: none; background: #0e1622; font-size: 10px; }
.search-wrap input::placeholder { color: #62758c; }
.select-control, .text-control { height: 35px; padding: 0 11px; border: 1px solid var(--stroke); border-radius: 8px; color: #a7b5c7; background: #0e1622; font-size: 9px; }
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.model-card { min-width: 0; padding: 17px; border: 1px solid rgba(43, 59, 83, .8); border-radius: 14px; background: linear-gradient(145deg, rgba(19, 29, 44, .96), rgba(13, 21, 33, .96)); transition: transform .18s, border-color .18s, box-shadow .18s; }
.model-card:hover { transform: translateY(-2px); border-color: #415b80; box-shadow: 0 9px 24px rgba(0,0,0,.2); }
.model-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.model-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.model-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid rgba(129, 153, 227, .22); border-radius: 10px; color: #bed0ff; background: linear-gradient(145deg, rgba(84, 110, 188, .24), rgba(94, 73, 153, .21)); font: 10px "DM Mono", Consolas, monospace; }
.model-identity h2 { overflow: hidden; margin: 0; color: #e1e9f5; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.model-identity p { overflow: hidden; margin: 4px 0 0; color: #7a8ca3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.model-card-description { min-height: 37px; margin: 13px 0; color: #8798ae; font-size: 9px; line-height: 1.65; }
.capability-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.capability { padding: 4px 7px; border: 1px solid rgba(53, 70, 96, .74); border-radius: 5px; color: #8fa1b9; background: rgba(24, 36, 53, .6); font: 8px "DM Mono", Consolas, monospace; }
.model-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(44, 60, 82, .58); }
.model-facts span { display: block; color: #71839a; font-size: 8px; }
.model-facts strong { display: block; margin-top: 4px; color: #c3d0e0; font: 9px "DM Mono", Consolas, monospace; }
.model-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 5px; color: #95aaff; font-size: 9px; font-weight: 700; }
.text-link:hover { color: #ced8ff; }
.text-link .icon { width: 12px; height: 12px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, .75fr); gap: 15px; }
.detail-panel { padding: 20px; }
.detail-top { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--stroke); }
.detail-top .model-avatar { width: 45px; height: 45px; border-radius: 13px; font-size: 13px; }
.detail-top h2 { margin: 0; color: #eef3fb; font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
.detail-top p { margin: 5px 0 0; color: #8092a9; font-size: 10px; }
.detail-description { margin: 17px 0; color: #a2b0c3; font-size: 10px; line-height: 1.8; }
.detail-section-title { margin: 19px 0 10px; color: #d8e2ef; font-size: 10px; font-weight: 700; }
.code-block { position: relative; overflow: auto; margin: 0; padding: 15px; border: 1px solid #25354d; border-radius: 10px; color: #b9c9e0; background: #0a111b; font: 9px/1.75 "DM Mono", Consolas, monospace; white-space: pre; }
.code-block .code-key { color: #9db1ff; }
.code-block .code-string { color: #8fe0bd; }
.endpoint-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.endpoint-list li { display: flex; align-items: center; gap: 9px; color: #9eafc2; font: 9px "DM Mono", Consolas, monospace; }
.method-pill { padding: 4px 6px; border: 1px solid rgba(89, 213, 160, .19); border-radius: 5px; color: #81dcae; background: rgba(51, 128, 89, .13); font-size: 8px; }
.fact-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fact-list li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(45, 61, 82, .52); color: #7d8fa6; font-size: 9px; }
.fact-list li:last-child { border-bottom: 0; }
.fact-list strong { color: #c5d1e0; font: 9px "DM Mono", Consolas, monospace; text-align: right; }

.key-warning { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(230, 184, 107, .2); border-radius: 10px; color: #cfbc9b; background: rgba(98, 72, 38, .1); font-size: 9px; line-height: 1.6; }
.key-name { display: flex; align-items: center; gap: 8px; color: #d2deec; }
.key-name .model-glyph { width: 23px; height: 23px; }
.key-prefix { color: #91a2b7; font: 9px "DM Mono", Consolas, monospace; }
.key-actions { display: flex; justify-content: flex-end; gap: 5px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr); gap: 14px; }
.settings-stack { display: grid; align-content: start; gap: 14px; }
.settings-panel { padding: 18px; }
.settings-panel .panel-header { padding: 0 0 14px; }
.settings-panel .panel-header p { margin-bottom: 0; }
.profile-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid rgba(45, 61, 82, .54); }
.profile-row dt { color: #788aa1; font-size: 9px; }
.profile-row dd { overflow-wrap: anywhere; margin: 0; color: #c7d3e2; font-size: 10px; }
.settings-action { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid rgba(45, 61, 82, .54); }
.settings-action .quick-icon { width: 30px; height: 30px; }
.settings-action-copy { min-width: 0; flex: 1; }
.settings-action-copy strong { display: block; color: #d0dbea; font-size: 9px; }
.settings-action-copy span { display: block; margin-top: 3px; color: #74869c; font-size: 8px; }
.settings-endpoint { overflow-wrap: anywhere; padding: 9px 11px; border: 1px solid var(--stroke); border-radius: 8px; color: #aec0d5; background: #0a111b; font: 9px "DM Mono", Consolas, monospace; }
.security-note { display: flex; gap: 9px; margin-top: 12px; color: #8294aa; font-size: 8px; line-height: 1.6; }
.security-note .icon { flex: 0 0 auto; color: #83a0ff; }
.public-wrap { min-height: 100vh; }
.public-topbar { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 max(24px, calc((100% - 1120px) / 2)); border-bottom: 1px solid rgba(38, 52, 72, .66); background: rgba(9, 14, 23, .72); }
.public-nav { display: flex; align-items: center; gap: 19px; color: #8c9cb0; font-size: 10px; }
.public-nav a:hover { color: white; }
.public-body { max-width: 850px; margin: 0 auto; padding: 68px 24px 80px; }
.public-body h1 { margin-bottom: 12px; font-size: clamp(28px, 4vw, 38px); }
.public-body .lead { max-width: 650px; margin-bottom: 30px; color: #9eafc3; font-size: 12px; line-height: 1.8; }
.legal-card { margin-top: 13px; padding: 17px 18px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(17, 26, 40, .7); }
.legal-card h2 { margin: 0 0 7px; color: #dfe8f4; font-size: 11px; }
.legal-card p { margin: 0; color: #8c9eb3; font-size: 10px; line-height: 1.8; }
.legal-meta { margin-top: 28px; color: #697b91; font: 8px "DM Mono", Consolas, monospace; }
.public-footer { display: flex; justify-content: space-between; gap: 15px; max-width: 850px; margin: 0 auto; padding: 18px 24px 26px; border-top: 1px solid var(--stroke); color: #71839a; font-size: 9px; }

.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); min-height: 100vh; }
.auth-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; min-height: 100vh; padding: 30px 44px 25px; border-right: 1px solid var(--stroke); background: radial-gradient(ellipse at 40% 42%, rgba(59, 91, 170, .17), transparent 50%), radial-gradient(ellipse at 10% 100%, rgba(59, 169, 191, .08), transparent 43%), #0a111c; }
.auth-visual::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(117, 149, 210, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(117, 149, 210, .035) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(transparent, black 19%, black 77%, transparent); content: ""; pointer-events: none; }
.auth-visual > * { position: relative; z-index: 1; }
.auth-logo-row { display: flex; align-items: center; justify-content: space-between; }
.auth-hero { max-width: 630px; padding: 34px 0; }
.auth-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; padding: 6px 9px; border: 1px solid rgba(110, 144, 231, .2); border-radius: 99px; color: #aec0ed; background: rgba(50, 77, 143, .13); font: 8px "DM Mono", Consolas, monospace; letter-spacing: .04em; }
.auth-kicker::before { width: 5px; height: 5px; border-radius: 50%; background: #7dd5b0; box-shadow: 0 0 9px rgba(125,213,176,.5); content: ""; }
.auth-hero h1 { max-width: 590px; margin: 0 0 16px; font-size: clamp(34px, 4.6vw, 59px); font-weight: 700; letter-spacing: -.065em; line-height: 1.04; }
.auth-hero h1 span { color: #8ca6ff; }
.auth-hero > p { max-width: 490px; margin: 0; color: #93a5ba; font-size: 12px; line-height: 1.85; }
.auth-demo { max-width: 590px; padding: 16px; border: 1px solid rgba(62, 83, 120, .64); border-radius: 14px; background: linear-gradient(130deg, rgba(18, 29, 46, .89), rgba(11, 19, 31, .92)); box-shadow: 0 21px 45px rgba(0,0,0,.22); transform: perspective(900px) rotateY(-2deg) rotateX(1deg); }
.demo-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(50, 67, 93, .55); }
.demo-top strong { color: #ced9e7; font-size: 9px; }
.demo-dots { display: flex; gap: 5px; }
.demo-dots span { width: 5px; height: 5px; border-radius: 50%; background: #53647b; }
.demo-code { margin: 12px 0 0; color: #a8bbd2; font: 9px/1.85 "DM Mono", Consolas, monospace; }
.demo-code .dim { color: #60748e; }
.demo-code .purple { color: #ac9aff; }
.demo-code .green { color: #8bdfb7; }
.auth-benefits { display: flex; flex-wrap: wrap; gap: 11px 21px; margin-top: 20px; color: #7f91a8; font-size: 9px; }
.auth-benefits span { display: inline-flex; align-items: center; gap: 6px; }
.auth-benefits .icon { width: 12px; height: 12px; color: #75d6a9; }
.auth-visual-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #65778e; font-size: 8px; }
.auth-visual-footer a { color: #8fa0b4; }
.auth-form-side { display: grid; place-items: center; padding: 40px; background: radial-gradient(ellipse at 50% 45%, rgba(58, 75, 123, .07), transparent 54%); }
.auth-card { width: min(100%, 390px); }
.auth-card .eyebrow { margin-bottom: 10px; }
.auth-card h2 { margin: 0 0 8px; color: #f1f5fb; font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.auth-card > p { margin: 0 0 23px; color: #8091a7; font-size: 10px; line-height: 1.7; }
.auth-form { display: grid; gap: 13px; }
.field { display: grid; gap: 6px; }
.field label { color: #b6c3d4; font-size: 9px; font-weight: 700; }
.field input, .field select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #29384e; border-radius: 8px; color: #eef3fa; outline: none; background: #0d1520; font-size: 10px; }
.field input::placeholder { color: #5f7187; }
.field input:focus, .field select:focus { border-color: #6d8ce9; box-shadow: 0 0 0 3px rgba(93, 126, 228, .1); }
.field-hint { color: #708199; font-size: 8px; line-height: 1.5; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 3px; }
.check-field { display: flex; min-width: 0; align-items: flex-start; gap: 8px; color: #8b9cb1; font-size: 9px; line-height: 1.5; }
.check-field input { width: 16px; height: 16px; flex: 0 0 16px; padding: 0; border: 0; border-radius: 3px; background: transparent; accent-color: #728cf1; }
.check-field span { min-width: 0; overflow-wrap: anywhere; }
.form-link { color: #91a9ff; font-size: 9px; font-weight: 700; }
.form-link:hover { color: #c2d0ff; }
.auth-submit { width: 100%; height: 40px; margin-top: 2px; }
.auth-switch { margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--stroke); color: #7e90a6; font-size: 9px; text-align: center; }
.auth-switch a { color: #9cafef; font-weight: 700; }
.auth-footnote { margin-top: 18px; color: #5e7087; font-size: 8px; line-height: 1.7; text-align: center; }
.auth-minimal { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 25%, rgba(59, 87, 155, .14), transparent 44%), var(--canvas); }
.auth-minimal-card { width: min(100%, 420px); padding: 25px; border: 1px solid var(--stroke-strong); border-radius: 16px; background: rgba(15, 23, 36, .94); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.auth-minimal-card .brand-lockup { margin-bottom: 23px; }

.dialog-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgba(1, 5, 12, .72); backdrop-filter: blur(8px); }
.dialog-card { width: min(100%, 440px); max-height: min(90vh, 720px); overflow-y: auto; padding: 20px; border: 1px solid #33445f; border-radius: 15px; background: linear-gradient(145deg, #151f2e, #0e1724); box-shadow: 0 28px 80px rgba(0,0,0,.5); animation: dialog-enter .18s ease-out both; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dialog-header h2 { margin: 0; color: #eaf0f8; font-size: 14px; }
.dialog-header p { margin: 5px 0 0; color: #7e90a6; font-size: 9px; line-height: 1.55; }
.dialog-form { display: grid; gap: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }
.secret-value { overflow-wrap: anywhere; margin: 12px 0; padding: 13px; border: 1px solid rgba(89, 213, 160, .2); border-radius: 8px; color: #a8ecc9; background: #091711; font: 10px/1.65 "DM Mono", Consolas, monospace; user-select: all; }
.secret-warning { margin: 0; color: #e2bc78; font-size: 9px; line-height: 1.65; }
.toast-region { position: fixed; right: 20px; bottom: 18px; z-index: 100; display: grid; gap: 8px; width: min(340px, calc(100vw - 40px)); }
.toast { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid rgba(89, 213, 160, .22); border-radius: 10px; color: #d1eadb; background: rgba(16, 39, 30, .97); box-shadow: 0 12px 40px rgba(0,0,0,.35); font-size: 9px; line-height: 1.55; animation: toast-in .22s ease-out both; }
.toast.error { border-color: rgba(235, 127, 135, .25); color: #f1c3c6; background: rgba(49, 21, 29, .97); }
.toast .icon { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; color: var(--green); }
.toast.error .icon { color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.mobile-overlay { display: none; }
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 1160px) {
  :root { --sidebar-width: 218px; }
  .content { padding-right: 26px; padding-left: 26px; }
  .topbar { padding-right: 26px; padding-left: 26px; }
  .metric-grid { gap: 9px; }
  .metric-card { padding-right: 14px; padding-left: 14px; }
  .metric-value { font-size: 21px; }
  .quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-102%); transition: transform .22s ease; box-shadow: 18px 0 40px rgba(0,0,0,.24); }
  .app-shell.menu-open .sidebar { transform: translateX(0); }
  .app-shell.menu-open .mobile-overlay { position: fixed; inset: 0; z-index: 25; display: block; background: rgba(0,0,0,.48); }
  .main-column { margin-left: 0; }
  .mobile-brand { display: flex; align-items: center; gap: 8px; }
  .mobile-brand .brand-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
  .mobile-brand .brand-name { font-size: 11px; }
  .mobile-menu { display: grid; }
  .crumbs, .topbar-divider, .topbar-context { display: none; }
  .topbar { min-height: 60px; padding: 0 20px; }
  .content { padding: 27px 20px 40px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(230px, .9fr); }
  .auth-layout { grid-template-columns: minmax(0, .95fr) minmax(340px, .8fr); }
  .auth-visual { padding-right: 28px; padding-left: 28px; }
  .auth-form-side { padding: 28px; }
  .auth-hero h1 { font-size: clamp(34px, 5vw, 48px); }
}
@media (max-width: 700px) {
  .content { padding: 23px 15px 36px; }
  .topbar { padding: 0 14px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-height: 112px; }
  .metric-value { margin-top: 12px; font-size: 21px; }
  .dashboard-grid, .detail-layout, .settings-grid { grid-template-columns: 1fr; }
  .traffic-panel { min-height: auto; }
  .quick-row { gap: 8px; }
  .quick-card { padding: 10px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .heading-actions { width: 100%; justify-content: flex-start; }
  .page-heading .heading-actions:has(.range-control) { align-items: center; justify-content: space-between; }
  .model-grid { grid-template-columns: 1fr; }
  .public-topbar { padding: 0 16px; }
  .public-nav { gap: 10px; font-size: 9px; }
  .auth-layout { display: flex; min-height: 100vh; flex-direction: column; }
  .auth-visual { min-height: auto; padding: 20px 19px 19px; border-right: 0; border-bottom: 1px solid var(--stroke); }
  .auth-hero { padding: 32px 0 25px; }
  .auth-hero h1 { max-width: 520px; font-size: clamp(34px, 10vw, 48px); }
  .auth-hero > p { max-width: 510px; font-size: 10px; }
  .auth-demo, .auth-benefits { display: none; }
  .auth-visual-footer { font-size: 8px; }
  .auth-form-side { padding: 28px 20px 38px; }
  .auth-card { width: min(100%, 430px); }
  .auth-card h2 { font-size: 20px; }
  .mobile-menu { width: 29px; height: 29px; }
  .topbar-right { gap: 6px; }
  .topbar-right .text-button { display: none; }
  .profile-row { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .metric-card { padding: 13px; }
  .metric-label { font-size: 9px; }
  .metric-value { font-size: 19px; }
  .metric-icon { width: 24px; height: 24px; }
  .quick-row { grid-template-columns: 1fr 1fr; }
  .quick-card { gap: 8px; }
  .public-nav a:nth-child(2) { display: none; }
  .range-control button { padding-right: 8px; padding-left: 8px; }
  .auth-visual-footer span { max-width: 58%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
.panel-body { padding: 18px; }
.panel + .panel, .settings-grid + .panel { margin-top: 18px; }
.chart-bars { display:flex; align-items:flex-end; gap:8px; min-height:190px; overflow-x:auto; padding:18px 0 5px; }
.bar-column { display:flex; flex:1; min-width:22px; flex-direction:column; align-items:center; gap:8px; }
.bar { width:100%; min-width:12px; max-width:55px; border-radius:5px 5px 0 0; background:linear-gradient(#83a4ff,#335bb0); }
.bar-column small { font:10px Consolas,monospace; color:var(--muted); }
.chart-empty { min-height:180px; line-height:1.6; }
.lead { color:var(--text-soft); font-size:14px; line-height:1.8; }
.filter-row { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 20px; }
.period { min-width:130px; }
.field > span, .field > label { font-size:13px; }
.auth-card .field input, .auth-card .button, .dialog-card .field input, .auth-minimal-card .field input { font-size:14px; }
.auth-card .auth-switch, .auth-minimal-card .auth-switch, .auth-card .auth-footnote { font-size:12px; line-height:1.7; }
.auth-benefits { font-size:14px; }
.auth-hero h1 { white-space:pre-line; }
.auth-form-side .notice, .notice { font-size:12px; }
.panel-title { font-size:14px; }
.metric-label { font-size:12px; }
.metric-foot { font-size:11px; }
.field-hint { font-size:12px; }
.table-scroll table { font-size:12px; }
.table-scroll code { font-size:11px; overflow-wrap:anywhere; }
.table-scroll small { color:var(--muted); font-size:10px; }
.text-button { border:0; background:none; color:var(--blue-bright); cursor:pointer; }
.danger { color:var(--red); }
.dialog-card { width:min(100%,520px); }
.dialog-card h2 { font-size:20px; }
.secret-value { font-size:14px; }
.secret-warning { font-size:13px; }
.code-block pre { overflow:auto; font:12px/1.8 Consolas,monospace; }
.model-card[hidden] { display:none; }
.mobile-overlay { border:0; }
@media(max-width:700px) { .topbar-right .language-toggle { display:block; } .auth-hero > p { font-size:14px; } .panel-body { padding:14px; } .metric-label { font-size:11px; } }

.billing-wallet-grid .metric-value { font-variant-numeric: tabular-nums; }
.billing-wallet-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 16px; padding:12px 15px; border:1px solid var(--stroke); border-radius:10px; color:var(--muted); background:rgba(11,18,29,.72); font-size:11px; }
.billing-wallet-meta strong { color:var(--text); font-family:"DM Mono",Consolas,monospace; }
.billing-top-actions { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; margin:0 0 18px; }
.voucher-form { display:flex; align-items:flex-end; flex-wrap:wrap; gap:9px; min-width:min(100%,420px); }
.voucher-form .field { flex:1; min-width:190px; }
.voucher-form [data-error] { flex-basis:100%; }
.billing-offer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.billing-offer { display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0; padding:16px; border:1px solid var(--stroke); border-radius:12px; background:linear-gradient(150deg,rgba(21,32,49,.96),rgba(12,19,30,.96)); }
.billing-offer h3 { margin:0; color:#e8eef8; font-size:16px; }
.billing-offer .lead { margin:0; font-size:12px; }
.billing-offer > .button { width:100%; margin-top:auto; }
.billing-offer-top { display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; }
.billing-price { margin:0; color:#f4f7ff; font:700 23px/1.2 "Manrope","Avenir Next",sans-serif; font-variant-numeric:tabular-nums; }
.billing-price small { color:var(--muted); font:500 11px/1.4 "Manrope","Avenir Next",sans-serif; }
.billing-section-grid { margin-top:16px; }
.subscription-summary { display:grid; gap:12px; }
.subscription-summary h3 { margin:0 0 8px; color:#e8eef8; font-size:16px; }
.billing-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0; }
.billing-facts div { min-width:0; padding:10px; border:1px solid var(--stroke); border-radius:9px; background:rgba(10,16,26,.5); }
.billing-facts dt { color:var(--muted); font-size:10px; }
.billing-facts dd { overflow-wrap:anywhere; margin:5px 0 0; color:var(--text-soft); font:11px "DM Mono",Consolas,monospace; }
.billing-actions { display:flex; flex-wrap:wrap; gap:8px; }
.billing-tabs { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 15px; padding:4px; border:1px solid var(--stroke); border-radius:10px; background:#0d1521; }
.billing-tab { flex:0 0 auto; padding:8px 10px; border-radius:7px; color:#8192a8; font-size:11px; text-decoration:none; white-space:nowrap; }
.billing-tab:hover,.billing-tab.active { color:#e5edfa; background:#1b2a40; }
.stepup-panel { margin-bottom:15px; border-color:rgba(231,183,107,.24); }
.stepup-panel .panel-header { padding-bottom:12px; }
.stepup-panel .panel-description { margin:5px 0 0; }
.stepup-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; min-width:0; padding:0 18px 18px; }
.stepup-form .field { min-width:0; }
.stepup-form [data-error] { grid-column:1/-1; }
.panel-body > .search-wrap { box-sizing:border-box; width:100%; min-width:0; margin:0 0 14px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 0; padding:15px; border:1px solid var(--stroke); border-radius:11px; background:rgba(9,15,24,.5); }
.form-grid h3 { grid-column:1/-1; margin:0; color:#dce5f1; font-size:13px; }
.form-grid > .field,.form-grid > .check-field,.form-grid > [data-error],.form-grid > .button { min-width:0; }
.form-grid > [data-error],.form-grid > .button { grid-column:1/-1; }
.form-row { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; }
.form-row .field { flex:1; min-width:180px; }
.form-row [data-error] { flex-basis:100%; }
.table-footer { display:flex; justify-content:flex-end; gap:8px; padding:10px 0 0; }
.billing-provider-grid { margin-top:14px; }
.billing-provider-grid .panel-body { display:grid; gap:8px; }
.billing-provider-grid .form-grid { padding:12px; }
.admin-readonly { color:var(--muted); font-size:11px; }
@media(max-width:700px) {
 .billing-top-actions { align-items:stretch; }
 .voucher-form { min-width:0; }
 .voucher-form .button { flex:1; }
 .billing-wallet-meta { gap:8px 12px; padding:11px; }
 .billing-facts { grid-template-columns:1fr; }
 .form-grid { grid-template-columns:1fr; padding:12px; }
 .form-grid > * { grid-column:1 !important; }
 .stepup-form { grid-template-columns:minmax(0,1fr); padding:0 14px 14px; }
 .stepup-form .button { width:100%; }
 .billing-tab { padding:8px; font-size:10px; }
}