:root {
  color-scheme: light;
  --md-sys-color-primary: #165fbf;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d3e3fd;
  --md-sys-color-on-primary-container: #001c3a;
  --md-sys-color-secondary-container: #d7e3f8;
  --md-sys-color-on-secondary-container: #101c2b;
  --md-sys-color-surface: #f7f9ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f2f4fa;
  --md-sys-color-surface-container: #eceef4;
  --md-sys-color-surface-container-high: #e6e8ee;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-on-surface-variant: #43474e;
  --md-sys-color-outline: #73777f;
  --md-sys-color-outline-variant: #c3c6cf;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-tertiary-container: #c4efd4;
  --md-sys-color-on-tertiary-container: #002111;
  --md-sys-color-warn-container: #ffe08b;
  --md-sys-color-on-warn-container: #251a00;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 28px;
  --md-sys-elevation-1: 0 1px 2px rgb(25 28 32 / 8%), 0 1px 3px 1px rgb(25 28 32 / 6%);
  font-family: Roboto, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(900px 420px at 100% -10%, #d3e3fd 0%, transparent 55%),
    var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  overflow-wrap: anywhere;
}
a { color: var(--md-sys-color-primary); text-decoration: none; }
button, input, select { max-width: 100%; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 4px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}
.material-symbols-outlined.filled { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.material-symbols-outlined.success { color: #146c2e; }

.top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--md-sys-color-surface) 88%, transparent);
  backdrop-filter: blur(16px);
  color: var(--md-sys-color-on-surface);
}
.top-bar-title { min-width: 0; font-size: 22px; font-weight: 500; }
.top-bar-space { flex: 1; }
.top-bar > a, .top-bar > button { flex-shrink: 0; }

.page {
  width: min(560px, calc(100% - 32px));
  margin: 24px auto 64px;
}
.page.wide { width: min(1040px, calc(100% - 32px)); }

.surface-card {
  min-width: 0;
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-1);
  padding: 28px;
}
.surface-card.compact { width: min(480px, 100%); margin: 48px auto 0; }
.overline {
  margin: 0 0 8px;
  color: var(--md-sys-color-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
}
h1 { margin: 0 0 8px; font-size: 32px; font-weight: 400; letter-spacing: 0; }
h2 { margin: 0 0 16px; font-size: 22px; font-weight: 400; }
.section-title { margin: 28px 0 12px; }
.body-text, .helper {
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.5;
}
.helper { margin: -4px 0 12px; font-size: 12px; }
.stack { display: grid; gap: 16px; margin-top: 20px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-fields { display: grid; gap: 16px; }
.stack > *, .form-fields > * { min-width: 0; }

.field {
  position: relative;
  display: block;
  min-width: 0;
}
.field input,
.field select {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 15px 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  line-height: 24px;
  text-align: start;
  outline: none;
}
.field select {
  padding: 0 16px;
  line-height: normal;
}
.field input:disabled, .field select:disabled { opacity: 0.65; cursor: not-allowed; }
.field input[readonly] { color: var(--md-sys-color-on-surface-variant); }
.field span {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 4px;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-lowest);
  pointer-events: none;
  transition: 120ms ease;
  max-width: calc(100% - 24px);
}
.field input:focus,
.field select:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
.field input:focus + span,
.field input:not(:placeholder-shown) + span,
.field select:focus + span,
.field select:valid + span {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--md-sys-color-primary);
}

.filled-btn, .text-btn, .tonal-btn, .icon-btn {
  min-width: 0;
  font: inherit;
  cursor: pointer;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow-wrap: anywhere;
}
.filled-btn {
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 24px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-weight: 500;
}
.filled-btn:hover { filter: brightness(1.05); }
.text-btn, .icon-btn {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 20px;
  background: transparent;
  color: var(--md-sys-color-primary);
  font-weight: 500;
}
.icon-btn { width: 40px; height: 40px; flex-shrink: 0; padding: 0; color: var(--md-sys-color-on-surface); }
.tonal-btn {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 16px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: 14px;
  font-weight: 500;
}

.card-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.sku-card {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 180px;
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
}
.sku-card small {
  display: block;
  margin-top: 4px;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 400;
}

.invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.invite-form .filled-btn { width: max-content; }

.list { display: grid; gap: 8px; }
.list-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-1);
  font-size: 14px;
}
.list-row > div { min-width: 0; }
.cell-label, .record-detail {
  display: block;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.5;
}
.cell-label { margin-bottom: 6px; }
.record-detail { margin-top: 8px; }
.action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.action-row .account-action { width: 100%; }
.tab-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.tab-btn {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.tab-btn[aria-selected="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.account-search { margin: 28px 0 16px; }
.account-search fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.account-search .filled-btn { height: 56px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.license-chip, .license-chip.unmanaged {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
}
.license-chip.unmanaged { background: var(--md-sys-color-warn-container); color: var(--md-sys-color-on-warn-container); }
.app-dialog {
  width: min(480px, calc(100% - 32px));
  padding: 24px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-1);
}
.app-dialog::backdrop { background: rgb(25 28 32 / 40%); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.license-options { display: grid; gap: 8px; }
.section-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.section-head > * { min-width: 0; }
.section-head h2 { margin: 0; }
.invite-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.checkbox-field { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; }
.checkbox-field input { width: 20px; height: 20px; accent-color: var(--md-sys-color-primary); }
.pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.pagination span { min-width: 0; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.empty-list { color: var(--md-sys-color-on-surface-variant); }

.status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}
.status.available, .status.licensed, .status.enabled { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.status.disabled { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.status.reserved, .status.created, .status.pending, .status.creating, .status.licensing { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.status.used, .status.expired { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.status.create_unknown { background: var(--md-sys-color-warn-container); color: var(--md-sys-color-on-warn-container); }
.status.create_failed, .status.license_failed { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

.banner {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-small);
  font-size: 14px;
  line-height: 1.5;
}
.banner.error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.banner.warn { background: var(--md-sys-color-warn-container); color: var(--md-sys-color-on-warn-container); }
.banner.info { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }

.result-card {
  margin-top: 24px;
  padding: 20px;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-low);
}
.result-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.result-head > * { min-width: 0; }
.result-head .material-symbols-outlined { flex-shrink: 0; }
.result-head h2 { margin: 0; }
.kv { display: grid; gap: 12px; }
.kv div {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 14px 0 20px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.kv div:last-child { padding-bottom: 24px; }
.kv span { color: var(--md-sys-color-on-surface-variant); font-size: 12px; }
.kv strong { font-weight: 500; font-family: ui-monospace, Consolas, monospace; }
.result-card .kv + .helper { margin-top: 16px; }
.turnstile {
  min-width: 0;
  min-height: 72px;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.turnstile .helper { margin: 8px 0 0; }
.captcha-retry { margin-top: 12px; min-height: 40px; }
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .invite-form, .list-row, .account-search fieldset { grid-template-columns: minmax(0, 1fr); }
  .invite-form .filled-btn, .account-search .filled-btn { width: 100%; }
}

@media (max-width: 480px) {
  .surface-card { padding: 20px; }
  .surface-card.compact { margin-top: 24px; }
  .result-card { padding: 16px; }
}