:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #17232a;
  background: #f3f6f5;
  --ink: #17232a;
  --muted: #6d7b82;
  --green: #087052;
  --green-dark: #075440;
  --mint: #dff5eb;
  --line: #dce7e3;
  --soft: #f7faf9;
  --orange: #a16b22;
  --danger: #9a3434;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 10% 0%, #ffffff 0, #f3f6f5 42%, #eef3f1 100%); }
button, input, select { font: inherit; }
button, input, select { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(10, 107, 77, .18); outline-offset: 2px; }

.shell { width: min(1120px, calc(100% - 36px)); margin: auto; padding: 38px 0 60px; }
.header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.eyebrow, .section-kicker { margin: 0 0 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.header h1 { margin: 0; font-size: clamp(28px, 5vw, 42px); letter-spacing: -.04em; }
.subtitle, .muted { color: var(--muted); font-size: 13px; }
.subtitle { margin: 10px 0 0; }

.button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #cbd8d3;
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 0 rgba(23, 35, 42, .02);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.button:hover { border-color: #8eaaa0; transform: translateY(-1px); box-shadow: 0 7px 16px rgba(22, 55, 45, .08); }
.button:active { transform: translateY(0); }
.button.primary { border-color: var(--green); color: #fff; background: linear-gradient(135deg, #0a7958, #075440); box-shadow: 0 8px 18px rgba(8, 112, 82, .16); }
.button.primary:hover { border-color: var(--green-dark); background: linear-gradient(135deg, #0c8662, #075440); }
.button.ghost { background: rgba(255, 255, 255, .7); }
.button.small { min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12px; }

.panel, .subpanel { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .92); box-shadow: 0 18px 50px rgba(24, 57, 48, .06); }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 30px; min-height: 220px; padding: 28px 30px; margin-bottom: 34px; overflow: hidden; }
.hero h2 { margin: 14px 0 8px; font-size: 30px; letter-spacing: -.03em; }
.hero p { max-width: 560px; line-height: 1.7; }
.badge { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: var(--green); background: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.hero-art { position: relative; width: 230px; height: 160px; flex: 0 0 auto; }
.orb { position: absolute; width: 160px; height: 160px; right: 8px; top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d3f1e2, #9bdbc1 43%, #e7f5ef 72%); opacity: .9; }
.hero-stat { position: absolute; display: flex; flex-direction: column; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 10px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(24, 43, 61, .1); }
.hero-stat:first-of-type { left: 0; top: 25px; }
.hero-stat:last-of-type { right: 0; bottom: 12px; }
.hero-stat strong { font-size: 22px; }
.hero-stat span { color: var(--muted); font-size: 11px; }

.section-head, .subhead { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.section-head { margin-bottom: 14px; }
.section-head h2 { margin: 0; font-size: 22px; }
.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.product-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: .16s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28, 40, 48, .08); }
.product-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; font-size: 15px; font-weight: 800; }
.product-card h3 { margin: 14px 0 5px; font-size: 17px; }
.product-card p { min-height: 39px; margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.features { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 18px; }
.feature { padding: 4px 7px; border-radius: 6px; background: #f0f4f3; color: #4f5d66; font-size: 10px; }
.price-row { display: flex; justify-content: space-between; align-items: end; }
.price { font-size: 22px; font-weight: 750; }
.price small { font-size: 11px; color: var(--muted); font-weight: 500; }
.redeem { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: center; padding: 22px 24px; margin-bottom: 28px; }
.redeem h2 { margin: 0 0 6px; font-size: 21px; }
.redeem-form { display: flex; gap: 8px; }
.redeem-form input, .stack-form input, .stack-form select, .admin-login input, .subhead select {
  width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid #cbd8d3; border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; transition: border-color .16s ease, box-shadow .16s ease;
}
.redeem-form input:focus, .stack-form input:focus, .stack-form select:focus, .admin-login input:focus, .subhead select:focus { border-color: #6da996; box-shadow: 0 0 0 4px rgba(8, 112, 82, .08); }
.message { min-height: 18px; margin: 8px 0 0; color: var(--danger); font-size: 12px; }
.message.ok { color: var(--green); }
.redeem > .message { grid-column: 2; margin-top: -7px; }

/* Admin workspace */
.admin-panel { width: min(1180px, calc(100% - 32px)); margin: 30px auto 60px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.admin-surface { padding: 26px; border: 1px solid #d7e5df; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,252,251,.96)); box-shadow: 0 24px 70px rgba(18, 59, 46, .1); }
.admin-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; padding: 4px 4px 24px; border-bottom: 1px solid #e5eeea; }
.admin-brand { display: flex; align-items: flex-start; gap: 14px; }
.admin-logo { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #0b805e, #063f30); box-shadow: 0 10px 22px rgba(8, 112, 82, .2); font-size: 20px; font-weight: 800; }
.admin-brand h2 { margin: 0; font-size: clamp(24px, 4vw, 32px); letter-spacing: -.045em; }
.admin-brand .muted { max-width: 620px; margin: 7px 0 0; line-height: 1.6; }
.admin-topbar-actions { display: flex; align-items: center; gap: 9px; padding-top: 6px; }
.secure-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border: 1px solid #cce8dc; border-radius: 999px; color: var(--green); background: #effaf5; font-size: 11px; font-weight: 700; white-space: nowrap; }
.secure-dot { width: 7px; height: 7px; border-radius: 50%; background: #18a874; box-shadow: 0 0 0 4px rgba(24,168,116,.12); }

.admin-login-card { display: grid; grid-template-columns: 72px minmax(180px, 1fr) minmax(380px, 1.35fr); align-items: center; gap: 18px; margin-top: 24px; padding: 22px; border: 1px solid #d7e9e1; border-radius: 18px; background: linear-gradient(135deg, #f8fdfb, #eef8f3); }
.login-art { position: relative; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; overflow: hidden; color: var(--green); background: #d9f2e6; }
.login-art-ring { position: absolute; width: 86px; height: 86px; border: 1px solid rgba(8, 112, 82, .18); border-radius: 50%; }
.login-art-key { position: relative; font-size: 25px; }
.login-copy h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.login-copy .muted { margin: 5px 0 0; line-height: 1.5; }
.admin-login { display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; gap: 8px; }
.admin-login .message { grid-column: 1 / -1; margin: 0 2px; }
.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; }

.workspace-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin: 28px 2px 12px; }
.workspace-heading h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.workspace-note { margin: 0 0 2px; color: var(--muted); font-size: 11px; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.stat { min-height: 92px; padding: 18px 18px 15px; border-bottom: 2px solid #dfe5ea; background: #fff; }
.stat span { display: block; color: var(--muted); font-size: 11px; font-weight: 650; }
.stat strong { position: relative; z-index: 1; display: block; margin-top: 7px; color: var(--ink); font-size: 29px; letter-spacing: -.04em; }
.admin-grid { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 16px; }
.subpanel { min-width: 0; padding: 20px; border-radius: 18px; box-shadow: 0 7px 24px rgba(25, 67, 52, .035); }
.subhead { align-items: flex-start; margin-bottom: 14px; }
.subhead h3 { margin: 0; font-size: 16px; letter-spacing: -.015em; }
.subhead .section-kicker { margin-bottom: 5px; }
.section-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #d9ebe3; border-radius: 10px; color: var(--green); background: #f0faf5; font-size: 18px; }
.list { display: grid; gap: 9px; }
.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #e3ece8; border-radius: 12px; background: #fbfdfc; font-size: 12px; }
.list-row:hover { border-color: #c9dfd5; background: #fff; }
.list-row strong { display: block; overflow-wrap: anywhere; }
.list-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.list-row .actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing: .02em; }
.status { padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.status.unused { color: var(--green); background: #e8f7ef; }
.status.redeemed { color: #8a5a00; background: #fff3d8; }
.status.expired { color: var(--danger); background: #f9e5e5; }
.status.processing { color: #2457c5; background: #e8efff; }
.stack-form { display: grid; gap: 10px; }
.stack-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.stack-form .button.primary { min-height: 42px; margin-top: 2px; }
.keys-head { align-items: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid #edf2ef; }
.keys-head select { width: 150px; min-height: 32px; padding: 0 8px; font-size: 12px; }
.keys-tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.product-url { display: flex; gap: 6px; align-items: center; margin-top: 9px; }
.product-url input { flex: 1; min-width: 90px; min-height: 32px; padding: 0 8px; border: 1px solid #cbd8d3; border-radius: 8px; background: #fff; font-size: 11px; }
.product-url input:focus { border-color: #6da996; box-shadow: 0 0 0 3px rgba(8, 112, 82, .07); }
.url-label { color: var(--muted); font-size: 10px; white-space: nowrap; }
.product-url label.url-label { display: inline-flex; align-items: center; gap: 5px; }
.product-url input[type="checkbox"] { width: 15px; min-height: 15px; accent-color: var(--green); }
.delivery-tools { flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed #dce8e2; }
.delivery-tools input[type=file] { flex: 1; min-height: 32px; font-size: 11px; }
.delivery-tools button { white-space: nowrap; }
.admin-product-card { min-width: 0; padding: 16px; border: 1px solid #dce8e2; border-radius: 12px; background: #fbfdfc; }
.product-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.product-heading { min-width: 0; }
.product-scope-label { color: var(--muted); font-size: 10px; }
.product-heading h4 { margin: 4px 0 6px; font-size: 15px; overflow-wrap: anywhere; }
.product-heading p, .product-delete-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.product-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 6px; }
.product-actions .button { white-space: nowrap; }
.product-actions .button:disabled { cursor: not-allowed; }
.product-delete-note { margin-top: 10px; padding: 8px 10px; border-radius: 7px; background: #f1f5f3; }
.inventory { margin-top: 9px; padding: 8px 10px; border: 1px solid #e4eee9; border-radius: 10px; background: #f7fbf9; }
.inventory-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; font-size: 12px; }
.inventory-item + .inventory-item { border-top: 1px solid #e8f0ec; }
.inventory-details { min-width: 0; }
.inventory-account-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.inventory-select { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--green); cursor: pointer; }
.inventory-select:disabled { cursor: wait; }
.inventory-bulk-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 5px 0 12px; border-bottom: 1px solid #dce8e2; }
.inventory-bulk-tools > span { flex: 1 1 180px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.inventory-bulk-tools [data-action="inventory-delete-selected"] { color: var(--danger); }
.inventory-kind { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.inventory-identity { display: block; overflow-wrap: anywhere; font-weight: 650; }
.inventory-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.inventory-item .inventory-preparation { display: inline-block; padding: 3px 7px; border-radius: 6px; }
.inventory-preparation.preparing { color: #2457c5; background: #e8efff; }
.inventory-preparation.ready { color: var(--green); background: #e8f7ef; }
.inventory-preparation.failed { color: var(--danger); background: #f9e5e5; }
.inventory-preparation.unknown { color: var(--muted); background: #edf0ee; }
.inventory-actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 48%; }
.inventory-note { max-width: 250px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.inventory-item .button { flex: 0 0 auto; }
.redirect-note { margin-top: 14px; padding: 10px; border-radius: 8px; background: #f0f7ff; color: #2457c5; font-size: 12px; }
.delivery-record { color: var(--green) !important; font-weight: 650; }

.admin-tabs { display: flex; gap: 6px; padding: 6px; margin-bottom: 22px; border: 1px solid #d9e7e0; border-radius: 14px; background: #edf4f0; }
.admin-tab { border: 0; border-radius: 10px; padding: 12px 20px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.admin-tab.active { background: #fff; color: var(--green); box-shadow: 0 3px 10px #193e3012; }
.admin-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.admin-view .redeem-shell { display: none; }
.admin-view .admin-panel { margin-top: 24px; }
.auto-login-panel { margin-top: 0; }
.auto-login-panel > .subhead { align-items: flex-start; }
.auto-login-panel .muted { max-width: 760px; margin: 7px 0 0; line-height: 1.6; }
.auto-login-actions { display: flex; align-items: center; gap: 8px; }
.auto-login-frame { display: block; width: 100%; min-height: 980px; border: 1px solid #dce8e3; border-radius: 13px; background: #f4f8f6; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 5; padding: 12px 15px; border: 1px solid #b9dfcf; border-radius: 10px; color: var(--green); background: #f0faf6; box-shadow: 0 12px 32px rgba(24, 43, 61, .16); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s; font-size: 12px; font-weight: 650; }
.toast.show { opacity: 1; transform: translateY(0); }
footer { display: flex; justify-content: space-between; margin-top: 30px; color: #8a969e; font-size: 11px; }
.hidden { display: none !important; }

.redeem-shell { width: min(620px, calc(100% - 32px)); margin: 0 auto; padding: 15vh 0 40px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--ink); font-weight: 800; }
.brand h1 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.redeem-card { padding: 30px; }
.redeem-card h2 { margin: 18px 0 8px; font-size: 26px; letter-spacing: -.035em; }
.redeem-card .muted { line-height: 1.7; }
.redeem-form { display: flex; gap: 9px; margin-top: 24px; }
.redeem-form input { flex: 1; min-height: 44px; padding: 0 13px; font-size: 14px; }
.admin-hint { margin-top: 16px; text-align: center; color: #9aa4aa; font-size: 11px; }
.admin-hint code { padding: 3px 5px; border-radius: 4px; background: #e9edef; color: #65717b; }
.account-import-dialog { width: min(720px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 26px; overflow-y: auto; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 24px 70px rgba(18,59,46,.2); }
.account-import-dialog::backdrop { background: rgba(19,43,35,.38); }
.account-import-dialog .subhead { margin-bottom: 0; align-items: center; }
.account-import-dialog .muted { margin: 0; line-height: 1.7; }
.account-import-dialog textarea { width: 100%; min-height: 210px; padding: 12px; resize: vertical; border: 1px solid #cbd8d3; border-radius: 9px; color: var(--ink); background: #fbfdfc; font: 13px/1.7 Consolas, monospace; }
.account-import-dialog textarea:focus { border-color: #6da996; box-shadow: 0 0 0 4px rgba(8,112,82,.08); outline: none; }
.account-import-actions { display: flex; justify-content: flex-end; gap: 9px; }
.account-import-actions .button.primary { margin: 0; }
.button:disabled { cursor: wait; opacity: .6; transform: none; }
#redeemDownload { margin-top: 12px; }

@media (max-width: 900px) {
  .admin-login-card { grid-template-columns: 62px 1fr; }
  .admin-login-card .admin-login { grid-column: 1 / -1; }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .hero { align-items: flex-start; flex-direction: column; }
  .hero-art { align-self: flex-end; }
  .products-grid { grid-template-columns: 1fr; }
  .redeem { grid-template-columns: 1fr; }
  .redeem > .message { grid-column: 1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .admin-topbar { flex-direction: column; }
  .admin-topbar-actions { width: 100%; justify-content: space-between; }
  .workspace-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .admin-tab { flex: 1; padding: 10px 6px; font-size: 12px; }
  .shell { width: min(100% - 24px, 1120px); padding-top: 24px; }
  .header { align-items: flex-start; flex-direction: column; }
  .header-actions { width: 100%; }
  .header-actions .button { flex: 1; }
  .hero { padding: 22px; }
  .hero-art { transform: scale(.86); transform-origin: right top; margin-bottom: -20px; }
  .redeem-shell { padding-top: 10vh; }
  .redeem-card { padding: 22px; }
  .redeem-form { flex-direction: column; }
  .admin-panel { width: min(100% - 16px, 1180px); margin-top: 16px; }
  .admin-surface { padding: 16px; border-radius: 18px; }
  .admin-brand { gap: 10px; }
  .admin-logo { width: 40px; height: 40px; border-radius: 12px; }
  .admin-brand h2 { font-size: 25px; }
  .admin-login-card { grid-template-columns: 1fr; padding: 16px; }
  .login-art { display: none; }
  .admin-login { grid-template-columns: 1fr; }
  .admin-login .message { grid-column: auto; }
  .stats { gap: 8px; }
  .stat { min-height: 92px; padding: 14px; }
  .stat strong { font-size: 25px; }
  .subpanel { padding: 15px; border-radius: 14px; }
  .subhead, .keys-head { align-items: flex-start; flex-direction: column; }
  .auto-login-actions { width: 100%; justify-content: space-between; }
  .keys-tools { width: 100%; justify-content: flex-start; }
  .keys-tools select { flex: 1; min-width: 130px; }
  .form-split { grid-template-columns: 1fr; }
  .list-row { grid-template-columns: 1fr; }
  .list-row .actions { justify-content: flex-start; }
  .product-card-header, .inventory-item { align-items: flex-start; flex-direction: column; }
  .product-actions, .inventory-actions { max-width: 100%; }
  .product-url { align-items: stretch; flex-wrap: wrap; }
  .product-url input { flex-basis: 100%; }
  .url-label { white-space: normal; }
  .auto-login-frame { min-height: 1120px; }
}

#shopWorkspace .admin-grid{grid-template-columns:1fr}.key-manage-tools{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.key-manage-tools input{min-width:240px;flex:1}#keyTable input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:#8675ee}#keyTable .list-row>div:first-of-type{flex:1;min-width:0}#keyTable .mono{overflow-wrap:anywhere}#deleteSelectedKeys{color:#ef7185}#keyWorkspace .stack-form{max-width:650px}

/* One CDK input with separate redemption and 401 actions. */
.redeem-shell { width: min(680px, calc(100% - 40px)); margin: 48px auto; padding-top: 0; }
#redeemForm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#redeemCode { min-width: 0; }
.cdk-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cdk-actions .button { min-width: 0; min-height: 44px; padding: 0 10px; white-space: nowrap; }
.cdk-reauth-button { color: var(--green); background: #edf9f3; border-color: #acd6c5; }
#redeemMessage, #redeemTiming { overflow-wrap: anywhere; line-height: 1.7; }
@media (max-width: 400px) {
  .redeem-shell { width: calc(100% - 24px); margin: 24px auto; }
  .redeem-card { padding: 18px; }
  .cdk-actions { gap: 6px; }
  .cdk-actions .button { padding: 0 6px; font-size: 12px; }
}

/* Product categories in the admin redemption records. */
.key-product-filter { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.key-product-filter > span { white-space:nowrap; }
.key-product-filter select { min-width:180px; max-width:320px; }
.key-product-group { display:grid; gap:10px; padding:14px; border:1px solid #dce8e2; border-radius:14px; background:#fff; }
.key-product-group-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:0 2px 10px; border-bottom:1px solid #e5eee9; }
.key-product-group-header h4 { margin:0; color:var(--ink); font-size:14px; overflow-wrap:anywhere; }
.key-product-group-count { color:var(--muted); font-size:12px; }
.key-product-group-rows { display:grid; gap:8px; }
#keyTable .list-row { grid-template-columns:auto minmax(0,1fr) auto; }
@media (max-width: 700px) {
  .key-product-filter { width:100%; }
  .key-product-filter select { min-width:0; max-width:none; flex:1; }
  .key-product-group { padding:10px; }
  #keyTable .list-row { grid-template-columns:auto minmax(0,1fr); }
  #keyTable .list-row > .actions { grid-column:2; justify-content:flex-start; }
}

/* Customer batches and the inventory workbench. */
body { background: #f4f6f8; }
h1, h2, h3, h4, .eyebrow, .section-kicker, .mono, .stat strong { letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
button:disabled { cursor: not-allowed; }
input, select, textarea { min-width: 0; }
.ui-icon { display: inline-block; width: 17px; height: 17px; flex: 0 0 17px; vertical-align: middle; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; }
.button.primary { background: #087052; box-shadow: none; }
.button.primary:hover { background: #075440; }
.button.primary .ui-icon { filter: invert(1); }
.button.icon-button { width: 34px; height: 34px; padding: 0; flex: 0 0 34px; }
.button:hover { transform: none; box-shadow: none; }
.redeem-shell { width: min(1000px, calc(100% - 40px)); margin: 42px auto; }
.brand h1 { font-size: 28px; }
.customer-tabs { display: flex; gap: 4px; padding: 0 0 12px; border-bottom: 1px solid #d5dde3; }
.customer-tabs button { min-height: 44px; padding: 10px 20px; border: 0; border-radius: 6px; color: #51606d; background: transparent; cursor: pointer; font-size: 14px; font-weight: 650; }
.customer-tabs button[aria-selected="true"] { color: #065a42; background: #e1f1e9; }
.customer-tabs button:focus-visible { outline: 2px solid #087052; outline-offset: 2px; }
.redeem-workspace { padding: 24px 0; }
.redeem-workspace h2 { margin: 0; font-size: 20px; }
#singleDelivery { max-width: 640px; }
#batchForm { gap: 10px; }
#batchForm .subhead { margin: 0; align-items: center; }
#batchCodes { width: 100%; min-height: 140px; max-height: 360px; padding: 12px; resize: vertical; border: 1px solid #bbcbd2; border-radius: 6px; background: #fff; color: #17232a; font: 14px/1.8 Consolas, monospace; }
textarea:focus-visible { outline: 2px solid #087052; outline-offset: 2px; }
.batch-primary-actions, .batch-actions, .batch-download-actions, .catalog-actions, .dialog-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.batch-primary-actions .button { min-height: 42px; margin: 0; }
.batch-result-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 24px 0 12px; padding-top: 16px; border-top: 1px solid #d5dde3; }
.batch-result-toolbar .batch-actions { margin-left: auto; }
.check-label, .stack-form label.check-label { display: flex; align-items: center; gap: 8px; color: #34434e; font-size: 13px; line-height: 1.6; }
.check-label input[type="checkbox"], .stack-form .check-label input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; margin: 0; accent-color: #087052; }
.batch-rows { display: grid; gap: 8px; max-height: 620px; overflow-y: auto; }
.batch-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px; border: 1px solid #dce3e9; border-radius: 6px; background: #fff; }
.batch-row-identity { display: flex; align-items: start; gap: 10px; min-width: 0; }
.batch-row-identity > input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #087052; }
.batch-row-identity > div { min-width: 0; }
.batch-row .mono { display: block; font-size: 14px; overflow-wrap: anywhere; }
.batch-row small { display: block; color: #64717c; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; margin-top: 4px; }
.batch-emails { margin-top: 9px; font-size: 13px; }
.batch-emails strong { display: block; overflow-wrap: anywhere; }
.batch-row-result { min-width: 0; }
.batch-status { display: inline-block; padding: 4px 7px; border-radius: 4px; color: #4b5b68; background: #eef1f5; font-size: 12px; }
.batch-status.ready, .batch-status.reauthorized { background: #e1f3e9; color: #086446; }
.batch-status.processing, .batch-status.queued, .batch-status.redeeming, .batch-status.checking { background: #e6effc; color: #245ca8; }
.batch-status.error, .batch-status.unavailable, .batch-status.uncertain, .batch-status.download_pending { color: #9c4229; background: #fff0e7; }
.batch-row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.batch-download-actions { padding-top: 16px; }
#batchMessage { min-height: 24px; line-height: 1.7; overflow-wrap: anywhere; }
.admin-surface { border-radius: 8px; background: #fff; box-shadow: none; }
.admin-brand h2 { font-size: 28px; }
.subpanel { border: 0; border-top: 1px solid #e1e6eb; border-radius: 0; box-shadow: none; padding: 20px 0; background: transparent; }
.admin-product-card { border-radius: 8px; background: #fff; }
.catalog-actions select, .schedule-shortcuts select { min-height: 36px; max-width: 200px; padding: 6px 10px; border: 1px solid #cbd8d3; border-radius: 6px; background: #fff; font-size: 13px; }
.inventory-totals { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0 20px; border-bottom: 1px solid #e1e6eb; font-size: 13px; }
.stock-counters { display: flex; flex-wrap: wrap; gap: 7px; min-height: 30px; padding-top: 10px; }
.stock-stat { display: inline-flex; align-items: center; gap: 7px; padding: 4px 7px; background: #f0f3f6; border-radius: 4px; color: #53616c; font-size: 11px; }
.stock-stat b { display: inline-block; min-width: 1.5em; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.stock-stat.ready { color: #076346; background: #e3f4ea; }
.stock-stat.preparing { color: #255eaa; background: #e9f1fc; }
.stock-stat.failed, .stock-stat.unknown { color: #985521; background: #fff2e0; }
.inventory { border-radius: 6px; background: #fafbfc; }
.inventory-details { flex: 1; }
.inventory-identity, .binding-email { overflow-wrap: anywhere; }
.inventory-binding { padding-top: 8px; margin-top: 8px; border-top: 1px solid #e1e6eb; font-size: 12px; line-height: 1.7; }
.inventory-binding > span, .field-caption { display: block; margin-bottom: 4px; font-size: 11px; color: #64717c; }
.inventory-binding > strong { display: block; color: #183b32; font-size: 13px; }
.other-import { color: #64717c; font-size: 12px; }
.other-import summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.other-import[open] { flex-basis: 100%; }
.file-group-options { margin-top: 10px; font-size: 12px; color: #53616c; }
.file-group-options > summary { cursor: pointer; padding: 5px 0; }
.work-dialog { width: min(540px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid #d4dde3; border-radius: 8px; background: #fff; color: #17232a; overflow: auto; }
.work-dialog::backdrop { background: #17232a66; }
.work-dialog h3 { margin: 0; font-size: 18px; }
.upload-dialog { width: min(680px, calc(100% - 24px)); }
.upload-dialog .subhead h3 { min-width: 0; overflow-wrap: anywhere; }
#fileUploadGroups, #fileUploadSummary { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.upload-rows { list-style: none; margin: 16px 0; padding: 0; max-height: 50dvh; overflow: auto; }
.upload-row { display: grid; grid-template-columns: minmax(0,1fr) 80px; gap: 7px 12px; padding: 12px 0; border-top: 1px solid #e1e6eb; font-size: 13px; }
.upload-row strong, .upload-row small { overflow-wrap: anywhere; }
.upload-row span { text-align: right; color: #53616c; }
.upload-row small { grid-column: 1 / -1; line-height: 1.6; color: #64717c; }
.upload-row.success span { color: #076346; }
.upload-row.failed span, .upload-row.uncertain span { color: #9c4229; }
.upload-dialog .dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dialog-actions { justify-content: flex-end; padding-top: 12px; }
.dialog-actions .button.primary { margin: 0; }
.group-picker { padding: 10px 0; margin: 0; border: 0; display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.group-picker legend { font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.group-picker > div { display: grid; gap: 8px; }
.group-picker .check-label { padding: 7px 0; overflow-wrap: anywhere; align-items: flex-start; }
.group-picker input { margin-top: 2px !important; }
.key-product-group { padding: 0 0 12px; border: 0; border-bottom: 1px solid #e0e6ec; border-radius: 0; }
.key-group-heading { margin: 0; }
.key-product-group-header { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 4px; margin: 0; border: 0; background: transparent; color: #17232a; text-align: left; cursor: pointer; }
.key-group-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.key-product-group-count { font-size: 12px; font-weight: 400; line-height: 1.6; }
.key-product-group-header:focus-visible { outline: 2px solid #087052; outline-offset: 2px; }
.group-chevron { transition: transform .15s ease; }
[aria-expanded="false"] .group-chevron { transform: rotate(-90deg); }
.key-binding { margin-top: 10px; }
.bound-email-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.bound-email-row .binding-email { color: #174737; font-size: 14px; min-width: 0; }
.key-record-details { margin-top: 8px; color: #64717c; font-size: 12px; }
.key-record-details summary { cursor: pointer; }
#keyTable .list-row { border-radius: 6px; align-items: start; background: #fafbfc; }
.key-expiry-overview { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding: 14px 0; border-top: 1px solid #e1e6eb; border-bottom: 1px solid #e1e6eb; font-size: 13px; }
.key-expiry-overview > strong { flex: 1 1 210px; color: #922e3b; line-height: 1.7; overflow-wrap: anywhere; }
.key-expiry-overview .check-label { margin: 0; }
.key-expiry-overview input { width: 16px; height: 16px; accent-color: #922e3b; }
.key-group-expiry { color: #a12b3b; font-weight: 650; }
#keyTable .list-row.key-expired { border-color: #edc5cb; border-left: 3px solid #b73649; background: #fff8f9; }
.key-expired .binding-email, .key-expired .key-binding > .field-caption { color: #a12b3b; }
.key-expiry-time { margin: 8px 0; color: #a12b3b; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
#keyTable input[type="checkbox"] { accent-color: #087052; }
.schedule-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; font-size: 13px; }
.schedule-field { min-width: 0; }
.schedule-field > div { margin-top: 10px; }
.time-controls { display: grid; grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr); gap: 6px; align-items: end; margin-top: 8px; }
.time-controls > span { line-height: 40px; text-align: center; }
.time-controls input { text-align: center; font-variant-numeric: tabular-nums; }
.schedule-shortcuts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.schedule-preview { display: grid; gap: 7px; padding: 12px 0; border-top: 1px solid #e1e6eb; border-bottom: 1px solid #e1e6eb; font-size: 12px; color: #64717c; line-height: 1.7; overflow-wrap: anywhere; }
.schedule-preview strong { font-weight: 650; color: #34434e; }
.field-error { margin: 6px 0 0; min-height: 16px; font-size: 12px; line-height: 1.6; color: #a13b32; }
.stack-form input, .stack-form select { border-radius: 6px; }
@media (max-width: 700px) {
  .redeem-shell { width: calc(100% - 24px); margin: 24px auto; }
  .customer-tabs button { flex: 1; padding: 10px 6px; font-size: 13px; }
  .batch-row { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 13px; }
  .batch-row-actions { justify-content: flex-start; }
  .batch-rows { max-height: none; overflow: visible; }
  .batch-result-toolbar .batch-actions { margin-left: 0; }
  .batch-primary-actions .button { flex: 1 1 140px; }
  .batch-download-actions .button { flex: 1 1 150px; }
  .catalog-actions { width: 100%; }
  .catalog-actions select { flex: 1; max-width: none; min-width: 0; }
  .key-product-group-header { display: grid; grid-template-columns: 17px minmax(0,1fr); }
  .key-product-group-count { grid-column: 2; }
  .bound-email-row .binding-email { flex-basis: 100%; }
  .work-dialog { padding: 18px; }
  .inventory-actions { width: 100%; }
  .inventory-actions .button { min-height: 38px; }
  .button.icon-button { width: 38px; height: 38px; flex-basis: 38px; }
  .key-manage-tools input { min-width: 0; flex-basis: 100%; max-width: 100%; }
  .schedule-shortcuts select { flex: 1; min-width: 120px; }
}