:root {
  color-scheme: light;
  --bg: #f4f6f5;
  --surface: #ffffff;
  --text: #17211c;
  --muted: #68736d;
  --line: #dce2de;
  --accent: #137a4c;
  --accent-dark: #0d5e39;
  --focus: #2563eb;
  --danger: #b42318;
  --warning: #9a6700;
  --info: #245ea8;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 15px; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, select { cursor: pointer; }
button:disabled { cursor: wait; opacity: .62; }

.topbar { height: 58px; padding: 0 clamp(18px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: white; background: var(--text); }
.topbar nav { display: flex; align-items: center; gap: 20px; color: #43504a; font-size: 14px; }
.topbar nav a:hover, .text-button:hover { color: var(--accent); }
main { width: 100%; }

.redeem-layout { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 80px; }
.page-heading { margin-bottom: 30px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-weight: 800; font-size: 12px; }
h1 { margin: 0; font-size: 32px; line-height: 1.25; letter-spacing: 0; }
.page-heading > p:last-child { margin: 10px 0 0; color: var(--muted); }
.form-panel, .login-panel { padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 28px rgba(23,33,28,.05); }
fieldset { margin: 0 0 24px; padding: 0; border: 0; }
legend, .field > span { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; }
.plan-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan-option { position: relative; }
.plan-option input { position: absolute; opacity: 0; pointer-events: none; }
.plan-option span { min-height: 72px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfb; }
.plan-option strong { font-size: 17px; }
.plan-option small { margin-top: 4px; color: var(--muted); }
.plan-option input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #f1faf5; }
.plan-option input:focus-visible + span { outline: 3px solid rgba(37,99,235,.24); }
.field { display: block; margin-bottom: 20px; }
.field input, .field textarea, .filters input, .filters select { width: 100%; border: 1px solid #cbd3ce; border-radius: 6px; background: #fff; color: var(--text); outline: 0; }
.field input, .filters input, .filters select { height: 44px; padding: 0 12px; }
.field textarea { min-height: 126px; padding: 12px; resize: vertical; line-height: 1.5; font-family: Consolas, monospace; font-size: 13px; }
.field input:focus, .field textarea:focus, .filters input:focus, .filters select:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.primary-button, .secondary-button, .row-button { min-height: 42px; padding: 0 18px; border: 1px solid transparent; border-radius: 6px; font-weight: 700; }
.primary-button { width: 100%; color: white; background: var(--accent); }
.primary-button:hover { background: var(--accent-dark); }
.secondary-button { border-color: #cbd3ce; background: white; color: var(--text); }
.secondary-button:hover { border-color: #95a39b; }
.form-error, .notice-error { color: var(--danger); }
.form-error { margin: 14px 0 0; font-size: 14px; }
.notice-error { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--danger); background: #fff4f2; }
.notice-warning { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--warning); color: #654900; background: #fff8e6; }

.account-confirmation { margin: 0 0 20px; padding: 16px; border: 1px solid #bdd8c9; border-radius: 6px; background: #f1faf5; }
.account-confirmation > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.account-confirmation > div span, .account-confirmation dt { color: var(--muted); font-size: 12px; }
.account-confirmation > div strong { overflow-wrap: anywhere; text-align: right; }
.account-confirmation dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #d5e9dd; }
.account-confirmation dd { margin: 4px 0 0; font-weight: 700; }

.result-panel { margin-top: 18px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.result-header { display: flex; gap: 14px; align-items: flex-start; }
.status-dot { width: 12px; height: 12px; margin-top: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 5px rgba(36,94,168,.1); }
.result-panel[data-status="completed"] .status-dot { background: var(--accent); box-shadow: 0 0 0 5px rgba(19,122,76,.1); }
.result-panel[data-status="declined"] .status-dot, .result-panel[data-status="failed_precharge"] .status-dot, .result-panel[data-status="failed_precheck"] .status-dot, .result-panel[data-status="cancelled"] .status-dot { background: var(--danger); box-shadow: 0 0 0 5px rgba(180,35,24,.1); }
.status-label { margin: 0 0 3px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.result-header h2 { margin: 0; font-size: 18px; }
.progress-block { margin-top: 22px; }
.progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.progress-copy strong { color: var(--text); font-variant-numeric: tabular-nums; }
.progress-track { width: 100%; height: 8px; overflow: hidden; border-radius: 4px; background: #e8ece9; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--info); transition: width .35s ease; }
.result-panel[data-status="completed"] .progress-track span { background: var(--accent); }
.result-panel[data-status="declined"] .progress-track span, .result-panel[data-status="failed_precharge"] .progress-track span, .result-panel[data-status="failed_precheck"] .progress-track span, .result-panel[data-status="cancelled"] .progress-track span { background: var(--danger); }
.result-details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.result-details div { min-width: 0; }
.result-details dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.result-details dd { margin: 0; overflow-wrap: anywhere; }

.login-layout { width: min(430px, calc(100% - 32px)); margin: 0 auto; padding: 80px 0; }
.login-panel h1 { margin-bottom: 28px; font-size: 25px; }
.inline-form { display: inline; }
.text-button { padding: 0; border: 0; color: #43504a; background: none; }

.admin-layout { width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 72px; }
.admin-heading, .section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-heading { margin-bottom: 24px; }
.admin-heading h1 { font-size: 28px; }
.filters { display: grid; grid-template-columns: 180px 180px minmax(220px, 1fr) auto; gap: 10px; margin-bottom: 24px; }
.create-section { margin-bottom: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.create-grid { display: grid; grid-template-columns: 150px minmax(240px, 1fr) 110px minmax(180px, 1fr) 100px; gap: 10px; }
.create-grid input, .create-grid select, .row-actions select { height: 42px; padding: 0 11px; border: 1px solid #cbd3ce; border-radius: 6px; background: #fff; color: var(--text); }
.compact-button { min-height: 42px; }
.strategy-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) 120px; gap: 10px; align-items: stretch; }
.strategy-option { position: relative; cursor: pointer; }
.strategy-option input { position: absolute; opacity: 0; pointer-events: none; }
.strategy-option span { min-height: 74px; padding: 13px 15px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfb; }
.strategy-option small { margin-top: 4px; color: var(--muted); }
.strategy-option input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #f1faf5; }
.strategy-option input:focus-visible + span { outline: 3px solid rgba(37,99,235,.24); }
.community-settings-grid { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(240px, 1.2fr) minmax(180px, .8fr) 120px; gap: 12px; align-items: end; }
.community-settings-grid .field { margin: 0; }
.community-settings-grid .community-text-field { grid-column: 1 / 4; }
.community-settings-grid textarea { min-height: 76px; }
.toggle-field { min-height: 44px; display: flex; align-items: center; gap: 9px; font-weight: 700; }
.toggle-field input { width: 17px; height: 17px; accent-color: var(--accent); }
.section-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.small-button { min-height: 34px; padding: 0 12px; font-size: 12px; }
.created-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.created-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.created-result textarea { width: 100%; min-height: 118px; padding: 12px; resize: vertical; border: 1px solid #cbd3ce; border-radius: 6px; background: #f8faf9; font-family: Consolas, monospace; font-size: 13px; line-height: 1.5; }
.table-section { margin-top: 24px; }
.section-title { margin-bottom: 10px; }
.section-title h2 { margin: 0; font-size: 17px; }
.section-title span { color: var(--muted); font-size: 13px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: white; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 12px 14px; border-bottom: 1px solid #e8ece9; vertical-align: middle; white-space: nowrap; }
th { color: #59645e; background: #f8faf9; font-size: 12px; font-weight: 800; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfb; }
.mono { font-family: Consolas, monospace; font-size: 12px; }
.code-cell { max-width: 310px; overflow: hidden; text-overflow: ellipsis; }
.badge { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border-radius: 4px; color: #405049; background: #edf1ee; font-size: 12px; font-weight: 700; }
.badge-unused, .badge-completed { color: #0c6c40; background: #e9f8ef; }
.badge-reserved, .badge-queued, .badge-running, .badge-preflight, .badge-checking, .badge-selecting_card, .badge-opening_card, .badge-recharging_card, .badge-card_ready, .badge-submitting { color: var(--info); background: #edf5ff; }
.badge-consumed { color: #4d3b8c; background: #f1efff; }
.badge-disabled, .badge-cancelled, .badge-declined, .badge-failed_precharge, .badge-failed_precheck { color: var(--danger); background: #fff0ed; }
.badge-frozen, .badge-review { color: var(--warning); background: #fff7df; }
.row-button { min-height: 32px; padding: 0 12px; border-color: #bdd8c9; color: var(--accent-dark); background: #f1faf5; font-size: 12px; }
.row-button.danger { border-color: #ecc5bf; color: var(--danger); background: #fff5f3; }
.row-actions { display: flex; align-items: center; gap: 7px; }
.row-actions select { width: 92px; height: 32px; font-size: 12px; }
.icon-button { width: 32px; height: 32px; padding: 0; border: 1px solid #d7ddda; border-radius: 6px; background: #fff; font-size: 20px; line-height: 1; }
.icon-button.danger { border-color: #ecc5bf; color: var(--danger); background: #fff5f3; }
.muted, .empty-cell { color: var(--muted); }
.empty-cell { padding: 28px; text-align: center; }
.capacity-label { display: inline-flex; min-height: 26px; align-items: center; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.capacity-open { color: #0c6c40; background: #e9f8ef; }
.capacity-full { color: #52605a; background: #edf1ee; }
.capacity-error { color: var(--warning); background: #fff7df; }
.capacity-disabled { color: #52605a; background: #edf1ee; }
.card-actions { display: flex; align-items: center; gap: 7px; }

.recharge-dialog { width: min(460px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 8px; color: var(--text); background: var(--surface); box-shadow: 0 24px 70px rgba(23,33,28,.2); }
.recharge-dialog::backdrop { background: rgba(15,23,19,.48); }
.recharge-dialog form { padding: 24px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dialog-heading h2 { margin: 0; font-size: 21px; }
.recharge-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 20px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: #f8faf9; }
.recharge-card-meta dt { color: var(--muted); font-size: 12px; }
.recharge-card-meta dd { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.recharge-dialog .muted { margin: -8px 0 18px; font-size: 13px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dialog-actions .primary-button { width: auto; }
.community-text { margin: 0 0 18px; color: #43504a; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.community-group { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: #f8faf9; }
.community-group span { color: var(--muted); font-size: 12px; }
.community-group strong { font-family: Consolas, monospace; font-size: 19px; overflow-wrap: anywhere; }
.card-accounts-dialog { width: min(780px, calc(100% - 32px)); }
.accounts-table-wrap { max-height: min(52vh, 420px); overflow: auto; }
.accounts-table-wrap .empty-cell { white-space: normal; }

@media (max-width: 720px) {
  .topbar { padding: 0 16px; }
  .redeem-layout { padding-top: 38px; }
  h1 { font-size: 27px; }
  .form-panel, .login-panel, .result-panel { padding: 20px; }
  .plan-options, .result-details, .account-confirmation dl { grid-template-columns: 1fr; }
  .account-confirmation > div { align-items: flex-start; flex-direction: column; }
  .account-confirmation > div strong { text-align: left; }
  .filters { grid-template-columns: 1fr 1fr; }
  .create-grid { grid-template-columns: 1fr 1fr; }
  .strategy-grid { grid-template-columns: 1fr; }
  .community-settings-grid { grid-template-columns: 1fr; }
  .community-settings-grid .community-text-field { grid-column: auto; }
  .create-grid #create-code, .create-grid #create-note, .create-grid .compact-button { grid-column: 1 / -1; }
  .filters input { grid-column: 1 / -1; }
  .filters .secondary-button { grid-column: 1 / -1; }
  .section-title { align-items: flex-start; }
  .section-actions { justify-content: flex-start; }
  .recharge-card-meta { grid-template-columns: 1fr; }
}