:root { color-scheme: dark; --bg: #0e1018; --card: #181b27; --line: #2b3142; --text: #f3f5fb; --muted: #a9b0c3; --accent: #7c9cff; --danger: #ff7d8a; --success: #68d6a5; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #20294b, var(--bg) 45%); color: var(--text); font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; } .shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0; } .card { background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--line); border-radius: 16px; padding: 25px; box-shadow: 0 18px 45px #0004; } .narrow { width: min(100%, 520px); margin: 10vh auto; } h1, h2, p { margin-top: 0; } h1 { font-size: 30px; } h2 { font-size: 19px; } .eyebrow { letter-spacing: .13em; font-size: 11px; color: var(--accent); font-weight: 800; } .muted, .footnote, small { color: var(--muted); } form { display: grid; gap: 14px; } label { display: grid; gap: 7px; color: var(--muted); font-size: 14px; } input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 12px; background: #10131e; color: var(--text); font: inherit; } button { appearance: none; border: 0; border-radius: 9px; background: var(--accent); color: #091128; padding: 12px 16px; font-weight: 800; cursor: pointer; font: inherit; } button:disabled { opacity: .55; cursor: wait; } button.secondary { background: #30384f; color: var(--text); } button.danger { background: #512936; color: #ffd8dd; padding: 8px 11px; } .alert { margin: 16px 0; border-radius: 10px; padding: 12px; } .error { background: #4a2630; color: #ffd8dd; } .success { background: #1d463c; color: #d5fff0; } .email-row { display: flex; align-items: center; gap: 10px; margin: 22px 0; } code { overflow-wrap: anywhere; } .email-row code { flex: 1; border: 1px dashed #586483; border-radius: 9px; padding: 12px; background: #10131e; } .task { margin: 22px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; } .hidden { display: none; } .progress { overflow: hidden; height: 9px; border-radius: 5px; background: #0c0e16; margin-bottom: 13px; } .progress span { display: block; height: 100%; background: linear-gradient(90deg, #718cff, #6fd4ff); transition: width .35s; } .back { display: inline-block; color: #b8c6ff; margin-top: 14px; } .topbar, .table-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .topbar h1 { margin-bottom: 0; } .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .inline-form { grid-template-columns: 1fr auto; align-items: end; } .table-card { padding: 0; overflow: hidden; } .table-head { padding: 24px 25px 4px; } nav { display: flex; flex-wrap: wrap; gap: 12px; } nav a { color: #b8c6ff; } .scroll { overflow-x: auto; } table { width: 100%; min-width: 930px; border-collapse: collapse; } th, td { padding: 14px 16px; vertical-align: top; border-top: 1px solid var(--line); text-align: left; font-size: 13px; } th { color: var(--muted); font-weight: 600; } tr.running { background: #20294b; } .badge { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #30384f; font-size: 12px; } .badge.running, .badge.queued { background: #334078; color: #dbe2ff; } .badge.completed { background: #1d463c; color: #d5fff0; } .badge.failed { background: #4a2630; color: #ffd8dd; } .events { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; min-width: 150px; } .error-text { color: var(--danger); } .empty { text-align: center; color: var(--muted); padding: 40px; } @media (max-width: 720px) { .shell { width: min(100% - 24px, 1180px); padding: 24px 0; } .narrow { margin: 0 auto; } .admin-grid { grid-template-columns: 1fr; } .topbar, .table-head { flex-direction: column; } .inline-form { grid-template-columns: 1fr; } }

textarea { border: 1px solid var(--line); border-radius: 9px; padding: 12px; background: #10131e; color: var(--text); font: inherit; resize: vertical; } .inventory { margin-bottom: 18px; } .inventory-list { display: flex; flex-wrap: wrap; gap: 10px; } .inventory-list span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; font-size: 13px; }

.redeem-loading { display: flex; align-items: center; gap: 13px; margin-top: 16px; padding: 13px; border: 1px solid #465789; border-radius: 10px; background: #18213b; color: #dbe2ff; }
.redeem-loading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.spinner { width: 22px; height: 22px; flex: 0 0 22px; border: 3px solid #8ca3ff55; border-top-color: #9bb0ff; border-radius: 50%; animation: redeem-spin .75s linear infinite; }
#redeem-form[aria-busy="true"] { opacity: .82; }
@keyframes redeem-spin { to { transform: rotate(360deg); } }
.redeem-loading.hidden { display: none; }

.inventory-heading { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.inventory-heading h2 { margin-bottom: 5px; }
.inventory-heading p { margin-bottom: 0; }
.platform-inventory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stock-card { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #121827; }
.stock-card-head { display: grid; gap: 3px; }
.stock-card-head small { overflow-wrap: anywhere; }
.stock-available { display: flex; align-items: baseline; gap: 8px; margin: 16px 0; }
.stock-available strong { color: var(--success); font-size: 30px; line-height: 1; }
.stock-available span { color: var(--muted); font-size: 13px; }
.stock-breakdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.stock-breakdown div { min-width: 0; }
.stock-breakdown dt { color: var(--muted); font-size: 11px; }
.stock-breakdown dd { margin: 4px 0 0; font-size: 16px; font-weight: 700; }
.redeem-loading { justify-content: center; min-height: 50px; }

.proxy-card { margin-bottom: 18px; }
.proxy-card > form { margin-bottom: 18px; }
.proxy-table table { min-width: 560px; }
.proxy-table form { display: inline; }
.proxy-table button { padding: 8px 11px; }

.proxy-table,
.voucher-table {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.proxy-table { max-height: 300px; }
.voucher-table { max-height: min(58vh, 620px); }
.proxy-table thead th,
.voucher-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #181b27;
}

.concurrency-card { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.concurrency-card h2 { margin-bottom: 5px; }
.concurrency-card p { margin-bottom: 0; }
.concurrency-form { display: grid; grid-template-columns: minmax(120px, 180px) auto; align-items: end; }
@media (max-width: 720px) { .concurrency-card { align-items: stretch; flex-direction: column; } .concurrency-form { grid-template-columns: 1fr; } }

.expiry { margin: -6px 0 20px; color: var(--muted); }
.expiry strong { color: #dbe2ff; }
.expiry.expired strong { color: var(--danger); }

.stock-card { color: inherit; text-decoration: none; }
.stock-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.inventory-detail { margin-bottom: 18px; }
.inventory-code-table { max-height: min(52vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.inventory-code-table thead th { position: sticky; top: 0; z-index: 1; background: #181b27; }
.result-data { max-width: 520px; max-height: 260px; overflow: auto; margin: 10px 0 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #10131e; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
details summary { cursor: pointer; color: #b8c6ff; }


/* Customer invitation flow: light editorial layout. */
body.customer-flow { --flow-ink: #202126; --flow-muted: #74767f; --flow-line: #d9dade; --flow-paper: #f7f7f8; --flow-panel: #ffffff; --flow-accent: #d5a422; color: var(--flow-ink); background: linear-gradient(180deg, #fafafa 0, #f1f2f4 58%, #f8f8f8 100%); font-family: "PingFang SC", "Microsoft YaHei", Inter, system-ui, sans-serif; }
.customer-flow .shell { width: min(1120px, calc(100% - 40px)); padding: 56px 0 74px; }
.flow-header { height: 64px; display: flex; align-items: center; padding: 0 max(24px, calc((100% - 1120px) / 2)); border-bottom: 1px solid #d8d9dc; background: #fafafa; }
.flow-brand { display: inline-flex; align-items: center; gap: 9px; color: #202126; text-decoration: none; letter-spacing: .19em; font-size: 11px; font-weight: 700; }
.flow-brand strong { padding: 6px 9px; color: #fff; background: #212228; letter-spacing: .16em; font-size: 14px; line-height: 1; }
.flow-mark { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #212228; color: #e1b535; font-size: 14px; }
.flow-hero { margin: 0 0 36px; max-width: 780px; }
.flow-hero.compact { margin-bottom: 30px; }
.flow-kicker { margin: 0 0 10px; color: #71737c; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.flow-hero h1 { margin: 0; color: #202126; font-family: Georgia, "Songti SC", "SimSun", serif; font-size: clamp(42px, 6.4vw, 66px); font-weight: 500; line-height: 1.06; letter-spacing: -.055em; }
.flow-hero > p:last-child { max-width: 720px; margin: 20px 0 0; color: #666973; font-size: 15px; line-height: 1.8; }
.flow-grid { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(430px, 1.22fr); gap: 24px; align-items: stretch; }
.flow-guide { min-height: 410px; padding: 30px 24px; border-radius: 10px; background: #22242b; color: #eff0f2; box-shadow: 0 18px 30px #20212819; }
.flow-guide > p { margin: 0 0 24px; color: #a9adb5; font-size: 12px; }
.flow-guide ol { display: grid; gap: 25px; margin: 0; padding: 0; list-style: none; }
.flow-guide li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; font-size: 14px; line-height: 1.7; }
.flow-guide b { color: #e0b13a; font-size: 12px; letter-spacing: .08em; }
.flow-panel { padding: 30px 26px 26px; border: 1px solid var(--flow-line); border-radius: 10px; background: var(--flow-panel); box-shadow: 0 18px 36px #2021280a; }
.flow-panel-top { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.flow-panel h2, .flow-task-card h2 { margin: 0; color: #24252a; font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 27px; line-height: 1.15; }
.flow-status { color: #888b93; font-size: 12px; white-space: nowrap; }
.flow-panel form { display: grid; gap: 11px; }
.flow-panel label { color: #4e5057; font-weight: 700; font-size: 13px; }
.customer-flow input { border: 1px solid #d9dadd; border-radius: 7px; padding: 16px 14px; background: #fbfbfc; color: #202126; font-size: 16px; letter-spacing: .04em; }
.customer-flow input:focus { border-color: #9d9fa5; outline: 3px solid #e9eaed; }
.field-hint { margin: 0 0 10px; color: #8a8c94; font-size: 12px; line-height: 1.6; }
.flow-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 6px; padding: 16px 17px; border-radius: 7px; background: #202126; color: #fff; font-weight: 800; text-align: left; transition: transform .15s ease, background .15s ease; }
.flow-button:hover:not(:disabled) { background: #31333b; transform: translateY(-1px); }
.flow-button:disabled { background: #b8bac0; color: #f5f5f5; cursor: wait; }
.customer-flow .alert { margin: 0 0 20px; border: 1px solid #e6c4c0; background: #fff8f7; color: #9a3430; }
.customer-flow .redeem-loading { justify-content: flex-start; margin: 0; padding: 11px 0; border: 0; border-radius: 0; background: transparent; color: #676a74; }
.customer-flow .spinner { width: 17px; height: 17px; flex-basis: 17px; border-color: #d8d9dd; border-top-color: #24252a; }
.flow-task-card { display: grid; grid-template-columns: 1fr auto; gap: 20px; margin-top: 18px; padding: 25px 26px; border: 1px solid var(--flow-line); border-radius: 10px; background: #fff; box-shadow: 0 18px 36px #20212808; }
.flow-task-body, .flow-empty { grid-column: 1 / -1; padding: 16px; border: 1px solid #e0e1e4; border-radius: 7px; background: #fafafb; color: #797b83; font-size: 13px; }
.flow-task-body p { margin: 12px 0 0; }
.customer-flow .progress { height: 7px; margin: 0; background: #e4e5e8; }
.customer-flow .progress span { background: linear-gradient(90deg, #cea027, #e6bf50); }
.customer-flow .email-row { margin: 0; }
.customer-flow .flow-email code { border: 1px solid #dadbe0; border-radius: 7px; background: #fafafb; color: #282a30; padding: 15px 13px; font-size: 14px; }
.customer-flow button.secondary { border: 1px solid #d7d9dd; background: #fff; color: #303239; }
.customer-flow button.secondary:hover { background: #f2f3f5; }
.customer-flow .expiry { margin: 15px 0 16px; color: #757780; font-size: 13px; }
.customer-flow .expiry strong { color: #303239; }
.customer-flow .expiry.expired strong { color: #b9423c; }
.flow-back { display: inline-block; margin-top: 22px; color: #555860; font-size: 13px; text-decoration: none; }
.flow-back:hover { color: #111216; }
.customer-flow .hidden { display: none; }
@media (max-width: 760px) { .customer-flow .shell { width: min(100% - 28px, 1120px); padding-top: 38px; } .flow-header { padding: 0 16px; } .flow-brand span:last-child { display: none; } .flow-hero h1 { font-size: 43px; } .flow-grid { grid-template-columns: 1fr; } .flow-guide { min-height: auto; } .flow-task-card { grid-template-columns: 1fr; } .flow-status { white-space: normal; } .flow-panel { padding: 24px 19px; } }


/* Original client presentation: invitation command center. */
body.customer-flow { --flow-ink: #e9eef9; --flow-muted: #a8b4cd; --flow-line: rgba(167, 190, 238, .2); --flow-paper: #111a30; --flow-panel: rgba(22, 34, 62, .86); --flow-accent: #72e5c4; background: radial-gradient(circle at 8% 8%, #2b4388 0, transparent 32%), radial-gradient(circle at 88% 16%, #51368b 0, transparent 26%), linear-gradient(135deg, #0b1020 0%, #111935 48%, #11112b 100%); color: var(--flow-ink); }
.customer-flow .shell { position: relative; padding-top: 72px; }
.customer-flow .shell::before { content: ""; position: absolute; inset: 25px -55px auto auto; width: 280px; height: 280px; border: 1px solid rgba(124, 207, 255, .14); border-radius: 50%; box-shadow: 0 0 0 38px rgba(124, 207, 255, .035), 0 0 0 76px rgba(124, 207, 255, .02); pointer-events: none; }
.flow-header { height: 72px; border-color: rgba(188, 207, 246, .15); background: rgba(9, 14, 29, .72); backdrop-filter: blur(18px); }
.flow-brand { color: #dce7fc; letter-spacing: .12em; }
.flow-brand strong { background: linear-gradient(120deg, #76e5c5, #7fc8ff); color: #0b1527; border-radius: 7px; letter-spacing: .08em; }
.flow-mark { background: #202f59; color: #78e5ca; border: 1px solid rgba(127, 226, 198, .38); }
.flow-kicker { color: #74e2c5; }
.flow-hero { max-width: 850px; margin-bottom: 44px; }
.flow-hero h1 { color: #f0f4fe; font-family: "PingFang SC", "Microsoft YaHei", Inter, sans-serif; font-size: clamp(40px, 5.7vw, 62px); font-weight: 760; line-height: 1.13; letter-spacing: -.04em; }
.flow-hero > p:last-child { color: #b8c4db; max-width: 650px; }
.flow-grid { grid-template-columns: minmax(250px, .68fr) minmax(460px, 1.32fr); gap: 26px; }
.flow-guide { position: relative; min-height: 390px; overflow: hidden; border: 1px solid rgba(123, 151, 212, .3); border-radius: 22px; background: linear-gradient(155deg, #202d55, #151d36 70%); box-shadow: none; }
.flow-guide::after { content: "LIVE"; position: absolute; right: -13px; bottom: 17px; color: rgba(126, 229, 198, .15); font: 900 64px/1 Inter, sans-serif; letter-spacing: -.07em; transform: rotate(-90deg); }
.flow-guide > p { color: #83e6ca; text-transform: uppercase; letter-spacing: .12em; }
.flow-guide ol { gap: 29px; position: relative; z-index: 1; }
.flow-guide li { grid-template-columns: 38px 1fr; color: #d6def0; }
.flow-guide b { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: rgba(114, 229, 196, .13); border: 1px solid rgba(114, 229, 196, .28); color: #76e5c5; }
.flow-panel { position: relative; padding: 32px; border: 1px solid rgba(173, 196, 241, .2); border-radius: 22px; background: linear-gradient(145deg, rgba(31, 45, 80, .94), rgba(17, 27, 52, .9)); box-shadow: 0 22px 54px #02061555; overflow: hidden; }
.flow-panel::before { content: ""; position: absolute; top: -100px; right: -50px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 200, 255, .17), transparent 65%); pointer-events: none; }
.flow-panel-top, .flow-panel form { position: relative; z-index: 1; }
.flow-panel h2, .flow-task-card h2 { color: #f0f4fe; font-family: "PingFang SC", "Microsoft YaHei", Inter, sans-serif; font-weight: 730; }
.flow-status { display: inline-flex; gap: 4px; align-items: center; padding: 7px 10px; border: 1px solid rgba(159, 185, 236, .2); border-radius: 999px; background: rgba(6, 12, 28, .23); color: #b7c5df; }
.customer-flow input { border-color: rgba(178, 202, 247, .25); border-radius: 12px; background: rgba(7, 13, 29, .36); color: #f0f4fe; }
.customer-flow input:focus { border-color: #72e5c4; outline: 3px solid rgba(114, 229, 196, .12); }
.flow-panel label { color: #ced9ef; }
.field-hint { color: #99a8c5; }
.flow-button { border-radius: 12px; background: linear-gradient(105deg, #72e5c4, #75b7ff); color: #0d1830; box-shadow: 0 11px 27px rgba(92, 207, 180, .18); }
.flow-button:hover:not(:disabled) { background: linear-gradient(105deg, #8cf0d2, #8ec8ff); }
.flow-button:disabled { background: #53617f; }
.customer-flow .alert { border-color: rgba(255, 164, 158, .45); background: rgba(97, 38, 49, .48); color: #ffd7d3; }
.customer-flow .redeem-loading { color: #c2cee4; }
.customer-flow .spinner { border-color: rgba(169, 192, 241, .22); border-top-color: #78e6c8; }
.flow-task-card { border-color: rgba(173, 196, 241, .18); border-radius: 22px; background: rgba(18, 29, 56, .86); box-shadow: 0 20px 48px #02061538; }
.flow-task-body, .flow-empty { border-color: rgba(165, 188, 236, .15); border-radius: 13px; background: rgba(8, 15, 33, .32); color: #aab8d2; }
.customer-flow .progress { background: rgba(153, 176, 220, .18); }
.customer-flow .progress span { background: linear-gradient(90deg, #72e5c4, #7dbfff); }
.customer-flow .flow-email code { border-color: rgba(178, 202, 247, .24); border-radius: 12px; background: rgba(7, 13, 29, .36); color: #f0f4fe; }
.customer-flow button.secondary { border-color: rgba(178, 202, 247, .25); border-radius: 12px; background: rgba(8, 15, 34, .38); color: #cfe1ff; }
.customer-flow button.secondary:hover { background: rgba(42, 60, 103, .72); }
.customer-flow .expiry { color: #aab8d1; }
.customer-flow .expiry strong { color: #77e7c8; }
.flow-back { color: #9eb5e0; }
.flow-back:hover { color: #80e5c8; }
@media (max-width: 760px) { .flow-grid { grid-template-columns: 1fr; } .flow-panel, .flow-guide, .flow-task-card { border-radius: 17px; } .customer-flow .shell::before { display: none; } }

.customer-flow .flow-panel h2 small { display: block; margin-top: 8px; color: #9eafd0; font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: .08em; }