:root {
  --ink: #17201f;
  --ink-soft: #5d6967;
  --paper: #f6f7f5;
  --surface: #ffffff;
  --surface-soft: #eef3f0;
  --border: #dce2de;
  --primary: #135c61;
  --primary-deep: #0a4044;
  --accent: #c65335;
  --success: #18754a;
  --warning: #9a611a;
  --danger: #b42318;
  --radius: 6px;
  --shadow: 0 12px 28px rgb(23 32 31 / 8%);
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, select, a { touch-action: manipulation; }
button, select { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { margin-bottom: 12px; line-height: 1.25; letter-spacing: 0; }
h1 { font-size: 36px; font-weight: 720; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 18px; }
:focus-visible { outline: 3px solid #d78a59; outline-offset: 3px; }

.skip-link { position: absolute; z-index: 1000; top: -64px; left: 16px; padding: 10px 14px; color: #fff; background: var(--ink); border-radius: 0 0 var(--radius) var(--radius); }
.skip-link:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eyebrow { margin: 0 0 8px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: 0; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius); font-weight: 700; text-decoration: none; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.button-primary { color: #fff; background: var(--primary-deep); }
.button-primary:hover:not(:disabled) { background: #062f32; }
.button-secondary { color: var(--primary-deep); background: #fff; border-color: #9bb8b6; }
.button-secondary:hover:not(:disabled) { background: #edf5f3; border-color: var(--primary); }
.button-wide { width: 100%; }
.text-button, .table-link { padding: 0; color: var(--primary-deep); background: transparent; border: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.topbar { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 64px; align-items: center; gap: 24px; padding: 0 max(24px, calc((100vw - 1160px) / 2)); background: rgb(255 255 255 / 96%); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.brand { display: inline-flex; width: fit-content; min-height: 44px; align-items: center; gap: 10px; font-size: 19px; font-weight: 750; text-decoration: none; }
.brand-mark { display: block; width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
.topbar nav { display: flex; align-items: stretch; justify-content: flex-end; gap: 8px; }
.topbar nav a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 12px; color: var(--ink-soft); border-bottom: 2px solid transparent; font-size: 14px; font-weight: 650; text-decoration: none; }
.topbar nav a:hover, .topbar nav a.is-active { color: var(--primary-deep); border-bottom-color: var(--primary); }
.topbar-actions { display: flex; align-items: center; gap: 4px; }
.topbar-action { display: inline-flex; min-height: 44px; align-items: center; padding: 0 10px; color: var(--primary-deep); background: transparent; border: 0; font-size: 13px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.topbar-action:hover { color: var(--accent); }

main { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 72px; }
main:focus { outline: none; }
.store-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding: 16px 0 48px; border-bottom: 1px solid var(--border); }
.intro-copy { max-width: 600px; }
.intro-copy h1 { margin-bottom: 16px; }
.hero-copy { max-width: 620px; margin-bottom: 0; color: var(--ink-soft); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.disclaimer-summary { padding: 4px 0 4px 32px; border-left: 3px solid var(--warning); }
.disclaimer-summary h2 { font-size: 22px; }
.disclaimer-summary p:last-child { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }

.catalog-section { padding-top: 48px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading h2, .section-heading p:last-child { margin-bottom: 0; }
.section-heading p:last-child { color: var(--ink-soft); }
.filter-label { display: grid; min-width: 150px; gap: 5px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
select, input, textarea { width: 100%; min-height: 44px; padding: 9px 12px; color: var(--ink); background: #fff; border: 1px solid #b7c3bd; border-radius: var(--radius); }
select:focus, input:focus, textarea:focus { border-color: var(--primary); }
textarea { resize: vertical; line-height: 1.55; }
label { display: grid; gap: 7px; color: var(--ink); font-size: 14px; font-weight: 700; }
small { color: var(--ink-soft); font-weight: 400; }

.course-table { border-top: 1px solid var(--border); }
.course-head, .course-row { display: grid; grid-template-columns: minmax(0, 1fr) 94px 78px 84px 104px; gap: 18px; align-items: center; }
.course-head { min-height: 54px; padding: 0 12px; color: var(--ink-soft); font-size: 13px; font-weight: 750; }
.course-row { min-height: 128px; padding: 16px 12px; border-top: 1px solid #e5e9e6; transition: background-color 180ms ease; }
.course-row:hover { background: #f0f5f2; }
.course-name { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; min-width: 0; }
.course-cover-link { display: block; width: 88px; height: 88px; border-radius: var(--radius); }
.course-name img { display: block; width: 88px; height: 88px; object-fit: cover; background: #dde5e1; border-radius: var(--radius); }
.course-name h3, .course-name p { margin: 0; }
.course-name h3 { margin: 3px 0 6px; }
.course-name p:last-child { color: var(--ink-soft); font-size: 13px; }
.course-category { color: var(--primary); font-size: 12px; font-weight: 800; }
.product-link { text-decoration: none; }
.product-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.course-cell { display: grid; gap: 4px; color: var(--success); font-size: 16px; font-variant-numeric: tabular-nums; }
.course-cell strong { color: var(--accent); font-size: 19px; }
.course-action { display: flex; justify-content: flex-end; }
.course-action .button { padding: 0 14px; font-size: 13px; }
.mobile-label { display: none; color: var(--ink-soft); font-size: 12px; font-weight: 700; }

.detail-breadcrumb { margin-bottom: 28px; }
.detail-breadcrumb a, .detail-external { color: var(--primary-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 48px; align-items: start; padding-bottom: 48px; border-bottom: 1px solid var(--border); }
.product-detail__media { aspect-ratio: 16 / 10; overflow: hidden; background: #e0e6e2; border-radius: var(--radius); }
.product-detail__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-detail__summary { padding-top: 8px; }
.product-detail__summary h1 { font-size: 34px; }
.product-lead { color: var(--ink-soft); font-size: 16px; }
.product-price { margin: 22px 0 18px; color: var(--accent); font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; }
.product-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 20px; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.product-facts div { display: grid; gap: 2px; }
.product-facts div:only-child { grid-column: 1 / -1; }
.product-facts dt { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.product-facts dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.purchase-note { margin: 12px 0; color: var(--ink-soft); font-size: 13px; }
.detail-external { display: inline-block; min-height: 44px; padding-top: 10px; font-size: 14px; }
.detail-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 48px 0; border-bottom: 1px solid var(--border); }
.detail-content > div { min-width: 0; padding-right: 48px; }
.detail-content > div + div { padding: 0 0 0 48px; border-left: 1px solid var(--border); }
.detail-content h2 { font-size: 22px; }
.detail-content p:last-child { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.product-disclaimer, .checkout-disclaimer { margin-top: 40px; padding: 28px 32px; background: #fff8f1; border-left: 4px solid var(--warning); }
.product-disclaimer h2, .checkout-disclaimer h2 { font-size: 21px; }
.product-disclaimer p:last-child, .checkout-disclaimer p:last-child { max-width: 920px; margin-bottom: 0; color: #5f5547; font-size: 14px; }
.not-found { min-height: 52vh; display: grid; place-content: center; justify-items: start; }

.page-heading { max-width: 760px; margin-bottom: 32px; }
.page-heading h1 { margin-bottom: 10px; }
.page-heading > p:last-child { color: var(--ink-soft); font-size: 16px; }
.guest-note { display: inline-block; margin: 8px 0 0; color: var(--success) !important; font-size: 14px !important; font-weight: 700; }
.demo-payment-notice { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px 16px; color: #704200; background: #fff4dc; border-left: 4px solid var(--warning); font-size: 13px; }
.demo-payment-notice strong { flex: 0 0 auto; }
.demo-success { display: grid; gap: 10px; margin-bottom: 24px; padding: 26px; color: #075f39; background: #e5f7eb; border: 1px solid #b8dfc4; border-left: 4px solid var(--success); border-radius: var(--radius); }
.demo-success h1, .demo-success p { margin-bottom: 0; }
.demo-success p:not(.eyebrow) { color: #315c49; }
.demo-success .button { justify-self: start; color: #075f39; border-color: #8ac49a; }
.order-success-heading { margin-bottom: 24px; }
.order-success-heading h1 { color: #075f39; }
.order-lookup { padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.order-lookup form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.form-note { min-height: 20px; margin: 8px 0 0; color: var(--danger); font-size: 13px; font-weight: 500; }
.order-card { display: grid; gap: 22px; margin-top: 24px; padding: 26px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.order-card__head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.order-card__head h2 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.order-status { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 800; }
.status-pending_payment { color: #704200; background: #fff1db; }
.status-paid { color: #075f39; background: #dcf7e6; }
.status-expired, .status-payment_failed { color: #8e1f19; background: #ffe5e2; }
.order-lines { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.order-lines li { display: flex; justify-content: space-between; gap: 18px; color: var(--ink-soft); }
.order-lines strong, .order-total strong { font-variant-numeric: tabular-nums; }
.order-total { display: flex; justify-content: space-between; align-items: center; color: var(--ink-soft); }
.order-total strong { color: var(--ink); font-size: 23px; }
.delivery-box, .payment-box { padding: 20px; background: var(--surface-soft); border-left: 4px solid var(--success); }
.delivery-box h2 { font-size: 22px; }
.access-details { color: var(--ink-soft); }
.access-details code { display: block; margin-top: 8px; padding: 10px; overflow-wrap: anywhere; color: #083d32; background: #fff; border: 1px solid #b8d9ce; border-radius: 4px; }
.material-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid #c6dcd3; }
.material-row h3, .material-row p { margin: 0; }
.material-row p { color: var(--ink-soft); font-size: 13px; }
.material-row--keys { display: block; }
.delivered-key-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.delivered-key-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; min-height: 52px; align-items: center; gap: 12px; padding: 8px 10px; background: #f7faf8; border: 1px solid #c6dcd3; border-radius: var(--radius); }
.delivered-key-list span { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.delivered-key-list code { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 14px; }
.key-copy-button { min-width: 64px; }
.material-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: 24px; align-items: start; }
.checkout-form, .summary { display: grid; gap: 12px; padding: 26px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.summary h2 { font-size: 21px; }
.required-label { display: inline-flex; align-items: baseline; gap: 4px; }
.required-label b { color: var(--danger); }
.checkout-help { margin-top: -4px; color: var(--ink-soft); }
.payment-methods { min-width: 0; margin: 8px 0 4px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); }
.payment-methods legend { padding: 0 6px; font-size: 14px; font-weight: 750; }
.payment-methods > p { margin: 0 0 12px; color: var(--ink-soft); font-size: 13px; }
.payment-methods > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.payment-method { display: grid; min-height: 64px; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid #b7c3bd; border-radius: var(--radius); cursor: pointer; }
.payment-method:has(input:checked) { background: #edf5f3; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.payment-method input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--primary); }
.payment-method span { display: grid; gap: 1px; }
.payment-method small { font-size: 11px; }
.cashier-loading { display: grid; min-height: 50vh; place-items: center; color: var(--ink-soft); }
.cashier-heading { margin-bottom: 24px; }
.cashier-card { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 40px; align-items: center; padding: 32px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.cashier-qr { display: grid; min-height: 348px; place-items: center; padding: 14px; background: #f7f9f7; border: 1px solid var(--border); }
.cashier-qr img { display: block; width: min(320px, 100%); height: auto; aspect-ratio: 1; }
.cashier-summary dl { display: grid; gap: 14px; margin: 20px 0; }
.cashier-summary dl div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.cashier-summary dt { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.cashier-summary dd { margin: 0; overflow-wrap: anywhere; font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cashier-status { width: fit-content; margin: 0 0 20px; padding: 8px 12px; color: #704200; background: #fff1db; font-size: 13px; font-weight: 750; }
.empty-state { display: grid; gap: 8px; justify-items: start; padding: 48px 12px; color: var(--ink-soft); }
.site-footer { display: flex; flex-direction: column; gap: 5px; margin-top: 52px; padding-top: 20px; color: var(--ink-soft); border-top: 1px solid var(--border); font-size: 13px; }
.icon-button { display: inline-grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; color: var(--ink-soft); background: transparent; border: 0; border-radius: var(--radius); font-size: 26px; line-height: 1; }
.icon-button:hover { color: var(--ink); background: var(--surface-soft); }
.announcement-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 26px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 80px rgb(23 32 31 / 24%); }
.announcement-dialog::backdrop { background: rgb(15 25 23 / 48%); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-heading h2 { margin-bottom: 0; }
.announcement-body { margin: 22px 0; color: var(--ink-soft); white-space: pre-wrap; }
.dialog-actions { display: flex; justify-content: flex-end; }
.support-launcher { position: fixed; z-index: 65; right: 24px; bottom: 24px; min-height: 48px; padding: 0 18px; color: #fff; background: var(--primary-deep); border: 1px solid #062f32; border-radius: var(--radius); box-shadow: var(--shadow); font-weight: 750; }
.support-launcher:hover { background: #062f32; }
.support-scrim { position: fixed; z-index: 54; inset: 0; background: rgb(15 25 23 / 18%); }
.support-panel { position: fixed; z-index: 60; right: 24px; bottom: 84px; display: grid; width: min(400px, calc(100vw - 32px)); max-height: min(680px, calc(100dvh - 112px)); grid-template-rows: auto auto minmax(120px, 1fr) auto auto; padding: 20px; overflow: hidden; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 60px rgb(23 32 31 / 22%); }
.support-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.support-panel__header h2 { margin: 0; font-size: 21px; }
.support-welcome { margin: 14px 0; color: var(--ink-soft); font-size: 13px; }
.support-messages { display: flex; min-height: 160px; flex-direction: column; gap: 10px; overflow-y: auto; padding: 4px 4px 12px; }
.support-empty { margin: auto; color: var(--ink-soft); font-size: 13px; text-align: center; }
.support-message { width: fit-content; max-width: 86%; padding: 9px 11px; background: #eef3f0; border-radius: var(--radius); overflow-wrap: anywhere; }
.support-message--visitor { align-self: flex-end; color: #fff; background: var(--primary); }
.support-message div { font-size: 14px; }
.support-message time { display: block; margin-top: 4px; color: inherit; font-size: 10px; opacity: .72; }
.support-form { padding-top: 12px; border-top: 1px solid var(--border); }
.support-form textarea { min-height: 74px; }
.support-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.support-form__actions .form-note { margin: 0; }
.support-privacy { margin: 10px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.toast { position: fixed; z-index: 100; right: 24px; bottom: 84px; max-width: min(420px, calc(100vw - 48px)); padding: 12px 16px; color: #fff; background: #263532; border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; }
.toast-visible { opacity: 1; transform: translateY(0); }

/* Administrator workspace */
.admin-page { overflow-x: hidden; background: #eef1ee; }
.admin-topbar { position: sticky; z-index: 30; top: 0; display: grid; grid-template-columns: auto 1fr auto; min-height: 64px; align-items: center; gap: 24px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--border); }
.admin-topbar > strong { font-size: 15px; }
.admin-topbar > a:last-child { display: inline-flex; min-height: 44px; align-items: center; color: var(--primary-deep); font-size: 14px; font-weight: 700; text-decoration: none; }
.admin-shell { width: 100%; max-width: none; margin: 0; padding: 0; }
.admin-login { width: min(620px, calc(100% - 40px)); margin: 72px auto; padding: 32px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.admin-login > p:not(.eyebrow):not(.form-note) { color: var(--ink-soft); }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.admin-workspace { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: calc(100dvh - 64px); }
.admin-sidebar { position: sticky; top: 64px; display: flex; height: calc(100dvh - 64px); flex-direction: column; padding: 28px 18px; background: #172624; color: #dce7e3; }
.admin-sidebar__heading { display: grid; gap: 4px; padding: 0 10px 24px; border-bottom: 1px solid rgb(255 255 255 / 13%); }
.admin-sidebar__heading strong { color: #fff; font-size: 17px; }
.admin-kicker { color: #8eb6b1; font-size: 11px; font-weight: 800; }
.admin-nav { display: grid; gap: 6px; margin-top: 20px; }
.admin-nav button { min-height: 44px; padding: 0 12px; color: #bdd0cc; background: transparent; border: 0; border-left: 3px solid transparent; border-radius: 0; font-weight: 700; text-align: left; }
.admin-nav button:hover, .admin-nav button.is-active { color: #fff; background: rgb(255 255 255 / 8%); border-left-color: #d8a44e; }
.admin-store-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: auto; padding: 0 12px; color: #bdd0cc; font-size: 13px; font-weight: 700; text-decoration: none; }
.admin-store-link:hover { color: #fff; }
.admin-stage { min-width: 0; padding: 32px 36px 64px; }
.admin-stage__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.admin-stage__header h1 { margin: 0; font-size: 30px; }
.admin-view { display: none; padding-top: 24px; }
.admin-view.is-visible { display: block; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.metric { min-height: 126px; padding: 22px; color: #fff; background: #174f53; border-radius: var(--radius); }
.metric:nth-child(2) { background: #8a5a20; }
.metric:nth-child(3) { background: #227248; }
.metric span { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.metric strong { font-size: 34px; font-variant-numeric: tabular-nums; }
.analytics-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.analytics-heading h2, .analytics-heading p:last-child { margin-bottom: 0; }
.analytics-heading p:last-child { color: var(--ink-soft); }
.range-control { display: inline-flex; flex: 0 0 auto; padding: 3px; background: #dfe5e1; border-radius: var(--radius); }
.range-control button { min-width: 64px; min-height: 38px; padding: 0 12px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 4px; font-size: 13px; font-weight: 750; }
.range-control button.is-active { color: var(--primary-deep); background: #fff; box-shadow: 0 1px 4px rgb(23 32 31 / 10%); }
.analytics-dashboard { min-height: 200px; }
.analytics-loading, .analytics-error { display: grid; min-height: 180px; place-content: center; justify-items: center; padding: 24px; color: var(--ink-soft); background: #fff; border: 1px solid var(--border); text-align: center; }
.analytics-error strong { color: var(--danger); }
.analytics-error p { margin: 6px 0 14px; }
.metric-grid--analytics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric-card { display: grid; min-width: 0; min-height: 142px; align-content: start; gap: 4px; padding: 17px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-top: 3px solid transparent; border-radius: var(--radius); text-align: left; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.metric-card:hover { border-color: #9bb8b6; box-shadow: 0 5px 16px rgb(23 32 31 / 8%); transform: translateY(-1px); }
.metric-card.is-selected { border-color: var(--primary); border-top-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.metric-card__label { color: var(--ink-soft); font-size: 16px; font-weight: 750; }
.metric-card strong { margin: 3px 0; overflow-wrap: anywhere; font-size: 28px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.metric-card__hint { margin-top: auto; padding-top: 6px; color: var(--primary-deep); font-size: 14px; font-weight: 700; }
.metric-change { display: inline-flex; width: fit-content; font-size: 11px; font-weight: 750; }
.analytics-dashboard .metric-change { font-size: 14px; }
.metric-change.is-up { color: #0d7044; }
.metric-change.is-down { color: #b42318; }
.metric-change.is-flat, .metric-change.is-neutral { color: var(--ink-soft); }
.analytics-detail { margin-top: 18px; padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.analytics-detail__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.analytics-detail__header h3 { margin-bottom: 6px; font-size: 22px; }
.analytics-detail__header p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0; }
.analytics-detail__header p > strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.conversion-summary { display: grid; min-width: 180px; gap: 2px; padding-left: 22px; border-left: 3px solid var(--warning); }
.conversion-summary > span { color: var(--ink-soft); font-size: 15px; font-weight: 750; }
.conversion-summary > strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding-top: 24px; }
.analytics-visual { min-width: 0; }
.analytics-subheading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.analytics-subheading h4 { margin: 0; font-size: 16px; }
.analytics-subheading span { color: var(--ink-soft); font-size: 14px; }
.analytics-chart { display: block; width: 100%; height: 240px; overflow: visible; }
.chart-guide { stroke: #dce2de; stroke-width: 1; }
.chart-line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: #fff; stroke: var(--primary); stroke-width: 2; }
.chart-label { fill: #6a7673; font-size: 13px; }
.analytics-empty { padding: 18px; color: var(--ink-soft); background: #f7f9f7; text-align: center; }
.chart-data { margin-top: 8px; color: var(--primary-deep); font-size: 15px; }
.chart-data summary { min-height: 44px; padding-top: 11px; cursor: pointer; font-weight: 750; }
.chart-data .table-scroll { margin-top: 6px; max-height: 280px; }
.funnel-panel { padding-left: 26px; border-left: 1px solid var(--border); }
.funnel-panel ol { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; }
.funnel-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 10px; }
.funnel-row span { font-size: 13px; font-weight: 750; }
.funnel-row strong { font-variant-numeric: tabular-nums; }
.funnel-row small { grid-column: 1 / -1; font-size: 13px; }
.funnel-track { display: block; width: 100%; height: 7px; overflow: hidden; appearance: none; background: #e8ece9; border: 0; border-radius: 3px; }
.funnel-track::-webkit-progress-bar { background: #e8ece9; border-radius: 3px; }
.funnel-track::-webkit-progress-value { background: var(--primary); border-radius: 3px; }
.funnel-track::-moz-progress-bar { background: var(--primary); border-radius: 3px; }
.analytics-breakdown { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.analytics-breakdown .table-scroll { max-height: 380px; }
.analytics-glossary { margin-top: 28px; padding: 28px 0 4px; border-top: 1px solid var(--border); }
.analytics-glossary > header { display: flex; align-items: baseline; gap: 12px 18px; flex-wrap: wrap; }
.analytics-glossary > header .eyebrow { width: 100%; margin-bottom: -6px; }
.analytics-glossary h3 { margin: 0; font-size: 21px; }
.analytics-glossary > header > p:last-child { margin: 0; color: var(--ink-soft); font-size: 14px; }
.analytics-glossary dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 20px 0 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.analytics-glossary dl > div { min-width: 0; padding: 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.analytics-glossary dt { color: var(--ink); font-size: 15px; font-weight: 800; }
.analytics-glossary dd { margin: 7px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.analytics-glossary__note { margin: 16px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.analytics-glossary__note strong { color: var(--ink); }
.admin-support-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); min-height: 620px; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.support-thread-list { overflow-y: auto; border-right: 1px solid var(--border); }
.support-thread-list > header { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 16px; background: #f7f9f7; border-bottom: 1px solid var(--border); }
.support-thread-list > header span { color: var(--ink-soft); font-size: 12px; }
.support-thread { position: relative; display: grid; width: 100%; min-height: 92px; gap: 6px; padding: 14px 44px 14px 16px; color: var(--ink); background: #fff; border: 0; border-bottom: 1px solid var(--border); text-align: left; }
.support-thread:hover, .support-thread.is-selected { background: #edf5f3; }
.support-thread.is-selected { box-shadow: inset 3px 0 var(--primary); }
.support-thread > span { display: flex; flex-direction: column; }
.support-thread time, .support-thread small { color: var(--ink-soft); font-size: 11px; }
.support-thread small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-thread b { position: absolute; top: 14px; right: 12px; color: var(--primary); font-size: 10px; }
.support-list-empty { padding: 24px 16px; color: var(--ink-soft); font-size: 13px; }
.admin-conversation { display: grid; min-width: 0; grid-template-rows: auto minmax(240px, 1fr) auto; }
.admin-conversation > header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.admin-conversation > header h3, .admin-conversation > header p { margin: 0; }
.admin-conversation > header p { max-width: 520px; color: var(--ink-soft); font-size: 11px; overflow-wrap: anywhere; }
.admin-conversation > header > span { flex: 0 0 auto; color: var(--ink-soft); font-size: 11px; }
.admin-messages { display: flex; flex-direction: column; gap: 12px; padding: 20px; overflow-y: auto; background: #fafbfa; }
.admin-message { max-width: min(76%, 620px); padding: 11px 13px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.admin-message--admin { align-self: flex-end; background: #e5f1ee; border-color: #bdd7d0; }
.admin-message > div { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: 10px; }
.admin-message p { margin: 6px 0 0; overflow-wrap: anywhere; font-size: 14px; }
.admin-reply-form { padding: 16px 20px; border-top: 1px solid var(--border); }
.admin-reply-form > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.admin-reply-form .form-note { margin: 0; }
.payment-config { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 18px; padding: 22px 24px; background: #fff; border-left: 4px solid var(--warning); }
.payment-config h2, .payment-config p { margin: 0; }
.payment-config h2 { font-size: 20px; }
.payment-config > p { max-width: 640px; color: var(--ink-soft); }
.payment-admin { display: grid; gap: 18px; }
.payment-heading { margin-bottom: 0; }
.payment-status-band { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, .7fr)); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.payment-status-band > div { display: grid; min-width: 0; min-height: 76px; align-content: center; gap: 5px; padding: 14px 18px; border-right: 1px solid var(--border); }
.payment-status-band > div:last-child { border-right: 0; }
.payment-status-band span:first-child { color: var(--ink-soft); font-size: 11px; font-weight: 750; }
.payment-status-band strong { overflow-wrap: anywhere; font-size: 14px; }
.payment-status { display: inline-flex; width: fit-content; min-height: 28px; align-items: center; gap: 7px; padding: 0 9px; border-radius: 4px; font-size: 12px; font-weight: 750; }
.payment-status > span { width: 7px; height: 7px; border-radius: 50%; }
.payment-status.is-ready { color: #075d3a; background: #e6f5ed; }
.payment-status.is-ready > span { background: #138653; }
.payment-status.is-unavailable { color: #8f2f27; background: #fbeae8; }
.payment-status.is-unavailable > span { background: #c94a3f; }
.payment-demo-notice { margin: 0; padding: 11px 14px; color: #6d4b0c; background: #fff7e6; border-left: 3px solid var(--warning); font-size: 13px; }
.payment-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.payment-metric { display: grid; min-width: 0; min-height: 116px; align-content: start; gap: 5px; padding: 16px; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: var(--radius); }
.payment-metric > span { color: var(--ink-soft); font-size: 12px; font-weight: 750; }
.payment-metric > strong { margin-top: 3px; overflow-wrap: anywhere; font-size: 25px; font-variant-numeric: tabular-nums; }
.payment-metric > small { margin-top: auto; }
.payment-data-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(340px, .8fr); gap: 18px; }
.payment-section { min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.payment-section h3 { margin: 0; font-size: 18px; }
.payment-config-section .section-heading { margin-bottom: 18px; }
.payment-config-section .section-heading h3 { font-size: 20px; }
.payment-form { display: grid; gap: 18px; }
.payment-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.payment-form legend, .payment-adapter-field { color: var(--ink); font-size: 13px; font-weight: 750; }
.payment-config-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.payment-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.payment-option { display: flex; min-height: 54px; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 11px; background: #f7f9f7; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.payment-option input, .payment-toggle input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); }
.payment-option span, .payment-toggle span { display: grid; gap: 2px; }
.payment-option strong, .payment-toggle strong { font-size: 13px; }
.payment-option small, .payment-toggle small, .payment-adapter-field small { color: var(--ink-soft); font-size: 11px; font-weight: 500; line-height: 1.4; }
.payment-credential-panel { padding: 18px; background: #f7f9f7; border: 1px solid var(--border); border-left: 3px solid var(--primary); }
.payment-credential-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.payment-credential-panel h4, .payment-credential-panel p { margin: 0; }
.payment-credential-panel h4 { font-size: 16px; }
.payment-credential-panel p { margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
.payment-credential-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.payment-field, .payment-certificate-field { display: grid; min-width: 0; align-content: start; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 750; }
.payment-field small, .payment-certificate-field small { color: var(--ink-soft); font-size: 11px; font-weight: 500; line-height: 1.4; }
.payment-certificate-field { padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.payment-certificate-field > span { display: flex; min-height: 28px; align-items: center; justify-content: space-between; gap: 10px; }
.payment-certificate-field input[type="file"] { width: 100%; min-height: 44px; padding: 7px; color: var(--ink-soft); background: #fff; font-size: 12px; }
.payment-certificate-field input[type="file"]::file-selector-button { min-height: 30px; margin-right: 10px; padding: 0 10px; color: var(--primary-deep); background: #e5efec; border: 0; border-radius: 4px; font-weight: 750; cursor: pointer; }
.payment-certificate-field .payment-status { min-height: 24px; font-size: 10px; }
.payment-runtime-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 18px; }
.payment-adapter-field { display: grid; align-content: start; gap: 7px; }
.payment-adapter-field input { min-width: 0; }
.payment-toggle { display: flex; min-height: 60px; align-items: center; gap: 11px; padding: 10px 12px; background: #edf5f3; border: 1px solid #bdd7d0; border-radius: var(--radius); cursor: pointer; }
.payment-form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.payment-form-footer .form-note { flex: 1; margin: 0; text-align: right; }
.payment-security-note { margin: 16px 0 0; padding-top: 14px; color: var(--ink-soft); border-top: 1px solid var(--border); font-size: 12px; }
.payment-section > .table-scroll { max-height: 420px; }
.admin-summary { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.admin-summary h2 { font-size: 21px; }
.admin-summary p { max-width: 840px; color: var(--ink-soft); }
.admin-panel { padding: 28px 0 40px; border-bottom: 1px solid var(--border); }
.admin-panel:first-child { padding-top: 0; }
.course-form, .site-copy-form { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-span-2 { grid-column: 1 / -1; }
.form-toggle { display: flex; min-height: 58px; align-items: center; gap: 10px; padding: 10px 12px; background: #edf5f3; border: 1px solid #bdd7d0; border-radius: var(--radius); cursor: pointer; }
.form-toggle input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); }
.form-toggle span { display: grid; gap: 2px; }
.form-toggle small { color: var(--ink-soft); font-weight: 500; }
.card-key-mode-note { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; background: #fff7e6; border-left: 3px solid var(--warning); }
.card-key-mode-note > div { display: grid; gap: 3px; }
.card-key-mode-note small { color: var(--ink-soft); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.table-scroll { width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--ink-soft); background: #f7f9f7; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
.sold-cell, .card-secret { display: inline-flex; align-items: center; gap: 7px; }
.sold-cell b { min-width: 28px; font-variant-numeric: tabular-nums; }
.table-icon-button { display: inline-grid; width: 44px; height: 44px; place-items: center; color: var(--primary-deep); background: transparent; border: 0; border-radius: var(--radius); cursor: pointer; }
.table-icon-button:hover { background: #e5efec; }
.table-icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.text-button--danger { color: var(--danger); }
.card-key-admin { display: grid; min-width: 0; gap: 18px; }
.key-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.key-metrics article { display: grid; min-height: 104px; align-content: center; gap: 5px; padding: 16px; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: var(--radius); }
.key-metrics span { color: var(--ink-soft); font-size: 12px; font-weight: 750; }
.key-metrics strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.key-import-section, .key-list-section { min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.key-import-section h3, .key-list-section h3 { margin: 0; font-size: 19px; }
.key-import-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.key-import-form .form-actions { align-items: center; }
.key-import-form .form-note { margin: 0; }
.key-list-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.key-filters { display: flex; gap: 10px; }
.key-filters label { min-width: 190px; }
.key-list-section .table-scroll { max-width: 100%; max-height: 620px; }
.key-list-section th { position: sticky; z-index: 1; top: 0; }
.card-key-table { min-width: 1238px; table-layout: fixed; }
.card-key-table .key-col-sequence { width: 64px; }
.card-key-table .key-col-product { width: 140px; }
.card-key-table .key-col-secret { width: 360px; }
.card-key-table .key-col-order { width: 260px; }
.card-key-table .key-col-status { width: 150px; }
.card-key-table .key-col-note { width: 180px; }
.card-key-table .key-col-action { width: 84px; }
.card-key-table th:first-child, .card-key-table .key-sequence { text-align: center; font-variant-numeric: tabular-nums; }
.key-status { display: inline-flex; min-height: 28px; align-items: center; padding: 0 9px; border-radius: 4px; font-size: 11px; font-weight: 750; }
.key-status.is-available { color: #075d3a; background: #e6f5ed; }
.key-status.is-reserved { color: #6a4b00; background: #fff2c7; }
.key-status.is-assigned { color: #174f53; background: #dfeeed; }
.key-status.is-voided { color: #8f2f27; background: #fbeae8; }
.card-secret { width: 100%; max-width: 100%; align-items: flex-start; white-space: normal; }
.card-secret code { min-width: 0; flex: 1; padding-top: 13px; font-variant-numeric: tabular-nums; }
.card-secret:not(.is-revealed) code { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-secret.is-revealed code { overflow-wrap: anywhere; white-space: normal; word-break: break-word; }
.card-secret .table-icon-button, .card-secret .text-button { flex: 0 0 auto; }
.card-secret .text-button, .card-note-editor .text-button, .card-key-table td:last-child .text-button { min-width: 44px; min-height: 44px; }
.key-order-cell { color: var(--ink); background: #fbfcfb; white-space: normal; }
.key-order-cell code { display: block; overflow-wrap: anywhere; white-space: normal; }
.key-order-cell small { color: var(--ink-soft); }
.card-note-editor { display: flex; width: 100%; min-width: 0; max-width: 180px; align-items: center; gap: 6px; }
.card-note-editor input { min-width: 0; flex: 1; padding-inline: 9px; }
.key-security-note { margin: 12px 0 0; color: var(--ink-soft); font-size: 11px; }
.copy-toolbar { position: sticky; z-index: 5; top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; background: #eef1ee; border-bottom: 1px solid var(--border); }
.copy-toolbar h2, .copy-toolbar p { margin-bottom: 0; }
.copy-toolbar p:last-child { color: var(--ink-soft); }
.copy-groups { display: grid; gap: 20px; }
.copy-group { min-width: 0; margin: 0; padding: 22px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.copy-group legend { padding: 0 8px; color: var(--primary-deep); font-size: 15px; font-weight: 800; }
.copy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 900px) {
  main { width: min(100% - 36px, 1160px); padding-top: 36px; }
  .store-intro, .product-detail, .checkout-layout { grid-template-columns: 1fr; gap: 32px; }
  .disclaimer-summary { padding-left: 24px; }
  .product-detail__media { max-width: 720px; }
  .course-head { display: none; }
  .course-row { grid-template-columns: 1fr 1fr 1fr; gap: 12px; min-height: auto; padding: 18px 0; }
  .course-name { grid-column: 1 / -1; }
  .mobile-label { display: inline; }
  .course-action { align-items: end; }
  .admin-workspace { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; padding: 16px 20px; }
  .admin-sidebar__heading { display: none; }
  .admin-nav { display: flex; gap: 4px; margin: 0; overflow-x: auto; }
  .admin-nav button { flex: 0 0 auto; padding: 0 14px; border-bottom: 3px solid transparent; border-left: 0; }
  .admin-nav button:hover, .admin-nav button.is-active { border-bottom-color: #d8a44e; border-left-color: transparent; }
  .admin-store-link { display: none; }
  .admin-stage { padding: 28px 24px 56px; }
  .metric-grid--analytics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-glossary dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid { grid-template-columns: 1fr; }
  .funnel-panel { padding: 22px 0 0; border-top: 1px solid var(--border); border-left: 0; }
  .payment-status-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-status-band > div:nth-child(2) { border-right: 0; }
  .payment-status-band > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .payment-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payment-data-grid { grid-template-columns: 1fr; }
  .payment-config-row, .payment-runtime-grid { grid-template-columns: 1fr; }
  .key-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .key-list-toolbar { align-items: stretch; flex-direction: column; }
  .key-filters { width: 100%; }
  .key-filters label { flex: 1; min-width: 0; }
}

@media (max-width: 620px) {
  h1 { font-size: 30px; }
  h2 { font-size: 23px; }
  .topbar { grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; min-height: 60px; padding: 7px 16px; }
  .brand { font-size: 17px; }
  .topbar nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 0; }
  .topbar nav a { padding: 0 8px; font-size: 13px; }
  .topbar-actions { justify-self: end; }
  .topbar-action { padding: 0 6px; font-size: 12px; }
  main { width: min(100% - 28px, 1160px); padding-top: 28px; }
  .store-intro { gap: 28px; padding: 8px 0 36px; }
  .hero-actions .button { flex: 1 1 140px; }
  .section-heading { align-items: start; flex-direction: column; }
  .filter-label { width: 100%; }
  .course-row { grid-template-columns: 1fr 1fr; }
  .course-name { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .course-cover-link, .course-name img { width: 72px; height: 72px; }
  .course-cell:nth-of-type(3) { display: none; }
  .course-action { grid-column: 2; }
  .course-action .button { width: 100%; }
  .product-detail__summary h1 { font-size: 29px; }
  .detail-content { grid-template-columns: 1fr; gap: 28px; }
  .detail-content > div, .detail-content > div + div { padding: 0; border-left: 0; }
  .product-disclaimer, .checkout-disclaimer { padding: 22px; }
  .order-lookup form, .inline-form { grid-template-columns: 1fr; }
  .order-lookup, .order-card, .checkout-form, .summary { padding: 20px; }
  .payment-methods > div { grid-template-columns: 1fr; }
  .cashier-card { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .cashier-qr { min-height: 0; }
  .order-card__head, .material-row { align-items: flex-start; flex-direction: column; }
  .order-lines li { align-items: flex-start; flex-direction: column; gap: 2px; }
  .material-actions { justify-content: flex-start; }
  .admin-topbar { grid-template-columns: auto 1fr; gap: 12px; padding: 0 16px; }
  .admin-topbar { position: static; }
  .admin-topbar > strong { font-size: 13px; text-align: right; }
  .admin-topbar > a:last-child { display: none; }
  .admin-stage { padding: 24px 16px 48px; }
  .admin-stage__header { align-items: flex-start; flex-direction: column; }
  .admin-stage__header h1 { font-size: 26px; }
  .metric-grid, .form-grid, .copy-grid { grid-template-columns: 1fr; }
  .metric-grid--analytics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .form-span-2 { grid-column: auto; }
  .metric { min-height: 108px; }
  .payment-config, .copy-toolbar { align-items: flex-start; flex-direction: column; }
  .copy-toolbar { position: static; }
  .copy-group { padding: 16px; }
  .admin-login { margin-top: 40px; padding: 24px; }
  .analytics-heading, .analytics-detail__header { align-items: flex-start; flex-direction: column; }
  .range-control { width: 100%; }
  .range-control button { flex: 1; min-width: 0; }
  .metric-card { min-height: 156px; padding: 14px; }
  .metric-card strong { font-size: 23px; }
  .analytics-detail { padding: 16px; }
  .conversion-summary { width: 100%; padding: 12px 0 0; border-top: 3px solid var(--warning); border-left: 0; }
  .analytics-subheading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .analytics-chart { height: 220px; }
  .analytics-glossary dl { grid-template-columns: 1fr; }
  .admin-support-layout { grid-template-columns: 1fr; min-height: 0; }
  .support-thread-list { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--border); }
  .admin-conversation { min-height: 520px; }
  .admin-conversation > header { align-items: flex-start; flex-direction: column; }
  .admin-message { max-width: 88%; }
  .admin-reply-form > div { align-items: stretch; flex-direction: column; }
  .payment-status-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-status-band > div { min-height: 72px; padding: 12px; border-right: 1px solid var(--border); border-bottom: 0; }
  .payment-status-band > div:nth-child(2n) { border-right: 0; }
  .payment-status-band > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .payment-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-metric { min-height: 108px; padding: 13px; }
  .payment-metric > strong { font-size: 21px; }
  .payment-section { padding: 16px; }
  .payment-config-row, .payment-choice-grid, .payment-credential-grid, .payment-runtime-grid { grid-template-columns: 1fr; }
  .payment-credential-panel { padding: 14px; }
  .payment-credential-panel > header { flex-direction: column; gap: 10px; }
  .payment-form-footer { align-items: stretch; flex-direction: column; }
  .payment-form-footer .form-note { text-align: left; }
  .payment-form-footer .button { width: 100%; }
  .card-key-mode-note { align-items: flex-start; flex-direction: column; }
  .key-metrics, .key-import-form { grid-template-columns: 1fr; }
  .key-import-form .form-span-2 { grid-column: auto; }
  .key-filters { flex-direction: column; }
  .delivered-key-list li { grid-template-columns: 1fr auto; }
  .delivered-key-list li > span { grid-column: 1 / -1; }
  .announcement-dialog { padding: 20px; }
  .support-launcher { right: 12px; bottom: 12px; }
  .support-panel { right: 8px; bottom: 72px; width: calc(100vw - 16px); max-height: calc(100dvh - 80px); padding: 16px; }
  .toast { right: 12px; bottom: 72px; max-width: calc(100vw - 24px); }
}

@media (max-width: 420px) {
  .metric-grid--analytics { grid-template-columns: 1fr; }
  .metric-card { min-height: 132px; }
  .payment-metrics { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}