:root {
  color-scheme:dark;
  --bg:#0d1017;
  --surface:#131720;
  --raised:#191e29;
  --line:#262c3a;
  --text:#eef1f8;
  --muted:#8a93a6;
  --accent:#a499fa;
  --purple:#8575ed;
  --green:#83d7b3;
  --amber:#ebc081;
  --red:#ee9a9d;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",sans-serif;
  font-size:14px;
  line-height:1.5;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
}

a {
  color:inherit;
  text-decoration:none;
}

button,input,select {
  font:inherit;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:wait;
  opacity:.55;
}

button,a,input,select {
  outline-offset:4px;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
}

svg {
  width:18px;
  height:18px;
  flex-shrink:0;
}

h1,h2,p {
  margin:0;
}

h1 {
  font-size:30px;
  letter-spacing:-1px;
  font-weight:650;
  line-height:1.3;
}

h2 {
  font-size:15px;
  font-weight:600;
  letter-spacing:-.25px;
}

code {
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:12px;
}

small {
  font-size:12px;
}

.muted {
  color:var(--muted);
}

.strong {
  font-weight:600;
  color:var(--text);
}

.eyebrow {
  color:var(--accent);
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:650;
  margin-bottom:8px;
}

.layout {
  display:flex;
  min-height:100vh;
}

.sidebar {
  width:230px;
  background:#10131b;
  border-right:1px solid var(--line);
  padding:30px 18px 22px;
  position:fixed;
  inset:0 auto 0 0;
  display:flex;
  flex-direction:column;
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 10px;
  font-size:19px;
  font-weight:650;
  letter-spacing:-.5px;
}

.brand-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  width:35px;
  height:35px;
  background:#29233e;
  border:1px solid #463b68;
  border-radius:10px;
  color:#bbadff;
}

.brand-mark svg {
  width:21px;
  height:21px;
}

.brand-sub {
  display:block;
  font-size:8px;
  letter-spacing:2px;
  color:#6e788e;
  margin-top:2px;
  font-weight:600;
}

.workspace {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 9px;
  margin:32px 0;
  font-size:11px;
}

.workspace small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:2px;
}

.workspace .badge {
  margin-left:auto;
  font-size:8px;
  padding:1px 5px;
}

.workspace-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
}

.nav-label {
  font-size:9px;
  color:#687286;
  letter-spacing:1.6px;
  padding-left:14px;
  margin:4px 0 12px;
}

.nav-item {
  display:flex;
  gap:12px;
  align-items:center;
  width:100%;
  padding:11px 13px;
  border:0;
  border-radius:7px;
  color:var(--muted);
  font-size:13px;
  background:transparent;
  margin-bottom:5px;
  text-align:left;
}

.nav-item svg {
  width:17px;
  height:17px;
}

.nav-item:hover {
  background:#1b202c;
  color:var(--text);
}

.nav-item.active {
  color:#c4b9ff;
  background:#28233c;
}

.nav-indicator {
  margin-left:auto;
  width:4px;
  height:15px;
  background:var(--accent);
  border-radius:3px;
}

.sidebar-bottom {
  margin-top:auto;
}

.time-note {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  flex-wrap:wrap;
  padding:15px 13px 20px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}

.time-note>span:last-child {
  width:100%;
  color:var(--muted);
  padding-left:13px;
  font-size:10px;
}

.status-dot {
  width:6px;
  height:6px;
  background:var(--green);
  display:inline-block;
  border-radius:50%;
  flex-shrink:0;
}

.logout {
  font-size:12px;
}

.main-area {
  width:calc(100% - 230px);
  margin-left:230px;
}

.topbar {
  height:64px;
  padding:0 36px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
}

.slash {
  color:#414a5d;
  margin:0 12px;
}

.topbar-right {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#a4adbe;
}

.content {
  max-width:1540px;
  padding:35px 36px 25px;
  margin:0 auto;
}

.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:30px;
}

.page-heading p {
  color:var(--muted);
  font-size:12px;
  margin-top:9px;
}

.heading-actions {
  display:flex;
  gap:9px;
}

.button {
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  border:1px solid #343b4c;
  border-radius:7px;
  padding:9px 13px;
  min-height:38px;
  color:#cdd3e1;
  background:var(--raised);
  font-size:11px;
  font-weight:550;
  white-space:nowrap;
}

.button svg {
  width:15px;
  height:15px;
}

.button:hover {
  background:#242b3a;
  border-color:#4d5870;
}

.button.primary {
  background:#a297ee;
  border-color:#a297ee;
  color:#171322;
  box-shadow:0 2px 5px #0003;
  font-weight:650;
}

.button.primary:hover {
  background:#b5a8ff;
  border-color:#b5a8ff;
}

.button.danger-fill {
  background:#642b37;
  border-color:#934453;
  color:#ffcad0;
}

.full {
  width:100%;
}

.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:24px;
}

.metric {
  border:1px solid var(--line);
  background:var(--surface);
  padding:18px 20px 16px;
  border-radius:9px;
}

.metric.accent {
  border-color:#423654;
  background:linear-gradient(135deg,#242032,#151821);
}

.metric-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:#adb6c7;
}

.metric-label>span {
  color:#666f84;
}

.metric.accent .metric-label>span {
  color:var(--accent);
}

.metric-value {
  font-size:31px;
  letter-spacing:-1.4px;
  font-weight:550;
  line-height:1.3;
  margin:14px 0 9px;
  font-variant-numeric:tabular-nums;
}

.metric-note {
  font-size:10px;
  color:var(--muted);
}

.panel {
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  overflow:hidden;
  margin-bottom:24px;
}

.panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:21px 22px;
}

.panel-head p {
  font-size:10px;
  color:var(--muted);
  margin-top:5px;
}

.overview-grid {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);
  gap:22px;
}

.overview-grid .panel {
  min-height:290px;
}

.badge {
  display:inline-block;
  border:1px solid #384051;
  border-radius:5px;
  padding:2px 7px;
  color:#959fb2;
  background:#202633;
  font-size:9px;
  font-weight:500;
  white-space:nowrap;
  letter-spacing:.15px;
}

.badge.green {
  background:#17342d;
  border-color:#294b3e;
  color:#9bdbbc;
}

.badge.amber {
  background:#3a2b1a;
  border-color:#60462b;
  color:var(--amber);
}

.provider-list {
  padding:5px 22px 15px;
}

.provider {
  display:flex;
  gap:11px;
  align-items:center;
  margin-bottom:17px;
}

.provider-logo {
  width:36px;
  height:36px;
  border-radius:9px;
  background:#273332;
  border:1px solid #3b4948;
  color:#badad2;
  display:grid;
  place-items:center;
  font-size:16px;
  font-weight:550;
}

.provider-info {
  flex:1;
}

.provider-info strong {
  font-size:12px;
}

.provider-info small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:3px;
}

.connection-note {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 22px;
  font-size:11px;
  color:var(--muted);
}

.small-icon {
  color:#667187;
}

.chart-wrap {
  padding:0 20px 16px;
}

.chart {
  width:100%;
  height:auto;
  min-height:156px;
  display:block;
  overflow:visible;
}

.chart-line {
  stroke:#283040;
  stroke-width:.6;
  stroke-dasharray:3 4;
}

.chart-label {
  fill:#7b879e;
  font-size:11px;
  font-family:inherit;
}

.bar-input {
  fill:#7465d8;
}

.bar-output {
  fill:#b8a9ff;
}

.chart-legend {
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  font-size:9px;
  color:#8b95a9;
  padding-top:15px;
  flex-wrap:wrap;
}

.chart-legend span {
  display:flex;
  gap:6px;
  align-items:center;
}

.chart-legend i {
  width:7px;
  height:7px;
  border-radius:2px;
  display:inline-block;
}

.legend-input {
  background:#7465d8;
}

.legend-output {
  background:#b8a9ff;
}

.table-scroll {
  overflow-x:auto;
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:11px;
}

thead {
  background:#11151e;
  color:#8b94a6;
  font-size:9px;
  font-weight:500;
}

th {
  padding:12px 22px;
  font-weight:500;
  white-space:nowrap;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

td {
  padding:15px 22px;
  border-bottom:1px solid #232a38;
  color:#adb6c7;
  vertical-align:middle;
}

tbody tr:last-child td {
  border-bottom:0;
}

tbody tr:hover {
  background:#171c28;
}

.number {
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.model-name {
  font-size:11px;
  color:#e0e4ef;
  font-weight:500;
}

.cell-sub {
  display:block;
  font-size:9px;
  font-weight:400;
  color:#717d94;
  margin-top:3px;
}

.endpoint {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:18px 22px;
  background:#11151d;
  margin-bottom:18px;
}

.endpoint>div {
  display:flex;
  align-items:center;
  gap:12px;
}

.endpoint-icon {
  border:1px solid #3d385c;
  background:#292338;
  color:#b3a4ef;
  border-radius:7px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
}

.endpoint strong {
  font-size:11px;
  font-weight:550;
}

.endpoint p {
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
}

.endpoint-value {
  display:flex;
  align-items:center;
  gap:16px;
  background:#1b202c;
  border:1px solid #313a4d;
  border-radius:6px;
  padding:10px 12px;
  color:#b5bdd0;
}

.endpoint-value code {
  font-size:10px;
}

.endpoint-value svg {
  width:13px;
  height:13px;
  color:#7d89a1;
}

.footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:9px;
  color:#657187;
  padding-top:12px;
  border-top:1px solid #202735;
}

.text-button {
  color:#b4a8f2;
  font-size:10px;
  font-weight:550;
  padding:5px 0;
  background:transparent;
  border:0;
  display:inline-flex;
  gap:6px;
  align-items:center;
  white-space:nowrap;
}

.text-button:hover {
  color:#ded6ff;
}

.text-button svg {
  width:13px;
  height:13px;
}

.text-button.danger {
  color:#b8808a;
}

.text-button.danger:hover {
  color:var(--red);
}

.row-actions {
  display:flex;
  justify-content:flex-end;
  gap:13px;
}

.date-cell {
  color:#818da3;
  font-size:10px;
  white-space:nowrap;
}

.count {
  font-size:10px;
  font-weight:500;
  color:#9d96b9;
  border:1px solid #3b3551;
  background:#292238;
  border-radius:4px;
  padding:1px 6px;
  margin-left:5px;
}

.key-filters {
  display:flex;
  gap:15px;
  align-items:center;
}

.checkbox-label {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
}

.checkbox-label input {
  margin:0;
}

.info-strip {
  display:flex;
  gap:11px;
  align-items:center;
  font-size:10px;
  color:#909caf;
  padding:0 2px;
}

.info-strip svg {
  color:#6f7a93;
  width:16px;
  height:16px;
}

.info-strip strong {
  font-weight:600;
  color:#b3bdd0;
}

input,select {
  background:#0f131c;
  color:#dbe1ee;
  border:1px solid #323b4f;
  border-radius:6px;
  padding:9px 11px;
  min-width:0;
  min-height:36px;
  font-size:11px;
}

input::placeholder {
  color:#5e6b83;
}

input:focus,select:focus {
  border-color:#8473cd;
}

input:disabled {
  opacity:.4;
}

input[type=checkbox] {
  accent-color:var(--accent);
  width:14px;
  height:14px;
  min-height:0;
  cursor:pointer;
}

input[type=search] {
  width:175px;
}

.usage-filters {
  padding:20px 22px;
}

.usage-filters form {
  display:flex;
  align-items:end;
  gap:12px;
}

.usage-filters label {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:7px;
}

.usage-filters input,.usage-filters select {
  width:100%;
  height:37px;
}

.filter-grow {
  flex:1;
  min-width:140px;
}

.date-divider {
  color:#56627a;
  padding-bottom:9px;
}

.quick-ranges {
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:14px;
}

.quick-ranges button {
  border:0;
  padding:0;
  font-size:10px;
  color:#a69bcf;
  background:transparent;
}

.quick-ranges span {
  margin-left:auto;
  font-size:9px;
  color:#647087;
}

.empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:180px;
  padding:30px;
  color:#aab5c9;
  text-align:center;
}

.empty svg {
  width:24px;
  height:24px;
  color:#606b84;
  margin-bottom:4px;
}

.empty strong {
  font-size:12px;
  font-weight:500;
}

.empty p {
  font-size:10px;
  color:#6e7c94;
}

.alert {
  padding:12px 15px;
  border:1px solid #4b3c30;
  background:#2b211b;
  color:#d2b892;
  font-size:11px;
  border-radius:7px;
  margin-bottom:20px;
}

.alert.error {
  border-color:#65323e;
  background:#2b1c25;
  color:#e7a8b1;
}

.alert.subtle {
  background:#1c2130;
  color:#adb8d2;
  border-color:#343c52;
  margin-top:14px;
}

.loading-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:13px;
}

.login-page {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,#1e1a30 0,transparent 55%),var(--bg);
  padding:30px;
}

.login-brand {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:30px;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.5px;
}

.login-card {
  width:min(430px,100%);
  padding:32px;
  border:1px solid #39334d;
  border-radius:13px;
  background:#151821;
  box-shadow:0 25px 80px #0003;
}

.login-card h1 {
  font-size:25px;
}

.login-card>p {
  font-size:12px;
  color:#8793a9;
  line-height:1.7;
  margin:12px 0 25px;
}

.login-card form>label {
  font-size:11px;
  display:block;
  margin-bottom:8px;
  color:#b4bdd1;
}

.login-card input {
  width:100%;
  height:43px;
  font-family:monospace;
  letter-spacing:1px;
  font-size:12px;
}

.field-help {
  font-size:10px;
  color:#7d8aa2;
  line-height:1.7;
  margin:12px 0;
}

.field-help code {
  font-size:9px;
}

.form-error {
  font-size:11px;
  line-height:1.6;
  color:#eea6b4;
  min-height:4px;
  margin:12px 0;
  overflow-wrap:anywhere;
}

.login-note {
  display:flex;
  gap:9px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:21px;
  margin-top:25px;
  font-size:10px;
  color:#78869d;
}

.login-note svg {
  width:16px;
  height:16px;
  color:#8574ae;
}

.login-footer {
  margin-top:22px;
  font-size:9px;
  color:#63708b;
}

dialog {
  width:min(680px,calc(100% - 32px));
  max-height:85vh;
  border:1px solid #403650;
  border-radius:12px;
  padding:26px;
  background:#151924;
  color:var(--text);
  box-shadow:0 25px 100px #0008;
}

dialog::backdrop {
  background:#05060cc7;
  backdrop-filter:blur(3px);
}

.modal-head {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:24px;
}

.modal-head h2 {
  font-size:22px;
  font-weight:550;
  letter-spacing:-.6px;
}

.modal-head p {
  font-size:11px;
  color:#8b97af;
  margin-top:9px;
}

.icon-button {
  background:#202636;
  border:1px solid #333c50;
  border-radius:6px;
  color:#9faac1;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
}

.icon-button svg {
  width:14px;
  height:14px;
}

.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  border-top:1px solid #303749;
  padding-top:20px;
  margin-top:20px;
}

#policy-form>label {
  display:block;
  font-size:11px;
  color:#aeb9d0;
  margin-bottom:8px;
}

#key-name {
  width:100%;
  margin-bottom:22px;
}

.policy-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  margin:5px 0 12px;
}

.policy-heading>div {
  display:flex;
  gap:12px;
}

.policy-list {
  border:1px solid #2c3446;
  border-radius:8px;
  max-height:320px;
  overflow-y:auto;
}

.policy-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid #2b3244;
}

.policy-row:last-child {
  border:0;
}

.policy-label {
  display:flex;
  align-items:center;
  gap:11px;
  cursor:pointer;
}

.policy-label strong {
  display:block;
  font-size:11px;
  font-weight:500;
}

.policy-label small {
  display:block;
  color:#77849d;
  font-size:9px;
  margin-top:3px;
}

.limit-field label {
  font-size:8px;
  color:#6f7e98;
}

.limit-field input {
  display:block;
  width:130px;
  margin-top:4px;
  min-height:31px;
  padding:6px 9px;
  font-size:10px;
}

.new-key {
  padding:18px;
  background:#10141e;
  border:1px solid #423655;
  border-radius:8px;
  color:#d0c5ff;
  user-select:all;
  overflow-wrap:anywhere;
}

.new-key code {
  font-size:12px;
}

.revoke-note {
  color:#a7b4cb;
  font-size:12px;
  line-height:1.8;
}

.key-detail-meta {
  display:flex;
  gap:14px;
  align-items:center;
  color:#7e8ca8;
  font-size:10px;
  margin-bottom:20px;
}

.key-detail-meta code {
  font-size:10px;
}

.detail-models {
  max-height:430px;
  overflow-y:auto;
  border:1px solid #2d3447;
  border-radius:8px;
}

.detail-model {
  padding:17px 18px;
  border-bottom:1px solid #2a3142;
}

.detail-model:last-child {
  border:0;
}

.detail-model>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.detail-model strong {
  font-size:12px;
  font-weight:550;
}

.detail-model p {
  font-size:11px;
  color:#8b99b3;
  margin-top:12px;
}

.detail-model p strong {
  color:#d5def1;
}

.detail-model p span {
  font-size:9px;
}

.detail-model small {
  color:#71819e;
  font-size:9px;
  display:block;
  margin-top:8px;
}

progress {
  display:block;
  height:5px;
  width:100%;
  border:0;
  border-radius:10px;
  overflow:hidden;
  background:#28314a;
  margin:10px 0;
}

progress::-webkit-progress-bar {
  background:#28314a;
}

progress::-webkit-progress-value {
  background:#9e8be8;
}

progress::-moz-progress-bar {
  background:#9e8be8;
}

progress.exceeded::-webkit-progress-value {
  background:#dfac7b;
}

progress.exceeded::-moz-progress-bar {
  background:#dfac7b;
}

#toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%) translateY(15px);
  padding:11px 18px;
  background:#28233d;
  border:1px solid #5b4a83;
  color:#ddd2ff;
  border-radius:8px;
  font-size:12px;
  box-shadow:0 10px 30px #0008;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s,transform .15s;
  z-index:10;
  max-width:calc(100% - 30px);
}

#toast.visible {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@media(min-width:1550px) {
  .content {
    padding-top:45px;
  }
  .overview-grid .panel {
    min-height:320px;
  }
}

@media(max-width:1200px) {
  .sidebar {
    width:205px;
    padding-left:13px;
    padding-right:13px;
  }
  .main-area {
    width:calc(100% - 205px);
    margin-left:205px;
  }
  .content {
    padding:28px 25px;
  }
  .topbar {
    padding:0 25px;
  }
  .metrics {
    gap:10px;
  }
  .metric {
    padding:15px;
  }
  .metric-value {
    font-size:27px;
  }
  .overview-grid {
    grid-template-columns:1.5fr 1fr;
    gap:15px;
  }
  .panel-head {
    padding:18px;
  }
  .panel-head p {
    max-width:320px;
  }
  td,th {
    padding-left:18px;
    padding-right:18px;
  }
  .usage-filters form {
    flex-wrap:wrap;
  }
  .key-filters {
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:9px;
  }
}

@media(max-width:950px) {
  .metrics {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .overview-grid {
    grid-template-columns:1fr;
  }
  .overview-grid .panel {
    min-height:0;
  }
  .connection-panel .provider-list {
    display:flex;
    gap:25px;
    flex-wrap:wrap;
  }
  .connection-panel .provider {
    min-width:220px;
  }
  .page-heading {
    align-items:flex-start;
  }
  .heading-actions {
    flex-direction:column;
  }
  .chart {
    max-height:240px;
  }
  .endpoint {
    align-items:flex-start;
    flex-direction:column;
  }
  .endpoint-value {
    width:100%;
    justify-content:space-between;
  }
  .footer {
    flex-direction:column;
    gap:6px;
  }
  .key-filters {
    flex-direction:column;
    align-items:flex-end;
  }
  .panel-head {
    align-items:flex-start;
  }
  .usage-filters form {
    gap:10px;
  }
  .filter-grow {
    min-width:180px;
  }
  .usage-filters input[type=date] {
    min-width:140px;
  }
  .date-divider {
    display:none;
  }
}

@media(max-width:650px) {
  .layout {
    flex-direction:column;
  }
  .sidebar {
    position:static;
    width:100%;
    padding:17px 18px 10px;
    border-right:0;
    border-bottom:1px solid var(--line);
    gap:18px;
  }
  .brand {
    padding:0;
  }
  .brand-sub {
    font-size:7px;
  }
  .workspace,.nav-label,.sidebar-bottom {
    display:none;
  }
  .sidebar nav {
    display:flex;
    gap:7px;
  }
  .nav-item {
    margin:0;
    padding:9px 10px;
    justify-content:center;
    font-size:11px;
    gap:8px;
  }
  .nav-item svg {
    width:14px;
    height:14px;
  }
  .nav-indicator {
    display:none;
  }
  .main-area {
    width:100%;
    margin:0;
  }
  .topbar {
    height:43px;
    padding:0 18px;
    font-size:9px;
  }
  .topbar-right {
    font-size:8px;
  }
  .slash {
    margin:0 6px;
  }
  .content {
    padding:24px 18px;
  }
  .page-heading {
    gap:8px;
    margin-bottom:23px;
  }
  .page-heading h1 {
    font-size:24px;
  }
  .page-heading p {
    font-size:10px;
    max-width:240px;
    line-height:1.7;
  }
  .eyebrow {
    font-size:8px;
    margin-bottom:6px;
  }
  .heading-actions {
    gap:7px;
  }
  .heading-actions .button {
    font-size:9px;
    min-height:32px;
    padding:6px 9px;
  }
  .heading-actions svg {
    width:12px;
    height:12px;
  }
  .metric {
    padding:15px 13px;
  }
  .metric-label {
    font-size:10px;
  }
  .metric-value {
    font-size:27px;
    margin:10px 0 7px;
  }
  .metric-note {
    font-size:8px;
    line-height:1.7;
  }
  .panel-head {
    padding:18px 16px;
  }
  .panel-head h2 {
    font-size:13px;
  }
  .panel-head p {
    font-size:9px;
    line-height:1.7;
  }
  .chart-wrap {
    padding:0 10px 16px;
  }
  .chart-label {
    font-size:13px;
  }
  .chart {
    min-height:140px;
  }
  .provider-list {
    padding:5px 16px 15px;
  }
  .connection-note {
    padding:14px 16px;
  }
  .endpoint {
    padding:16px;
  }
  .endpoint-value code {
    font-size:9px;
  }
  .footer {
    font-size:8px;
    line-height:1.8;
  }
  .keys-table td,.keys-table th {
    padding:12px 15px;
  }
  .panel-head:has(.key-filters) {
    flex-direction:column;
    gap:15px;
  }
  .key-filters {
    width:100%;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
  .key-filters input {
    width:150px;
  }
  .info-strip {
    font-size:9px;
    line-height:1.8;
    align-items:flex-start;
  }
  .usage-filters {
    padding:16px;
  }
  .usage-filters form>div {
    width:calc(50% - 5px);
    flex:initial;
    min-width:0;
  }
  .usage-filters input[type=date] {
    min-width:0;
  }
  .quick-ranges {
    gap:11px;
    flex-wrap:wrap;
  }
  .quick-ranges span {
    width:100%;
    margin:4px 0 0;
  }
  .login-card {
    padding:25px;
  }
  .login-brand {
    font-size:14px;
  }
  dialog {
    padding:21px 18px;
    max-height:90vh;
  }
  .modal-head h2 {
    font-size:19px;
  }
  .policy-row {
    padding:12px 11px;
  }
  .limit-field input {
    width:110px;
  }
  .policy-label strong {
    font-size:10px;
  }
  .policy-label {
    gap:8px;
  }
  .new-key code {
    font-size:11px;
  }
  .modal-actions {
    flex-wrap:wrap;
  }
  .key-detail-meta {
    gap:10px;
    flex-wrap:wrap;
  }
  .detail-model {
    padding:15px;
  }
  .form-error {
    font-size:10px;
  }
  .badge {
    font-size:8px;
  }
  .chart-legend {
    font-size:8px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}