:root {
  color-scheme: dark;
  --bg: #080d14;
  --sidebar: #0b111a;
  --surface: #101722;
  --surface-2: #151e2c;
  --surface-3: #1a2636;
  --line: #253244;
  --line-soft: #1b2635;
  --text: #edf2f7;
  --muted: #8d9aac;
  --muted-2: #667487;
  --brand: #d8ae5a;
  --brand-strong: #f0c875;
  --brand-ink: #171106;
  --success: #55c995;
  --warning: #e3b852;
  --danger: #e67676;
  --info: #6aaaf7;
  --brand-soft: #251f13;
  --success-text: #b8f4d8;
  --success-bg: #12251e;
  --success-line: #2f624b;
  --warning-text: #ffe4a6;
  --warning-bg: #251f12;
  --warning-line: #594620;
  --danger-text: #ffc7c7;
  --danger-bg: #29191d;
  --danger-line: #65353a;
  --info-text: #bcd9ff;
  --info-bg: #142235;
  --info-line: #31537b;
  --issue-text: #e3c2ff;
  --issue-bg: #261a31;
  --issue-line: #5b3a75;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .25);
  --sidebar-width: 272px;
  --content-max: 1540px;
  --placeholder: #546174;
  --hover-row: rgba(255,255,255,.012);
  --floating-surface: rgba(20,29,42,.92);
  --mobile-bar: rgba(8,13,20,.93);
  --story-bg: #0c131d;
  --risk-bg: #18150e;
  --risk-line: #3b3018;
  --risk-text: #d7c59b;
  --risk-title: #f2d58e;
  --risk-icon-line: #594620;
  --avatar-bg: #1e2020;
  --avatar-line: #353124;
  --body-copy: #b4bfce;
  --instruction-copy: #c7d0dc;
  --delivery-bg: #101a16;
  --delivery-line: #254235;
  --delivery-code-bg: #09100d;
  --delivery-code-line: #2f624b;
  --delivery-code-text: #adf4d0;
  --chart-primary: #d8ae5a;
  --chart-secondary: #6aaaf7;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f9;
  --sidebar: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #edf1f6;
  --line: #ccd4df;
  --line-soft: #e1e6ed;
  --text: #17202c;
  --muted: #566477;
  --muted-2: #7a8798;
  --brand: #b88325;
  --brand-strong: #8a5d12;
  --brand-ink: #fffaf0;
  --success: #18794e;
  --warning: #946200;
  --danger: #b33a3a;
  --info: #246db5;
  --brand-soft: #fff7e8;
  --success-text: #12633f;
  --success-bg: #eefaf4;
  --success-line: #a8dbc2;
  --warning-text: #6b4700;
  --warning-bg: #fff8e8;
  --warning-line: #e5c986;
  --danger-text: #8f2d2d;
  --danger-bg: #fff1f1;
  --danger-line: #e3adad;
  --info-text: #1c5c98;
  --info-bg: #eef6ff;
  --info-line: #aac9e8;
  --issue-text: #6c328c;
  --issue-bg: #f8efff;
  --issue-line: #d9b9eb;
  --shadow: 0 18px 50px rgba(33, 43, 54, .12);
  --placeholder: #8b96a6;
  --hover-row: rgba(23,32,44,.026);
  --floating-surface: rgba(255,255,255,.94);
  --mobile-bar: rgba(255,255,255,.94);
  --story-bg: #eef1f5;
  --risk-bg: #fff8e8;
  --risk-line: #e5c986;
  --risk-text: #6c571f;
  --risk-title: #694909;
  --risk-icon-line: #d3ac4f;
  --avatar-bg: #fff8e7;
  --avatar-line: #e8ce91;
  --body-copy: #455365;
  --instruction-copy: #39485a;
  --delivery-bg: #eefaf4;
  --delivery-line: #a8dbc2;
  --delivery-code-bg: #f7fffb;
  --delivery-code-line: #86c6a7;
  --delivery-code-text: #12633f;
  --chart-primary: #9b6814;
  --chart-secondary: #246db5;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; transition: color .2s ease, background-color .24s ease; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.03; letter-spacing: -.045em; }
h2 { margin-bottom: 8px; font-size: 1.35rem; line-height: 1.25; letter-spacing: -.02em; }
h3 { margin-bottom: 6px; font-size: 1rem; }
small { display: block; color: var(--muted); font-size: .78rem; }
code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted, .lede { color: var(--muted); }
.lede { max-width: 680px; margin-bottom: 0; font-size: 1.02rem; }
.eyebrow { margin-bottom: 8px; color: var(--brand); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.optional { color: var(--muted-2); font-weight: 500; }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.page { min-width: 0; min-height: 100vh; }
.main { width: min(100%, var(--content-max)); margin: 0 auto; padding: 48px 42px 72px; }
.topbar { display: none; }

.sidebar { position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; width: var(--sidebar-width); height: 100vh; padding: 26px 18px 18px; overflow-y: auto; background: var(--sidebar); border-right: 1px solid var(--line-soft); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.brand-mark { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; color: var(--brand-ink); background: var(--brand); border-radius: 12px; font-weight: 900; box-shadow: 0 0 0 5px rgba(216, 174, 90, .08); }
.brand b { display: block; font-size: .98rem; letter-spacing: .05em; }
.brand small { color: var(--brand); font-size: .64rem; font-weight: 800; letter-spacing: .18em; }
.brand-mark--small { width: 32px; height: 32px; border-radius: 9px; }
.nav { display: grid; gap: 4px; margin-top: 34px; }
.nav-label { margin: 22px 12px 5px; color: var(--muted-2); font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-label:first-child { margin-top: 0; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 9px 12px; color: var(--muted); border: 1px solid transparent; border-radius: 11px; font-size: .88rem; font-weight: 650; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-link.is-active { color: var(--brand-strong); background: rgba(216, 174, 90, .09); border-color: rgba(216, 174, 90, .18); }
.nav-icon { display: grid; place-items: center; width: 22px; height: 22px; font-size: 1.1rem; }
.sidebar-footer { margin-top: auto; padding-top: 28px; }
.theme-toggle { display: flex; align-items: center; width: 100%; min-height: 42px; gap: 11px; padding: 8px 11px; margin-bottom: 8px; color: var(--muted); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 11px; cursor: pointer; font-size: .78rem; font-weight: 720; transition: color .16s ease, background-color .2s ease, border-color .16s ease, transform .16s ease; }
.theme-toggle:hover { color: var(--text); border-color: var(--line); transform: translateY(-1px); }
.theme-toggle__icon { display: grid; width: 24px; height: 24px; place-items: center; color: var(--brand-strong); font-size: 1rem; }
.theme-toggle--compact { display: none; width: 44px; height: 44px; min-height: 44px; justify-content: center; padding: 0; margin: 0; }
.theme-toggle--floating { position: fixed; top: 20px; right: 20px; z-index: 40; width: auto; padding-right: 14px; background: var(--floating-surface); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.auth-tools { position: fixed; top: 20px; right: 20px; z-index: 45; display: flex; align-items: center; gap: 10px; }
.auth-tools .theme-toggle--floating { position: static; box-shadow: none; }
.language-switch { display: inline-flex; align-items: center; gap: 3px; min-height: 42px; padding: 4px; color: var(--muted); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 11px; font-size: .73rem; font-weight: 800; letter-spacing: .04em; }
.language-switch a { display: grid; min-width: 38px; min-height: 32px; place-items: center; border-radius: 8px; transition: color .16s ease, background-color .16s ease; }
.language-switch a:hover { color: var(--text); background: var(--surface-3); }
.language-switch a[aria-current="true"] { color: var(--brand-ink); background: var(--brand); }
.language-switch--sidebar { width: 100%; margin-bottom: 8px; }
.language-switch--sidebar a { flex: 1 1 50%; }
.language-switch--compact { min-height: 40px; background: var(--floating-surface); backdrop-filter: blur(14px); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 13px 11px; border-top: 1px solid var(--line-soft); }
.user-card b { display: block; max-width: 150px; overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; color: var(--brand-strong); background: var(--surface-3); border-radius: 50%; font-size: .8rem; font-weight: 800; }
.nav-button { width: 100%; background: transparent; cursor: pointer; }
.nav-form { margin: 0; }
.preview-banner { position: sticky; top: 18px; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 14px 16px; color: var(--info-text); background: var(--info-bg); border: 1px solid var(--info-line); border-radius: 16px; box-shadow: var(--shadow); }
.preview-banner > div { display: grid; gap: 3px; }
.preview-banner strong { color: var(--text); font-size: .92rem; }
.preview-banner span { font-size: .82rem; line-height: 1.4; }
.preview-banner form { flex: 0 0 auto; margin: 0; }
.preview-banner .button { min-height: 42px; white-space: nowrap; }
.preview-banner .nav-icon { width: auto; height: auto; }
.preview-mode form[data-preview-disabled] { opacity: .5; }
.is-preview-disabled { opacity: .5; pointer-events: none; }

.dev-services-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; }
.dev-services-card__copy { max-width: 720px; }
.dev-services-card .eyebrow { margin-bottom: 5px; color: var(--muted-2); }
.dev-services-card h2 { margin-bottom: 5px; font-size: 1.08rem; }
.dev-services-card p:last-child { margin-bottom: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.dev-services-card .button { flex: 0 0 auto; min-height: 42px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.page-head > div { min-width: 0; }
.page-head .badge { align-self: center; }
.page-head h1 { margin-bottom: 9px; }
.page-head .button { flex: 0 0 auto; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 10px 18px; border: 1px solid transparent; border-radius: 11px; font-size: .86rem; font-weight: 800; cursor: pointer; transition: transform .14s ease, border-color .14s ease, background .14s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:focus-visible, .nav-link:focus-visible, .text-link:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(216, 174, 90, .36); outline-offset: 2px; }
.button--primary { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); }
.button--primary:hover { background: var(--brand-strong); }
.button--secondary { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.button--secondary:hover { border-color: var(--muted-2); }
.button--danger { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-line); }
.button--wide { width: 100%; }
.text-link, .back-link, .section-head > a, .stat-card a, .news-item > span { color: var(--brand-strong); font-size: .82rem; font-weight: 750; }
.back-link { display: inline-flex; min-height: 44px; align-items: center; margin: -8px 0 20px; }

label { display: grid; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.field-helper { color: var(--muted-2); font-size: .7rem; font-weight: 500; line-height: 1.45; }
input, select, textarea { width: 100%; min-height: 46px; padding: 11px 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
input:hover, select:hover, textarea:hover { border-color: var(--muted-2); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(216, 174, 90, .1); }
textarea { resize: vertical; }
.reseller-contact-fieldset { display: grid; gap: 12px; padding: 16px; margin: 0; border: 1px solid var(--line); border-radius: 12px; }
.reseller-contact-fieldset legend { padding: 0 6px; color: var(--text); font-size: .78rem; font-weight: 800; }
.reseller-contact-fieldset > .field-helper { margin: -3px 0 0; }
.contact-channel-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.contact-channel-option { position: relative; display: block; cursor: pointer; }
.contact-channel-option input { position: absolute; width: 1px; min-height: 1px; height: 1px; padding: 0; opacity: 0; }
.contact-channel-option span { display: grid; min-height: 44px; padding: 8px 10px; place-items: center; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; font-size: .74rem; font-weight: 800; }
.contact-channel-option input:checked + span { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); }
.contact-channel-option input:focus-visible + span { outline: 3px solid rgba(216, 174, 90, .36); outline-offset: 2px; }
.account-identity--contact { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 5px 8px; }
.account-identity--contact > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.account-identity--contact button { padding: 3px 6px; color: var(--brand-strong); background: transparent; border: 0; cursor: pointer; font-size: .64rem; font-weight: 800; }
.reseller-contact-form { display: grid; gap: 12px; }
::placeholder { color: var(--placeholder); }

.panel, .form-card, .checkout-card, .product-summary, .order-summary { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.09); }
.panel { min-width: 0; padding: 24px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.section-head h2, .section-head p { margin-bottom: 0; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.analytics-kpis--admin { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.analytics-kpis--admin .stat-card strong { font-size: clamp(1.45rem, 2.25vw, 2.05rem); }
.stat-card { position: relative; min-height: 158px; padding: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.stat-card::after { position: absolute; right: -24px; bottom: -36px; width: 110px; height: 110px; background: rgba(216, 174, 90, .025); border: 1px solid rgba(216, 174, 90, .07); border-radius: 50%; content: ''; }
.stat-card p { margin-bottom: 16px; color: var(--muted); font-size: .76rem; font-weight: 750; }
.stat-card strong { display: block; margin-bottom: 14px; font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1; letter-spacing: -.04em; }
.stat-card span { color: var(--muted-2); font-size: .76rem; }
.stat-card--balance { border-color: rgba(216, 174, 90, .28); }
.stat-card--balance strong { color: var(--brand-strong); }
.stat-card--warning strong { color: var(--warning); }
.stat-card--profit { border-color: var(--success-line); background: linear-gradient(145deg, var(--surface), var(--success-bg)); }
.stat-card--profit strong { color: var(--success-text); }
.stat-card--loss { border-color: var(--danger-line); background: linear-gradient(145deg, var(--surface), var(--danger-bg)); }
.stat-card--loss strong { color: var(--danger-text); }

.period-switch { display: inline-flex; min-height: 46px; align-items: center; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.period-switch a { display: grid; min-width: 74px; min-height: 38px; padding: 7px 12px; place-items: center; color: var(--muted); border-radius: 8px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.period-switch a:hover { color: var(--text); background: var(--surface-2); }
.period-switch a[aria-current="true"] { color: var(--brand-ink); background: var(--brand); }
.period-switch a:focus-visible, .analytics-chart-scroll:focus-visible { outline: 3px solid rgba(216, 174, 90, .36); outline-offset: 2px; }
.analytics-accuracy { margin-bottom: 24px; }
.analytics-panel, .analytics-resellers, .analytics-table { margin-bottom: 24px; }
.analytics-panel .section-head { align-items: flex-start; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; color: var(--muted); font-size: .72rem; font-weight: 750; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch { width: 10px; height: 10px; flex: 0 0 auto; background: var(--chart-primary); border-radius: 3px; }
.legend-swatch--secondary { background: var(--chart-secondary); }
.analytics-chart-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.analytics-chart { display: block; max-width: none; overflow: visible; }
.chart-grid { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 4 6; }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-bar { rx: 3px; }
.chart-bar--primary { fill: var(--chart-primary); }
.chart-bar--secondary { fill: var(--chart-secondary); }
.chart-label, .chart-axis-label { fill: var(--muted-2); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 10px; }
.chart-axis-label { font-size: 11px; font-weight: 700; }
.analytics-table td:first-child { white-space: nowrap; }
.analytics-resellers .amount, .analytics-table .amount { color: var(--success-text); }

.split-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .85fr); gap: 24px; margin-bottom: 24px; }
.main > .panel + .split-grid { margin-top: 24px; }
.news-panel { display: flex; flex-direction: column; }
.news-item { display: block; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.news-item:first-of-type { border-top: 0; }
.news-item > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.news-item h3 { margin-top: 12px; }
.news-item p { display: -webkit-box; margin-bottom: 8px; overflow: hidden; color: var(--muted); font-size: .82rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.risk-note { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 24px; color: var(--risk-text); background: var(--risk-bg); border: 1px solid var(--risk-line); border-radius: var(--radius); }
.risk-note h2 { color: var(--risk-title); }
.risk-note p { max-width: 1100px; margin-bottom: 8px; font-size: .86rem; }
.risk-note p:last-child { margin-bottom: 0; }
.risk-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--brand-strong); border: 1px solid var(--risk-icon-line); border-radius: 50%; font-weight: 900; }
.risk-note--compact { margin-top: 24px; }
.balance-policy { margin: -4px 0 24px; }
.balance-policy .risk-icon { font-size: .82rem; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 12px 14px; color: var(--muted-2); border-bottom: 1px solid var(--line-soft); font-size: .66rem; letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 15px 14px; color: var(--muted); border-bottom: 1px solid var(--line-soft); font-size: .82rem; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover-row); }
td b { display: block; color: var(--text); font-size: .84rem; }
.table-link { color: var(--brand-strong); font-family: "SFMono-Regular", Consolas, monospace; font-size: .78rem; font-weight: 750; }
.amount { font-weight: 800; }
.amount.positive { color: var(--success); }
.amount.negative { color: var(--danger); }

.badge { display: inline-flex; align-items: center; gap: 7px; width: max-content; min-height: 28px; padding: 5px 9px; color: var(--muted); background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.badge i { width: 7px; height: 7px; background: currentColor; border-radius: 50%; }
.badge--online, .badge--delivered { color: var(--success-text); background: var(--success-bg); border-color: var(--success-line); }
.badge--updating, .badge--sold_out, .badge--pending { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning-line); }
.badge--paused, .badge--canceled { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-line); }
.badge--testing, .badge--available, .badge--processing { color: var(--info-text); background: var(--info-bg); border-color: var(--info-line); }
.badge--issue { color: var(--issue-text); background: var(--issue-bg); border-color: var(--issue-line); }

.filter-bar { display: grid; grid-template-columns: minmax(260px, 1fr) 220px 180px 220px auto; gap: 10px; padding: 14px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.admin-product-filters { grid-template-columns: minmax(220px, 1fr) 190px 190px 160px 210px auto; }
.search-field { position: relative; }
.search-field > span { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); }
.search-field input { padding-left: 40px; }
.catalog-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 20px 3px 14px; }
.catalog-meta b { font-size: .84rem; }
.catalog-meta span { color: var(--muted); font-size: .76rem; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product-card { display: flex; flex-direction: column; min-height: 286px; padding: 20px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.product-card:hover { transform: translateY(-3px); border-color: #34445a; box-shadow: var(--shadow); }
.product-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.product-avatar { display: grid; place-items: center; width: 43px; height: 43px; color: var(--brand-strong); background: var(--avatar-bg); border: 1px solid var(--avatar-line); border-radius: 12px; font-size: .72rem; font-weight: 900; }
.product-avatar--large { width: 66px; height: 66px; border-radius: 18px; font-size: .95rem; }
.product-card h2 { display: -webkit-box; min-height: 52px; margin-bottom: 7px; overflow: hidden; font-size: 1.06rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-card p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }
.product-card .product-game { margin-bottom: 5px; color: var(--brand); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.product-card__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.product-card__bottom small { margin-bottom: 2px; }
.product-card__bottom strong { display: inline-block; margin-right: 8px; font-size: 1.35rem; }
.product-card__bottom span { color: var(--muted-2); font-size: .68rem; }

.product-accordion { display: grid; min-width: 0; gap: 12px; }
.product-group { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); transition: border-color .18s ease, box-shadow .18s ease; }
.product-group[open] { border-color: var(--line); box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.product-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 92px; gap: 20px; padding: 18px 20px; cursor: pointer; list-style: none; }
.product-group > summary::-webkit-details-marker { display: none; }
.product-group > summary:hover { background: var(--hover-row); }
.product-group > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.product-group__identity { display: flex; min-width: 0; align-items: center; gap: 14px; }
.product-group__identity > span:last-child { display: grid; min-width: 0; gap: 3px; }
.product-group__identity b { overflow: hidden; color: var(--text); font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.product-group__identity small { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.product-group__identity .product-game { color: var(--brand); font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.product-group__summary { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.product-group__summary > span:not(.badge) { display: grid; gap: 2px; }
.product-group__summary > span:not(.badge) small { color: var(--muted-2); font-size: .64rem; }
.product-group__summary > strong, .product-group__summary > span:not(.badge) strong { color: var(--brand-strong); font-size: 1rem; white-space: nowrap; }
.product-group__count { min-width: 74px; color: var(--muted); font-size: .72rem; font-weight: 750; text-align: right; white-space: nowrap; }
.product-group__chevron { width: 10px; height: 10px; border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2); transform: rotate(45deg); transition: transform .18s ease; }
.product-group[open] > summary .product-group__chevron { transform: rotate(225deg); }
.product-group__content { min-width: 0; border-top: 1px solid var(--line-soft); }
.catalog-product-group .product-group__content { display: grid; gap: 16px; padding: 16px 20px 20px; }
.catalog-offer-list { display: grid; gap: 8px; }
.catalog-offer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 64px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 11px; }
.catalog-offer-row > span { display: grid; min-width: 0; gap: 4px; }
.catalog-offer-row b { color: var(--text); font-size: .84rem; }
.catalog-offer-row small { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.catalog-offer-row > strong { color: var(--brand-strong); font-size: .94rem; white-space: nowrap; }
.offer-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.offer-heading > b { min-width: 0; }
.offer-qualifier { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 8px; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid rgba(216,174,90,.38); border-radius: 999px; line-height: 1; }
.offer-qualifier small { color: currentColor; font-size: .56rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.offer-qualifier b { color: currentColor; font-size: .66rem; font-weight: 900; white-space: nowrap; }
.offer-qualifier--format { color: var(--info-text); background: var(--info-bg); border-color: var(--info-line); }
.offer-region-notice { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 11px; padding: 11px 13px; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid rgba(216,174,90,.34); border-radius: 11px; }
.offer-region-notice > span { display: grid; width: 32px; height: 32px; place-items: center; background: rgba(216,174,90,.16); border-radius: 9px; font-size: 1.1rem; font-weight: 900; }
.offer-region-notice > div { display: grid; gap: 2px; }
.offer-region-notice b { font-size: .74rem; }
.offer-region-notice small { color: var(--muted); font-size: .66rem; line-height: 1.4; }
.checkout-card > .offer-region-notice { margin-top: 12px; }
.checkout-card > .offer-region-notice + form { margin-top: 12px; }
.catalog-product-action { justify-self: end; }
.admin-product-group .product-group__content { padding: 0; }
.admin-product-group .table-wrap { max-width: 100%; }
.admin-product-group table { min-width: 1080px; }
.admin-product-group tbody tr:last-child td { border-bottom: 0; }
.admin-developer-group { display: grid; min-width: 0; gap: 10px; padding: 14px; background: color-mix(in srgb, var(--surface) 72%, var(--bg)); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
.admin-developer-group + .admin-developer-group { margin-top: 4px; }
.admin-developer-group__head { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 18px; padding: 2px 6px; }
.admin-developer-group__head h2 { margin: 1px 0 0; color: var(--text); font-size: 1.08rem; line-height: 1.3; }
.admin-developer-group__head > span { color: var(--muted); font-size: .72rem; font-weight: 750; text-align: right; }
.admin-developer-group__products { display: grid; min-width: 0; gap: 10px; }

.product-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(340px, .72fr); align-items: start; gap: 24px; }
.product-summary { padding: 32px; }
.product-summary__head { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.product-summary h1 { font-size: clamp(1.85rem, 3.5vw, 2.9rem); }
.inline-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .78rem; }
.product-description { display: grid; max-width: 78ch; gap: 14px; margin-bottom: 22px; color: var(--body-copy); line-height: 1.72; }
.product-description p { margin: 0; }
.status-note, .product-news { padding: 18px; margin: 22px 0; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.product-details-panel { margin: 24px 0; padding: clamp(22px, 3vw, 32px); }
.product-details-panel > .section-head { align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.product-details-panel > .section-head h2 { max-width: 34ch; }
.product-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product-feature-card { padding: 20px; background: linear-gradient(145deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.product-feature-card h3 { margin-bottom: 14px; color: var(--text); font-size: 1rem; }
.product-feature-card ul { display: grid; gap: 9px; margin: 0; padding-left: 18px; color: var(--body-copy); }
.product-feature-card li { padding-left: 3px; line-height: 1.52; }
.product-feature-card li::marker { color: var(--brand); }
.product-requirements { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.product-requirements > h3 { margin-bottom: 14px; font-size: 1rem; }
.product-requirements-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.product-requirements-grid > div { min-width: 0; padding: 16px 18px; background: var(--surface-2); }
.product-requirements-grid dt { margin-bottom: 6px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.product-requirements-grid dd { margin: 0; color: var(--body-copy); line-height: 1.55; overflow-wrap: anywhere; }
.status-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.status-note b { font-size: .8rem; }
.status-note span { color: var(--muted); font-size: .8rem; }
.product-news p:last-child { margin-bottom: 0; color: var(--muted); }
.product-instructions { margin: 24px 0; }
.product-instructions > .section-head { align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.product-instructions > .section-head > div { min-width: 0; }
.product-instructions > .section-head h2 { max-width: 34ch; }
.product-instructions > .section-head .text-link { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 12px; background: var(--brand-soft); border: 1px solid rgba(216,174,90,.22); border-radius: 10px; white-space: nowrap; }
.instruction-text { max-height: min(72vh, 720px); padding: clamp(12px, 2vw, 20px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; color: var(--instruction-copy); background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); line-height: 1.65; }
.instruction-text:focus-visible { border-color: var(--brand); outline: 3px solid rgba(216,174,90,.13); outline-offset: 2px; }
.instruction-document, .instruction-lead, .instruction-section__body, .instruction-subsection { display: grid; gap: 14px; }
.instruction-document { max-width: 1040px; margin: 0 auto; gap: 18px; }
.instruction-document p { margin: 0; }
.instruction-section { overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.instruction-section__head { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.instruction-section__head > span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid rgba(216,174,90,.2); border-radius: 10px; font-family: "SFMono-Regular", Consolas, monospace; font-size: .68rem; font-weight: 800; }
.instruction-section__head h3 { margin: 0; color: var(--text); font-size: clamp(1rem, 2vw, 1.22rem); line-height: 1.35; }
.instruction-section__body { padding: 18px 20px 20px; }
.instruction-subsection { padding-top: 16px; border-top: 1px solid var(--line-soft); }
.instruction-subsection:first-child { padding-top: 0; border-top: 0; }
.instruction-subsection h4 { margin: 0; color: var(--text); font-size: .96rem; line-height: 1.45; }
.instruction-subsection--minor h4 { color: var(--brand-strong); font-size: .86rem; }
.instruction-list { display: grid; gap: 9px; padding-inline-start: 24px; margin: 0; }
.instruction-list li { padding-inline-start: 4px; }
.instruction-list li::marker { color: var(--brand-strong); font-weight: 800; }
.instruction-callout { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px 16px; color: var(--warning-text); background: var(--warning-bg); border: 1px solid var(--warning-line); border-radius: 11px; }
.instruction-callout > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--warning-line); border-radius: 50%; font-weight: 900; }
.instruction-callout > div { display: grid; gap: 8px; }
.instruction-code { padding: 14px 16px; margin: 0; overflow-x: auto; color: var(--delivery-code-text); background: var(--delivery-code-bg); border: 1px solid var(--delivery-code-line); border-radius: 10px; white-space: pre; }
.instruction-code code { font-family: "SFMono-Regular", Consolas, monospace; font-size: .78rem; }
.instruction-text::-webkit-scrollbar { width: 12px; }
.instruction-text::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--bg); border-radius: 999px; }
.instruction-text::-webkit-scrollbar-track { background: transparent; }
.checkout-card { position: sticky; top: 24px; padding: 26px; }
.checkout-card form, .form-card form, .login-card { display: grid; gap: 15px; }
.offer-option { position: relative; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 11px; min-height: 64px; padding: 10px 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.offer-option:hover { border-color: var(--muted-2); }
.offer-option--low-stock { border-color: rgba(227,184,82,.52); box-shadow: inset 3px 0 0 var(--warning); }
.offer-option--low-stock .offer-copy small { color: var(--warning); }
.offer-option input { position: absolute; opacity: 0; pointer-events: none; }
.radio-mark { width: 17px; height: 17px; border: 1px solid var(--muted-2); border-radius: 50%; }
.offer-option input:checked ~ .radio-mark { background: var(--brand); border: 5px solid var(--surface-3); box-shadow: 0 0 0 1px var(--brand); }
.offer-copy b { font-size: .82rem; }
.offer-option > strong { color: var(--brand-strong); font-size: .94rem; }
.checkout-card > .offer-option { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; min-height: 72px; margin-top: 12px; padding: 14px 16px; cursor: default; }
.checkout-card > .offer-option + .offer-option { margin-top: 10px; }
.checkout-card > .offer-option + .button { margin-top: 16px; }
.checkout-card > .offer-option .offer-copy { display: grid; min-width: 0; gap: 4px; }
.checkout-card > .offer-option .offer-copy b,
.checkout-card > .offer-option .offer-copy small { display: block; overflow-wrap: anywhere; }
.checkout-card > .offer-option .offer-copy small { color: var(--muted); line-height: 1.45; }
.checkout-card > .offer-option .offer-qualifier small { display: inline; color: currentColor; font-size: .56rem; line-height: 1; }
.checkout-card > .offer-option .offer-qualifier b { display: inline; color: currentColor; font-size: .66rem; overflow-wrap: normal; }
.checkout-card > .offer-option > strong { justify-self: end; white-space: nowrap; }
.checkout-card > .offer-option:hover { border-color: var(--line); }

.checkout-balance { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; color: var(--muted); border-top: 1px solid var(--line-soft); font-size: .78rem; }
.checkout-balance b { color: var(--text); font-size: 1.05rem; }
.form-note { margin: 0; color: var(--muted-2); font-size: .72rem; line-height: 1.5; }
.form-note a { color: var(--brand-strong); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.form-note a:focus-visible { outline: 3px solid rgba(216, 174, 90, .36); outline-offset: 2px; border-radius: 3px; }

.order-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr); align-items: start; gap: 24px; }
.order-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0; overflow: hidden; }
.order-summary > div { min-height: 104px; padding: 22px; background: var(--surface); border-right: 1px solid var(--line-soft); }
.order-summary > div:last-child { border-right: 0; }
.order-summary span { display: block; margin-bottom: 10px; color: var(--muted); font-size: .72rem; }
.order-summary b { display: block; font-size: .9rem; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 26px 0; }
.timeline-step { position: relative; display: flex; align-items: center; gap: 10px; color: var(--muted-2); }
.timeline-step::after { position: absolute; top: 17px; right: 0; left: 36px; z-index: -1; height: 1px; background: var(--line); content: ''; }
.timeline-step:last-child::after { display: none; }
.timeline-step > span { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; font-size: .72rem; font-weight: 800; }
.timeline-step b { display: block; font-size: .78rem; }
.timeline-step.is-done { color: var(--brand-strong); }
.timeline-step.is-done > span { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); }
.delivery-card, .wait-card { padding: 26px; background: var(--delivery-bg); border: 1px solid var(--delivery-line); border-radius: var(--radius); }
.delivery-card { display: grid; gap: 16px; }
.delivery-card > h2, .delivery-card > p { margin: 0; }
.delivery-block { display: grid; gap: 12px; padding: 16px; background: var(--delivery-code-bg); border: 1px solid var(--delivery-code-line); border-radius: 12px; }
.delivery-block__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.delivery-block__head > div { display: grid; min-width: 0; gap: 3px; }
.delivery-block__head span { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.delivery-block__head b { color: var(--text); font-size: .86rem; }
.delivery-block pre, .delivery-instructions pre { padding: 16px; margin: 0; overflow: auto; color: var(--delivery-code-text); background: var(--bg); border: 1px dashed var(--delivery-code-line); border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.delivery-block pre { min-height: 72px; max-height: 240px; }
.delivery-instructions { overflow: hidden; background: var(--surface); border: 1px solid var(--delivery-line); border-radius: 12px; }
.delivery-instructions > summary { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; cursor: pointer; list-style: none; }
.delivery-instructions > summary::-webkit-details-marker { display: none; }
.delivery-instructions > summary > span { display: grid; gap: 4px; }
.delivery-instructions > summary b { color: var(--text); font-size: .88rem; }
.delivery-instructions > summary small { color: var(--muted); line-height: 1.45; }
.delivery-instructions > summary i { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; color: var(--brand-strong); background: var(--brand-soft); border-radius: 9px; font-style: normal; transition: transform .18s ease; }
.delivery-instructions__open { display: none; }
.delivery-instructions[open] > summary { border-bottom: 1px solid var(--line-soft); }
.delivery-instructions[open] > summary i { transform: rotate(180deg); }
.delivery-instructions[open] .delivery-instructions__closed { display: none; }
.delivery-instructions[open] .delivery-instructions__open { display: block; }
.delivery-instructions__content { display: grid; gap: 12px; padding: 14px; }
.delivery-instructions pre { max-height: min(58vh, 560px); line-height: 1.6; }
.delivery-instructions__content .button { justify-self: start; }
.delivery-card > .delivery-note { color: var(--muted); font-size: .76rem; }
.admin-action textarea[name="delivery_instructions"] { min-height: 160px; max-height: min(42vh, 360px); }
.field-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: var(--muted-2); font-size: .7rem; line-height: 1.45; }
.field-meta output { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.wait-card { display: flex; gap: 18px; background: var(--surface); border-color: var(--line-soft); }
.wait-card p:last-child { margin-bottom: 0; color: var(--muted); }
.wait-pulse { position: relative; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 7px; background: var(--warning); border-radius: 50%; box-shadow: 0 0 0 7px rgba(227,184,82,.08); }
.wait-pulse::after { position: absolute; inset: -8px; border: 1px solid rgba(227,184,82,.45); border-radius: 50%; content: ''; animation: wait-ring 1.8s ease-out infinite; }
.admin-action { position: sticky; top: 24px; padding: 26px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.admin-action form { display: grid; gap: 13px; }
.admin-status-actions { display: grid; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.admin-status-actions .button { width: 100%; }
.admin-status-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.admin-status-pair .button { min-height: 46px; padding-inline: 9px; white-space: normal; }

.balance-hero { display: grid; grid-template-columns: 1fr minmax(300px, .65fr); gap: 24px; padding: 28px; margin-bottom: 24px; background: var(--surface); border: 1px solid rgba(216, 174, 90, .26); border-radius: var(--radius-lg); }
.balance-hero p { color: var(--muted); }
.balance-hero strong { display: block; color: var(--brand-strong); font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -.06em; line-height: 1; }
.balance-hero span { color: var(--muted-2); font-size: .76rem; }
.balance-hero aside { padding: 20px; background: var(--bg); border-radius: var(--radius); }
.balance-hero aside p { margin: 8px 0 0; font-size: .8rem; }

.admin-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .5fr); align-items: start; gap: 24px; }
.form-card { position: sticky; top: 24px; padding: 24px; }
.user-inline { display: flex; align-items: center; gap: 10px; }
.account-identity { display: grid; grid-template-columns: minmax(0, 1fr); align-items: baseline; gap: 2px; }
.account-identity > span:first-child { color: var(--muted-2); font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.account-identity code { overflow-wrap: anywhere; color: var(--text); font-family: inherit; font-size: inherit; font-weight: 700; }
.account-status { display: grid; justify-items: start; gap: 7px; min-width: 170px; }
.account-status__item { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .68rem; font-weight: 700; line-height: 1.3; }
.account-status__item i { width: 7px; height: 7px; flex: 0 0 auto; background: currentColor; border-radius: 50%; }
.account-status__item--complete { color: var(--success-text); }
.account-status__item--pending { color: var(--warning-text); }
.account-status__item--muted { color: var(--muted-2); }
.row-actions { position: relative; }
.row-actions summary { min-height: 40px; padding: 10px; color: var(--brand-strong); cursor: pointer; list-style: none; white-space: nowrap; }
.row-actions summary::marker { content: ''; }
.row-actions summary::-webkit-details-marker { display: none; }
.row-actions[open] > .offer-action-sheet:not(.is-open) { display: grid; width: min(720px, calc(100vw - 48px)); gap: 14px; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.offer-action-sheet.is-open { position: fixed; top: 16px; right: 16px; bottom: 16px; z-index: 121; display: grid; width: min(760px, calc(100vw - 32px)); align-content: start; gap: 16px; padding: 24px; overflow-y: auto; overscroll-behavior: contain; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.offer-action-sheet form { display: grid; gap: 12px; }
.offer-action-sheet__head { padding: 0 54px 2px 2px; }
.offer-action-sheet__head h2 { margin: 2px 0 4px; font-size: 1.35rem; line-height: 1.3; }
.offer-action-sheet__head p:last-child { max-width: 62ch; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.offer-action-section { display: grid; gap: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; }
.offer-action-section:focus-within { border-color: var(--brand); }
.offer-action-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.offer-action-section__head h3 { margin: 2px 0 0; font-size: 1rem; line-height: 1.35; }
.inventory-management { background: var(--surface-2); }
.inventory-batches { display: grid; gap: 9px; max-height: 440px; overflow: auto; padding-right: 3px; scrollbar-gutter: stable; }
.inventory-batches h4 { margin: 0; font-size: .82rem; }
.inventory-batch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 11px; }
.inventory-batch > div:first-child { display: grid; gap: 3px; min-width: 0; }
.inventory-batch small { color: var(--muted); line-height: 1.45; }
.inventory-batch__warning { color: var(--danger-text) !important; }
.inventory-batch__actions, .inventory-items-form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.inventory-batch__actions form { margin: 0; }
.inventory-batch__actions .button, .inventory-items-form__actions .button { min-height: 38px; padding: 8px 12px; }
.inventory-items-form { display: grid; gap: 10px; padding-top: 4px; }
.security-chip { display: inline-flex; min-height: 30px; align-items: center; padding: 5px 10px; color: var(--success-text); background: var(--success-bg); border: 1px solid var(--success-line); border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.pricing-scope { display: grid; gap: 12px; padding: 14px; color: var(--body-copy); background: var(--brand-soft); border: 1px solid rgba(216,174,90,.24); border-radius: 11px; }
.pricing-scope__identity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pricing-scope__identity > div { display: grid; min-width: 0; gap: 3px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px; }
.pricing-scope__identity span, .pricing-scope__math dt { color: var(--muted-2); font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pricing-scope__identity strong { color: var(--text); font-size: .82rem; }
.pricing-scope__identity small { color: var(--muted); font-size: .68rem; line-height: 1.4; }
.pricing-scope__math { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 9px; }
.pricing-scope__math > div { display: grid; min-width: 0; gap: 4px; padding: 10px; background: var(--surface-2); }
.pricing-scope__math dd { margin: 0; color: var(--text); font-size: .8rem; font-weight: 800; overflow-wrap: anywhere; }
.pricing-scope > p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.inventory-unlock p { max-width: 64ch; margin: 0; color: var(--muted); line-height: 1.55; }
.instruction-source { display: grid; gap: 10px; padding: 0; margin: 2px 0 0; border: 0; }
.instruction-source legend { margin-bottom: 2px; color: var(--text); font-size: .78rem; font-weight: 800; }
.instruction-source__choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 11px; cursor: pointer; }
.instruction-source__choice:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); }
.instruction-source__choice input { width: 18px; min-height: 18px; margin-top: 1px; }
.instruction-source__choice b, .instruction-source__choice small { display: block; }
.instruction-source__choice small { margin-top: 3px; color: var(--muted); line-height: 1.45; }
.instruction-source__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.instruction-source__fields textarea:disabled { opacity: .62; cursor: not-allowed; }
.row-actions__close { position: sticky; top: 0; z-index: 2; display: grid; width: 44px; min-height: 44px; place-items: center; justify-self: end; margin: 0 0 -60px; color: var(--text); background: var(--surface-3); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; font-size: 1.35rem; }
.row-actions-open { overflow: hidden; }
.row-actions-open::before { position: fixed; inset: 0; z-index: 120; background: rgba(4, 8, 13, .6); backdrop-filter: blur(3px); content: ''; }
.account-actions-open { overflow: hidden; }
details.reseller-account-actions[open]::before { position: fixed; inset: 0; z-index: 40; background: rgba(4, 8, 13, .58); backdrop-filter: blur(3px); content: ''; }
details.reseller-account-actions[open] > summary { position: fixed; top: 32px; right: 32px; z-index: 42; display: grid; width: 42px; min-height: 42px; place-items: center; padding: 0; overflow: hidden; color: var(--text); background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0; }
details.reseller-account-actions[open] > summary::before,
details.reseller-account-actions[open] > summary::after { position: absolute; display: block; width: 18px; height: 2px; margin: 0; background: currentColor; border-radius: 999px; content: ''; }
details.reseller-account-actions[open] > summary::before { transform: rotate(45deg); }
details.reseller-account-actions[open] > summary::after { transform: rotate(-45deg); }
details.reseller-account-actions[open] > div { position: fixed; top: 20px; right: 20px; bottom: 20px; z-index: 41; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(440px, calc(100vw - 40px)); max-height: none; align-content: start; gap: 14px; padding: 24px; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.reseller-account-actions__title { grid-column: 1 / -1; margin: 0 52px 2px 0; color: var(--text); font-size: 1rem; line-height: 1.4; }
details.reseller-account-actions[open] > div > form { grid-column: 1 / -1; padding: 14px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
details.reseller-account-actions[open] > div > form[action$="/password"] { grid-column: 1; }
details.reseller-account-actions[open] > div > form[action$="/toggle"] { grid-column: 2; }
details.reseller-account-actions[open] > div > form[action$="/password"] .button,
details.reseller-account-actions[open] > div > form[action$="/toggle"] .button { width: 100%; height: 100%; }
details.reseller-account-actions[open] > div::-webkit-scrollbar { width: 10px; }
details.reseller-account-actions[open] > div::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--surface-2); border-radius: 999px; }
details.reseller-account-actions[open] > div::-webkit-scrollbar-track { background: transparent; }
details.reseller-account-actions[open] > div > form:focus-within { border-color: var(--brand); }
details.reseller-account-actions > summary { border-radius: var(--radius-sm); }
details.reseller-account-actions > summary:hover { background: var(--surface-3); }
details.reseller-account-actions:not([open]) > summary::after { margin-left: 6px; font-size: .72rem; content: '\2192'; }
.check { display: flex; align-items: center; gap: 9px; min-height: 44px; }
.check input { width: 18px; min-height: 18px; }
.sync-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.sync-bar b, .sync-bar span { display: block; }
.sync-bar span { color: var(--muted); font-size: .76rem; }
.group-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.group-summary > div { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.group-summary span { color: var(--muted); font-size: .76rem; font-weight: 750; }
.group-summary strong { color: var(--brand-strong); font-size: 1.55rem; line-height: 1; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); align-items: start; gap: 18px; margin-bottom: 26px; }
.group-card { display: flex; min-width: 0; min-height: 100%; flex-direction: column; padding: 24px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.09); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.group-card:hover { border-color: var(--line); box-shadow: 0 14px 36px rgba(0,0,0,.13); transform: translateY(-2px); }
.group-card--default { border-color: rgba(216,174,90,.4); box-shadow: 0 12px 34px rgba(216,174,90,.08); }
.group-card--inactive { background: var(--surface-2); border-style: dashed; }
.group-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.group-card__identity { display: flex; min-width: 0; align-items: center; gap: 12px; }
.group-card__identity > div { min-width: 0; }
.group-card__identity h2 { margin: 0; overflow-wrap: anywhere; font-size: 1.5rem; }
.group-card__identity .eyebrow { margin-bottom: 5px; }
.group-card__index { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid rgba(216,174,90,.2); border-radius: 12px; font-family: "SFMono-Regular", Consolas, monospace; font-size: .78rem; font-weight: 800; }
.group-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 28px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.group-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.group-status--active { color: var(--success-text); background: var(--success-bg); border-color: var(--success-line); }
.group-status--inactive { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-line); }
.group-card__description { min-height: 3.2em; margin: 20px 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.group-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.group-metrics > div { min-width: 0; padding: 13px 14px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 11px; }
.group-metrics dt { margin-bottom: 5px; color: var(--muted-2); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.group-metrics dd { margin: 0; color: var(--text); font-size: .92rem; font-weight: 850; overflow-wrap: anywhere; }
.group-formula { display: grid; gap: 5px; padding: 14px; color: var(--muted); background: var(--brand-soft); border: 1px solid rgba(216,174,90,.2); border-radius: 11px; }
.group-formula > span { font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.group-formula strong { color: var(--brand-strong); font-size: .9rem; overflow-wrap: anywhere; }
.group-formula small { color: var(--muted); font-size: .72rem; }
.group-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; margin: 16px 0; }
.group-resellers { color: var(--muted); font-size: .76rem; }
.group-resellers b { color: var(--text); }
.group-review { min-height: 26px; padding: 5px 8px; color: var(--warning-text); background: var(--warning-bg); border-radius: 999px; font-size: .66rem; font-weight: 800; }
.group-review--automatic { color: var(--info-text); background: var(--info-bg); }
.group-config { margin-top: auto; border-top: 1px solid var(--line-soft); }
.group-config summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 2px 0; color: var(--brand-strong); cursor: pointer; font-size: .8rem; font-weight: 800; list-style: none; }
.group-config summary::-webkit-details-marker { display: none; }
.group-config summary span:last-child { transition: transform .18s ease; }
.group-config[open] summary span:last-child { transform: rotate(180deg); }
.group-config__form { display: grid; gap: 14px; padding-top: 16px; }
.group-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.group-form-grid__wide { grid-column: 1 / -1; }
.group-config__checks { display: grid; align-content: start; }
.group-config__form > .button { justify-self: start; }
.group-create { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); align-items: start; gap: 32px; scroll-margin-top: 24px; }
.group-create__intro p:last-child { max-width: 48ch; margin-bottom: 0; color: var(--muted); line-height: 1.65; }
.group-create > form { display: grid; gap: 14px; }
.group-create > form > .button { justify-self: start; }
.manual-import { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); align-items: start; gap: 32px; margin-bottom: 18px; }
.manual-import > div p:last-child { max-width: 56ch; margin-bottom: 0; color: var(--muted); line-height: 1.65; }
.manual-import > form, .manual-product-form { display: grid; gap: 18px; }
.manual-import__ai { margin-top: 2px; }
.manual-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.manual-product-grid__wide { grid-column: 1 / -1; }
.manual-product-grid textarea { min-height: 150px; resize: vertical; }
.manual-offers .section-heading { align-items: start; }
[data-manual-offers] { display: grid; gap: 14px; }
.manual-offer { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-2); }
.manual-offer legend { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 0 0 10px; font-weight: 800; }
.manual-offer > .check { margin-top: 14px; }
.manual-product-submit { position: sticky; z-index: 4; bottom: 14px; display: flex; justify-content: flex-end; gap: 10px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(12px); }

.admin-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.admin-shortcuts a { display: flex; align-items: center; gap: 14px; min-height: 82px; padding: 16px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.admin-shortcuts a > span { display: grid; place-items: center; width: 38px; height: 38px; color: var(--brand); background: var(--surface-3); border-radius: 10px; }
.admin-shortcuts div { flex: 1; }
.admin-shortcuts b, .admin-shortcuts small { display: block; }
.telegram-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr); align-items: start; gap: 24px; }
.telegram-grid > .form-card > form + .button { margin-top: 10px; }
.integration-state { display: flex; align-items: center; gap: 14px; padding: 18px; margin-bottom: 24px; background: rgba(227,184,82,.06); border: 1px solid rgba(227,184,82,.22); border-radius: var(--radius); }
.integration-state > span { display: grid; place-items: center; width: 38px; height: 38px; color: var(--warning); border: 1px solid currentColor; border-radius: 50%; font-weight: 900; }
.integration-state--ok { background: rgba(85,201,149,.06); border-color: rgba(85,201,149,.22); }
.integration-state--ok > span { color: var(--success); }
.integration-state b, .integration-state small { display: block; }
.feature-list { display: grid; gap: 8px; }
.feature-list > div { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface-2); border-radius: 11px; }
.feature-list > div > span { color: var(--brand); font-family: monospace; font-size: .72rem; }
.feature-list b, .feature-list small { display: block; }
.bind-code { display: grid; gap: 8px; padding: 16px; background: var(--bg); border: 1px dashed var(--brand); border-radius: 11px; }
.bind-code code { color: var(--brand-strong); font-size: .95rem; word-break: break-all; }
.bind-code button { justify-self: start; padding: 0; color: var(--brand); background: transparent; border: 0; cursor: pointer; }

.telegram-account { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr); gap: 28px; margin-bottom: 24px; border-color: rgba(106,170,247,.22); }
.telegram-account p { color: var(--muted); line-height: 1.7; }
.telegram-account > div:last-child { display: grid; gap: 10px; align-content: start; }
.telegram-account form, .telegram-account .button { width: 100%; }
.payment-panel { margin-bottom: 24px; border-color: rgba(216, 174, 90, .3); }
.payment-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .7fr); gap: 28px; }
.payment-layout aside { align-self: start; color: var(--muted); }
.payment-layout aside b { color: var(--text); }
.payment-layout aside p { line-height: 1.65; }
.payment-form { display: grid; grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.payment-form > :not(.payment-submit) { grid-column: 1; }
.payment-form > .payment-submit { grid-column: 1; width: 100%; margin-top: 4px; }
.payment-layout aside { position: relative; z-index: 1; grid-column: 2; grid-row: 1; }
.payment-support { display: grid; gap: 14px; }
.payment-safety { padding: 20px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.payment-safety p { margin: 9px 0 0; }
.manual-topup-card { padding: 20px; color: var(--muted); background: linear-gradient(145deg, var(--brand-soft), var(--surface-2)); border: 1px solid rgba(216, 174, 90, .34); border-radius: var(--radius); }
.manual-topup-card .eyebrow { margin: 0 0 5px; }
.manual-topup-card h3 { margin: 0; color: var(--text); font-size: 1.05rem; }
.manual-topup-card > p:not(.eyebrow) { margin: 9px 0 0; line-height: 1.6; }
.manual-topup-card__warning { padding: 11px 12px; color: var(--warning-text); background: var(--warning-bg); border: 1px solid var(--warning-line); border-radius: 10px; font-size: .78rem; }
.manual-topup-card__contacts { display: grid; gap: 9px; margin-top: 16px; }
.manual-topup-card__contacts .button { width: 100%; min-width: 0; justify-content: flex-start; gap: 8px; text-align: left; }
.manual-topup-card__contacts .button > strong { color: inherit; overflow-wrap: anywhere; }
.manual-topup-card__contacts .button > span:last-child { margin-left: auto; font-size: .72rem; }
.manual-topup-card__note { color: var(--muted); font-size: .78rem; }
.payment-form fieldset { display: grid; gap: 9px; padding: 0; margin: 0; border: 0; }
.payment-form legend { margin-bottom: 8px; font-weight: 800; }
.amount-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.amount-presets button { min-height: 42px; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid rgba(216, 174, 90, .25); border-radius: 10px; cursor: pointer; font: inherit; font-weight: 800; transition: transform .16s ease, border-color .16s ease; }
.amount-presets button:hover { transform: translateY(-1px); border-color: var(--brand); }
.payment-method { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.payment-method:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(216, 174, 90, .1); }
.payment-method input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.payment-method span { display: grid; gap: 2px; }
.payment-method small { color: var(--muted); }
.payment-consent { display: flex !important; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.payment-consent input { align-self: flex-start; flex: 0 0 auto; width: 18px; min-height: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--brand); }
.payment-retry { display: grid; gap: 18px; padding: 20px; background: var(--surface-2); border: 1px solid rgba(216, 174, 90, .28); border-radius: var(--radius); }
.payment-retry h3 { margin: 4px 0 8px; }
.payment-retry p { margin: 0; color: var(--muted); line-height: 1.65; }
.payment-retry dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.payment-retry dl div { padding: 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; }
.payment-retry dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.payment-retry dd { margin: 4px 0 0; font-weight: 800; }
.payment-retry__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.payment-panel--manual > .manual-topup-card { max-width: 760px; }
.payment-status { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.payment-status--confirmed { color: var(--success-text); background: var(--success-bg); }
.payment-status--pending, .payment-status--new, .payment-status--creating { color: var(--warning-text); background: var(--warning-bg); }
.payment-status--review { color: var(--risk-text); background: var(--risk-bg); }
.payment-status--canceled, .payment-status--chargebacked, .payment-status--error { color: var(--danger-text); background: var(--danger-bg); }
.payment-history-actions { min-width: 190px; }
.payment-history-action { width: 100%; min-height: 40px; padding: 8px 12px; font-size: .74rem; }
.payment-history-details { display: inline-flex; min-height: 40px; align-items: center; justify-content: flex-start; white-space: nowrap; }
.payment-detail { width: min(100%, 780px); padding: clamp(22px, 4vw, 38px); margin: 0 auto; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.payment-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.payment-detail__head h1 { margin: 4px 0 0; font-size: clamp(2rem, 6vw, 3.5rem); }
.payment-detail__lead { max-width: 62ch; margin: 22px 0; color: var(--muted); font-size: .94rem; line-height: 1.7; }
.payment-detail__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.payment-detail__facts > div { min-width: 0; padding: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 11px; }
.payment-detail__facts dt { color: var(--muted-2); font-size: .68rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.payment-detail__facts dd { margin: 5px 0 0; color: var(--text); font-size: .82rem; font-weight: 800; overflow-wrap: anywhere; }
.payment-detail__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 16px; }
.payment-detail__actions .button { width: 100%; }
.payment-detail__recover { margin-bottom: 16px; }
.payment-detail__recover .button { width: 100%; }
.payment-detail > .alert { margin: 16px 0 0; }
.payment-detail > .manual-topup-card { margin-top: 18px; }
.payment-hold { margin-bottom: 22px; }
.payment-hold p { margin-bottom: 0; }
.checkout-card--paused { border-color: rgba(227,184,82,.24); }

.order-chat { margin-top: 24px; overflow: hidden; }
.chat-head-meta { display: grid; justify-items: end; gap: 3px; }
.chat-head-meta > span { font-weight: 800; }
.chat-head-meta > small { color: var(--muted-2); font-size: .67rem; font-weight: 700; white-space: nowrap; }
.chat-stream { display: grid; max-height: 480px; gap: 10px; padding: 4px 2px 14px; overflow-y: auto; overscroll-behavior: contain; }
.chat-message { width: min(86%, 680px); padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px 14px 14px; }
.chat-message.is-new { animation: chat-message-in .18s ease-out both; }
.chat-message--admin { justify-self: end; background: rgba(216,174,90,.08); border-color: rgba(216,174,90,.22); border-radius: 14px 4px 14px 14px; }
.chat-message--system { justify-self: center; width: min(94%, 720px); color: var(--muted); background: rgba(106,170,247,.05); border-style: dashed; border-radius: 12px; }
.chat-message > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-message b { font-size: .76rem; }
.chat-message time { color: var(--muted-2); font-size: .67rem; }
.chat-message p { margin: 7px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.6; }
.chat-new-messages { display: block; min-height: 38px; padding: 8px 13px; margin: -2px auto 10px; color: var(--brand-ink); background: var(--brand); border: 0; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.18); cursor: pointer; font: inherit; font-size: .74rem; font-weight: 850; }
.chat-new-messages[hidden] { display: none; }
.message-templates { display: grid; gap: 8px; margin: 4px 0 12px; }
.message-templates__group { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.message-templates__group > span { display: grid; min-width: 30px; min-height: 30px; place-items: center; color: var(--brand-strong); background: var(--brand-soft); border-radius: 999px; font-size: .67rem; font-weight: 900; }
.message-templates button { min-height: 36px; padding: 7px 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: color .16s ease, border-color .16s ease, transform .16s ease; }
.message-templates button:hover { color: var(--brand-strong); border-color: rgba(216,174,90,.45); transform: translateY(-1px); }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.chat-form label { margin: 0; }
.chat-form textarea { min-height: 76px; resize: vertical; }

.feedback-fab { position: fixed; right: 24px; bottom: 24px; z-index: 18; display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 9px 15px 9px 9px; color: var(--text); background: var(--floating-surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 16px 45px rgba(0,0,0,.2); backdrop-filter: blur(14px); font-size: .74rem; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.feedback-fab span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--brand-ink); background: var(--brand); border-radius: 50%; font-weight: 900; }
.feedback-fab:hover { border-color: rgba(216,174,90,.5); box-shadow: 0 18px 55px rgba(0,0,0,.4); transform: translateY(-2px); }
.feedback-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .45fr); align-items: start; gap: 24px; }
.feedback-card { position: static; }
.feedback-card fieldset { display: grid; gap: 8px; padding: 0; margin: 0; border: 0; }
.feedback-card legend { margin-bottom: 8px; font-size: .8rem; font-weight: 800; }
.feedback-choice { display: flex; align-items: flex-start; gap: 11px; padding: 14px; margin: 0; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 11px; cursor: pointer; }
.feedback-choice:has(input:checked) { background: rgba(216,174,90,.07); border-color: rgba(216,174,90,.42); }
.feedback-choice input { width: 17px; min-height: 17px; margin-top: 2px; }
.feedback-choice b, .feedback-choice small { display: block; }
.feedback-choice small { margin-top: 4px; color: var(--muted); }
.feedback-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; color: var(--muted); background: var(--bg); border-radius: 9px; font-size: .72rem; }
.feedback-context code { max-width: 70%; overflow: hidden; color: var(--brand-strong); text-overflow: ellipsis; white-space: nowrap; }
.feedback-aside { position: sticky; top: 24px; text-align: center; }
.feedback-orbit { display: grid; width: 64px; height: 64px; place-items: center; margin: 4px auto 18px; color: var(--brand); border: 1px solid rgba(216,174,90,.35); border-radius: 50%; font-size: 1.7rem; font-weight: 900; animation: feedback-float 3.2s ease-in-out infinite; }
.feedback-aside p { color: var(--muted); line-height: 1.75; }

.main > .page-head, .main > .stats-grid, .main > .panel, .main > .product-detail, .main > .product-details-panel, .main > .filter-bar, .main > .order-grid, .main > .feedback-layout, .main > .group-summary, .main > .group-grid { animation: reveal-up .32s cubic-bezier(.2,.75,.25,1) both; }
.main > :nth-child(2) { animation-delay: .045s; }
.main > :nth-child(3) { animation-delay: .09s; }
.product-card { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.product-card:hover { border-color: rgba(216,174,90,.28); box-shadow: 0 16px 42px rgba(0,0,0,.16); transform: translateY(-2px); }

@keyframes reveal-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chat-message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wait-ring { 0% { opacity: .65; transform: scale(.55); } 85%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes feedback-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.empty-state { display: grid; min-height: 280px; place-items: center; align-content: center; padding: 30px; text-align: center; }
.empty-state > span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 50%; }
.empty-state p { max-width: 420px; color: var(--muted); }
.error-page { display: grid; min-height: calc(100vh - 120px); place-items: center; align-content: center; text-align: center; }
.error-page > span { color: var(--brand); font-size: 6rem; font-weight: 900; opacity: .25; }
.error-page p { color: var(--muted); }

.alert { padding: 13px 15px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; font-size: .875rem; line-height: 1.5; }
.alert--error { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-line); }
.alert--success { margin-bottom: 20px; color: var(--success-text); background: var(--success-bg); border-color: var(--success-line); }
.credentials-card { display: grid; gap: 16px; padding: 20px; }
.credentials-card h2 { margin: 2px 0 0; color: var(--text); font-size: 1.15rem; }
.credentials-card .eyebrow { margin: 0; }
.credentials-grid { display: grid; gap: 10px; }
.credential-row { display: grid; grid-template-columns: minmax(130px, .45fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; }
.credential-row > span { color: var(--muted); font-size: .72rem; font-weight: 800; }
.credentials-card .credential-row code { min-width: 0; padding: 0; margin: 0; overflow-wrap: anywhere; color: var(--text); background: transparent; font-size: .84rem; font-weight: 800; }
.credentials-card .credential-row button { min-height: 36px; padding: 7px 10px; color: var(--brand-strong); background: transparent; border: 0; border-radius: 8px; font-weight: 800; cursor: pointer; }
.credentials-card .credential-copy-all { min-height: 44px; padding: 10px 14px; color: var(--brand-ink); background: var(--brand-strong); border: 1px solid var(--brand-strong); border-radius: 10px; font-weight: 800; }
.credentials-card > p { margin: 0; color: var(--success-text); font-size: .76rem; }
.alert--success code { display: inline-block; margin: 0 10px; padding: 4px 7px; color: var(--text); background: var(--bg); border-radius: 6px; }
.alert--success button { color: var(--brand); background: transparent; border: 0; cursor: pointer; }
.alert--success p { margin: 8px 0 0; }
.alert--info { color: var(--info-text); background: var(--info-bg); border-color: var(--info-line); }
.alert--warning { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning-line); }
.sync-diagnostics { margin-bottom: 18px; }
.sync-diagnostics > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: inherit; cursor: pointer; font-weight: 800; }
.sync-diagnostics > summary > span:first-child { display: grid; gap: 3px; }
.sync-diagnostics > summary small { font-weight: 600; opacity: .82; }
.sync-diagnostics > summary > span:last-child { display: grid; place-items: center; min-width: 34px; min-height: 34px; padding: 4px 8px; color: var(--warning-text); background: color-mix(in srgb, var(--warning-line) 34%, transparent); border-radius: 999px; }
.sync-diagnostics__groups { display: grid; gap: 10px; margin-top: 14px; }
.sync-diagnostics__intro { margin: 0 0 2px; font-size: .78rem; line-height: 1.55; }
.sync-diagnostic-group { padding: 13px 14px; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--warning-line); border-radius: 10px; }
.sync-diagnostic-group__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sync-diagnostic-group h3 { margin: 0; color: var(--text); font-size: .88rem; }
.sync-diagnostic-group p { max-width: 800px; margin: 4px 0 0; font-size: .76rem; line-height: 1.5; }
.sync-diagnostic-group__head > span { flex: 0 0 auto; min-width: 32px; padding: 3px 8px; text-align: center; background: var(--warning-bg); border: 1px solid var(--warning-line); border-radius: 999px; font-weight: 900; }
.sync-diagnostic-group details { margin-top: 9px; }
.sync-diagnostic-group details > summary { cursor: pointer; font-size: .76rem; font-weight: 800; }
.sync-diagnostic-group ul { display: grid; gap: 7px; max-height: 320px; margin: 9px 0 0; padding: 10px 12px; overflow: auto; list-style: none; background: var(--bg); border-radius: 8px; }
.sync-diagnostic-group li { display: grid; grid-template-columns: minmax(170px, .4fr) minmax(0, 1fr); gap: 10px; }
.sync-diagnostic-group li b { color: var(--text); overflow-wrap: anywhere; }
.sync-diagnostic-group li span { overflow-wrap: anywhere; }
.toast { position: fixed; top: 22px; right: 24px; z-index: 100; max-width: min(420px, calc(100vw - 32px)); padding: 13px 18px; color: var(--brand-ink); background: var(--brand-strong); border-radius: 11px; box-shadow: var(--shadow); font-size: .82rem; font-weight: 800; transition: opacity .2s ease, transform .2s ease; }
.toast.is-hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; }

.auth-shell { min-height: 100vh; background: var(--bg); }
.auth-page .main { width: 100%; max-width: none; min-height: 100vh; padding: 0; }
.login-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(430px, .9fr); min-height: 100vh; }
.login-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: clamp(36px, 6vw, 84px); overflow: hidden; background: var(--story-bg); border-right: 1px solid var(--line-soft); transition: background-color .24s ease; }
.login-story::after { position: absolute; right: -150px; bottom: -150px; width: 550px; height: 550px; background: radial-gradient(circle, rgba(216,174,90,.13), transparent 68%); content: ''; }
.brand--login { z-index: 1; align-self: flex-start; }
.login-story > div { z-index: 1; max-width: 700px; }
.login-story h1 { margin-bottom: 24px; font-size: clamp(3rem, 6.5vw, 6.7rem); }
.login-story > div > p:last-child { max-width: 560px; color: var(--muted); font-size: 1.06rem; }
.trust-list { z-index: 1; display: flex; gap: 24px; padding: 0; margin: 0; list-style: none; }
.trust-list li { max-width: 180px; color: var(--muted); font-size: .76rem; }
.trust-list span { display: block; margin-bottom: 6px; color: var(--brand); font-family: monospace; font-weight: 800; }
.login-panel { display: grid; min-height: 100vh; place-items: center; padding: 30px; }
.login-card { width: min(100%, 430px); padding: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.login-card h2 { font-size: 1.7rem; }

.confirm-page { display: grid; min-height: calc(100vh - 120px); place-items: center; }
.confirm-card { display: grid; width: min(100%, 520px); gap: 16px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.confirm-card > p { color: var(--muted); }
.confirm-card--wide { width: min(100%, 680px); }
.confirm-form { display: grid; gap: 16px; }
.secure-gate-shell { min-height: 100vh; }
.secure-gate-shell .page { width: 100%; }
.secure-gate-shell .main { width: 100%; max-width: none; min-height: 100vh; padding: 72px 24px; }
.secure-gate-shell .confirm-page { min-height: calc(100vh - 144px); }
.setup-steps { display: grid; gap: 14px; margin: 4px 0; padding: 0; counter-reset: setup-step; list-style: none; }
.setup-steps li { position: relative; min-height: 44px; padding: 10px 12px 10px 54px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 11px; }
.setup-steps li::before { position: absolute; top: 9px; left: 12px; display: grid; width: 30px; height: 30px; place-items: center; color: var(--brand-ink); background: var(--brand); border-radius: 9px; counter-increment: setup-step; content: counter(setup-step); font-size: .76rem; font-weight: 900; }
.secret-key { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; overflow: hidden; color: var(--brand-strong); background: var(--bg); border: 1px solid var(--line); border-radius: 11px; }
.secret-key code { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; font-weight: 800; letter-spacing: .08em; }
.secret-key .button { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; }
.setup-fallback { margin: 16px 0 8px; color: var(--muted-2); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.totp-qr { display: grid; width: min(100%, 250px); padding: 12px; margin: 16px auto 0; place-items: center; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.totp-qr__image { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 4px 0; list-style: none; }
.recovery-grid code { display: block; padding: 11px 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; text-align: center; letter-spacing: .06em; }
.recovery-warning { padding: 14px; color: var(--risk-text); background: var(--risk-bg); border: 1px solid var(--risk-line); border-radius: 11px; }
.code-input { font-family: "SFMono-Regular", Consolas, monospace; font-size: 1.55rem; letter-spacing: .35em; text-align: center; }
.confirm-logout { justify-self: center; }
.confirm-logout .text-link { background: none; border: 0; cursor: pointer; font: inherit; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.pagination .is-disabled { opacity: .45; pointer-events: none; }
.catalog-count { margin: 18px 0 0; color: var(--muted); }

.sidebar-backdrop, .menu-button, .topbar-brand, .mobile-nav { display: none; }

@media (max-width: 960px) {
  .preview-banner { top: 78px; }
  .mobile-nav__form { display: contents; }
  .group-create, .manual-import { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .contact-channel-options { grid-template-columns: 1fr; }
  .preview-banner { align-items: stretch; flex-direction: column; gap: 12px; }
  .preview-banner .button { width: 100%; }
  .group-summary { grid-template-columns: 1fr; }
  .group-summary > div { min-height: 60px; }
  .group-card { padding: 18px; border-radius: 14px; }
  .group-card__header { flex-wrap: wrap; }
  .group-card__description { min-height: 0; }
  .group-form-grid { grid-template-columns: 1fr; }
  .group-form-grid__wide { grid-column: auto; }
  .group-config__form > .button, .group-create > form > .button { width: 100%; }
  .dev-services-card { align-items: stretch; flex-direction: column; gap: 16px; padding: 18px; }
  .dev-services-card .button { width: 100%; }
}
@media (max-width: 1240px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: minmax(220px, 1fr) 200px 170px 210px; }
  .admin-product-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar .button { grid-column: 1 / -1; }
  .admin-layout { grid-template-columns: 1fr; }
  .telegram-grid { grid-template-columns: 1fr; }
  .telegram-account, .feedback-layout, .payment-layout { grid-template-columns: 1fr; }
  .payment-form { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; }
  .payment-form > .payment-submit { grid-column: 1; max-width: none; margin-top: 0; }
  .payment-layout aside { grid-column: 1; grid-row: auto; }
  .form-card { position: static; }
}

@media (max-width: 960px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; width: min(86vw, 320px); height: 100dvh; padding-top: max(26px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-102%); box-shadow: 20px 0 60px rgba(0,0,0,.4); transition: transform .22s ease-out; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 20; display: block; visibility: hidden; background: rgba(0,0,0,.58); opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
  .sidebar-backdrop.is-open { visibility: visible; opacity: 1; }
  .nav-open { overflow: hidden; }
  .topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; min-height: calc(64px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 20px 8px; background: var(--mobile-bar); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(14px); }
  .theme-toggle--compact { display: flex; }
  .menu-button { display: grid; place-items: center; width: 44px; height: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
  .topbar-brand { display: flex; align-items: center; gap: 9px; font-size: .8rem; letter-spacing: .08em; }
  .balance-pill { display: grid; min-height: 44px; align-content: center; text-align: right; }
  .balance-pill span { color: var(--muted); font-size: .62rem; }
  .balance-pill b { font-size: .82rem; }
  .main { padding: 34px 22px calc(108px + env(safe-area-inset-bottom)); }
  .mobile-nav { position: fixed; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); left: 12px; z-index: 19; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 66px; padding: 6px; background: var(--floating-surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 54px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
  .mobile-nav__item { display: grid; min-width: 0; min-height: 52px; place-items: center; align-content: center; gap: 2px; padding: 4px 2px; color: var(--muted); background: transparent; border: 0; border-radius: 12px; cursor: pointer; font-size: .61rem; font-weight: 750; line-height: 1.15; text-align: center; }
  .mobile-nav__item .nav-icon { width: 24px; height: 24px; color: currentColor; font-size: 1rem; }
  .mobile-nav__item > span:last-child { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav__item.is-active { color: var(--brand-ink); background: var(--brand); }
  .mobile-nav__item:focus-visible { outline: 3px solid rgba(216, 174, 90, .38); outline-offset: 2px; }
  .feedback-fab { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .product-detail, .order-grid { grid-template-columns: 1fr; }
  .product-feature-grid, .product-requirements-grid { grid-template-columns: 1fr; }
  .checkout-card, .admin-action { position: static; }
  .login-grid { grid-template-columns: 1fr; }
  .login-story { min-height: 56vh; padding: 42px 28px; }
  .login-story h1 { font-size: clamp(2.7rem, 12vw, 5.2rem); }
  .login-panel { min-height: auto; padding: 50px 22px; }
}

@media (max-width: 680px) {
  h1 { font-size: 2.15rem; }
  .main { padding: 28px 16px calc(104px + env(safe-area-inset-bottom)); }
  .topbar { padding-inline: 12px; }
  .topbar-brand b { display: none; }
  .page-head { align-items: stretch; flex-direction: column; margin-bottom: 25px; }
  .page-head .button { width: 100%; }
  .page-head .period-switch { width: 100%; }
  .period-switch a { min-width: 0; flex: 1 1 0; min-height: 44px; padding-inline: 8px; }
  .analytics-panel .section-head { align-items: stretch; flex-direction: column; }
  .chart-legend { justify-content: flex-start; }
  .analytics-panel { padding-inline: 14px; }
  .analytics-chart-scroll { margin-inline: -4px; padding-bottom: 4px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .analytics-kpis .stat-card strong { font-size: clamp(1.35rem, 6vw, 1.6rem); overflow-wrap: normal; white-space: nowrap; }
  .product-grid, .admin-shortcuts { grid-template-columns: 1fr; }
  .stat-card { min-height: 122px; padding: 17px; }
  .stat-card p { min-height: 36px; margin-bottom: 10px; line-height: 1.35; }
  .stat-card strong { margin-bottom: 9px; font-size: clamp(1.55rem, 8vw, 2.1rem); overflow-wrap: anywhere; }
  .stat-card span, .stat-card a { font-size: .7rem; line-height: 1.35; }
  .filter-bar { grid-template-columns: 1fr; }
  .filter-bar .button { grid-column: auto; }
  .catalog-meta { align-items: flex-start; flex-direction: column; }
  .panel, .product-summary, .checkout-card, .form-card, .admin-action { padding: 18px; border-radius: 14px; }
  .product-group > summary { grid-template-columns: 1fr; min-height: 0; gap: 14px; padding: 15px; }
  .product-group__summary { justify-content: flex-start; flex-wrap: wrap; padding-left: 57px; }
  .product-group__identity b { white-space: normal; }
  .product-group__summary .product-group__chevron { margin-left: auto; }
  .catalog-product-group .product-group__content { padding: 12px 14px 16px; }
  .catalog-offer-row { grid-template-columns: 1fr; gap: 8px; }
  .catalog-offer-row > strong { justify-self: start; }
  .catalog-product-action { width: 100%; justify-self: stretch; }
  .product-summary__head { align-items: flex-start; }
  .product-avatar--large { width: 52px; height: 52px; border-radius: 14px; }
  .order-summary { grid-template-columns: 1fr; }
  .order-summary > div { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .timeline { grid-template-columns: 1fr; gap: 12px; }
  .timeline-step::after { top: 34px; right: auto; bottom: -13px; left: 16px; width: 1px; height: auto; }
  .payment-retry dl { grid-template-columns: 1fr; }
  .payment-retry__actions { display: grid; }
  .payment-retry__actions .button { width: 100%; }
  .risk-note { grid-template-columns: 1fr; }
  .balance-hero { grid-template-columns: 1fr; padding: 20px; }
  .amount-presets { grid-template-columns: 1fr; }
  .sync-bar { align-items: stretch; flex-direction: column; }
  .sync-bar .button { width: 100%; }
  .manual-product-grid { grid-template-columns: 1fr; }
  .manual-product-grid__wide { grid-column: auto; }
  .manual-offers .section-heading { align-items: stretch; }
  .manual-offers .section-heading .button { width: 100%; }
  .manual-product-submit { bottom: calc(86px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr; }
  .manual-product-submit .button { width: 100%; }
  .trust-list { flex-direction: column; gap: 12px; }
  .login-story { min-height: 68vh; }
  .login-card, .confirm-card { padding: 24px; }
  .auth-tools { top: 12px; right: 12px; left: 12px; justify-content: flex-end; }
  .auth-tools .theme-toggle__label { display: none; }
  .auth-tools .theme-toggle--floating { width: 42px; padding: 0; justify-content: center; }
  .secure-gate-shell .main { padding: 78px 14px 36px; }
  .secure-gate-shell .confirm-page { min-height: calc(100vh - 114px); }
  .recovery-grid { grid-template-columns: 1fr; }
  .secret-key { align-items: stretch; flex-direction: column; }
  .offer-action-sheet.is-open { top: 8px; right: 8px; bottom: calc(78px + env(safe-area-inset-bottom)); width: calc(100vw - 16px); padding: 16px; border-radius: 14px; }
  .offer-action-sheet__head { padding-right: 48px; }
  .offer-action-section { padding: 14px; }
  .offer-action-section__head { align-items: stretch; flex-direction: column; gap: 8px; }
  .inventory-batch { align-items: stretch; flex-direction: column; }
  .inventory-batch__actions .button, .inventory-items-form__actions .button { flex: 1 1 100%; width: 100%; }
  .security-chip { justify-self: start; }
  .pricing-scope__identity, .pricing-scope__math { grid-template-columns: 1fr; }
  .instruction-source__fields { grid-template-columns: 1fr; }
  .row-actions__close { margin: -4px -4px -56px 0; }
  .table-wrap--cards { overflow: visible; }
  table.responsive-cards, table.responsive-cards tbody { display: block; width: 100%; }
  table.responsive-cards thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  table.responsive-cards tbody { display: grid; gap: 12px; }
  table.responsive-cards tbody tr { display: grid; min-width: 0; gap: 0; padding: 4px 14px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 13px; }
  table.responsive-cards td { display: grid; grid-template-columns: minmax(88px, .42fr) minmax(0, 1fr); min-width: 0; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
  table.responsive-cards td::before { align-self: start; color: var(--muted-2); content: attr(data-label); font-size: .6rem; font-weight: 800; letter-spacing: .07em; line-height: 1.45; text-transform: uppercase; }
  table.responsive-cards td[data-label=""] { grid-template-columns: 1fr; }
  table.responsive-cards td[data-label=""]::before { display: none; }
  table.responsive-cards td[colspan] { display: block; padding: 14px 0; }
  table.responsive-cards td[colspan]::before { display: none; }
  table.responsive-cards td:last-child { border-bottom: 0; }
  table.responsive-cards tbody tr:hover td { background: transparent; }
  table.responsive-cards .row-actions summary { display: flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
  .admin-product-group table.responsive-cards { min-width: 0; }
  .pagination { align-items: stretch; flex-direction: column; text-align: center; }
  .pagination .button { width: 100%; }
  #new-reseller { scroll-margin-top: 84px; }
  .wait-card > div, .order-chat .section-head > div { min-width: 0; }
  .wait-card h2 { overflow-wrap: anywhere; }
  .order-chat .section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .chat-head-meta { justify-items: start; }
  .chat-message { box-sizing: border-box; width: 100%; }
  .chat-message > div { display: grid; align-items: start; justify-items: start; gap: 4px; }
  .chat-message time { white-space: normal; }
  .message-templates button { max-width: 100%; white-space: normal; }
  .chat-form { grid-template-columns: 1fr; }
  .chat-form .button { width: 100%; }
  .feedback-fab { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); padding-right: 10px; }
  .feedback-fab { display: none; }
  .partner-conditions .stats-grid { grid-template-columns: 1fr; }
  .partner-conditions .stat-card { min-height: 0; }
  .partner-conditions .stat-card p { min-height: 0; }
  .partner-conditions .stat-card strong { overflow-wrap: normal; word-break: normal; }
  .admin-stats { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .admin-stats .stat-card strong { font-size: clamp(1.25rem, 5.8vw, 1.65rem); overflow-wrap: normal; white-space: nowrap; }
}

@media (max-width: 420px) {
  .topbar-brand { display: none; }
  .topbar-actions { margin-left: auto; }
  .language-switch--compact a { min-width: 34px; }
  .balance-pill { min-width: 50px; }
  .mobile-nav { right: 8px; left: 8px; }
}

@media (max-width: 350px) {
  .stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  details.reseller-account-actions[open] > div { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); grid-template-columns: 1fr; padding: 14px; border-radius: 14px; }
  details.reseller-account-actions[open] > summary { top: 18px; right: 18px; }
  details.reseller-account-actions[open] > div > form[action$="/password"],
  details.reseller-account-actions[open] > div > form[action$="/toggle"] { grid-column: 1 / -1; }
  details.reseller-account-actions[open] > div > form .button { width: 100%; }
  .reseller-accounts .table-wrap { overflow: visible; }
  .reseller-accounts table, .reseller-accounts tbody { display: block; width: 100%; }
  .reseller-accounts thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .reseller-accounts tbody { display: grid; gap: 12px; }
  .reseller-accounts tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 12px; }
  .reseller-accounts td { min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .reseller-accounts td:first-child { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
  .reseller-accounts td:last-child { align-self: end; justify-self: end; }
  .reseller-accounts tbody tr:hover td { background: transparent; }
  .reseller-accounts .user-inline { align-items: flex-start; }
  .reseller-accounts .account-status { min-width: 0; }
  .reseller-accounts .account-status__item { align-items: flex-start; overflow-wrap: anywhere; }
  .reseller-accounts td:nth-child(2)::before,
  .reseller-accounts td:nth-child(3)::before,
  .reseller-accounts td:nth-child(4)::before { display: block; margin-bottom: 5px; color: var(--muted-2); font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .reseller-accounts td:nth-child(2)::before { content: 'Группа'; }
  .reseller-accounts td:nth-child(3)::before { content: 'Баланс'; }
  .reseller-accounts td:nth-child(4)::before { content: 'Статус'; }
  :root[lang="en"] .reseller-accounts td:nth-child(2)::before { content: 'Group'; }
  :root[lang="en"] .reseller-accounts td:nth-child(3)::before { content: 'Balance'; }
  :root[lang="en"] .reseller-accounts td:nth-child(4)::before { content: 'Status'; }
  .credential-row { grid-template-columns: 1fr; align-items: start; }
  .credentials-card .credential-row button { justify-self: start; padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.supplier-option-note { display: block; margin-top: 5px; color: var(--muted); line-height: 1.45; }
.supplier-purchase-link { color: var(--brand-strong); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.supplier-purchase-link--elite { color: var(--info-text); }
.elite-promo-note { display: grid; gap: 4px; margin: 2px 0 0; line-height: 1.45; }
.elite-promo-note span { display: block; }
.supplier-alternatives { margin-top: 7px; color: var(--muted); font-size: .75rem; }
.supplier-alternatives summary { cursor: pointer; color: var(--brand-strong); font-weight: 750; }
.supplier-alternatives ul { display: grid; gap: 5px; margin: 7px 0 0; padding-left: 18px; }
.supplier-alternatives a { color: var(--brand-strong); overflow-wrap: anywhere; }
.supplier-sync-summary { display: grid; gap: 4px; margin-bottom: 18px; }
.supplier-sync-summary b, .supplier-sync-summary span { display: block; }

.sound-toggle { display: flex; align-items: center; width: 100%; min-height: 42px; gap: 11px; padding: 8px 11px; margin-bottom: 8px; color: var(--muted); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 11px; cursor: pointer; font-size: .78rem; font-weight: 720; transition: color .16s ease, background-color .2s ease, border-color .16s ease, transform .16s ease; }
.sound-toggle:hover { color: var(--text); border-color: var(--line); transform: translateY(-1px); }
.sound-toggle__icon { display: grid; width: 24px; height: 24px; place-items: center; color: var(--brand-strong); font-size: 1rem; font-weight: 900; }
.sound-toggle.is-muted { color: var(--muted-2); }
.sound-toggle.is-muted .sound-toggle__icon { color: var(--muted-2); }
.panel-notification-region { position: fixed; top: 76px; right: 24px; z-index: 105; display: grid; width: min(390px, calc(100vw - 32px)); max-block-size: calc(100dvh - 112px); align-content: start; gap: 10px; overflow: hidden; pointer-events: none; }
.panel-notification { position: relative; display: block; color: var(--text); background: var(--floating-surface); border: 1px solid var(--line); border-inline-start-width: 4px; border-radius: 12px; box-shadow: var(--shadow); backdrop-filter: blur(16px); pointer-events: auto; transition: opacity .2s ease, transform .2s ease; }
.panel-notification:hover { transform: translateY(-2px); }
.panel-notification__link { display: grid; min-width: 0; gap: 4px; padding: 14px 52px 14px 16px; color: inherit; }
.panel-notification__link:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: -3px; border-radius: 11px; }
.panel-notification__close { position: absolute; top: 4px; right: 4px; display: grid; min-width: 44px; min-height: 44px; padding: 0; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer; font-size: 1.25rem; line-height: 1; }
.panel-notification__close:hover { color: var(--text); background: var(--surface-2); }
.panel-notification__close:focus-visible { color: var(--text); background: var(--surface-2); outline: 3px solid var(--brand-strong); outline-offset: -3px; }
.panel-notification strong { font-size: .84rem; line-height: 1.35; }
.panel-notification span { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: .75rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.panel-notification--message { border-inline-start-color: var(--info); }
.panel-notification--order { border-inline-start-color: var(--brand-strong); }
.panel-notification.is-hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; }

@media (max-width: 960px) {
  .panel-notification-region { top: calc(74px + env(safe-area-inset-top)); right: 16px; bottom: calc(90px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); max-block-size: none; }
}

.audit-intro { display: flex; width: 100%; max-width: 1180px; min-width: 0; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 18px; color: var(--muted); background: var(--info-bg); border: 1px solid var(--info-line); border-radius: var(--radius); }
.audit-intro__count { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; color: var(--info-text); background: var(--surface); border: 1px solid var(--info-line); border-radius: 12px; font-size: 1rem; font-weight: 900; }
.audit-intro b { display: block; color: var(--text); font-size: .88rem; }
.audit-intro > div { min-width: 0; }
.audit-intro p { max-width: 76ch; margin: 3px 0 0; font-size: .76rem; line-height: 1.5; overflow-wrap: anywhere; }
.audit-list { display: grid; width: 100%; max-width: 1180px; min-width: 0; gap: 12px; }
.audit-event { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.audit-event__marker { display: grid; width: 42px; height: 42px; place-items: center; color: var(--muted); background: var(--surface-3); border: 1px solid var(--line); border-radius: 12px; font-size: 1rem; font-weight: 900; }
.audit-event--success .audit-event__marker { color: var(--success-text); background: var(--success-bg); border-color: var(--success-line); }
.audit-event--danger .audit-event__marker { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-line); }
.audit-event--warning .audit-event__marker { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning-line); }
.audit-event--payment .audit-event__marker { color: var(--success-text); background: var(--success-bg); border-color: var(--success-line); }
.audit-event--order .audit-event__marker, .audit-event--telegram .audit-event__marker { color: var(--info-text); background: var(--info-bg); border-color: var(--info-line); }
.audit-event--reseller .audit-event__marker, .audit-event--catalog .audit-event__marker { color: var(--brand-strong); background: var(--brand-soft); border-color: var(--brand); }
.audit-event__body { min-width: 0; }
.audit-event__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.audit-event__title { margin: 0 0 5px; color: var(--text); font-size: 1rem; font-weight: 850; line-height: 1.35; }
.audit-event__entity { display: inline-flex; color: var(--brand-strong); font-size: .78rem; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; }
a.audit-event__entity:hover { text-decoration: underline; text-underline-offset: 3px; }
.audit-event__time { flex: 0 0 auto; color: var(--muted-2); font-size: .72rem; line-height: 1.45; text-align: right; }
.audit-event__actor { display: flex; align-items: center; gap: 9px; margin-top: 16px; }
.audit-event__actor .avatar { width: 30px; height: 30px; }
.audit-event__actor small, .audit-event__actor b { display: block; }
.audit-event__actor small { margin-bottom: 2px; color: var(--muted-2); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.audit-event__actor b { color: var(--text); font-size: .78rem; }
.audit-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 16px 0 0; }
.audit-fact { min-width: 0; padding: 11px 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; }
.audit-fact dt { margin-bottom: 4px; color: var(--muted-2); font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.audit-fact dd { margin: 0; color: var(--text); font-size: .78rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.audit-technical { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.audit-technical summary { width: max-content; color: var(--muted); cursor: pointer; font-size: .72rem; font-weight: 750; }
.audit-technical summary:hover { color: var(--text); }
.audit-technical > div { display: grid; gap: 8px; padding-top: 12px; }
.audit-technical code { width: max-content; max-width: 100%; color: var(--brand-strong); overflow-wrap: anywhere; }
.audit-technical span { color: var(--muted-2); font-size: .7rem; overflow-wrap: anywhere; }
.audit-technical pre { max-height: 260px; padding: 12px; margin: 0; overflow: auto; color: var(--muted); background: var(--bg); border: 1px solid var(--line-soft); border-radius: 10px; font-size: .7rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

.topup-filters { grid-template-columns: minmax(260px, 1fr) 230px auto auto; align-items: end; }
.topup-filters .text-link { min-height: 42px; align-items: center; justify-content: center; }
.topup-state, .notification-state { display: inline-flex; align-items: center; min-height: 28px; gap: 7px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.topup-state i, .notification-state i { width: 7px; height: 7px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent); }
.topup-state--success, .notification-state--delivered { color: var(--success-text); background: var(--success-bg); border-color: var(--success-line); }
.topup-state--pending, .notification-state--queued { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning-line); }
.topup-state--warning, .notification-state--retrying, .notification-state--missing { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-line); }
.topup-state--muted { color: var(--muted); background: var(--surface-2); border-color: var(--line-soft); }
.topup-table tr:target td { background: var(--brand-soft); }
.topup-notification-error { max-width: 260px; color: var(--danger-text); overflow-wrap: anywhere; }
.topup-monitor > .alert { margin-bottom: 16px; }
.topup-resolution { min-width: 220px; }
.topup-resolution > summary { color: var(--brand-strong); cursor: pointer; font-size: .76rem; font-weight: 800; }
.topup-resolution > form { display: grid; gap: 10px; min-width: 260px; padding-top: 12px; }
.topup-resolution textarea { min-height: 70px; resize: vertical; }
.topup-resolution__confirm { align-items: flex-start; font-size: .72rem; line-height: 1.4; }
.topup-resolution > form > small { max-width: 34ch; color: var(--muted); line-height: 1.4; }

@media (max-width: 680px) {
  .payment-detail { padding: 20px; }
  .payment-detail__head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .payment-detail__facts { grid-template-columns: 1fr; }
  .payment-detail__actions { grid-template-columns: 1fr; }
  .payment-history-actions { min-width: 0; }
  .payment-history-action, .payment-history-details { width: 100%; justify-content: center; }
  .audit-intro { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: flex-start; padding: 14px; }
  .audit-intro__count { width: 38px; height: 38px; }
  .audit-event { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 15px; border-radius: 14px; }
  .audit-event__marker { width: 36px; height: 36px; border-radius: 10px; }
  .audit-event__head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .audit-event__time { text-align: left; }
  .audit-facts { grid-template-columns: 1fr; }
  .topup-filters { grid-template-columns: 1fr; }
  .topup-filters .button, .topup-filters .text-link { width: 100%; }
}

@media (max-width: 680px) {
  .product-instructions > .section-head { align-items: stretch; flex-direction: column; gap: 14px; }
  .product-instructions > .section-head h2 { max-width: none; font-size: 1.25rem; line-height: 1.35; }
  .product-instructions > .section-head .text-link { width: 100%; justify-content: center; }
  .instruction-text { max-height: 74vh; padding: 10px; scrollbar-gutter: auto; }
  .instruction-document { gap: 12px; }
  .instruction-section { border-radius: 11px; }
  .instruction-section__head { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 13px 14px; }
  .instruction-section__head > span { width: 30px; height: 30px; border-radius: 9px; }
  .instruction-section__body { gap: 12px; padding: 14px; }
  .instruction-callout { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .instruction-callout > span { width: 28px; height: 28px; }
  .instruction-list { gap: 8px; padding-inline-start: 22px; }
}
@media (max-width: 680px) {
  .delivery-card { padding: 18px; }
  .delivery-block__head { align-items: stretch; flex-direction: column; }
  .delivery-block__head .button, .delivery-instructions__content .button { width: 100%; }
  .field-meta { align-items: stretch; flex-direction: column; gap: 4px; }
  .sync-diagnostic-group li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .admin-developer-group { padding: 10px; border-radius: 14px; }
  .admin-developer-group__head { align-items: flex-start; flex-direction: column; gap: 5px; padding: 4px; }
  .admin-developer-group__head > span { text-align: left; }
}

/* Public reseller demo: isolated, synthetic, read-only workspace. */
.login-demo-link { margin-top: -4px; }
.demo-page { width: min(100%, 1320px); padding-top: 34px; margin: 0 auto; }
.demo-intro { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); align-items: end; gap: 48px; padding: 48px 0 36px; }
.demo-intro h1 { max-width: 820px; font-size: clamp(2.65rem, 5.5vw, 5rem); }
.demo-intro > div > p:not(.eyebrow) { max-width: 720px; margin-bottom: 0; color: var(--body-copy); font-size: 1.08rem; line-height: 1.7; }
.demo-intro__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.demo-intro__facts { display: grid; gap: 1px; padding: 0; margin: 0; overflow: hidden; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); list-style: none; box-shadow: var(--shadow); }
.demo-intro__facts li { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 82px; padding: 14px 16px; background: var(--surface); }
.demo-intro__facts li > span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid rgba(216, 174, 90, .24); border-radius: 10px; font-size: .7rem; font-weight: 900; }
.demo-intro__facts b, .demo-intro__facts small { display: block; }
.demo-intro__facts b { margin-bottom: 3px; font-size: .83rem; }
.demo-intro__facts small { line-height: 1.4; }
.demo-safety { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 18px; color: var(--info-text); background: var(--info-bg); border: 1px solid var(--info-line); border-radius: var(--radius); }
.demo-safety__icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--success-text); background: var(--success-bg); border: 1px solid var(--success-line); border-radius: 12px; font-size: 1rem; font-weight: 900; }
.demo-safety strong { display: block; margin-bottom: 2px; color: var(--text); font-size: .9rem; }
.demo-safety p { margin: 0; font-size: .78rem; line-height: 1.5; }
.demo-readonly-tag { display: inline-flex; min-height: 28px; align-items: center; justify-content: center; padding: 5px 10px; color: var(--info-text); background: var(--surface); border: 1px solid var(--info-line); border-radius: 999px; font-size: .63rem; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.demo-workspace { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 760px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.demo-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 24px 16px 18px; background: var(--sidebar); border-right: 1px solid var(--line-soft); }
.demo-sidebar .brand { padding: 0 8px; }
.demo-nav { display: grid; gap: 5px; margin-top: 34px; }
.demo-nav__item { display: flex; min-height: 46px; align-items: center; gap: 11px; padding: 9px 11px; color: var(--muted); border: 1px solid transparent; border-radius: 11px; font-size: .82rem; font-weight: 750; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.demo-nav__item:hover { color: var(--text); background: var(--surface); }
.demo-nav__item.is-active { color: var(--brand-strong); background: rgba(216, 174, 90, .09); border-color: rgba(216, 174, 90, .2); }
.demo-nav__item:focus-visible { outline: 3px solid rgba(216, 174, 90, .36); outline-offset: 2px; }
.demo-sidebar__foot { display: flex; align-items: center; gap: 10px; padding: 14px 10px 0; margin-top: auto; border-top: 1px solid var(--line-soft); }
.demo-sidebar__foot b, .demo-sidebar__foot small { display: block; }
.demo-sidebar__foot b { font-size: .8rem; }
.demo-shell { min-width: 0; }
.demo-toolbar { display: flex; min-height: 66px; align-items: center; justify-content: flex-end; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.demo-nav--mobile { display: none; }
.demo-toolbar__status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .72rem; font-weight: 750; }
.demo-toolbar__status i { width: 8px; height: 8px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 4px var(--success-bg); }
.demo-screen { padding: 34px; }
.demo-screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.demo-screen-head > div:first-child { min-width: 0; }
.demo-screen-head h2 { margin-bottom: 8px; font-size: clamp(1.75rem, 3.2vw, 2.7rem); letter-spacing: -.035em; }
.demo-screen-head p:not(.eyebrow) { max-width: 680px; margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.demo-account-chip { flex: 0 0 auto; min-width: 144px; padding: 12px 14px; text-align: right; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; }
.demo-account-chip span, .demo-account-chip small { color: var(--muted); font-size: .65rem; }
.demo-account-chip b { display: block; margin: 2px 0; color: var(--brand-strong); font-size: 1.25rem; }
.demo-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.demo-metric { min-height: 132px; padding: 18px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; }
.demo-metric > span { display: block; min-height: 34px; color: var(--muted); font-size: .7rem; font-weight: 750; }
.demo-metric strong { display: block; margin: 8px 0 10px; font-size: 1.8rem; line-height: 1; letter-spacing: -.04em; }
.demo-metric--accent { border-color: rgba(216, 174, 90, .3); background: linear-gradient(145deg, var(--surface), var(--brand-soft)); }
.demo-metric--accent strong { color: var(--brand-strong); }
.demo-panel { min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; }
.demo-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.demo-section-head span { color: var(--muted-2); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.demo-section-head h3 { margin: 3px 0 0; font-size: 1.02rem; }
.demo-section-head a { min-height: 44px; display: inline-flex; align-items: center; color: var(--brand-strong); font-size: .74rem; font-weight: 800; }
.demo-overview-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(250px, .75fr); gap: 18px; }
.demo-table-wrap { width: 100%; overflow-x: auto; }
.demo-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.demo-table th { padding: 9px 10px; color: var(--muted-2); border-bottom: 1px solid var(--line); font-size: .62rem; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.demo-table td { padding: 13px 10px; color: var(--body-copy); border-bottom: 1px solid var(--line-soft); }
.demo-table tr:last-child td { border-bottom: 0; }
.demo-table td b { color: var(--text); }
.demo-table td small { margin-top: 2px; }
.demo-updates { display: grid; align-content: start; }
.demo-updates article { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 13px 0; border-top: 1px solid var(--line-soft); }
.demo-updates article:first-of-type { border-top: 0; }
.demo-updates b { display: block; margin-bottom: 3px; font-size: .8rem; }
.demo-updates p { margin-bottom: 5px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.demo-dot { width: 8px; height: 8px; margin-top: 6px; background: var(--muted); border-radius: 50%; }
.demo-dot--success { background: var(--success); box-shadow: 0 0 0 4px var(--success-bg); }
.demo-dot--warning { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-bg); }
.demo-catalog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; }
.demo-search { display: flex; flex: 1 1 260px; min-height: 42px; align-items: center; gap: 10px; padding: 0 13px; color: var(--muted-2); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font-size: .75rem; }
.demo-filter { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 13px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; font-size: .7rem; font-weight: 750; }
.demo-filter.is-active { color: var(--brand-strong); border-color: rgba(216, 174, 90, .3); }
.demo-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.demo-product-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; }
.demo-product-card__visual { position: relative; display: grid; min-height: 138px; place-items: center; overflow: hidden; color: var(--brand-strong); background: radial-gradient(circle at 70% 20%, rgba(106,170,247,.18), transparent 35%), linear-gradient(145deg, var(--surface-3), var(--story-bg)); border-bottom: 1px solid var(--line-soft); }
.demo-product-card__visual::before { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(216,174,90,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(216,174,90,.15) 1px, transparent 1px); background-size: 22px 22px; content: ''; }
.demo-product-card__visual > span { position: relative; font-size: 2.3rem; font-weight: 950; letter-spacing: -.06em; }
.demo-product-card__visual small { position: absolute; right: 12px; bottom: 10px; color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.demo-product-card__body { padding: 17px; }
.demo-product-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .66rem; }
.demo-product-card h3 { margin-top: 12px; font-size: 1.08rem; }
.demo-product-card p { min-height: 58px; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.demo-product-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.demo-product-card__footer > div b { display: block; margin: 2px 0; color: var(--brand-strong); font-size: 1.25rem; }
.demo-product-card__footer > div span { display: block; color: var(--muted-2); font-size: .64rem; }
.demo-product-card__footer .button { min-height: 42px; padding: 8px 12px; font-size: .72rem; }
.demo-back-link { display: inline-flex; min-height: 44px; align-items: center; margin-bottom: 14px; color: var(--brand-strong); font-size: .78rem; font-weight: 800; }
.demo-product-hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 28px; padding: 22px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; }
.demo-product-hero__visual { display: grid; min-height: 180px; place-items: center; color: var(--brand-strong); background: radial-gradient(circle at 65% 25%, rgba(106,170,247,.2), transparent 38%), var(--surface-2); border: 1px solid var(--line); border-radius: 13px; }
.demo-product-hero__visual span { font-size: 3rem; font-weight: 950; }
.demo-product-hero__visual small { margin-top: -54px; font-size: .58rem; letter-spacing: .1em; }
.demo-product-hero__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--muted); font-size: .72rem; }
.demo-product-hero h2 { font-size: 2rem; }
.demo-product-hero p:last-child { max-width: 700px; margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.demo-product-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 18px; }
.demo-offer-list { display: grid; gap: 8px; }
.demo-offer-list article { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 11px; }
.demo-offer-list b, .demo-offer-list small { display: block; }
.demo-offer-list strong { color: var(--brand-strong); font-size: 1.1rem; }
.demo-checkout { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.demo-checkout h3 { margin: 14px 0 8px; font-size: 1.25rem; }
.demo-checkout p { color: var(--muted); font-size: .8rem; line-height: 1.55; }
.demo-checkout .button { width: 100%; margin: 8px 0 12px; cursor: not-allowed; opacity: .72; pointer-events: none; }
.demo-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.demo-flow article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 13px; }
.demo-flow article > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--brand-strong); background: var(--brand-soft); border-radius: 10px; font-size: .68rem; font-weight: 900; }
.demo-flow b { display: block; margin-bottom: 3px; font-size: .8rem; }
.demo-flow p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.demo-balance-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 18px; padding: 24px; margin-bottom: 18px; background: linear-gradient(145deg, var(--surface), var(--brand-soft)); border: 1px solid rgba(216,174,90,.28); border-radius: 16px; }
.demo-balance-hero > div > span, .demo-balance-hero > div > small { display: block; color: var(--muted); }
.demo-balance-hero > div > strong { display: block; margin: 12px 0 10px; color: var(--brand-strong); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; letter-spacing: -.05em; }
.demo-balance-hero aside { padding-left: 20px; border-left: 1px solid rgba(216,174,90,.2); }
.demo-balance-hero aside b { display: block; margin: 12px 0 4px; }
.demo-balance-hero aside p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.demo-outro { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 34px; margin: 18px 0 0; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 20px; }
.demo-outro h2 { max-width: 760px; margin-bottom: 7px; font-size: clamp(1.45rem, 3vw, 2.25rem); }
.demo-outro p:last-child { max-width: 720px; margin: 0; color: var(--muted); }
.demo-outro .button { flex: 0 0 auto; }

@media (max-width: 1100px) {
  .demo-intro { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
  .demo-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .demo-page { padding-top: 54px; }
  .demo-intro { grid-template-columns: 1fr; }
  .demo-intro__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demo-intro__facts li { grid-template-columns: 1fr; align-content: start; min-height: 142px; }
  .demo-workspace { grid-template-columns: 1fr; min-height: 0; }
  .demo-sidebar { display: none; }
  .demo-toolbar { display: grid; gap: 10px; padding: 12px 18px; }
  .demo-nav--mobile { display: flex; min-width: 0; gap: 5px; margin: 0; overflow-x: auto; scrollbar-width: thin; }
  .demo-nav--mobile .demo-nav__item { flex: 1 0 auto; min-width: 112px; justify-content: center; }
  .demo-toolbar__status { justify-self: end; }
  .demo-screen { padding: 28px; }
  .demo-overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .auth-page .main { padding-inline: 16px; }
  .demo-page, .demo-intro, .demo-intro > div, .demo-workspace, .demo-shell, .demo-screen { max-width: 100%; min-width: 0; }
  .demo-page { padding-top: 64px; }
  .demo-intro { gap: 24px; padding: 30px 0 24px; }
  .demo-intro h1 { max-width: 100%; font-size: clamp(2.25rem, 12vw, 3.25rem); line-height: 1.02; overflow-wrap: anywhere; }
  .demo-intro > div > p:not(.eyebrow) { font-size: .98rem; }
  .demo-intro__actions { display: grid; }
  .demo-intro__actions .button { width: 100%; }
  .demo-intro__facts { grid-template-columns: 1fr; }
  .demo-intro__facts li { grid-template-columns: 38px minmax(0, 1fr); min-height: 80px; }
  .demo-safety { grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
  .demo-safety .demo-readonly-tag { grid-column: 2; justify-self: start; }
  .demo-workspace { border-radius: 18px; }
  .demo-toolbar { max-width: 100%; padding-inline: 12px; overflow: hidden; }
  .demo-nav--mobile { width: 100%; max-width: 100%; }
  .demo-nav--mobile .demo-nav__item { min-width: 104px; min-height: 48px; }
  .demo-toolbar__status { padding-right: 4px; }
  .demo-screen { padding: 22px 16px; }
  .demo-screen-head { align-items: stretch; flex-direction: column; gap: 16px; }
  .demo-account-chip { text-align: left; }
  .demo-metrics, .demo-product-grid, .demo-product-layout, .demo-flow, .demo-balance-hero { grid-template-columns: 1fr; }
  .demo-metric { min-height: 118px; }
  .demo-product-card p { min-height: 0; }
  .demo-product-hero { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .demo-product-hero__visual { min-height: 150px; }
  .demo-balance-hero aside { padding: 18px 0 0; border-top: 1px solid rgba(216,174,90,.2); border-left: 0; }
  .demo-outro { align-items: stretch; flex-direction: column; gap: 20px; padding: 24px 20px; }
  .demo-outro .button { width: 100%; }
}

/* Catalog additions use the same native accordion and theme tokens as the catalog. */
.filter-bar.product-updates-filters { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) auto; }
.product-updates-note { margin: 16px 0; color: var(--muted); font-size: .85rem; line-height: 1.65; max-width: 90ch; }
.product-update .product-update__date { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: normal; }
.product-update .product-group__identity b { white-space: normal; overflow-wrap: anywhere; }
.product-update > .product-group__content { padding: 20px; }
.product-update__new { padding: 2px 7px; border: 1px solid var(--success-line); border-radius: 6px; background: var(--success-bg); color: var(--success-text); font-size: .65rem; font-weight: 750; }
.product-update__discount { min-width: 110px; }
.product-update__discount strong { color: var(--success); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.product-update__hint { color: var(--muted); font-size: .75rem; }
.product-update__description { max-width: 85ch; }
.product-update .product-details-panel { margin: 18px 0; background: var(--surface-2); }
.product-update__offers { width: 100%; }
.product-update__offers caption { padding: 0 0 12px; text-align: left; color: var(--text); font-weight: 750; }
.product-update__offers td, .product-update__offers th { padding: 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.product-update__offers td:first-child { width: 60%; }
.product-update__offers td:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-update__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.product-updates-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin: 24px 0; }
@media (max-width: 760px) {
  .filter-bar.product-updates-filters { grid-template-columns: minmax(0, 1fr); }
  .product-update .product-group__summary { justify-content: space-between; }
  .product-update__actions .button { width: 100%; }
  .product-update .product-details-panel { padding: 14px; }
  .product-update__offers td, .product-update__offers th { padding: 10px 6px; font-size: .8rem; }
  .product-update__offers caption { display: block; width: 100%; }
  table.product-update__offers td:first-child { width: auto; }
}
/* Read-only reseller announcements use the existing panel and theme tokens. */
.latest-events{display:grid;gap:1.25rem}
.latest-event{min-width:0;overflow-wrap:anywhere}
.latest-event .section-head{flex-wrap:wrap;gap:1rem}
.latest-event time{color:var(--muted);font-size:.875rem}
.latest-event p,.latest-event ul{max-width:75ch;line-height:1.65}
.latest-event li+li{margin-top:.35rem}