:root {
  --page: #f7f9fc;
  --surface: #ffffff;
  --surface-soft: #f9fbfd;
  --line: #e3e8f0;
  --line-strong: #d6deea;
  --text: #111827;
  --muted: #667085;
  --subtle: #98a2b3;
  --blue: #0866ff;
  --blue-soft: #edf4ff;
  --green: #08a763;
  --green-soft: #eaf8f0;
  --gray-soft: #f1f3f6;
  --red: #e23d4f;
  --violet: #7546ed;
  --orange: #f27a1a;
  --shadow: 0 2px 10px rgba(16, 24, 40, .035);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background: var(--page);
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell { display: grid; grid-template-columns: 148px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 24px 12px 18px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.brand-mark { display: grid; place-items: center; height: 60px; margin-bottom: 26px; }
.brand-mark img { display: block; width: 58px; height: 58px; object-fit: contain; }
.sidebar nav { display: grid; gap: 9px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  color: #344054;
  background: transparent;
  border: 0;
  border-radius: 9px;
  text-align: left;
  font-weight: 650;
}
.nav-item i { width: 21px; color: #52647a; font-size: 19px; }
.nav-item:hover { background: #f4f7fb; }
.nav-item.active { color: var(--blue); background: var(--blue-soft); }
.nav-item.active i { color: var(--blue); }
.sidebar-foot { display: grid; gap: 8px; margin-top: auto; padding: 10px 8px; color: var(--muted); font-size: 12px; }
.sidebar-foot span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sidebar-foot i { color: var(--blue); }
.sidebar-foot small { padding-left: 21px; color: var(--subtle); }

.workspace { min-width: 0; max-width: 1390px; width: 100%; margin: 0 auto; padding: 16px 30px 10px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; scroll-margin-top: 20px; }
.page-header h1 { margin: 0; font-size: clamp(25px, 2.1vw, 34px); letter-spacing: -.035em; line-height: 1.18; }
.page-header p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.auth-panel { display: flex; align-items: center; gap: 9px; }
.auth-panel > label { color: var(--muted); font-size: 13px; }
.key-control { display: flex; align-items: center; width: 248px; height: 43px; padding-left: 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); transition: border .18s, box-shadow .18s; }
.key-control:focus-within { border-color: rgba(8, 102, 255, .55); box-shadow: 0 0 0 3px rgba(8, 102, 255, .08); }
.key-control input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.key-control input::placeholder { color: #a1a9b7; }
.icon-button { display: grid; place-items: center; width: 40px; height: 100%; border: 0; color: var(--muted); background: transparent; }
.icon-button:hover { color: var(--blue); }
.primary-button { height: 43px; padding: 0 17px; border: 1px solid var(--blue); border-radius: 8px; color: #fff; background: var(--blue); font-weight: 700; box-shadow: 0 3px 9px rgba(8, 102, 255, .18); }
.primary-button:hover { background: #0059e8; }
.primary-button:disabled, .refresh-button:disabled { opacity: .55; cursor: wait; }
.refresh-button { display: flex; align-items: center; gap: 7px; height: 43px; padding: 0 8px 0 13px; border: 0; color: var(--muted); background: transparent; white-space: nowrap; }
.refresh-button:hover { color: var(--blue); }
.refresh-button.loading i { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.summary-card { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 86px; padding: 13px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.summary-icon { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 25px; }
.summary-card span { display: block; color: #475467; font-size: 13px; white-space: nowrap; }
.summary-card strong { display: block; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(18px, 1.55vw, 25px); font-weight: 720; font-variant-numeric: tabular-nums; }
.tone-green .summary-icon { color: var(--green); background: var(--green-soft); }
.tone-green strong { color: var(--green); }
.tone-violet .summary-icon { color: var(--violet); background: #f1ecff; }
.tone-orange .summary-icon { color: var(--orange); background: #fff2e8; }

.fleet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; scroll-margin-top: 18px; }
.instance-card { min-width: 0; min-height: 250px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transition: border .18s, box-shadow .18s; }
.instance-card.ready { border-color: #d6eadf; }
.instance-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.instance-title { display: flex; align-items: center; gap: 10px; }
.instance-title h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.state-dot { width: 10px; height: 10px; border-radius: 50%; background: #8a94a4; box-shadow: 0 0 0 4px #f0f2f5; }
.ready .state-dot { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.endpoint { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; color: var(--blue); font-size: 13px; text-decoration: none; }
.endpoint:hover { text-decoration: underline; }
.state-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 66px; padding: 6px 11px; border-radius: 999px; color: #596577; background: var(--gray-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ready .state-badge { color: #07804e; background: var(--green-soft); }
.error .state-badge { color: #b42318; background: #fff0ef; }

.main-detail-grid { display: grid; grid-template-columns: minmax(220px, .92fr) minmax(260px, 1.08fr); gap: 10px; margin-top: 12px; }
.runtime-list, .gpu-usage { margin: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.runtime-list { display: grid; gap: 6px; }
.runtime-list div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center; }
.runtime-list dt { color: var(--muted); font-size: 12px; }
.runtime-list dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
.mini-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mini-heading h3, .live-heading h3 { margin: 0; font-size: 13px; }
.mini-heading span { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.gpu-bars { display: grid; gap: 8px; margin-top: 9px; }
.gpu-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "name value" "name bar"; align-items: center; gap: 5px 9px; }
.gpu-row strong { grid-area: name; font-size: 11px; }
.gpu-row span { grid-area: value; justify-self: end; color: #526071; font-size: 10px; font-variant-numeric: tabular-nums; }
.gpu-track { grid-area: bar; height: 6px; overflow: hidden; border-radius: 999px; background: #e7ebf1; }
.gpu-track i { display: block; height: 100%; border-radius: inherit; background: var(--blue); transition: width .35s ease; }
.empty-inline { padding: 15px 0; color: var(--subtle); text-align: center; font-size: 12px; }

.live-output { margin-top: 10px; padding: 10px 12px 11px; border: 1px solid #d9e7ff; border-radius: 10px; background: #f7faff; }
.live-heading, .live-heading > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-pulse { width: 8px; height: 8px; border-radius: 50%; background: #9aa4b2; }
.ready .live-pulse { background: var(--green); box-shadow: 0 0 0 4px rgba(8, 167, 99, .09); }
.generating .live-pulse { background: var(--blue); animation: livePulse 1.1s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .35; transform: scale(.8); } }
.live-state { color: var(--muted); font-size: 11px; }
.generating .live-state { color: var(--blue); font-weight: 700; }
.live-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.live-metrics > div { min-width: 0; padding-right: 9px; border-right: 1px solid #e1e9f5; }
.live-metrics > div:last-child { border-right: 0; }
.live-metrics span { display: block; color: var(--muted); font-size: 10px; }
.live-metrics strong { display: inline-block; margin-top: 5px; overflow: hidden; max-width: 100%; color: #1d4ed8; font-size: 18px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; vertical-align: baseline; }
.live-metrics small { margin-left: 3px; color: var(--subtle); font-size: 9px; }
.economy-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #dfe8f6; }
.economy-metrics > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; align-items: center; min-width: 0; padding: 7px 9px; border: 1px solid #e3eaf4; border-radius: 8px; background: #fff; }
.economy-metrics i { grid-row: 1 / 4; align-self: start; padding-top: 2px; color: var(--blue); font-size: 15px; }
.economy-metrics span { color: var(--muted); font-size: 9px; }
.economy-metrics strong { margin-top: 3px; overflow: hidden; color: #182230; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.economy-metrics small { margin-top: 2px; overflow: hidden; color: var(--subtle); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.pricing-note { margin: 6px 0 0; color: #7b8797; font-size: 8px; line-height: 1.4; }
.pricing-note a { color: var(--blue); text-underline-offset: 2px; }
.billing-history { margin-top: 8px; border-top: 1px solid #dfe8f6; }
.billing-history summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px 1px; color: #344054; cursor: pointer; list-style-position: inside; }
.billing-history summary:hover { color: var(--blue); }
.billing-history-title { font-size: 10px; font-weight: 700; }
.billing-history summary small { margin-left: auto; color: var(--subtle); font-size: 8px; font-weight: 500; }
.billing-history-content { display: grid; gap: 8px; padding-top: 8px; }
.billing-baseline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 7px 9px; border: 1px solid #e3eaf4; border-radius: 8px; background: #fff; }
.billing-baseline span { color: var(--muted); font-size: 9px; }
.billing-baseline strong { grid-row: 1 / 3; grid-column: 2; font-size: 14px; font-variant-numeric: tabular-nums; }
.billing-baseline small { color: var(--subtle); font-size: 8px; }
.billing-history-section { min-width: 0; }
.billing-history-section h4 { margin: 0 0 5px; color: #475467; font-size: 9px; }
.billing-session-list, .billing-daily-list { display: grid; gap: 4px; }
.billing-session-row { display: grid; grid-template-columns: 1.05fr .95fr .8fr 1fr; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; border: 1px solid #e6ebf2; border-radius: 7px; background: #fff; }
.billing-session-row.active { border-color: #cfe9da; background: #fbfffd; }
.billing-session-row > div { min-width: 0; }
.billing-session-row span, .billing-session-row small { display: block; overflow: hidden; color: var(--subtle); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.billing-session-row strong { display: block; overflow: hidden; margin-top: 2px; font-size: 9px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.billing-session-identity > strong { margin: 0; color: #182230; font-size: 10px; }
.billing-session-row.active .billing-session-identity > strong { color: var(--green); }
.billing-session-amount { text-align: right; }
.billing-session-amount > strong { color: #1d4ed8; font-size: 11px; }
.billing-daily-row { display: grid; grid-template-columns: 1fr .9fr .9fr .75fr; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #edf0f5; font-size: 8px; font-variant-numeric: tabular-nums; }
.billing-daily-row > :last-child { text-align: right; }
.billing-history-empty { margin: 0; padding: 8px; color: var(--subtle); background: #fff; border: 1px solid #e6ebf2; border-radius: 7px; font-size: 8px; text-align: center; }

.empty-state { display: grid; place-items: center; align-content: center; min-height: 150px; color: var(--subtle); text-align: center; }
.empty-state > i { margin-bottom: 13px; color: #c4cad4; font-size: 48px; }
.empty-state strong { color: #374151; font-size: 16px; }
.empty-state p { margin: 7px 0 0; font-size: 12px; }
.offline-instance-body { margin-top: 8px; }
.offline-instance-body .empty-state.compact { min-height: 105px; }
.offline-instance-body .empty-state.compact > i { margin-bottom: 7px; font-size: 34px; }
.offline-instance-body .empty-state.compact strong { font-size: 14px; }
.offline-instance-body .empty-state.compact p { margin-top: 4px; font-size: 10px; }

.bottom-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; margin-top: 12px; scroll-margin-top: 18px; }
.capability-card, .task-card { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.section-title { display: flex; align-items: center; gap: 8px; }
.section-title i { color: var(--blue); font-size: 18px; }
.section-title h2 { margin: 0; font-size: 16px; }
.capability-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.capability-list span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; color: #465467; background: var(--surface-soft); font-size: 11px; }
.capability-list i { color: var(--blue); }
.task-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; padding: 7px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.task-stats div { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 0 8px; border-right: 1px solid var(--line); }
.task-stats div:last-child { border-right: 0; }
.task-stats span { color: var(--muted); font-size: 10px; }
.task-stats strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.green { color: var(--green); }
.blue { color: var(--blue); }
.red { color: var(--red); }
.notice { margin-top: 8px; min-height: 18px; color: var(--muted); text-align: center; font-size: 11px; }
.notice.error { color: var(--red); }
.notice.success { color: var(--green); }

@media (max-width: 1180px) {
  .workspace { padding: 24px 20px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .auth-panel { width: 100%; }
  .key-control { flex: 1; }
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary-card { min-height: 96px; }
  .fleet-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; height: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-mark, .sidebar-foot { display: none; }
  .sidebar nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .nav-item { justify-content: center; min-height: 42px; padding: 0 6px; font-size: 12px; }
  .nav-item i { width: auto; font-size: 16px; }
  .workspace { padding: 18px 12px 24px; }
  .page-header h1 { font-size: 24px; }
  .auth-panel { display: grid; grid-template-columns: 1fr auto; }
  .auth-panel > label { grid-column: 1 / -1; }
  .key-control { width: 100%; }
  .refresh-button { grid-column: 1 / -1; justify-content: center; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .summary-card { min-height: 86px; padding: 13px; gap: 10px; }
  .summary-card:last-child { grid-column: 1 / -1; }
  .summary-icon { width: 42px; height: 42px; font-size: 20px; }
  .summary-card strong { font-size: 18px; }
  .instance-card { padding: 15px; }
  .main-detail-grid { grid-template-columns: 1fr; }
  .endpoint { overflow-wrap: anywhere; }
  .live-metrics { grid-template-columns: 1fr 1fr; }
  .live-metrics > div:nth-child(2) { border-right: 0; }
  .economy-metrics { grid-template-columns: 1fr; }
  .billing-session-row { grid-template-columns: 1fr 1fr; }
  .billing-session-amount { text-align: left; }
  .empty-state { min-height: 165px; }
  .bottom-grid { grid-template-columns: 1fr; }
  .task-stats { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .task-stats div:nth-child(2) { border-right: 0; }
  .task-stats div:nth-child(n+3) { padding-top: 10px; border-top: 1px solid var(--line); }
}

@media (max-width: 430px) {
  .nav-item { gap: 5px; }
  .nav-item span { display: none; }
  .summary-card span { white-space: normal; }
  .instance-heading { gap: 8px; }
  .endpoint { font-size: 11px; }
  .state-badge { min-width: 58px; padding: 5px 8px; }
}

/* Administrator console */
.is-hidden { display: none !important; }
.eyebrow { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.login-screen { display: grid; min-height: 100vh; place-items: center; padding: 28px; background: #f7f9fc; }
.login-card { width: min(440px, 100%); padding: 34px 38px 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(16,24,40,.09); }
.login-brand { display: flex; align-items: center; gap: 11px; color: #344054; font-size: 13px; font-weight: 750; }
.login-brand img { width: 42px; height: 42px; object-fit: contain; }
.login-copy { margin: 30px 0 25px; }
.login-copy h1 { margin: 8px 0 7px; font-size: 30px; letter-spacing: -.04em; }
.login-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.login-form { display: grid; gap: 18px; }
.login-form > label, .modal form > label { display: grid; gap: 8px; color: #344054; font-size: 13px; font-weight: 650; }
.login-form input, .modal input, .modal textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text); background: #fff; outline: 0; resize: vertical; transition: border .18s,box-shadow .18s; }
.login-form input:focus, .modal input:focus, .modal textarea:focus, .search-control:focus-within, .range-select:focus { border-color: rgba(8,102,255,.55); box-shadow: 0 0 0 3px rgba(8,102,255,.08); }
.password-control { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 9px; }
.password-control:focus-within { border-color: rgba(8,102,255,.55); box-shadow: 0 0 0 3px rgba(8,102,255,.08); }
.password-control input { border: 0; box-shadow: none !important; }
.password-control button { width: 44px; align-self: stretch; border: 0; color: var(--muted); background: transparent; }
.login-submit { width: 100%; margin-top: 3px; }
.form-message { min-height: 18px; margin: 0; color: var(--red); font-size: 12px; text-align: center; }
.login-footnote { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 24px 0 0; color: var(--subtle); font-size: 11px; }
.login-footnote i { color: var(--green); }

.admin-shell { display: grid; grid-template-columns: 158px minmax(0,1fr); min-height: 100vh; }
.admin-sidebar .nav-item { text-decoration: none; }
.admin-workspace { max-width: 1500px; padding-top: 24px; padding-bottom: 32px; }
.console-header { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.console-header h1 { margin: 6px 0 4px; font-size: clamp(26px,2vw,34px); letter-spacing: -.04em; }
.console-header p { margin: 0; color: var(--muted); font-size: 14px; }
.console-actions { display: flex; align-items: center; gap: 9px; }
.admin-identity { display: flex; align-items: center; gap: 9px; min-width: 134px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.admin-identity > i { color: var(--blue); font-size: 23px; }
.admin-identity strong,.admin-identity span { display: block; }
.admin-identity strong { font-size: 12px; }
.admin-identity span { margin-top: 2px; color: var(--subtle); font-size: 9px; }
.quiet-button,.secondary-button,.danger-soft-button,.success-soft-button,.icon-text-button,.back-button,.row-action { border: 0; border-radius: 8px; font-weight: 650; }
.quiet-button { height: 39px; padding: 0 12px; color: var(--muted); background: transparent; }
.quiet-button:hover { color: var(--red); background: #fff1f2; }
.admin-summary { margin-bottom: 25px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 4px 0 13px; }
.section-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.section-heading .primary-button { display: inline-flex; align-items: center; gap: 7px; }
.live-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 11px; font-weight: 700; }
.live-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.console-fleet .instance-card { min-height: 315px; }
.console-instance .empty-state.compact { min-height: 220px; }

.key-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 18px 0 14px; }
.mini-stat { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow); }
.mini-stat > i { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 9px; color: var(--blue); background: var(--blue-soft); font-size: 18px; }
.mini-stat span,.mini-stat strong { display: block; }
.mini-stat span { color: var(--muted); font-size: 11px; }
.mini-stat strong { margin-top: 4px; font-size: 20px; }
.mini-stat.tone-green > i { color: var(--green); background: var(--green-soft); }
.mini-stat.tone-orange > i { color: var(--orange); background: #fff2e8; }
.mini-stat.tone-violet > i { color: var(--violet); background: #f1ecff; }
.table-card,.daily-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.table-toolbar > span { color: var(--muted); font-size: 11px; }
.search-control { display: flex; align-items: center; width: min(390px,70%); border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; }
.search-control i { padding-left: 12px; color: var(--subtle); }
.search-control input { min-width: 0; flex: 1; padding: 9px 11px; border: 0; outline: 0; background: transparent; font-size: 12px; }
.table-scroll { overflow-x: auto; }
.key-table,.daily-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.key-table th,.daily-table th { padding: 11px 13px; color: #667085; background: var(--surface-soft); font-size: 10px; text-align: left; white-space: nowrap; }
.key-table td,.daily-table td { padding: 12px 13px; border-top: 1px solid #edf0f4; vertical-align: middle; white-space: nowrap; }
.key-table tbody tr { cursor: pointer; transition: background .15s; }
.key-table tbody tr:hover,.key-table tbody tr:focus { background: #f8fbff; outline: 0; }
.key-name,.key-note { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.key-name { color: #182230; font-size: 12px; }
.key-note { margin-top: 4px; color: var(--subtle); font-size: 9px; font-weight: 400; }
.masked-key { color: #344054; font-size: 10px; }
.key-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 750; }
.key-status.enabled { color: #07804e; background: var(--green-soft); }
.key-status.disabled { color: #667085; background: var(--gray-soft); }
.muted-cell { color: var(--muted); font-size: 10px; }
.money-cell { color: #1d4ed8; font-weight: 720; font-variant-numeric: tabular-nums; }
.row-action { display: grid; width: 28px; height: 28px; place-items: center; color: var(--muted); background: transparent; }
.table-empty { padding: 36px !important; color: var(--subtle); text-align: center !important; }

.range-select { min-width: 130px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; outline: 0; }
.usage-empty { display: grid; min-height: 470px; place-items: center; align-content: center; padding: 35px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--subtle); background: #fff; text-align: center; }
.usage-empty > i { color: #c2c9d3; font-size: 48px; }
.usage-empty h3 { margin: 14px 0 6px; color: #344054; font-size: 18px; }
.usage-empty p { margin: 0 0 18px; font-size: 12px; }
.secondary-button,.danger-soft-button,.success-soft-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 13px; }
.secondary-button { border: 1px solid var(--line-strong); color: #344054; background: #fff; }
.secondary-button:hover { border-color: #b8c3d1; background: var(--surface-soft); }
.danger-soft-button { color: #b42318; background: #fff0ef; }
.success-soft-button { color: #07804e; background: var(--green-soft); }
.detail-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.detail-header h2 { margin: 11px 0 4px; font-size: 24px; }
.detail-header p { margin: 0; color: var(--muted); font-size: 12px; }
.back-button { padding: 0; color: var(--blue); background: transparent; font-size: 11px; }
.detail-actions { display: flex; gap: 8px; }
.secret-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid #dce6f5; border-radius: 11px; background: #f7faff; }
.secret-panel span,.secret-panel code { display: block; }
.secret-panel span { margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.secret-panel code { max-width: 900px; overflow: hidden; color: #1d4ed8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.secret-panel > div:last-child { display: flex; gap: 6px; }
.icon-text-button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; color: var(--blue); background: #fff; }
.icon-text-button:disabled { color: var(--subtle); cursor: not-allowed; }
.usage-instance-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.usage-instance-card { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow); }
.usage-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.usage-card-head strong { font-size: 15px; }
.usage-card-head span { color: #1d4ed8; font-size: 14px; font-weight: 750; }
.usage-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.usage-card-grid div { padding: 8px; border-radius: 7px; background: var(--surface-soft); }
.usage-card-grid span,.usage-card-grid strong { display: block; }
.usage-card-grid span { color: var(--muted); font-size: 9px; }
.usage-card-grid strong { margin-top: 4px; font-size: 12px; }
.usage-warning { margin: 9px 0 0; color: var(--orange); font-size: 9px; }
.usage-tariff-split { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.usage-tariff-split > span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 6px; padding: 8px; border: 1px solid #e8edf4; border-radius: 7px; background: #fbfcfe; }
.usage-tariff-split > span > i { grid-row: 1 / 3; color: var(--green); font-size: 13px; }
.usage-tariff-split > span:last-child > i { color: var(--orange); }
.usage-tariff-split small { color: var(--muted); font-size: 8px; }
.usage-tariff-split strong { font-size: 10px; font-variant-numeric: tabular-nums; }
.usage-warning.cache-estimate { color: #875bf7; }
.daily-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.daily-head h3 { margin: 0; font-size: 15px; }
.daily-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.daily-head > span { color: var(--blue); font-size: 10px; font-weight: 700; }
.daily-chart { display: flex; align-items: flex-end; gap: 5px; height: 128px; padding: 18px 16px 10px; border-bottom: 1px solid var(--line); }
.chart-column { display: flex; flex: 1; align-items: center; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 9px; }
.chart-column i { display: block; width: min(18px,80%); min-height: 3px; border-radius: 3px 3px 1px 1px; background: var(--blue); }
.chart-column span { margin-top: 5px; color: var(--subtle); font-size: 7px; white-space: nowrap; }
.chart-empty { align-self: center; width: 100%; color: var(--subtle); text-align: center; font-size: 11px; }
.system-usage-card { overflow: hidden; margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.system-usage-head { align-items: center; }
.system-usage-head h2 { margin: 0; font-size: 17px; }
.system-usage-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; padding: 12px 14px; background: #fbfcfe; border-bottom: 1px solid var(--line); }
.system-usage-summary .mini-stat { min-width: 0; padding: 11px 12px; box-shadow: none; }
.system-usage-summary .mini-stat > i { width: 32px; height: 32px; font-size: 14px; }
.system-usage-summary .mini-stat span { font-size: 9px; }
.system-usage-summary .mini-stat strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.settlement-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.settlement-strip > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 7px; min-width: 0; padding: 9px 13px; background: #fff; }
.settlement-strip i { grid-row: 1 / 3; color: var(--blue); font-size: 15px; }
.settlement-strip span { color: var(--muted); font-size: 8px; }
.settlement-strip strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.billing-baseline-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 9px; margin: 10px 14px 0; padding: 9px 11px; border: 1px solid #dbe7fb; border-radius: 8px; background: #f7faff; color: #344054; font-size: 9px; }
.billing-baseline-row i { color: var(--blue); }
.accounting-pending td { background: #fffaf0; }
.accounting-unattributed td { background: #fff7f7; }
.accounting-migration td { background: #f8fafc; color: #667085; }
.system-daily-list { display: grid; gap: 8px; padding: 12px 14px; }
.system-day { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.system-day[open] { border-color: #cfe0fa; box-shadow: 0 4px 14px rgba(15,23,42,.04); }
.system-day-summary { display: grid; grid-template-columns: minmax(145px,.72fr) minmax(570px,2.8fr) auto; align-items: center; gap: 14px; min-height: 61px; padding: 10px 12px; cursor: pointer; list-style: none; }
.system-day-summary::-webkit-details-marker { display: none; }
.system-day-summary:hover { background: #f8fbff; }
.system-day-date strong,.system-day-date span { display: block; }
.system-day-date strong { font-size: 13px; }
.system-day-date span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.system-day-metrics { display: grid; grid-template-columns: repeat(6,minmax(72px,1fr)); gap: 6px; }
.system-day-metrics > span { min-width: 0; padding-left: 9px; border-left: 1px solid #e8edf4; }
.system-day-metrics small,.system-day-metrics strong { display: block; }
.system-day-metrics small { color: var(--muted); font-size: 8px; }
.system-day-metrics strong { overflow: hidden; margin-top: 3px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.system-day-summary > i { color: var(--subtle); transition: transform .18s; }
.system-day[open] .system-day-summary > i { transform: rotate(180deg); }
.system-breakdown { border-top: 1px solid var(--line); }
.system-breakdown .daily-table { font-size: 10px; }
.system-breakdown .daily-table th,.system-breakdown .daily-table td { padding: 9px 10px; }
.accounting-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 0 14px 13px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.accounting-note i { color: var(--blue); }
.compact-usage-empty { min-height: 90px; border: 0; border-radius: 0; }
.legacy-billing-section { overflow: hidden; margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.legacy-billing-head { align-items: center; }
.legacy-billing-head h2 { margin: 0; font-size: 17px; }
.history-source-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: 10px; font-weight: 700; }
.global-billing-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; background: #fbfcfe; }
.global-billing-grid > .global-billing-instance:only-child { grid-column: 1 / -1; }
.global-billing-instance { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.global-billing-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.global-billing-title strong,.global-billing-title span { display: block; }
.global-billing-title strong { font-size: 15px; }
.global-billing-title div > span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.legacy-economy { margin-top: 11px; padding-top: 0; border-top: 0; }
.legacy-economy > div { background: var(--surface-soft); }
.legacy-economy small { white-space: normal; line-height: 1.4; }
.legacy-pricing-note { margin-top: 9px; font-size: 9px; }
.global-billing-instance .billing-history { margin-top: 11px; }
.global-billing-instance .billing-history summary { padding: 11px 2px 3px; }
.global-billing-instance .billing-history-title { font-size: 12px; }
.global-billing-instance .billing-history summary small { font-size: 9px; }
.global-billing-instance .billing-history-content { gap: 10px; }
.global-billing-instance .billing-baseline span { font-size: 10px; }
.global-billing-instance .billing-baseline small { font-size: 9px; }
.global-billing-instance .billing-history-section h4 { font-size: 10px; }
.global-billing-instance .billing-session-row span,.global-billing-instance .billing-session-row small { font-size: 8px; }
.global-billing-instance .billing-session-row strong { font-size: 10px; }
.global-billing-instance .billing-session-identity > strong { font-size: 11px; }
.global-billing-instance .billing-daily-row { padding: 7px 8px; font-size: 9px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 30; padding: 11px 15px; border-radius: 9px; color: #fff; background: #101828; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s,transform .18s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--red); }

.modal { width: min(460px,calc(100vw - 30px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 24px 70px rgba(16,24,40,.2); }
.modal::backdrop { background: rgba(16,24,40,.42); }
.modal form { display: grid; gap: 17px; padding: 23px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; }
.modal-head h2 { margin: 5px 0 0; font-size: 21px; }
.modal-close { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; color: var(--muted); background: var(--surface-soft); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; }

@media (max-width: 1180px) {
  .admin-shell { grid-template-columns: 136px minmax(0,1fr); }
  .console-header { align-items: flex-start; }
  .console-actions { flex-wrap: wrap; justify-content: flex-end; }
  .usage-instance-grid { grid-template-columns: 1fr 1fr; }
  .system-usage-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .settlement-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .system-day-summary { grid-template-columns: 130px minmax(0,1fr) auto; }
  .system-day-metrics { grid-template-columns: repeat(3,minmax(78px,1fr)); row-gap: 8px; }
  .global-billing-grid { grid-template-columns: 1fr; }
  .global-billing-grid > .global-billing-instance:only-child { grid-column: auto; }
}
@media (max-width: 760px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: sticky; height: auto; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-sidebar .brand-mark,.admin-sidebar .sidebar-foot { display: none; }
  .admin-sidebar nav { grid-template-columns: repeat(4,1fr); }
  .admin-sidebar .nav-item { justify-content: center; min-height: 42px; padding: 0 4px; font-size: 11px; }
  .console-header { flex-direction: column; }
  .console-actions { width: 100%; justify-content: flex-start; }
  .admin-identity { margin-left: auto; }
  .admin-summary { grid-template-columns: 1fr 1fr; }
  .admin-summary .summary-card:last-child { grid-column: auto; }
  .key-stats,.usage-instance-grid { grid-template-columns: 1fr 1fr; }
  .detail-header,.secret-panel { align-items: flex-start; flex-direction: column; }
  .secret-panel > div:first-child { width: 100%; }
  .secret-panel code { max-width: 100%; }
  .login-card { padding: 28px 24px 25px; }
  .system-usage-summary { grid-template-columns: 1fr 1fr; }
  .settlement-strip { grid-template-columns: 1fr 1fr; }
  .billing-baseline-row { grid-template-columns: auto 1fr auto; }
  .billing-baseline-row span { grid-column: 2 / 4; }
  .system-day-summary { grid-template-columns: 1fr auto; }
  .system-day-metrics { grid-column: 1 / 3; grid-template-columns: 1fr 1fr; }
  .system-day-metrics > span { padding: 6px 0 0; border-top: 1px solid #e8edf4; border-left: 0; }
  .legacy-economy { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .admin-sidebar .nav-item span { display: none; }
  .admin-summary,.key-stats,.usage-instance-grid { grid-template-columns: 1fr; }
  .console-actions .refresh-button { order: 3; width: 100%; justify-content: center; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .keys-heading .primary-button { width: 100%; justify-content: center; }
  .system-usage-summary { grid-template-columns: 1fr; }
  .settlement-strip { grid-template-columns: 1fr; }
  .system-usage-head { align-items: flex-start; }
  .system-usage-head .range-select { width: 100%; }
}