:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  background: #07111f;
  color: #e8f0fb;
  --surface: #0e1b2d;
  --surface-2: #14243a;
  --border: #2c4564;
  --muted: #9db0c7;
  --accent: #3b82f6;
  --success: #31c48d;
  --warning: #f5b942;
  --danger: #ef6b73;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: #07111f; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.topbar { min-height: 72px; padding: 14px clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--border); background: #0a1728; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar div { display: grid; gap: 2px; }
.topbar strong { font-size: 20px; }
.eyebrow { color: #78aefc; font-size: 11px; }
.page-shell { width: min(1440px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
h1, h2 { margin: 0; text-wrap: balance; }
h1 { font-size: clamp(26px, 3vw, 38px); }
h2 { font-size: 20px; }
p { color: var(--muted); line-height: 1.65; text-wrap: pretty; }
.badge, .status-pill { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: 4px 10px; color: #bcd7ff; background: #16345d; font-size: 12px; }
.badge.warning { color: #ffe4a3; background: #4d3611; }
.login-card, .confirm-card { width: min(460px, 100%); margin: 10vh auto 0; padding: 30px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.stack-form { display: grid; gap: 10px; }
label, legend { color: #d8e6f7; font-weight: 700; font-size: 14px; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: #f4f8fd; background: #081525; }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #80b3ff; outline-offset: 2px; }
fieldset { margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
legend { padding: 0 6px; }
.primary-button, .secondary-button, .danger-button { min-height: 44px; border-radius: 8px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; font-weight: 700; cursor: pointer; text-decoration: none; }
.primary-button { color: white; background: var(--accent); }
.secondary-button { color: #e6eef9; border-color: var(--border); background: #172940; }
.danger-button { color: #fff0f1; border-color: #7b3540; background: #55242d; }
.compact { min-height: 38px; padding: 8px 14px; }
.form-error, .success-message { margin: 18px 0; padding: 13px 16px; border-radius: 9px; border: 1px solid #813740; background: #3a1e25; color: #ffb4bb; }
.success-message { border-color: #256d58; background: #12382f; color: #9fe9d1; }
.intro-row { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 24px; }
.intro-row h1 { margin-top: 8px; }
.boundary-note { min-width: 260px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 4px; background: var(--surface); }
.boundary-note span { color: var(--muted); font-size: 13px; }
.code-reveal { margin-bottom: 24px; padding: 22px; border: 1px solid #7a5c1d; border-radius: 12px; background: #2b2415; display: grid; gap: 12px; }
.code-reveal div { display: flex; align-items: center; gap: 12px; }
.license-code { width: fit-content; max-width: 100%; overflow-wrap: anywhere; padding: 12px 15px; border-radius: 8px; background: #070e18; color: #fff0bc; font-size: clamp(18px, 3vw, 26px); font-variant-numeric: tabular-nums; }
.content-grid { display: grid; grid-template-columns: minmax(320px, 0.75fr) minmax(520px, 1.5fr); gap: 24px; align-items: start; }
.panel { padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.section-help { margin-top: 8px; }
.check-list { display: grid; gap: 8px; }
.check-row, .toggle-row { min-height: 52px; padding: 9px 10px; border: 1px solid #233b58; border-radius: 8px; display: flex; align-items: center; gap: 10px; background: #0a1728; cursor: pointer; }
.check-row input, .toggle-row input { width: 20px; min-height: 20px; flex: 0 0 auto; }
.check-row span, .toggle-row span { display: grid; gap: 2px; }
.check-row small, .toggle-row small { color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-grid div { display: grid; gap: 7px; }
.license-list { display: grid; gap: 14px; }
.license-card { padding: 18px; border: 1px solid #29435f; border-radius: 11px; background: #0a1728; }
.license-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.license-card-head div { display: flex; align-items: center; gap: 10px; }
.license-card-head code { color: #bcd7ff; font-size: 15px; }
.license-card-head time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.status-pill.active { color: #9fe9d1; background: #174c3f; }
.status-pill.revoked { color: #ffc0c5; background: #55242d; }
.metric-grid { margin: 16px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.metric-grid div { padding: 10px; border-radius: 8px; background: var(--surface-2); display: grid; gap: 4px; }
.metric-grid span, .details-list dt { color: var(--muted); font-size: 12px; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.details-list { margin: 0; display: grid; gap: 8px; }
.details-list div { display: grid; grid-template-columns: 56px 1fr; gap: 10px; }
.details-list dt, .details-list dd { margin: 0; }
.details-list dd { overflow-wrap: anywhere; }
.card-actions { margin-top: 18px; display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.card-actions form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.card-actions form label { width: 100%; }
.card-actions select { width: 110px; }
.empty-state { padding: 36px 20px; border: 1px dashed var(--border); border-radius: 10px; text-align: center; }
.confirm-actions { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.confirm-actions form { margin: 0; }
@media (max-width: 980px) {
  .content-grid { grid-template-columns: 1fr; }
  .intro-row { align-items: stretch; flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .page-shell { width: min(100% - 20px, 1440px); padding-top: 20px; }
  .panel, .login-card, .confirm-card { padding: 18px; }
  .field-grid, .metric-grid { grid-template-columns: 1fr; }
  .license-card-head { align-items: flex-start; flex-direction: column; }
}