:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --ink: #142033;
  --muted: #607089;
  --faint: #8b98aa;
  --line: #dde5ef;
  --line-strong: #c4d0df;
  --navy: #102238;
  --navy-soft: #18324f;
  --blue: #245fa6;
  --blue-hover: #1b4d88;
  --blue-soft: #e8f1fb;
  --purple: #6547d6;
  --purple-soft: #f1edff;
  --teal: #07957f;
  --teal-soft: #e5f7f5;
  --usage-blue: #2f6fb2;
  --usage-blue-soft: #edf5fd;
  --usage-blue-border: #cbdff3;
  --overage-soft: #fff2f0;
  --overage-border: #f0d1cd;
  --package-neutral-fill: #f3f4f7;
  --package-neutral-border: #dfe3e9;
  --official-metric-fill: #e9f4f2;
  --official-metric-border: #c6dfdb;
  --green: #14785f;
  --green-soft: #e1f3ed;
  --amber: #9a651b;
  --amber-soft: #fff1d9;
  --red: #b4433b;
  --red-soft: #fde8e6;
  --shadow: 0 10px 30px rgba(26, 43, 70, 0.065);
  --radius: 8px;
  --sans: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #9cc4f0; outline-offset: 2px; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 13px; border-radius: 6px; background: var(--navy); color: #fff; }
.skip-link:focus { top: 10px; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-header {
  height: 64px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(24px, 3vw, 48px);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 10px rgba(26, 43, 70, .035);
}
.user-app-header { padding-inline: 20px; }
.app-header-inner { width: 100%; max-width: 1480px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(99, 195, 232, .32);
  border-radius: 10px;
  background: #102a43;
  color: #fff;
  box-shadow: 0 7px 18px rgba(16, 42, 67, .16), inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-mark::after {
  position: absolute;
  right: 6px;
  bottom: 5px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: #60d5f4;
  content: "";
  opacity: .85;
}
.brand-symbol { width: 30px; height: 30px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.brand-symbol-outline { stroke: #f7fbff; stroke-width: 2.15; }
.brand-symbol-accent { stroke: #65daf6; stroke-width: 2.05; }
.brand-copy strong { display: block; color: var(--navy); font-size: 17px; font-weight: 760; line-height: 1.15; }
.brand-copy small { display: block; margin-top: 4px; color: var(--faint); font: 700 10px/1.1 var(--mono); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.service-state { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #d8ebe5; border-radius: 7px; background: #f5fbf9; color: #41665d; font-size: 12px; }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(20, 120, 95, .09); }

.btn {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ink);
  background: var(--surface);
  font-weight: 700;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.btn .ui-icon { width: 16px; height: 16px; }
.btn:hover { border-color: var(--line-strong); box-shadow: 0 4px 12px rgba(26, 43, 70, .06); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn-secondary { border-color: var(--line); }
.btn-danger { color: var(--red); border-color: #efc8c4; background: var(--red-soft); }
.btn-small { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.btn-link { min-height: 36px; color: var(--blue); padding: 7px 9px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.page-shell { max-width: 1280px; margin: 0 auto; padding: 22px 24px 42px; }
.page-title-row { 
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.page-title-row h1, .page-title-row h2 { margin: 0 0 4px; color: var(--navy); font-size: 22px; letter-spacing: 0; }
.page-title-row p { margin: 0; color: var(--muted); font-size: 13px; }
.eyebrow { color: var(--blue); font: 700 10px var(--mono); text-transform: uppercase; margin-bottom: 6px; }

.redeem-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 18px;
  align-items: stretch;
}
.redeem-main { padding: 26px; }
.redeem-main h1 { margin: 0 0 7px; font-size: 26px; }
.redeem-main > p { margin: 0 0 24px; color: var(--muted); max-width: 700px; }
.status-panel { padding: 22px; background: var(--navy); color: #fff; border-color: var(--navy); }
.status-panel h2 { margin: 0 0 18px; font-size: 15px; }
.status-list { display: grid; gap: 0; }
.status-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #29415b; }
.status-row:last-child { border-bottom: 0; }
.status-row span { color: #a9bad0; font-size: 12px; }
.status-row strong { color: #fff; font: 600 12px var(--mono); text-align: right; }

.redeem-shell { position: relative; max-width: 1040px; padding-top: 52px; }
.redeem-shell::before { position: absolute; z-index: -1; top: 10px; left: 50%; width: min(920px, 92vw); height: 420px; background-image: linear-gradient(rgba(36, 95, 166, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(36, 95, 166, .045) 1px, transparent 1px); background-size: 32px 32px; content: ''; mask-image: linear-gradient(to bottom, #000, transparent); transform: translateX(-50%); }
.redeem-intro { max-width: 650px; margin: 0 auto 22px; text-align: center; }
.redeem-intro h1 { margin: 0 0 8px; color: var(--navy); font-size: 32px; letter-spacing: 0; }
.redeem-intro p { margin: 0; color: var(--muted); font-size: 15px; }
.flow-steps { max-width: 650px; margin: 0 auto 16px; display: grid; grid-template-columns: repeat(3, 1fr); }
.flow-step { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--faint); font-size: 11px; }
.flow-step:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: calc(50% + 54px); right: calc(-50% + 54px); height: 1px; background: var(--line-strong); }
.flow-step span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--faint); font: 700 11px var(--mono); }
.flow-step strong { font-weight: 600; }
.flow-step.active, .flow-step.done { color: var(--blue); }
.flow-step.active span { border-color: var(--blue); background: var(--blue); color: #fff; }
.flow-step.done span { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.redeem-shell .redeem-main { max-width: 700px; margin: 0 auto; padding: 30px; border-top: 3px solid var(--blue); box-shadow: 0 18px 44px rgba(20, 32, 51, 0.085); }
.redeem-action { width: 100%; }
.key-input { font-family: var(--mono); }
.redeem-key-help { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.redeem-key-help-title { display: flex; align-items: center; gap: 7px; color: var(--blue); }
.redeem-key-help-title .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.redeem-key-help-title strong { color: var(--navy); font-size: 12px; }
.redeem-key-help p { margin: 4px 0 0 23px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.trust-strip { width: 100%; max-width: 700px; margin: 20px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.75); }
.trust-item { min-width: 0; padding: 18px 20px; text-align: center; }
.trust-item + .trust-item { border-left: 1px solid var(--line); }
.trust-item strong { display: block; margin-bottom: 3px; font-size: 12px; }
.trust-item span { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }

.field { display: grid; gap: 7px; margin-bottom: 15px; }
.field label { color: #495b73; font-size: 12px; font-weight: 700; }
.field small { color: var(--faint); font-size: 11px; }
.input, .select, .textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fbfdff;
  color: var(--ink);
  padding: 10px 12px;
}
.input::placeholder, .textarea::placeholder { color: #9aa6b6; }
.input[aria-invalid="true"] { border-color: var(--red); background: #fffafa; box-shadow: 0 0 0 3px rgba(180, 67, 59, 0.1); }
.code-input { min-height: 56px; font: 700 18px var(--mono); text-transform: uppercase; letter-spacing: 0; }
.textarea { min-height: 180px; resize: vertical; line-height: 1.65; }
.form-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.feedback { margin-top: 14px; padding: 11px 13px; border-radius: 7px; font-size: 12px; }
.feedback.error { background: var(--red-soft); color: #862f29; border: 1px solid #efc6c2; }
.feedback.success { background: var(--green-soft); color: #0d614d; border: 1px solid #b8dfd2; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.overview-metrics { grid-template-columns: repeat(7, minmax(128px, 1fr)); }
.metric { padding: 16px; min-height: 132px; }
.metric-label { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.metric-value { margin-top: 9px; font: 700 24px var(--mono); overflow-wrap: anywhere; }
.metric-note { margin-top: 8px; color: var(--faint); font-size: 11px; }
.metric-blue { color: var(--blue); }
.metric-green { color: #1d9b82; }
.metric-amber { color: #bd7a0a; }
.metric-red { color: #cb4a43; }
.code-metrics, .key-metrics, .user-metrics { margin-top: 4px; }
.insight-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: -4px 0 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.insight-item { min-width: 0; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.insight-item + .insight-item { border-left: 1px solid var(--line); }
.insight-item span { color: var(--muted); font-size: 11px; }
.insight-item strong { min-width: 0; font: 700 12px var(--mono); text-align: right; overflow-wrap: anywhere; }
.status-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-badge.ok { color: #0c624d; background: var(--green-soft); }
.status-badge.warn { color: #7b5015; background: var(--amber-soft); }
.status-badge.bad { color: #842f29; background: var(--red-soft); }
.status-badge.neutral { color: #52647c; background: #edf1f6; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 16px; }
.ops-command-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: 16px; margin-bottom: 16px; }
.panel { padding: 16px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 15px; }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 7px; background: #edf1f6; }
.segmented button { min-width: 42px; min-height: 30px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 11px; }
.segmented button.active { background: #fff; color: var(--blue); font-weight: 700; box-shadow: 0 1px 3px rgba(20, 32, 51, 0.12); }
.chart {
  height: 210px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 14px 4px 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.chart-col { min-width: 0; height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.chart-bar { width: min(28px, 76%); min-height: 4px; border-radius: 4px 4px 0 0; background: #a9c7e9; transform-origin: bottom; }
.chart-bar.peak { background: var(--blue); }
.chart-label { color: var(--faint); font: 10px var(--mono); white-space: nowrap; }
.chart.chart-empty { align-items: center; justify-content: center; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 7px; background: var(--surface-soft); }
.chart-empty-message { color: var(--muted); font-size: 12px; text-align: center; }
.empty { color: var(--muted); font-size: 12px; padding: 18px 0; text-align: center; }

.usage-summary { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; }
.ring {
  --usage: 0deg;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: conic-gradient(var(--blue) var(--usage), #e6edf5 0);
  display: grid;
  place-items: center;
  position: relative;
}
.ring::after { content: ""; width: 102px; height: 102px; border-radius: 50%; background: var(--surface); }
.ring-copy { position: absolute; z-index: 1; text-align: center; }
.ring-copy strong { display: block; font: 700 22px var(--mono); }
.ring-copy small { color: var(--muted); font-size: 10px; }
.fact-list { display: grid; gap: 8px; }
.fact { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #cfe0f2; border-left: 3px solid var(--blue); border-radius: 6px; background: var(--blue-soft); font-size: 12px; }
.fact span { color: var(--muted); }
.fact b { color: var(--blue-hover); font-family: var(--mono); text-align: right; }
.quota-overview-panel { display: grid; gap: 16px; }
.quota-section { min-width: 0; }
.quota-section + .quota-section { padding-top: 15px; border-top: 1px solid var(--line); }
.quota-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.quota-section-head h3 { margin: 0; color: var(--navy); font-size: 13px; }
.quota-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.package-usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quota-metric { min-width: 0; min-height: 92px; padding: 12px; border: 1px solid var(--line); border-top: 3px solid currentColor; border-radius: 7px; }
.quota-metric span, .quota-metric small { display: block; }
.quota-metric span { color: var(--muted); font-size: 10px; }
.quota-metric strong { display: block; margin-top: 5px; color: currentColor; font: 700 17px var(--mono); overflow-wrap: anywhere; }
.quota-metric small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.quota-metric.included { color: var(--purple); border-color: #d8cff7; background: var(--purple-soft); }
.quota-metric.used { color: var(--teal); border-color: #bfe5e1; background: var(--teal-soft); }
.quota-metric.overage { color: #8b5350; border-color: #ead0cd; background: #fff8f7; }
.quota-metric.overage.is-active { color: #a52e28; border-color: #e3a6a1; background: var(--red-soft); box-shadow: inset 0 0 0 1px rgba(180, 67, 59, 0.08); }
.quota-metric.overage.is-active span, .quota-metric.overage.is-active small { color: #8e332d; font-weight: 700; }
.quota-metric.overage.is-active strong::before { content: "超出 "; font: 700 10px var(--sans); }
.package-progress { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.package-progress-head, .package-progress-scale { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.package-progress-head { color: var(--muted); font-size: 12px; }
.package-progress-head strong { color: #315578; font: 700 12px var(--mono); }
.package-progress-track { position: relative; height: 10px; margin: 8px 0 6px; border-radius: 999px; background: #e7eef6; }
.package-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7aaee3, var(--blue)); transition: width 240ms ease; }
.package-progress-track span.overage { background: repeating-linear-gradient(135deg, #b4433b 0 7px, #d76159 7px 14px); }
.package-progress-track i { position: absolute; top: -3px; bottom: -3px; left: 100%; width: 2px; border-radius: 1px; background: var(--navy); transform: translateX(-1px); }
.package-progress-scale { color: var(--faint); font: 12px var(--mono); }
.quota-explainer { margin-top: 10px; padding: 9px 10px; border-left: 3px solid #91b7df; background: var(--blue-soft); color: #456584; font-size: 11px; line-height: 1.55; }

.operations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.operations-panel { min-height: 248px; }
.todo-list { display: grid; gap: 8px; }
.todo-item {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.todo-item:hover { border-color: #9bbbe0; background: #fbfdff; }
.todo-item:active { transform: translateY(1px); }
.todo-item.tone-red { border-left-color: var(--red); }
.todo-item.tone-amber { border-left-color: var(--amber); }
.todo-item.tone-blue { border-left-color: var(--blue); }
.todo-item.tone-gray { border-left-color: #8797a9; }
.todo-item span { min-width: 0; display: block; }
.todo-item strong { display: block; overflow: hidden; color: var(--navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.todo-item small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.todo-item b { flex: 0 0 auto; color: var(--blue); font-size: 11px; }
.risk-panel .distribution-bar { margin-top: 20px; }
.risk-bar { min-height: 22px; }
.panel-total { color: var(--navy); font: 700 12px var(--mono); }
.quality-summary { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; }
.mini-ring {
  --rate: 0deg;
  position: relative;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#1d9b82 var(--rate), #e4ebf3 0);
}
.mini-ring::after { content: ""; position: absolute; width: 82px; height: 82px; border-radius: 50%; background: #fff; }
.mini-ring > div { position: relative; z-index: 1; text-align: center; }
.mini-ring strong { display: block; color: var(--navy); font: 700 18px var(--mono); }
.mini-ring small { color: var(--muted); font-size: 10px; }
.quality-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quality-facts > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.quality-facts span { display: block; color: var(--muted); font-size: 10px; }
.quality-facts b { display: block; overflow: hidden; margin-top: 3px; color: var(--navy); font: 700 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.distribution-bar { min-height: 18px; display: flex; gap: 3px; overflow: hidden; margin: 24px 0 18px; border-radius: 4px; background: #e4ebf3; }
.distribution-segment { min-width: 5px; }
.distribution-empty { width: 100%; display: grid; place-items: center; color: var(--muted); font-size: 10px; }
.distribution-segment.tone-blue, .legend-dot.tone-blue, .bullet-fill.tone-blue { background: var(--blue); }
.distribution-segment.tone-green, .legend-dot.tone-green, .bullet-fill.tone-green { background: #1d9b82; }
.distribution-segment.tone-amber, .legend-dot.tone-amber, .bullet-fill.tone-amber { background: #bd7a0a; }
.distribution-segment.tone-red, .legend-dot.tone-red, .bullet-fill.tone-red { background: #cb4a43; }
.distribution-segment.tone-gray, .legend-dot.tone-gray, .bullet-fill.tone-gray { background: #8797a9; }
.distribution-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.distribution-legend-item { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.distribution-legend-item span { min-width: 0; display: flex; align-items: center; gap: 6px; }
.distribution-legend-item b { color: var(--navy); font: 700 10px var(--mono); white-space: nowrap; }
.legend-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 2px; }
.bullet-list { display: grid; gap: 12px; }
.bullet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.bullet-head b { color: var(--navy); font: 700 10px var(--mono); }
.bullet-track { height: 6px; overflow: hidden; border-radius: 3px; background: #e4ebf3; }
.bullet-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; }
.operations-activity { margin-top: 16px; }
.scheduler-summary-panel { margin-top: 16px; padding: 12px 14px; box-shadow: none; }
.scheduler-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.scheduler-summary > div { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--navy); }
.scheduler-summary small { flex-basis: 100%; margin-left: 15px; color: var(--muted); font-size: 11px; }

.admin-layout.is-overview-active .admin-main,
.admin-main:has(.overview-view.active) {
  max-width: 1580px;
  padding: 24px 34px 42px;
}
.overview-view .page-title-row {
  align-items: center;
  margin-bottom: 12px;
}
.overview-view .eyebrow {
  margin-bottom: 3px;
  font-size: 10px;
}
.overview-view .page-title-row h1 {
  margin-bottom: 2px;
  font-size: 22px;
}
.overview-view .page-title-row p {
  max-width: 760px;
  font-size: 12px;
}
.overview-view .page-title-row .btn-small {
  min-height: 34px;
  padding: 6px 10px;
}
.overview-metrics {
  grid-template-columns: repeat(7, minmax(108px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.overview-metrics .metric {
  min-height: 98px;
  padding: 12px 13px;
}
.overview-metrics .metric-label {
  font-size: 11px;
}
.overview-metrics .metric-value {
  margin-top: 5px;
  font-size: 22px;
  line-height: 1.15;
}
.overview-metrics .metric-note {
  min-height: 30px;
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.45;
}
.overview-metrics .segmented-progress.compact {
  max-width: none;
  margin-top: 6px;
  gap: 3px;
}
.overview-metrics .segmented-progress.compact span {
  height: 4px;
}
.overview-view .ops-command-grid,
.overview-view .dashboard-grid,
.overview-view .operations-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}
.overview-view .ops-command-grid {
  margin-bottom: 12px;
}
.overview-view .operations-grid {
  margin-top: 12px;
}
.overview-view .panel {
  padding: 14px 16px;
}
.overview-view .panel-head {
  align-items: flex-start;
  margin-bottom: 10px;
}
.overview-view .panel-head h2,
.overview-view .panel-head h3 {
  font-size: 14px;
}
.overview-view .panel-head p {
  margin-top: 1px;
  font-size: 10.5px;
}
.overview-view .panel-total,
.overview-view .status-badge {
  min-height: 22px;
  font-size: 10.5px;
}
.overview-view .todo-panel,
.overview-view .risk-panel {
  min-height: 154px;
}
.overview-view .todo-list {
  gap: 6px;
}
.overview-view .todo-item {
  min-height: 46px;
  padding: 8px 10px;
}
.overview-view .todo-item small {
  margin-top: 1px;
  font-size: 10px;
}
.overview-view .empty {
  padding: 9px 0;
}
.overview-view .risk-panel .distribution-bar,
.overview-view .distribution-bar {
  min-height: 14px;
  margin: 10px 0 10px;
}
.overview-view .distribution-empty {
  font-size: 10px;
}
.overview-view .distribution-legend {
  gap: 7px 12px;
}
.overview-view .distribution-legend-item {
  font-size: 10.5px;
}
.overview-view .chart {
  height: 132px;
  gap: 5px;
  padding-top: 6px;
}
.overview-view .chart-col {
  gap: 4px;
}
.overview-view .chart-bar {
  width: min(20px, 70%);
}
.overview-view .chart-label {
  font-size: 9px;
}
.overview-view .chart.chart-empty {
  padding: 10px;
}
.overview-view .fact-list {
  gap: 7px;
}
.overview-view .fact {
  font-size: 11px;
}
.overview-view .operations-panel {
  min-height: 154px;
}
.overview-view .bullet-list {
  gap: 8px;
}
.overview-view .bullet-head {
  margin-bottom: 3px;
  font-size: 10.5px;
}
.overview-view .bullet-track {
  height: 5px;
}
.overview-view .scheduler-summary-panel {
  margin-top: 12px;
  padding: 9px 12px;
}
.overview-view .scheduler-summary small {
  margin-left: 15px;
  font-size: 10.5px;
}
.operations-runtime { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.operations-runtime > div { min-width: 0; padding: 10px 12px; }
.operations-runtime > div + div { border-left: 1px solid var(--line); }
.operations-runtime span { display: block; color: var(--muted); font-size: 10px; }
.operations-runtime b { display: block; margin-top: 3px; color: var(--navy); font: 700 12px var(--mono); }
.operations-requests { display: grid; }
.operations-request-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 54px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.operations-request-row:last-child { border-bottom: 0; }
.request-state { min-height: 24px; display: inline-grid; place-items: center; border-radius: 5px; font-size: 10px; font-weight: 700; }
.request-state.ok { color: #0c624d; background: var(--green-soft); }
.request-state.bad { color: #842f29; background: var(--red-soft); }
.request-main { min-width: 0; }
.request-main strong { display: block; overflow: hidden; color: var(--navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.request-main small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.request-timing { min-width: 146px; text-align: right; }
.request-timing b { display: block; color: var(--navy); font: 700 11px var(--mono); }
.request-timing time { display: block; margin-top: 3px; color: var(--faint); font: 10px var(--mono); }

.activity-list { display: grid; }
.activity-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.activity-row:last-child { border-bottom: 0; }
.activity-row time { color: var(--faint); font: 10px var(--mono); }
.activity-row strong { display: block; font-size: 12px; }
.activity-row small { color: var(--muted); }

.workbench { margin-top: 16px; }
.translation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.translation-box { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); padding: 12px; }
.translation-box .textarea { border: 0; background: transparent; padding: 4px 0; outline: 0; }
.translation-output { min-height: 180px; padding: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.translation-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.translation-tools label { color: var(--muted); font-size: 11px; font-weight: 700; }
.language-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.language-row .select { width: auto; min-width: 132px; }
.workbench-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.char-counter { color: var(--faint); font: 11px var(--mono); }


.admin-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: calc(100vh - 64px); background: #eef3f9; }
.sidebar { background: var(--navy); color: #fff; padding: 20px 12px; display: flex; flex-direction: column; gap: 16px; }
.sidebar-title { padding: 2px 10px 10px; color: #9eafc4; font: 10px var(--mono); text-transform: uppercase; }
.nav-list { display: grid; gap: 4px; }
.nav-button { min-height: 42px; border: 0; border-radius: 7px; background: transparent; color: #b5c2d2; text-align: left; padding: 10px 12px; font-size: 13px; }
.nav-button:hover { color: #fff; background: var(--navy-soft); }
.nav-button.active { color: #fff; background: var(--blue); font-weight: 700; }
.sidebar-footer { margin-top: auto; border-top: 1px solid #29415b; padding: 14px 10px 0; color: #9eafc4; font-size: 11px; }
.admin-main { min-width: 0; max-width: 1460px; width: 100%; padding: 34px 38px 72px; }
.admin-view { display: none; }
.admin-view.active { display: block; }
.admin-layout[data-active-view="codes"] .admin-main,
.admin-layout[data-active-view="keys"] .admin-main,
.admin-layout[data-active-view="users"] .admin-main,
.admin-layout[data-active-view="alerts"] .admin-main {
  max-width: 1580px;
  height: calc(100vh - 64px);
  padding: 18px 28px 22px;
  overflow: hidden;
}
.admin-layout[data-active-view="codes"] .admin-view.active,
.admin-layout[data-active-view="keys"] .admin-view.active,
.admin-layout[data-active-view="users"] .admin-view.active,
.admin-layout[data-active-view="alerts"] .admin-view.active {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-layout[data-active-view="codes"] .page-title-row,
.admin-layout[data-active-view="keys"] .page-title-row,
.admin-layout[data-active-view="users"] .page-title-row,
.admin-layout[data-active-view="alerts"] .page-title-row {
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.admin-layout[data-active-view="codes"] .page-title-row .eyebrow,
.admin-layout[data-active-view="keys"] .page-title-row .eyebrow,
.admin-layout[data-active-view="users"] .page-title-row .eyebrow,
.admin-layout[data-active-view="alerts"] .page-title-row .eyebrow {
  margin-bottom: 3px;
  font-size: 10px;
}
.admin-layout[data-active-view="codes"] .page-title-row h1,
.admin-layout[data-active-view="keys"] .page-title-row h1,
.admin-layout[data-active-view="users"] .page-title-row h1,
.admin-layout[data-active-view="alerts"] .page-title-row h1 {
  margin-bottom: 2px;
  font-size: 21px;
}
.admin-layout[data-active-view="codes"] .page-title-row p,
.admin-layout[data-active-view="keys"] .page-title-row p,
.admin-layout[data-active-view="users"] .page-title-row p,
.admin-layout[data-active-view="alerts"] .page-title-row p {
  font-size: 11px;
  line-height: 1.45;
}
.admin-layout[data-active-view="codes"] .metric-grid,
.admin-layout[data-active-view="keys"] .metric-grid,
.admin-layout[data-active-view="users"] .metric-grid {
  gap: 10px;
  margin-bottom: 10px;
}
.admin-layout[data-active-view="codes"] .metric,
.admin-layout[data-active-view="keys"] .metric,
.admin-layout[data-active-view="users"] .metric {
  min-height: 82px;
  padding: 11px 13px;
}
.admin-layout[data-active-view="codes"] .metric-value,
.admin-layout[data-active-view="keys"] .metric-value,
.admin-layout[data-active-view="users"] .metric-value {
  margin-top: 4px;
  font-size: 21px;
  line-height: 1.15;
}
.admin-layout[data-active-view="codes"] .metric-note,
.admin-layout[data-active-view="keys"] .metric-note,
.admin-layout[data-active-view="users"] .metric-note {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
}
.admin-layout[data-active-view="codes"] .admin-toolbar,
.admin-layout[data-active-view="keys"] .admin-toolbar,
.admin-layout[data-active-view="users"] .admin-toolbar {
  flex: 0 0 auto;
  margin-bottom: 8px;
}
.admin-layout[data-active-view="users"] .table-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.admin-layout[data-active-view="codes"] .table-wrap,
.admin-layout[data-active-view="users"] .table-wrap {
  flex: 1 1 auto;
  max-height: none;
  overflow: auto;
}
.admin-layout[data-active-view="codes"] .table th,
.admin-layout[data-active-view="users"] .table th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.admin-layout[data-active-view="codes"] .table th,
.admin-layout[data-active-view="codes"] .table td,
.admin-layout[data-active-view="users"] .table th,
.admin-layout[data-active-view="users"] .table td {
  padding: 9px 11px;
}
.admin-layout[data-active-view="codes"] .stacked-cell strong,
.admin-layout[data-active-view="users"] .stacked-cell strong {
  font-size: 10.5px;
}
.admin-layout[data-active-view="codes"] .stacked-cell small,
.admin-layout[data-active-view="users"] .stacked-cell small {
  margin-top: 2px;
  font-size: 9.5px;
}
.admin-layout[data-active-view="codes"] .selection-bar {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 7px 10px;
}
.admin-layout[data-active-view="codes"] .selection-summary strong {
  font-size: 11px;
}
.admin-layout[data-active-view="codes"] .selection-summary span {
  font-size: 10px;
}
.admin-layout[data-active-view="codes"] .code-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 3px;
}
.code-card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: 10px 11px 9px;
  border-left: 3px solid #a9b8c8;
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(58, 91, 132, 0.05);
}
.code-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: #8fb3dc;
}
.code-card.product-monthly::before { background: #1d9b82; }
.code-card.product-onetime::before { background: #6c7b90; }
.code-card.product-unknown::before { background: #bd7a0a; }
.code-card.state-unused { border-left-color: var(--blue); background: linear-gradient(180deg, #ffffff 0, #f8fbff 100%); }
.code-card.state-used { border-left-color: #1d9b82; background: linear-gradient(180deg, #ffffff 0, #fbfffd 100%); }
.code-card.state-pending-deactivation,
.code-card.state-authorization-ended,
.code-card.state-product-mismatch { border-left-color: var(--red); background: linear-gradient(180deg, #fffafa 0, #fff4f3 100%); }
.code-card.state-channel-missing,
.code-card.state-exhausted { border-left-color: var(--amber); background: linear-gradient(180deg, #fffdf8 0, #fff9ef 100%); }
.code-card.state-revoked,
.code-card.state-invalid { border-left-color: #9d3430; background: linear-gradient(180deg, #fff8f8 0, #fff0f0 100%); }
.code-card.state-archived { border-left-color: #97a6b7; background: linear-gradient(180deg, #fafbfd 0, #f2f5f9 100%); }
.code-card.selected {
  border-color: #8fb3dc;
  box-shadow: 0 0 0 2px rgba(37, 99, 168, .12), 0 3px 10px rgba(58, 91, 132, 0.05);
}
.code-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 8px;
}
.code-card-head input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
}
.code-identity {
  min-width: 0;
}
.code-identity strong {
  display: block;
  overflow: hidden;
  color: var(--navy);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-identity small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.code-fact {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .72);
}
.code-fact span {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
}
.code-fact strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--navy);
  font: 700 10.5px/1.35 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-fact small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-fact.usage-overage {
  border-color: #efcf91;
  background: #fff8ea;
}
.code-fact.usage-overage strong { color: #a65b00; }
.code-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.code-card-actions .action-button {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 10px;
}
.code-card-actions .muted {
  grid-column: 1 / -1;
  align-self: center;
  font-size: 10px;
}
.code-empty-card {
  grid-column: 1 / -1;
}
.code-plan-legend {
  --plan: #376a58;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.plan-legend-item {
  --plan: #376a58;
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-content: center;
  padding: 7px 10px;
  color: var(--plan);
  box-shadow: inset 0 -3px var(--plan);
}
.plan-legend-item + .plan-legend-item { border-left: 1px solid var(--line); }
.plan-legend-item svg { grid-row: 1 / 3; align-self: center; width: 17px; height: 17px; stroke-width: 1.8; }
.plan-legend-item b { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.plan-legend-item small { color: var(--muted); font-size: 9px; }
.plan-m1 { --plan: #176b5d; --plan-soft: #eef8f5; }
.plan-m2 { --plan: #16778b; --plan-soft: #edf8fa; }
.plan-m3 { --plan: #315fa7; --plan-soft: #f0f4fb; }
.plan-m6 { --plan: #674da3; --plan-soft: #f5f1fb; }
.plan-m12 { --plan: #a4474e; --plan-soft: #fbf1f2; }
.plan-once { --plan: #9a671d; --plan-soft: #fbf6eb; }

.admin-layout[data-active-view="codes"] .code-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  padding-right: 3px;
}
.code-status-lane {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, .54);
}
.code-status-lane-head {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
}
.code-status-lane-head > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.code-status-lane-head > div > span:last-child { min-width: 0; }
.code-status-lane-head strong,
.code-status-lane-head small { display: block; }
.code-status-lane-head strong { color: var(--navy); font-size: 12px; }
.code-status-lane-head small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.code-status-lane-head > b { font: 800 18px var(--mono); }
.lane-unused .code-status-lane-head > b,
.lane-unused .code-lane-icon { color: #176b5d; }
.lane-used .code-status-lane-head > b,
.lane-used .code-lane-icon { color: #315fa7; }
.code-lane-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 5px;
}
.code-lane-icon svg { width: 15px; height: 15px; }
.compact-code-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 7px;
}
.compact-code-card {
  --plan: #376a58;
  --plan-soft: #f3f7f5;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--plan) 26%, var(--line));
  border-left: 3px solid var(--plan);
  border-radius: 6px;
  background: linear-gradient(145deg, var(--plan-soft), #fff 72%);
  box-shadow: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.compact-code-card::before { display: none; }
.compact-code-card:hover {
  z-index: 1;
  border-color: color-mix(in srgb, var(--plan) 58%, var(--line));
  box-shadow: 0 8px 20px rgba(22, 36, 51, .08);
  transform: translateY(-1px);
}
.compact-code-card.selected {
  border-color: var(--plan);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--plan) 18%, transparent);
}
.compact-code-card.state-revoked,
.compact-code-card.state-invalid,
.compact-code-card.state-pending-deactivation,
.compact-code-card.state-channel-missing,
.compact-code-card.state-authorization-ended,
.compact-code-card.state-product-mismatch { border-right-color: #d38b84; border-bottom-color: #d38b84; }
.compact-code-head {
  min-height: 37px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--plan) 18%, var(--line));
  background: rgba(255, 255, 255, .72);
}
.compact-code-head input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--plan);
}
.compact-code-head > strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-code-status {
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 800;
  white-space: nowrap;
}
.compact-code-status svg { width: 11px; height: 11px; }
.compact-code-status.is-unused { color: #176b5d; background: #eff8f5; }
.compact-code-status.is-used { color: #315fa7; background: #f0f4fb; }
.compact-code-status.is-problem { color: #a23c35; background: #fff3f2; }
.compact-plan-tag {
  min-height: 36px;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  color: var(--plan);
}
.compact-plan-tag > span:first-child { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 4px; }
.compact-plan-tag svg { width: 13px; height: 13px; }
.compact-plan-tag > span:nth-child(2) { overflow: hidden; font-size: 9.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.compact-plan-tag b { font: 850 10px var(--mono); }
.code-bindings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, var(--plan) 14%, var(--line)); }
.code-binding-row { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 5px; align-items: center; padding: 6px 7px; }
.code-binding-row + .code-binding-row { border-left: 1px solid color-mix(in srgb, var(--plan) 14%, var(--line)); }
.code-binding-icon { color: var(--plan); }
.code-binding-icon svg { width: 13px; height: 13px; }
.code-binding-row small,
.code-binding-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-binding-row small { color: var(--muted); font-size: 8px; }
.code-binding-row strong { margin-top: 1px; color: var(--navy); font: 700 8.5px var(--mono); }
.compact-code-foot {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 3px 5px 3px 8px;
  border-top: 1px solid color-mix(in srgb, var(--plan) 14%, var(--line));
  background: rgba(255, 255, 255, .64);
}
.compact-key-mask { min-width: 0; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.compact-code-actions { flex: 0 0 auto; display: flex; gap: 1px; }
.code-icon-button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.code-icon-button:hover { border-color: color-mix(in srgb, var(--plan) 32%, var(--line)); background: #fff; color: var(--plan); }
.code-icon-button.danger { color: #a23c35; }
.code-icon-button:disabled { opacity: .38; cursor: not-allowed; }
.code-icon-button svg { width: 13px; height: 13px; }
@media (max-width: 1500px) { .compact-code-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  .code-plan-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-legend-item:nth-child(4) { border-left: 0; }
  .plan-legend-item:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .compact-code-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .compact-code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .code-plan-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-legend-item:nth-child(odd) { border-left: 0; }
  .plan-legend-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .compact-code-grid { grid-template-columns: 1fr; }
}
.admin-layout[data-active-view="keys"] .key-pool-help {
  flex: 0 0 auto;
  margin: -2px 0 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7fbfe;
  font-size: 10.5px;
  line-height: 1.45;
}
.admin-layout[data-active-view="keys"] .scheduler-strip {
  flex: 0 0 auto;
  margin: 0 0 8px;
  padding: 7px 10px;
  gap: 7px 13px;
}
.admin-layout[data-active-view="keys"] .key-legend-strip {
  flex: 0 0 auto;
  margin: -2px 0 7px;
}
.admin-layout[data-active-view="keys"] .key-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 3px;
}
.admin-layout[data-active-view="keys"] .key-card {
  padding: 10px 11px 9px;
}
.admin-layout[data-active-view="keys"] .key-card h3 {
  font-size: 12.5px;
}
.admin-layout[data-active-view="keys"] .key-mask,
.admin-layout[data-active-view="keys"] .key-usage-head,
.admin-layout[data-active-view="keys"] .key-usage-head strong {
  font-size: 9.5px;
}
.admin-layout[data-active-view="keys"] .status-badge {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 9.5px;
}
.admin-layout[data-active-view="keys"] .key-usage-head {
  margin-top: 7px;
}
.admin-layout[data-active-view="keys"] .key-progress {
  margin: 5px 0 7px;
}
.admin-layout[data-active-view="keys"] .key-progress span {
  height: 6px;
}
.admin-layout[data-active-view="keys"] .key-meta {
  gap: 4px 7px;
  font-size: 9.5px;
}
.admin-layout[data-active-view="keys"] .key-actions {
  gap: 4px;
  margin-top: 7px;
  padding-top: 7px;
}
.admin-layout[data-active-view="keys"] .key-actions .action-button {
  min-height: 26px;
  padding: 4px 3px;
  font-size: 10px;
}
.admin-layout[data-active-view="users"] .user-cleanup-help {
  flex: 0 0 auto;
  margin: 0 0 8px;
  padding: 7px 10px;
  font-size: 10.5px;
  line-height: 1.45;
}
.admin-layout[data-active-view="users"] .user-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 3px;
}
.user-card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: 10px 11px 9px;
  border-left: 3px solid #a9b8c8;
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(58, 91, 132, 0.05);
}
.user-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: #8fb3dc;
}
.user-card.state-active { border-left-color: #1d9b82; background: linear-gradient(180deg, #ffffff 0, #fbfffd 100%); }
.user-card.state-warning { border-left-color: var(--amber); background: linear-gradient(180deg, #fffdf8 0, #fff9ef 100%); }
.user-card.state-suspended,
.user-card.state-ended { border-left-color: var(--red); background: linear-gradient(180deg, #fffafa 0, #fff4f3 100%); }
.user-card.state-no-grant { border-left-color: #bd7a0a; background: linear-gradient(180deg, #fffdf8 0, #fff9ef 100%); }
.user-card.state-removable { border-left-color: #97a6b7; background: linear-gradient(180deg, #fafbfd 0, #f2f5f9 100%); }
.user-card.state-active::before { background: #1d9b82; }
.user-card.state-warning::before,
.user-card.state-no-grant::before { background: #bd7a0a; }
.user-card.state-suspended::before,
.user-card.state-ended::before { background: #cb4a43; }
.user-card.state-removable::before { background: #97a6b7; }
.user-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
}
.user-identity { min-width: 0; }
.user-identity strong {
  display: block;
  overflow: hidden;
  color: var(--navy);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-identity small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-quota {
  margin-top: 8px;
}
.user-quota-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9.5px;
}
.user-quota-head strong {
  color: var(--navy);
  font: 700 9.5px var(--mono);
  text-align: right;
}
.user-progress {
  max-width: none;
}
.user-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.user-fact {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .72);
}
.user-fact span {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
}
.user-fact strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--navy);
  font: 700 10.5px/1.35 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-fact small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.user-card-actions .action-button {
  min-height: 28px;
  padding: 4px 5px;
  font-size: 10px;
}
.user-empty-card { grid-column: 1 / -1; }
.admin-layout[data-active-view="alerts"] .dashboard-grid {
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.admin-layout[data-active-view="alerts"] .panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px;
}
.admin-layout[data-active-view="alerts"] .panel-head {
  flex: 0 0 auto;
  margin-bottom: 8px;
}
.admin-layout[data-active-view="alerts"] .alert-list,
.admin-layout[data-active-view="alerts"] .audit-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  gap: 7px;
}
.admin-layout[data-active-view="alerts"] .alert-item {
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 9px 10px;
}
.admin-layout[data-active-view="alerts"] .alert-item p {
  font-size: 10px;
}
.admin-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-toolbar .input, .admin-toolbar .select { width: auto; min-width: 150px; }
.selection-bar {
  min-height: 58px;
  margin-top: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #b9d0e9;
  border-radius: 7px;
  background: var(--blue-soft);
}
.selection-summary { min-width: 170px; }
.selection-summary strong { display: block; color: var(--navy); font-size: 13px; }
.selection-summary span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.selection-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }

.table-card { overflow: hidden; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; min-width: 760px; border-collapse: collapse; }
.table th { padding: 13px 15px; color: #7890b0; background: #fff; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; font-weight: 700; }
.table td { padding: 13px 15px; border-bottom: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.table td.stacked-cell { min-width: 132px; white-space: normal; vertical-align: top; }
.stacked-cell strong { display: block; color: var(--navy); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.stacked-cell small { display: block; margin-top: 3px; max-width: 230px; color: var(--muted); font: 10px/1.45 var(--mono); overflow-wrap: anywhere; }
.stacked-cell.usage-overage strong { color: #a65b00; }
.inline-cell-actions { display: flex; gap: 8px; margin-top: 5px; }
.table-link-button { min-height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--blue); font-size: 10px; cursor: pointer; touch-action: manipulation; }
.table-link-button:hover { text-decoration: underline; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fbfcfe; }
.table tbody tr.selected td { background: #edf5fd; }
.table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); }
.action-button { min-height: 34px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--muted); padding: 6px 9px; font-size: 11px; }
.action-button:hover { border-color: #8fb3dc; color: var(--blue); }
.action-button.action-danger { color: var(--red); border-color: #efc8c4; background: var(--red-soft); }
.action-button.action-danger:hover { border-color: var(--red); color: #a72f26; }
.action-button:disabled:hover { border-color: var(--line-strong); color: var(--muted); }

.key-toolbar { margin-bottom: 12px; }
.key-toolbar .input { flex: 1 1 260px; min-width: 220px; }
.key-toolbar .select { flex: 0 1 154px; min-width: 138px; }
.key-toolbar .muted { margin-left: auto; white-space: nowrap; font-size: 11px; }
.scheduler-strip {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin: -4px 0 12px;
  padding: 10px 12px;
  border: 1px solid #c9dceb;
  border-radius: 7px;
  background: #f7fbfe;
  color: var(--muted);
  font-size: 11px;
}
.scheduler-strip b { color: var(--navy); font: 700 11px var(--mono); }
.scheduler-title { display: flex; align-items: center; gap: 7px; margin-right: auto; color: var(--navy); }
.scheduler-dot { width: 7px; height: 7px; border-radius: 50%; background: #1d9b82; box-shadow: 0 0 0 4px rgba(29, 155, 130, 0.12); }
.key-legend-strip {
  display: flex;
  align-items: center;
  gap: 6px 12px;
  flex-wrap: wrap;
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 10.5px;
}
.key-legend-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.legend-swatch {
  width: 18px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #9aa8ba;
}
.legend-swatch.product-monthly,
.legend-swatch.state-active { background: #1d9b82; }
.legend-swatch.product-onetime { background: #6c7b90; }
.legend-swatch.product-unknown,
.legend-swatch.state-warning { background: #bd7a0a; }
.legend-swatch.state-bad { background: #cb4a43; }
.legend-swatch.state-disabled { background: #97a6b7; }
.key-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.key-card {
  min-width: 0;
  padding: 14px 15px 12px;
  border-radius: 7px;
  border-left: 3px solid #a9c7e7;
  box-shadow: 0 3px 10px rgba(58, 91, 132, 0.05);
  position: relative;
  overflow: hidden;
}
.key-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: #8fb3dc;
}
.key-card.product-monthly::before { background: #1d9b82; }
.key-card.product-onetime::before { background: #6c7b90; }
.key-card.product-unknown::before { background: #bd7a0a; }
.key-card.state-active { border-left-color: #1d9b82; background: linear-gradient(180deg, #ffffff 0, #fbfffd 100%); }
.key-card.state-warning { border-left-color: var(--amber); background: linear-gradient(180deg, #fffdf8 0, #fff9ef 100%); }
.key-card.state-exhausted { border-left-color: var(--red); background: linear-gradient(180deg, #fffafa 0, #fff4f3 100%); }
.key-card.state-invalid { border-left-color: #9d3430; background: linear-gradient(180deg, #fff8f8 0, #fff0f0 100%); }
.key-card.state-mismatch { border-color: #ef9a9a; border-left-color: var(--red); box-shadow: 0 0 0 1px rgba(190, 45, 45, .08); }
.key-card.state-disabled { border-left-color: #97a6b7; background: linear-gradient(180deg, #fafbfd 0, #f2f5f9 100%); }
.key-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.key-identity { min-width: 0; display: flex; align-items: flex-start; flex-direction: column; gap: 4px; }
.key-card h3 { overflow: hidden; margin: 0 0 2px; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.key-mask { color: var(--muted); font: 11px var(--mono); }
.key-product-badge,
.key-state-badge {
  border: 1px solid transparent;
  white-space: nowrap;
}
.key-product-badge.product-monthly {
  color: #0c624d;
  border-color: #b6e1d4;
  background: #e8f7f1;
}
.key-product-badge.product-onetime {
  color: #334155;
  border-color: #c9d3df;
  background: #eef2f7;
}
.key-product-badge.product-unknown {
  color: #7b5015;
  border-color: #efcf91;
  background: #fff6e6;
}
.key-state-badge.key-state-active {
  color: #0c624d;
  border-color: #a9dbc9;
  background: var(--green-soft);
}
.key-state-badge.key-state-warning {
  color: #7b5015;
  border-color: #edca86;
  background: var(--amber-soft);
}
.key-state-badge.key-state-exhausted {
  color: #842f29;
  border-color: #efb9b4;
  background: var(--red-soft);
}
.key-state-badge.key-state-invalid {
  color: #7c2724;
  border-color: #e29a95;
  background: #fff0ef;
}
.key-state-badge.key-state-disabled {
  color: #536171;
  border-color: #cbd5e1;
  background: #edf1f6;
}
.segmented-progress { --progress-color: var(--blue); display: grid; grid-template-columns: repeat(20, minmax(3px, 1fr)); gap: 4px; width: 100%; }
.segmented-progress span { height: 14px; border-radius: 3px; background: #dfe7f2; box-shadow: inset 0 0 0 1px rgba(112, 139, 171, 0.06); }
.segmented-progress span.is-filled { background: var(--progress-color); box-shadow: 0 1px 2px color-mix(in srgb, var(--progress-color) 26%, transparent); }
.segmented-progress.tone-blue { --progress-color: var(--blue); }
.segmented-progress.tone-green { --progress-color: #1d9b82; }
.segmented-progress.tone-amber { --progress-color: #bd7a0a; }
.segmented-progress.tone-red { --progress-color: #cb4a43; }
.segmented-progress.compact { grid-template-columns: repeat(10, minmax(4px, 1fr)); gap: 3px; max-width: 230px; margin-top: 10px; }
.segmented-progress.compact span { height: 5px; border-radius: 2px; }
.segmented-progress.is-unknown span { background: repeating-linear-gradient(135deg, #e3eaf3 0 4px, #f3f6fa 4px 8px); }
.metric-progress { min-height: 5px; }
.key-usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.key-usage-head strong { color: #526889; font: 700 11px var(--mono); text-align: right; }
.key-progress { margin: 7px 0 10px; gap: 3px; }
.key-progress span { height: 8px; border-radius: 2px; }
.key-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; color: var(--muted); font-size: 10px; }
.key-meta-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-checked, .key-routing { grid-column: 1 / -1; }
.key-routing { color: #617b99; }
.compact-select { min-height: 30px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); padding: 4px 7px; font-size: 11px; }
.key-check-error { flex-basis: 100%; padding: 6px 8px; border-radius: 6px; background: var(--red-soft); color: var(--red); white-space: normal; }
.key-check-error { grid-column: 1 / -1; }
.key-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); }
.key-actions .action-button { min-width: 0; min-height: 30px; padding: 5px 4px; }
.key-actions .action-button:disabled { opacity: 0.65; background: #f2f4f7; cursor: not-allowed; }
.key-empty-card { grid-column: 1 / -1; border-left: 1px solid var(--line); }
.table-actions { display: flex; align-items: center; gap: 6px; }
.key-pool-help { margin: -5px 0 16px; }
.user-cleanup-help {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 16px;
  padding: 10px 12px;
  border: 1px solid #c8dced;
  border-radius: 7px;
  background: #f3f8fd;
  color: #526889;
  font-size: 12px;
  line-height: 1.6;
}
.user-cleanup-help .info-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font: 700 11px var(--mono);
}

.alert-list, .audit-list { display: grid; gap: 9px; }
.alert-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.alert-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-top: 5px; }
.alert-mark.subscription { background: var(--blue); }
.alert-mark.critical { background: var(--red); }
.alert-mark.key-risk { background: var(--amber); }
.alert-item strong { display: block; font-size: 12px; }
.alert-item p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.alert-item time { color: var(--faint); font: 10px var(--mono); }

.login-page { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 24px; background: var(--navy); }
.login-card { width: min(390px, 100%); padding: 26px; background: #fff; border-radius: 8px; }
.login-card h1 { margin: 0 0 5px; font-size: 21px; }
.login-card > p { margin: 0 0 20px; color: var(--muted); font-size: 12px; }
.login-card .btn { width: 100%; }
.dashboard-primary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.dashboard-primary-grid > .panel { min-height: 0; }
.quota-dashboard-grid { grid-template-columns: minmax(0, 2.14fr) minmax(330px, .76fr); grid-template-areas: "package official"; align-items: stretch; }
.quota-dashboard-grid > .official-dashboard { grid-area: official; }
.quota-dashboard-grid > .package-dashboard { grid-area: package; }
.quota-dashboard { min-width: 0; display: grid; grid-template-rows: 50px 372px 82px 88px; gap: 10px; border-top: 3px solid var(--blue); }
.package-dashboard { border-top-color: var(--purple); }
.quota-dashboard .panel-head { margin-bottom: 0; }
.quota-dashboard .panel-head .eyebrow { margin-bottom: 3px; font-size: 9px; }
.quota-dashboard .quota-panel-head { padding-bottom: 11px; }
.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.panel-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: var(--teal-soft); color: var(--teal); }
.panel-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
#dashboard-section { max-width: 1480px; padding: 12px 20px; }
.page-title-row { align-items: center; }
#dashboard-section > .page-title-row { min-height: 48px; margin-bottom: 8px; padding: 0 4px; }
#dashboard-section > .page-title-row .eyebrow { font-size: 12px; }
#dashboard-section > .page-title-row h1 { font-size: 24px; }
#dashboard-section > .page-title-row .header-actions { gap: 8px; }
#dashboard-section > .page-title-row .btn { min-height: 40px; background: rgba(255,255,255,.78); font-size: 13px; }
.official-dashboard { padding: 20px 22px 14px; overflow: hidden; background: #f7fbfa; }
.official-dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.official-title-group { display: flex; align-items: center; gap: 14px; }
.official-dashboard-head h2 { margin: 0; color: var(--navy); font-size: 20px; }
.official-sync-button { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 2px 5px 8px; border: 0; background: transparent; color: #536987; font-size: 13px; font-weight: 700; }
.official-sync-button .ui-icon { width: 18px; height: 18px; transition: transform 220ms ease; }
.official-sync-button:hover { color: var(--blue); }
.official-sync-button:hover .ui-icon { transform: rotate(45deg); }
.official-sync-button:focus-visible { border-radius: 5px; outline: 2px solid var(--blue); outline-offset: 2px; }
.official-sync-button:disabled .ui-icon { animation: official-sync-spin 800ms linear infinite; }
@keyframes official-sync-spin { to { transform: rotate(325deg); } }
.official-quota-body { position: relative; min-height: 0; display: grid; grid-template-rows: 248px minmax(0, 1fr); grid-template-columns: 1fr; gap: 10px; padding: 10px 0 0; isolation: isolate; }
.official-quota-body::before { content: none; }
.official-remaining-ring { width: min(248px, 85%); height: auto; aspect-ratio: 1; justify-self: center; background: conic-gradient(var(--teal) var(--usage), #e8edf3 0); box-shadow: 0 14px 38px rgba(8, 125, 121, .08); }
.official-remaining-ring::after { width: 76%; height: 76%; }
.official-remaining-ring .ring-copy { width: 72%; }
.official-remaining-ring .ring-copy strong { color: #0daf91; font-size: 26px; }
.official-remaining-ring .ring-copy b { display: block; margin-top: 8px; color: #071d40; font: 700 clamp(25px, 2.35vw, 34px)/1.05 var(--mono); overflow-wrap: anywhere; }
.official-remaining-ring .ring-copy small { display: block; margin-top: 7px; color: var(--navy); font-size: 13px; font-weight: 700; }
.official-quota-stats { min-height: 0; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; }
.official-quota-stats div { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; border: 1px solid var(--official-metric-border); border-radius: 7px; background: var(--official-metric-fill); }
.official-quota-stats dt { display: inline-flex; align-items: center; gap: 9px; color: #526985; font-size: 13px; font-weight: 700; }
.official-quota-stats dt .ui-icon { color: var(--teal); }
.official-quota-stats dd { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 5px; margin: 0; color: #081d40; text-align: right; }
.official-quota-stats strong { font: 700 clamp(16px, 1.4vw, 20px)/1 var(--mono); overflow-wrap: anywhere; }
.official-quota-stats small { color: #60738f; font-size: 12px; }
.official-key-row { min-height: 0; display: grid; grid-template-columns: 1fr; align-content: center; gap: 7px; padding: 9px 12px; border: 1px solid #d7e1ea; border-radius: 7px; background: #f0f4f7; }
.official-key-row > strong { display: inline-flex; align-items: center; gap: 7px; color: #243b59; font-size: 13px; white-space: nowrap; }
.official-key-row .state-dot { flex: 0 0 auto; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.official-key-field { min-width: 0; min-height: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1px solid #26354a; border-radius: 6px; background: #0b1220; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.official-key-field > div { min-width: 0; padding: 8px 10px 6px; overflow-x: auto; overflow-y: hidden; color: #f8fafc; font-size: 12px; scrollbar-color: #51627a transparent; scrollbar-width: thin; text-overflow: clip; white-space: nowrap; }
.official-key-field > div::-webkit-scrollbar { height: 4px; }
.official-key-field > div::-webkit-scrollbar-thumb { border-radius: 999px; background: #51627a; }
.official-key-field > div:focus-visible { outline: 2px solid #8bb7e5; outline-offset: -3px; }
.official-copy-button { align-self: stretch; min-width: 68px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-left: 1px solid #26354a; background: #111c2e; color: #d9e6f5; font-size: 12px; font-weight: 700; }
.official-copy-button .ui-icon { width: 14px; height: 14px; }
.official-copy-button:hover { background: #1b2b43; color: #fff; }
.official-copy-button:focus-visible { position: relative; outline: 2px solid var(--blue); outline-offset: -3px; }
.official-meta-row { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; border: 0; background: transparent; }
.official-meta-row > div { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--official-metric-border); border-radius: 7px; background: var(--official-metric-fill); }
.official-meta-row > div + div { padding-left: 12px; border-left: 1px solid var(--official-metric-border); }
.official-meta-row .ui-icon { color: #607897; }
.official-meta-row span { min-width: 0; display: grid; gap: 2px; color: #657791; font-size: 12px; }
.official-meta-row strong { min-width: 0; color: #263d5d; font: 700 13px/1.4 var(--mono); overflow-wrap: anywhere; }
.package-dashboard { position: relative; padding: 20px 14px 14px; overflow: hidden; background: #fff; }
.package-panel-head { height: 100%; align-items: center; padding: 0 12px; }
.package-title-copy { min-width: 0; flex: 1; }
.title-with-icon { display: flex; align-items: center; gap: 14px; }
.package-panel-icon { background: #efebf8; color: var(--purple); }
.package-title-text { min-width: 0; display: flex; align-items: center; gap: 14px; }
.package-title-copy h2 { margin: 0; color: var(--navy); font-size: 20px; line-height: 1.15; }
.package-panel-head .status-badge { flex: 0 0 auto; font-size: 12px; }
.package-dashboard > #package-overage-badge { display: none; }
.package-rings-grid { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 12px; }
.package-ring-metric { min-width: 0; min-height: 0; display: grid; grid-template-rows: 248px minmax(0, 1fr); justify-items: center; gap: 12px; padding: 16px 0 0; background: transparent; text-align: center; }
.package-ring {
  --ring-progress: 0deg;
  --ring-color: var(--purple);
  position: relative;
  width: min(248px, 88%);
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) var(--ring-progress), #e4eaf1 0);
}
.package-ring::after { position: absolute; width: 76%; height: 76%; border-radius: 50%; background: #fff; content: ''; }
.package-ring.has-trace::before { position: absolute; top: 3px; left: 50%; z-index: 2; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--ring-color); box-shadow: 0 1px 4px rgba(17, 34, 56, .16); content: ''; transform: translateX(-50%); }
.package-ring > div { position: relative; z-index: 1; width: 78%; text-align: center; }
.package-ring em { display: block; color: var(--ring-color); font: 700 26px/1 var(--mono); font-style: normal; }
.package-ring strong { display: block; margin-top: 8px; color: #071d40; font: 700 clamp(25px, 2.1vw, 32px)/1.05 var(--mono); overflow-wrap: anywhere; }
.package-ring small { display: block; margin-top: 7px; color: var(--navy); font-size: 13px; font-weight: 700; }
.package-ring.is-empty { background: conic-gradient(#dfe6ee 360deg, #dfe6ee 0); }
.package-ring-metric.used .package-ring { --ring-color: var(--usage-blue); }
.package-ring-metric.overage .package-ring { --ring-color: #7d8999; }
.package-ring-metric.overage.is-active .package-ring { --ring-color: var(--red); }
.package-metric-stats { width: 100%; min-height: 0; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; }
.package-metric-stats > div { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 9px 11px; border: 1px solid #dfe1eb; border-radius: 7px; background: #f2f2f8; }
.package-metric-stats dt { min-width: 0; display: inline-flex; align-items: center; gap: 7px; color: #526985; font-size: 13px; font-weight: 700; text-align: left; }
.package-metric-stats dt .ui-icon { width: 16px; height: 16px; color: #61799b; }
.package-ring-metric.included .package-metric-stats dt .ui-icon { color: var(--purple); }
.package-ring-metric.used .package-metric-stats > div { border-color: var(--usage-blue-border); background: var(--usage-blue-soft); }
.package-ring-metric.used .package-metric-stats dt .ui-icon { color: var(--usage-blue); }
.package-ring-metric.overage .package-metric-stats > div { border-color: var(--overage-border); background: var(--overage-soft); }
.package-ring-metric.overage .package-metric-stats dt .ui-icon { color: var(--red); }
.package-metric-stats dd { min-width: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; margin: 0; color: var(--navy); text-align: right; }
.package-metric-stats dd strong { max-width: 132px; font: 700 clamp(16px, 1.4vw, 20px)/1 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#package-period-brief { max-width: none; overflow: visible; color: var(--navy); font: 700 14px/1.35 var(--sans); overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
#package-overage-status { max-width: none; color: var(--navy); font: 700 14px/1.35 var(--sans); overflow: visible; text-overflow: clip; white-space: normal; }
.package-metric-stats dd small { color: #60738f; font-size: 12px; }
.package-ring-metric.overage.is-active .package-metric-stats > div { border-color: #e3a6a1; background: var(--red-soft); }
.package-ring-metric.overage.is-active .package-metric-stats dt,
.package-ring-metric.overage.is-active .package-metric-stats dd { color: #972f29; }
.package-dashboard .package-progress { height: 100%; display: grid; align-content: center; margin: 0; padding: 10px 14px; border: 1px solid var(--package-neutral-border); background: var(--package-neutral-fill); font-size: 12px; }
.package-dashboard .package-progress-track { overflow: visible; }
.package-dashboard .package-progress-track > span { position: absolute; top: 0; bottom: 0; display: block; width: 0; height: 100%; border-radius: 999px; transition: left 240ms ease, width 240ms ease; }
#package-progress-included { left: 0; background: var(--usage-blue); }
#package-progress-overage { left: 0; background: repeating-linear-gradient(135deg, #b4433b 0 6px, #d76159 6px 12px); }
.package-dashboard .package-progress-track { height: 8px; margin-block: 7px 5px; }
.bound-key-panel, .package-panel { display: flex; flex-direction: column; }
.bound-key-panel .panel-head, .package-panel .panel-head { margin-bottom: 10px; }
.key-context-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.key-context-strip span { display: inline-flex; align-items: center; gap: 5px; }
.key-context-strip span + span::before { width: 3px; height: 3px; border-radius: 50%; background: #a9b8c8; content: ''; }
.key-context-strip .state-dot { width: 7px; height: 7px; margin: 0; background: var(--green); box-shadow: 0 0 0 3px rgba(24, 139, 91, .1); }
.key-context-strip b { color: #34516d; font-weight: 700; }
.deepl-key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.deepl-key-row .code-output {
  min-width: 0;
  min-height: 44px;
  max-height: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.45;
}
.deepl-key-row .btn { min-height: 44px; }
.package-facts { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--package-neutral-border); border-radius: 7px; overflow: hidden; }
.package-facts > .package-fact { min-width: 0; min-height: 88px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 14px; background: var(--package-neutral-fill); }
.package-facts > .package-fact + .package-fact { border-left: 1px solid var(--line); }
.package-facts .ui-icon { color: #61799b; }
.package-facts .fact-copy { min-width: 0; }
.package-facts .fact-label { display: block; color: #657791; font-size: 12px; font-weight: 600; }
.package-facts .fact-value,
.package-facts .period-dates { display: block; margin-top: 5px; color: var(--navy); font: 700 13px/1.45 var(--sans); overflow-wrap: anywhere; }
.package-facts .fact-value.mono { font-family: var(--mono); }
.package-facts .period-dates { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.package-facts .period-dates span { color: inherit; font: inherit; }
.package-facts .period-dates i { color: #8a99ad; font-style: normal; font-weight: 500; }
.package-facts small { display: block; margin-top: 3px; color: #526985; font-size: 12px; line-height: 1.45; }
.package-facts small b { color: var(--navy); font: 700 12px var(--mono); }
.package-alert { margin-top: 10px; padding: 8px 10px; border: 1px solid #d7e2ef; border-radius: 6px; background: #f5f9fd; color: #34516d; font-size: 11px; line-height: 1.5; }
.package-alert.warning { border-color: #f0cc83; background: #fff9eb; color: #7b5400; }
.package-alert.critical { border-color: #efb1b1; background: #fff4f4; color: #9e2626; }
.quota-overview-panel { margin-bottom: 0; }
.quota-panel-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.quota-sections-grid { display: grid; grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr); gap: 24px; }
.quota-sections-grid .quota-section + .quota-section { padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--line); }
.usage-trend-panel { margin-top: 4px; padding: 12px 20px 10px; border-top: 3px solid #4c78b1; }
.trend-panel-head { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; align-items: center; gap: 24px; margin-bottom: 10px; }
.trend-title-group { min-width: 0; display: flex; align-items: center; gap: 14px; }
.trend-title-group > div { min-width: 0; }
.trend-panel-icon { background: #eaf1fa; color: #3f70aa; }
.trend-panel-head h2 { color: var(--navy); font-size: 18px; }
.trend-panel-head p { font-size: 12px; }
.trend-kpis { display: grid; grid-template-columns: repeat(3, minmax(72px, auto)); align-items: center; margin: 0; }
.trend-kpis > div { min-width: 0; padding: 0 18px; text-align: right; }
.trend-kpis > div + div { border-left: 1px solid var(--line); }
.trend-kpis dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.trend-kpis dd { margin: 3px 0 0; color: var(--navy); font: 700 16px/1 var(--mono); }
.trend-range { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.trend-range-button { min-width: 56px; min-height: 40px; padding: 7px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: 700 12px var(--sans); cursor: pointer; transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.trend-range-button:hover { color: var(--navy); background: #fff; }
.trend-range-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.trend-range-button.active { background: #fff; color: var(--blue); box-shadow: 0 1px 4px rgba(17, 47, 78, .12); }
.trend-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-line { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--blue); }
.legend-line.dashed { border-top-style: dashed; border-top-color: #64788e; }
.usage-trend-chart { min-height: 150px; padding: 4px 2px 0; border: 1px solid var(--line); border-radius: 7px; background: #fbfdff; overflow: hidden; }
.usage-trend-chart.empty { display: grid; place-items: center; padding: 24px; border-style: dashed; }
.trend-svg { display: block; width: 100%; height: auto; min-height: 0; }
.trend-grid-line { stroke: #dce6f0; stroke-width: 1; stroke-dasharray: 3 5; }
.trend-axis-label { fill: #657991; font: 12px var(--mono); }
.trend-area { fill: rgba(45, 112, 181, .1); }
.trend-data-line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trend-target-line { stroke: #64788e; stroke-width: 1.5; stroke-dasharray: 6 6; }
.trend-bar { fill: #c6d8eb; }
.trend-bar.observed { fill: var(--blue); }
.trend-bar.zero { fill: #dce7f2; }
.trend-point { fill: #fff; stroke: var(--blue); stroke-width: 2; }
.trend-point.current { fill: var(--blue); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 1px 3px rgba(27, 92, 158, .35)); }
.chart-loading, .chart-empty-state { color: var(--muted); font-size: 12px; text-align: center; }
.chart-empty-state { display: grid; max-width: 420px; gap: 5px; line-height: 1.5; }
.chart-empty-state strong { color: var(--navy); font-size: 13px; }
.trend-summary { margin-top: 8px; color: var(--muted); font: 12px/1.5 var(--mono); }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(9, 22, 37, 0.62); }
.modal { width: min(480px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 21px; background: #fff; border-radius: 8px; box-shadow: 0 22px 60px rgba(9, 22, 37, 0.3); }
.modal.modal-wide { width: min(640px, 100%); }
.modal h2 { margin: 0 0 5px; font-size: 17px; }
.modal > p { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.key-import-mode { margin-bottom: 16px; }
.key-import-mode button { min-width: 96px; }
.batch-key-input { min-height: 190px; font-family: var(--mono); font-size: 12px; }
.key-import-result { max-height: 160px; overflow: auto; white-space: pre-line; line-height: 1.55; }
.code-output { max-height: 220px; overflow: auto; margin-top: 12px; padding: 12px; border-radius: 7px; background: var(--navy); color: #fff; font: 12px/1.8 var(--mono); white-space: pre-wrap; }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 80; max-width: min(360px, calc(100vw - 40px)); padding: 11px 14px; border-radius: 7px; background: var(--navy); color: #fff; box-shadow: var(--shadow); font-size: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1000px) {
  .redeem-layout, .dashboard-grid, .ops-command-grid { grid-template-columns: 1fr; }
  .overview-view .ops-command-grid,
  .overview-view .dashboard-grid,
  .overview-view .operations-grid { grid-template-columns: 1fr; }
  .admin-layout[data-active-view="codes"] .admin-main,
  .admin-layout[data-active-view="keys"] .admin-main,
  .admin-layout[data-active-view="users"] .admin-main,
  .admin-layout[data-active-view="alerts"] .admin-main {
    height: auto;
    min-height: calc(100vh - 64px);
    overflow: visible;
  }
  .admin-layout[data-active-view="codes"] .admin-view.active,
  .admin-layout[data-active-view="keys"] .admin-view.active,
  .admin-layout[data-active-view="users"] .admin-view.active,
  .admin-layout[data-active-view="alerts"] .admin-view.active {
    height: auto;
    overflow: visible;
  }
  .admin-layout[data-active-view="codes"] .table-card,
  .admin-layout[data-active-view="users"] .table-card,
  .admin-layout[data-active-view="codes"] .code-grid,
  .admin-layout[data-active-view="users"] .user-grid,
  .admin-layout[data-active-view="keys"] .key-grid,
  .admin-layout[data-active-view="alerts"] .alert-list,
  .admin-layout[data-active-view="alerts"] .audit-list {
    flex: none;
    overflow: visible;
  }
  .admin-layout[data-active-view="codes"] .code-grid { grid-template-columns: 1fr; }
  .admin-layout[data-active-view="users"] .user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-layout[data-active-view="keys"] .key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quota-sections-grid { grid-template-columns: 1fr; gap: 18px; }
  .quota-sections-grid .quota-section + .quota-section { padding: 18px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .insight-item:nth-child(4) { border-top: 1px solid var(--line); }
  .admin-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .admin-main { padding: 24px 20px 56px; }
  .key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1101px) {
  #dashboard-section .quota-dashboard {
    grid-template-rows: 44px 276px 76px 76px;
    gap: 8px;
  }
  #dashboard-section .official-dashboard { padding: 14px 16px 12px; }
  #dashboard-section .package-dashboard { padding: 14px 12px 12px; }
  #dashboard-section .quota-dashboard .panel-icon { width: 36px; height: 36px; }
  #dashboard-section .quota-dashboard .panel-icon svg { width: 20px; height: 20px; }
  #dashboard-section .official-dashboard-head h2,
  #dashboard-section .package-title-copy h2 { font-size: 18px; }
  #dashboard-section .official-title-group,
  #dashboard-section .title-with-icon { gap: 10px; }
  #dashboard-section .official-quota-body {
    grid-template-rows: 184px minmax(0, 1fr);
    gap: 8px;
    padding-top: 4px;
  }
  #dashboard-section .official-remaining-ring,
  #dashboard-section .package-ring { width: 184px; }
  #dashboard-section .official-remaining-ring .ring-copy strong,
  #dashboard-section .package-ring em { font-size: 21px; }
  #dashboard-section .official-remaining-ring .ring-copy b,
  #dashboard-section .package-ring strong { margin-top: 6px; font-size: 24px; }
  #dashboard-section .official-remaining-ring .ring-copy small,
  #dashboard-section .package-ring small { margin-top: 5px; font-size: 11px; }
  #dashboard-section .official-quota-stats,
  #dashboard-section .package-metric-stats { gap: 6px; }
  #dashboard-section .official-quota-stats div,
  #dashboard-section .package-metric-stats > div { padding: 6px 9px; }
  #dashboard-section .official-quota-stats dt,
  #dashboard-section .package-metric-stats dt { font-size: 11px; }
  #dashboard-section .official-quota-stats strong,
  #dashboard-section .package-metric-stats dd strong { font-size: 16px; }
  #dashboard-section .official-quota-stats small,
  #dashboard-section .package-metric-stats dd small { font-size: 10px; }
  #dashboard-section .package-ring-metric {
    grid-template-rows: 184px minmax(0, 1fr);
    gap: 8px;
    padding-top: 4px;
  }
  #dashboard-section .package-rings-grid { gap: 10px; }
  #dashboard-section .official-key-row { gap: 5px; padding: 7px 10px; }
  #dashboard-section .official-key-row > strong { font-size: 11px; }
  #dashboard-section .official-key-field,
  #dashboard-section .official-copy-button { min-height: 36px; }
  #dashboard-section .official-key-field > div { padding-block: 7px 5px; font-size: 10px; }
  #dashboard-section .official-copy-button { min-width: 62px; }
  #dashboard-section .official-meta-row { gap: 7px; }
  #dashboard-section .official-meta-row > div { gap: 7px; padding: 9px; }
  #dashboard-section .official-meta-row span { font-size: 10px; }
  #dashboard-section .official-meta-row strong { font-size: 11px; }
  #dashboard-section .package-dashboard .package-progress { padding: 8px 12px; font-size: 11px; }
  #dashboard-section .package-facts > .package-fact {
    min-height: 76px;
    gap: 8px;
    padding: 9px 10px;
  }
  #dashboard-section .package-facts .fact-label,
  #dashboard-section .package-facts small { font-size: 10px; }
  #dashboard-section .package-facts .fact-value,
  #dashboard-section .package-facts .period-dates { margin-top: 3px; font-size: 11px; }
}

@media (min-width: 1101px) and (max-height: 900px) {
  .app-header { height: 52px; }
  #dashboard-section { padding: 6px 16px 10px; }
  #dashboard-section > .page-title-row { min-height: 42px; margin-bottom: 5px; }
  #dashboard-section > .page-title-row .eyebrow { font-size: 10px; }
  #dashboard-section > .page-title-row h1 { font-size: 21px; }
  #dashboard-section > .page-title-row .btn { min-height: 36px; padding-block: 6px; }
  #dashboard-section .dashboard-primary-grid { gap: 10px; margin-bottom: 8px; }
  #dashboard-section .quota-dashboard {
    grid-template-rows: 38px 232px 62px 62px;
    gap: 6px;
  }
  #dashboard-section .official-dashboard,
  #dashboard-section .package-dashboard { padding-top: 10px; padding-bottom: 10px; }
  #dashboard-section .quota-dashboard .panel-icon { width: 32px; height: 32px; }
  #dashboard-section .quota-dashboard .panel-icon svg { width: 18px; height: 18px; }
  #dashboard-section .official-dashboard-head h2,
  #dashboard-section .package-title-copy h2 { font-size: 17px; }
  #dashboard-section .official-quota-body {
    grid-template-rows: 160px minmax(0, 1fr);
    gap: 6px;
    padding-top: 2px;
  }
  #dashboard-section .official-remaining-ring,
  #dashboard-section .package-ring { width: 160px; }
  #dashboard-section .official-remaining-ring .ring-copy strong,
  #dashboard-section .package-ring em { font-size: 19px; }
  #dashboard-section .official-remaining-ring .ring-copy b,
  #dashboard-section .package-ring strong { margin-top: 5px; font-size: 21px; }
  #dashboard-section .official-remaining-ring .ring-copy small,
  #dashboard-section .package-ring small { margin-top: 4px; font-size: 10px; }
  #dashboard-section .package-ring-metric {
    grid-template-rows: 160px minmax(0, 1fr);
    gap: 6px;
    padding-top: 2px;
  }
  #dashboard-section .official-quota-stats div,
  #dashboard-section .package-metric-stats > div { padding: 4px 8px; }
  #dashboard-section .official-key-row { padding: 5px 8px; }
  #dashboard-section .official-key-field,
  #dashboard-section .official-copy-button { min-height: 32px; }
  #dashboard-section .official-key-field > div { padding-block: 5px 4px; }
  #dashboard-section .official-meta-row > div { padding: 7px 8px; }
  #dashboard-section .package-dashboard .package-progress { padding: 6px 10px; }
  #dashboard-section .package-facts > .package-fact {
    min-height: 62px;
    padding: 6px 9px;
  }
  #dashboard-section .usage-trend-panel { margin-top: 0; padding: 8px 14px 7px; }
  #dashboard-section .trend-panel-head { gap: 16px; margin-bottom: 6px; }
  #dashboard-section .trend-title-group { gap: 9px; }
  #dashboard-section .trend-panel-icon { width: 34px; height: 34px; }
  #dashboard-section .trend-panel-head h2 { font-size: 16px; }
  #dashboard-section .trend-panel-head p,
  #dashboard-section .trend-kpis dt { font-size: 10px; }
  #dashboard-section .trend-kpis > div { padding-inline: 12px; }
  #dashboard-section .trend-kpis dd { font-size: 14px; }
  #dashboard-section .trend-range-button { min-height: 36px; }
  #dashboard-section .usage-trend-chart { min-height: 120px; }
  #dashboard-section .trend-svg { height: 120px; }
  #dashboard-section .trend-summary { margin-top: 5px; font-size: 10px; }
}

@media (max-width: 1100px) {
  #dashboard-section .quota-dashboard-grid { grid-template-columns: 1fr; grid-template-areas: "package" "official"; }
  #dashboard-section .quota-dashboard { grid-template-rows: auto auto auto auto; }
  .package-panel-head { min-height: 50px; }
  .package-dashboard .package-progress { min-height: 82px; }
  .package-facts > .package-fact { height: auto; }
}

@media (max-width: 820px) {
  .package-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-facts > .package-fact:nth-child(odd) { border-left: 0; }
  .package-facts > .package-fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  #redeem-section .btn,
  #dashboard-section > .page-title-row .btn,
  .official-sync-button,
  .official-copy-button,
  .trend-range-button { min-height: 44px; }
}

@media (max-width: 720px) {
  .app-header { height: 58px; padding: 0 14px; }
  .brand-copy small, .service-state { display: none; }
  .page-shell, #dashboard-section { padding: 22px 14px 50px; }
  .page-title-row { display: block; }
  .page-title-row .header-actions { margin-top: 12px; }
  .redeem-main, .status-panel, .panel { padding: 16px; }
  .redeem-main h1 { font-size: 22px; }
  .redeem-shell { padding-top: 36px; }
  .redeem-intro { margin-bottom: 20px; }
  .redeem-intro h1 { font-size: 25px; }
  .redeem-intro p { font-size: 14px; }
  .flow-step { display: grid; justify-items: center; gap: 5px; text-align: center; }
  .flow-step:not(:last-child)::after { left: calc(50% + 22px); right: calc(-50% + 22px); }
  .redeem-shell .redeem-main { padding: 20px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-item { padding: 13px 12px; text-align: left; }
  .trust-item + .trust-item { border-left: 0; border-top: 1px solid var(--line); }
  .metric-grid { gap: 9px; }
  .metric { min-height: 120px; padding: 13px; }
  .metric-value { font-size: 20px; }
  .dashboard-primary-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .dashboard-primary-grid > .panel { min-height: 0; }
  .quota-dashboard { display: flex; flex-direction: column; }
  .quota-dashboard > * { flex: 0 0 auto; }
  .package-panel-head { height: auto; min-height: 50px; }
  .package-rings-grid { height: auto; overflow: visible; }
  .package-ring-metric { min-height: 0; grid-template-rows: auto auto; }
  .package-dashboard .package-progress { height: auto; min-height: 82px; }
  .package-facts { height: auto; flex: 0 0 auto; }
  .deepl-key-row { grid-template-columns: 1fr; }
  .deepl-key-row .btn { width: 100%; }
  .package-facts { grid-template-columns: 1fr; }
  .package-facts > div:nth-child(even) { border-left: 0; }
  .package-facts > div:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .quota-panel-head { align-items: flex-start; }
  .official-quota-body { grid-template-columns: 1fr; gap: 14px; }
  .official-quota-stats { grid-template-columns: 1fr; }
  .package-rings-grid { grid-template-columns: 1fr; }
  .package-ring-metric { min-height: 238px; }
  .package-ring { width: min(188px, 72vw); }
  .package-title-line { display: grid; gap: 2px; }
  .package-title-line h2 { font-size: 18px; }
  .usage-trend-panel { margin-top: 10px; }
  .trend-panel-head { grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; gap: 12px; }
  .trend-kpis { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .trend-kpis > div { padding: 0 12px; text-align: left; }
  .trend-kpis > div:first-child { padding-left: 0; }
  .trend-range { grid-column: 2; grid-row: 1; }
  .usage-summary { grid-template-columns: 112px 1fr; }
  .ring { width: 112px; height: 112px; }
  .ring::after { width: 86px; height: 86px; }
  .official-remaining-ring { width: min(232px, 74vw); height: auto; }
  .official-remaining-ring::after { width: 76%; height: 76%; }
  .admin-layout { display: block; }
  .sidebar { position: sticky; top: 58px; z-index: 15; padding: 8px 10px; display: block; }
  .sidebar-title, .sidebar-footer { display: none; }
  .nav-list { display: flex; gap: 4px; overflow-x: auto; }
  .nav-button { white-space: nowrap; padding: 8px 11px; }
  .admin-main { padding: 20px 14px 48px; }
  .operations-grid { grid-template-columns: 1fr; }
  .todo-item { min-height: 66px; align-items: flex-start; }
  .todo-item strong, .todo-item small { white-space: normal; }
  .operations-panel:last-child { grid-column: auto; }
  .scheduler-summary { align-items: flex-start; flex-direction: column; }
  .scheduler-summary small { margin-left: 0; }
  .operations-runtime { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-runtime > div + div { border-left: 0; }
  .operations-runtime > div:nth-child(even) { border-left: 1px solid var(--line); }
  .operations-runtime > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .operations-request-row { grid-template-columns: 44px minmax(0, 1fr); }
  .request-timing { grid-column: 2; min-width: 0; text-align: left; }
  .key-grid { grid-template-columns: 1fr; }
  .admin-layout[data-active-view="codes"] .code-grid { grid-template-columns: 1fr; }
  .admin-layout[data-active-view="users"] .user-grid { grid-template-columns: 1fr; }
  .segmented-progress { gap: 3px; }
  .key-usage-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .key-usage-head strong { text-align: left; }
  .admin-toolbar .input, .admin-toolbar .select { flex: 1; min-width: 130px; }
  .key-toolbar .muted { width: 100%; margin-left: 0; }
  .scheduler-strip { align-items: flex-start; gap: 8px 14px; }
  .scheduler-title { width: 100%; }
  .key-card { padding: 14px; }
  .key-actions .action-button { min-height: 44px; }
  .selection-bar { align-items: stretch; flex-direction: column; }
  .selection-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .table-link-button { min-height: 44px; padding: 0 6px; }
  .input, .select, .textarea { font-size: 16px; }
  .btn, .btn-small, .action-button, .nav-button, .segmented button { min-height: 44px; }
}

@media (max-width: 430px) {
  .metric-grid { grid-template-columns: 1fr; }
  .overview-metrics { grid-template-columns: 1fr; }
  .deepl-key-row { grid-template-columns: 1fr; }
  .key-context-strip { display: grid; gap: 5px; }
  .key-context-strip span + span::before { display: none; }
  .trend-panel-head { grid-template-columns: 1fr; }
  .trend-kpis { grid-column: 1; grid-row: 2; }
  .trend-range { grid-column: 1; grid-row: 3; width: 100%; }
  .trend-range-button { flex: 1; min-height: 44px; }
  .usage-trend-chart { min-height: 210px; }
  .trend-svg { min-height: 190px; }
  .insight-strip { grid-template-columns: 1fr; }
  .insight-item + .insight-item { border-left: 0; border-top: 1px solid var(--line); }
  .usage-summary { grid-template-columns: 1fr; }
  .ring { margin: 0 auto; }
  .official-dashboard { padding-inline: 16px; }
  .official-quota-body { min-height: 0; grid-template-columns: 1fr; gap: 14px; padding-top: 12px; }
  .official-remaining-ring { width: min(220px, 78vw); }
  .official-quota-stats { width: 100%; grid-template-columns: 1fr; margin: 0; padding: 0; }
  .official-quota-stats > div { padding: 10px 12px; }
  .official-key-row { grid-template-columns: 1fr; gap: 8px; }
  .official-key-field > div { font-size: 9px; }
  .official-meta-row { margin-inline: -16px; padding-inline: 16px; }
  .official-meta-row { grid-template-columns: 1fr; gap: 10px; }
  .official-meta-row > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; }
  .official-meta-row > div + div { padding: 10px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .package-usage-grid { grid-template-columns: 1fr; }
  .package-usage-grid > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .form-actions .btn { flex: 1; }
  .selection-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-summary { grid-template-columns: 1fr; justify-items: center; }
  .quality-facts { width: 100%; }
  .distribution-legend { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}