:root {
  --ink: #17211b;
  --muted: #68736c;
  --line: #dce3de;
  --surface: #ffffff;
  --soft: #f3f6f4;
  --green: #176b43;
  --green-dark: #0e4c2e;
  --green-soft: #e8f4ed;
  --amber: #a7600a;
  --red: #b33b37;
  --shadow: 0 18px 50px rgba(20, 36, 27, .10);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #f7f9f8;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f7f9f8; }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 850; font-size: 17px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: var(--green); color: white; font-size: 13px; }
.topbar { height: 66px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.93); display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1120px) / 2)); }
.topbar a { font-size: 13px; color: var(--muted); text-decoration: none; }

.redeem-shell { min-height: calc(100vh - 66px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); max-width: 1120px; margin: 0 auto; padding: 72px 24px 56px; gap: 84px; align-items: center; }
.redeem-copy h1 { font-size: clamp(42px, 5.2vw, 72px); line-height: 1.02; letter-spacing: 0; margin: 13px 0 22px; max-width: 680px; }
.redeem-copy > p { font-size: 18px; line-height: 1.75; color: var(--muted); max-width: 610px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 44px; padding-top: 22px; gap: 20px; }
.step strong { display: block; font-size: 13px; margin-bottom: 6px; }
.step span { color: var(--muted); font-size: 12px; }
.redeem-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 32px; }
.redeem-panel h2 { margin: 0 0 8px; font-size: 22px; }
.redeem-panel > p { margin: 0 0 26px; color: var(--muted); font-size: 14px; }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label, .field-label { font-size: 13px; font-weight: 700; }
input, textarea, select { width: 100%; border: 1px solid #cbd5ce; background: white; color: var(--ink); border-radius: 6px; padding: 12px 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
input { height: 44px; }
textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,107,67,.10); }
.field-hint { color: var(--muted); font-size: 12px; line-height: 1.4; }
.input-action { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.input-action button { min-width: 106px; white-space: nowrap; }
.segmented { display: grid; grid-template-columns: repeat(2, 1fr); height: 44px; border: 1px solid #cbd5ce; border-radius: 6px; padding: 3px; background: var(--soft); }
.segmented label { position: relative; display: grid; place-items: center; cursor: pointer; color: var(--muted); border-radius: 4px; }
.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: white; color: var(--green-dark); box-shadow: 0 1px 4px rgba(20,36,27,.12); }
input[type="file"] { padding: 6px; color: var(--muted); }
input[type="file"]::file-selector-button { height: 30px; border: 0; border-right: 1px solid var(--line); background: var(--soft); color: var(--ink); padding: 0 12px; margin-right: 12px; font-weight: 700; cursor: pointer; }
.json-input { font-family: Consolas, "SFMono-Regular", monospace; font-size: 13px; }
.code-input { text-transform: uppercase; font-family: Consolas, monospace; font-size: 16px; }
.primary, .secondary, .danger, .text-button { border-radius: 6px; min-height: 40px; padding: 0 15px; border: 1px solid transparent; font-weight: 750; }
.primary { background: var(--green); color: white; }
.primary:hover { background: var(--green-dark); }
.primary:disabled { opacity: .55; cursor: wait; }
.secondary { background: white; border-color: #cbd5ce; color: var(--ink); }
.secondary:hover { background: var(--soft); }
.danger { background: #fff3f2; border-color: #f1c9c6; color: var(--red); }
.text-button { background: transparent; color: var(--muted); padding: 0 8px; }
.wide { width: 100%; }
.notice { border-left: 3px solid var(--green); background: var(--green-soft); color: var(--green-dark); padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.notice.error { border-color: var(--red); background: #fff1f0; color: #8c2926; }
.delivery { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.delivery-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.delivery h3 { margin: 0 0 5px; }
.delivery-content { white-space: pre-wrap; overflow-wrap: anywhere; font-family: Consolas, monospace; background: #13251b; color: #effbf4; border-radius: 6px; padding: 16px; margin: 17px 0 12px; line-height: 1.7; min-height: 78px; }
.delivery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 99px; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 800; white-space: nowrap; }

.admin-body { background: #f4f6f5; }
.admin-layout { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; }
.sidebar { background: #14261c; color: white; padding: 24px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { padding: 0 7px 26px; }
.sidebar .brand-mark { background: #e4f2e9; color: var(--green-dark); }
.nav { display: grid; gap: 5px; }
.nav button { height: 42px; border: 0; border-radius: 6px; background: transparent; color: #b9c6be; text-align: left; padding: 0 12px; font-weight: 650; }
.nav button.active, .nav button:hover { background: #23392c; color: white; }
.sidebar-foot { margin-top: auto; display: grid; gap: 8px; }
.sidebar-foot small { color: #839288; padding: 0 8px; }
.sidebar-foot button { color: #c9d3cd; border-color: #3c5144; background: transparent; }
.admin-main { min-width: 0; }
.admin-header { height: 70px; border-bottom: 1px solid var(--line); background: white; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; }
.admin-header h1 { margin: 0; font-size: 20px; }
.admin-header p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.admin-content { padding: 30px 34px 48px; max-width: 1380px; }
.view { display: none; }
.view.active { display: block; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 28px; }
.stat { border: 1px solid var(--line); background: white; border-radius: 7px; padding: 18px; }
.stat span { color: var(--muted); font-size: 12px; }
.stat strong { display: block; margin-top: 9px; font-size: 28px; }
.section { margin-top: 26px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.section-head h2 { margin: 0; font-size: 17px; }
.section-head p { color: var(--muted); margin: 4px 0 0; font-size: 12px; }
.panel { border: 1px solid var(--line); background: white; border-radius: 7px; padding: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.filter-grid .span-all { grid-column: 1 / -1; }
.compact-filter { margin-bottom: 14px; }
.compact-filter .form-actions { align-self: end; margin: 0 0 16px; }
.form-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 18px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; background: white; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 13px 15px; border-bottom: 1px solid #edf0ee; white-space: nowrap; }
table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--green); }
th { background: #fafbfa; color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 800; }
tr:last-child td { border-bottom: 0; }
.empty { text-align: center; color: var(--muted); padding: 34px !important; }
.table-action { border: 0; background: transparent; color: var(--green); font-weight: 750; padding: 5px; }
.table-action.danger-text { color: var(--red); }
.bulk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 10px; }
.bulk-toolbar > div:first-child { display: flex; gap: 14px; align-items: center; }
.bulk-toolbar span { color: var(--muted); font-size: 12px; }
.bulk-actions { display: flex; gap: 8px; }
.status-pill.status-unavailable { background: #f0f1f0; color: #5e6862; }
.status-pill.status-generated { background: #fff3dc; color: #875006; }
.status-pill.status-redeemed { background: #e9eff8; color: #2e5685; }
.cdk-cell { font-family: Consolas, "SFMono-Regular", monospace; font-size: 12px; }
.delivery-preview { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.pagination span { color: var(--muted); font-size: 12px; }
.detail-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 1px solid var(--line); border-radius: 8px; padding: 24px; color: var(--ink); box-shadow: var(--shadow); }
.detail-dialog::backdrop { background: rgba(12, 22, 16, .52); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.dialog-head h2 { margin: 5px 0 0; font-size: 20px; }
.icon-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--muted); font-size: 24px; line-height: 1; }
.detail-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 0 0 20px; }
.detail-meta div { min-width: 0; }
.detail-meta dt { color: var(--muted); font-size: 11px; font-weight: 800; margin-bottom: 5px; }
.detail-meta dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.detail-dialog .delivery-content { max-height: 280px; overflow: auto; margin: 0; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #eef2ef; }
.login-box { width: min(400px,100%); background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 30px; }
.login-box .brand { margin-bottom: 30px; }
.login-box h1 { font-size: 23px; margin: 0 0 6px; }
.login-box > p { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 10; background: #15251c; color: white; border-radius: 6px; padding: 13px 16px; box-shadow: var(--shadow); font-size: 13px; max-width: min(380px, calc(100vw - 48px)); }
.toast.error { background: #8c2926; }
.mobile-nav { display: none; }

@media (max-width: 900px) {
  .redeem-shell { grid-template-columns: 1fr; gap: 38px; padding-top: 48px; }
  .redeem-copy h1 { font-size: 46px; }
  .steps { margin-top: 30px; }
  .admin-layout { display: block; }
  .sidebar { display: none; }
  .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 58px; z-index: 8; background: white; border-top: 1px solid var(--line); overflow-x: auto; }
  .mobile-nav button { flex: 1; min-width: 72px; border: 0; background: white; color: var(--muted); font-size: 12px; }
  .mobile-nav button.active { color: var(--green); font-weight: 800; background: var(--green-soft); }
  .admin-content { padding: 22px 16px 84px; }
  .admin-header { padding: 0 16px; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .topbar { padding: 0 16px; }
  .redeem-shell { padding: 34px 16px 30px; }
  .redeem-copy h1 { font-size: 38px; }
  .redeem-copy > p { font-size: 15px; }
  .steps { gap: 10px; }
  .step span { display: none; }
  .redeem-panel { padding: 22px 18px; }
  .delivery-actions { grid-template-columns: 1fr; }
  .stat-grid { gap: 9px; }
  .stat { padding: 14px; }
  .stat strong { font-size: 23px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .filter-grid { grid-template-columns: 1fr; }
  .filter-grid .span-all { grid-column: auto; }
  .detail-meta { grid-template-columns: 1fr; }
  .bulk-toolbar { align-items: flex-start; flex-direction: column; }
  .bulk-actions { width: 100%; overflow-x: auto; }
  .section-head { align-items: flex-start; }
}