:root {
  color-scheme: dark;
  --bg: #08090b; --surface: #101114; --panel: #17191d; --hover: #202227; --selected: #1b1e23;
  --ink: #f4f5f7; --secondary: #b4b6bd; --muted: #80848e;
  --line: #ffffff16; --line-strong: #ffffff2c;
  --accent: #bcd5ff; --accent-hover: #e0ebff; --success: #87dcb7; --warning: #d7bc83; --error: #f4a1ac;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--app-safe-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--app-safe-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--app-safe-left, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--app-safe-right, 0px));
  --app-viewport-height: 100dvh; --app-bottom-offset: 0px; --header-height: 82px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-padding-top: calc(var(--header-height) + var(--safe-top) + 24px); }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
button, input, textarea { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; min-height: 44px; }
button:disabled { cursor: not-allowed; }
button, input, textarea, a, summary { -webkit-tap-highlight-color: transparent; }
button, summary, a { touch-action: manipulation; }
a { color: inherit; text-underline-offset: 3px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
img { max-width: 100%; object-fit: contain; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: #10141b; }
[hidden] { display: none !important; }
.sprite, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.app-shell { width: min(100%, 1512px); min-height: var(--app-viewport-height); margin: auto; padding: var(--safe-top) calc(42px + var(--safe-right)) 0 calc(42px + var(--safe-left)); }
.header { position: sticky; top: var(--safe-top); z-index: 30; display: grid; grid-template-columns: 184px minmax(0, 1fr) auto; gap: 32px; align-items: center; min-height: var(--header-height); border-bottom: 1px solid var(--line); background: #08090bf2; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.header::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: var(--safe-top); background: var(--bg); pointer-events: none; }
.wordmark { display: inline-flex; width: max-content; align-items: center; gap: 0; font-size: 25px; font-weight: 650; letter-spacing: -.045em; line-height: 1; text-decoration: none; white-space: pre; }
.wordmark img { width: 31px; height: 31px; margin-right: 10px; filter: drop-shadow(0 0 8px #a7caff50); }
.wordmark span { color: #bfc1c9; font-weight: 400; }
.catalog-toolbar { min-width: 0; display: flex; gap: 9px; align-items: center; max-width: 610px; }
.search-wrap { display: flex; flex: 1; align-items: center; gap: 11px; min-width: 0; min-height: 43px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff04; padding: 0 14px; color: var(--muted); transition: border-color .2s, background .2s; }
.search-wrap:focus-within { border-color: #a0b8d05c; background: #ffffff07; box-shadow: 0 0 0 3px #bcd5ff08; }
.search-wrap > svg { width: 17px; height: 17px; }
.search-wrap input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 11px 0; color: var(--ink); outline: 0; font-size: 12px; }
.search-wrap input:focus-visible { outline: 0; }
.search-wrap input::placeholder { color: var(--muted); opacity: 1; }
.search-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-clear { width: 27px; min-height: 40px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; background: transparent; border-radius: 8px; color: var(--secondary); }
.search-clear svg { width: 14px; height: 14px; }
.catalog-toggle, .fullscreen-button { width: 43px; height: 43px; flex-shrink: 0; display: grid; place-items: center; background: #ffffff04; border: 1px solid var(--line); border-radius: 12px; color: var(--secondary); }
.catalog-toggle { display: none; }
.fullscreen-button:hover, .catalog-toggle:hover, .search-clear:hover { background: var(--hover); color: var(--ink); }
.header-actions { display: flex; gap: 5px; align-items: center; }
.header-actions .nav-item { flex-direction: row; padding: 10px 14px; gap: 8px; min-height: 43px; font-size: 12px; border-radius: 12px; }
.header-actions #profile-shortcut { border: 1px solid #ffffff26; color: #d6d8df; }
.nav-item { display: flex; align-items: center; justify-content: center; gap: 6px; background: transparent; color: var(--muted); font-size: 12px; min-width: 0; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { background: var(--panel); color: var(--ink); }
.nav-item.active { background: var(--selected); color: var(--ink); }
.workspace { display: grid; grid-template-columns: 184px minmax(0, 1fr); column-gap: 32px; align-items: start; padding-top: 28px; }
.catalog-sidebar { position: sticky; top: calc(var(--header-height) + 28px + var(--safe-top)); padding: 0 16px 0 0; border-right: 1px solid var(--line); max-height: calc(var(--app-viewport-height) - var(--header-height) - 56px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--bg); }
.sidebar-heading { display: block; font-size: 9px; letter-spacing: .17em; font-weight: 600; color: #656a75; margin: 6px 12px 20px; }
.category-nav { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.category-link { display: flex; align-items: center; width: 100%; min-height: 45px; gap: 10px; padding: 10px 11px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; color: #979ba5; }
.category-link > svg { width: 17px; height: 17px; color: #747b88; }
.category-link:hover { background: #ffffff05; color: var(--ink); }
.category-link.active, .category-link[aria-pressed="true"] { background: linear-gradient(110deg, #ffffff0d, #ffffff03); border-color: #ffffff14; color: #f0f1f5; }
.category-link[data-filter="ai"] > svg { color: #9bd3b4; }
.category-link[data-filter="editing"] > svg { color: #b5a8d4; }
.category-link[data-filter="keys"] > svg { color: #cbb58b; }
.category-link[data-filter="tokens"] > svg { color: #82c1c4; }
.category-link[data-filter="offers"] > svg { color: #d29482; }
.category-copy { min-width: 0; flex: 1; }
.category-name { display: block; font-size: 12px; font-weight: 450; line-height: 1.5; }
.category-count { min-width: 14px; font-size: 10px; color: #626772; text-align: right; }
.category-link.active .category-count { color: #c5c7d0; }
.nav-separator { height: 1px; background: var(--line); margin: 14px 11px; }
.sidebar-bottom { margin-top: 35px; }
.sidebar-help { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px; background: transparent; color: var(--muted); text-align: left; font-size: 12px; border-radius: 10px; }
.sidebar-help svg { width: 17px; height: 17px; }
.sidebar-help svg:last-child { margin-left: auto; width: 14px; height: 14px; }
.sidebar-help:hover { color: var(--ink); background: var(--panel); }
.workspace-content { min-width: 0; display: flex; flex-direction: column; min-height: calc(var(--app-viewport-height) - var(--header-height) - 28px - var(--safe-top)); }
main { min-width: 0; flex: 1; }
.view { min-width: 0; animation: enter .2s ease-out; }
.view:not(#catalog) { max-width: 760px; padding-top: 12px; }
/* One connected scene, with a shared lighting plane and a single pedestal. */
.store-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); align-items: center; gap: 0; min-height: 422px; margin: -10px 0 31px; padding: 15px 0 24px; border-bottom: 1px solid var(--line); }
.hero-copy { position: relative; z-index: 2; min-width: 0; padding-bottom: 15px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #c1cad7; font-size: 8px; font-weight: 550; letter-spacing: .13em; padding: 5px 9px; border: 1px solid #ffffff19; border-radius: 5px; margin-bottom: 22px; }
.hero-eyebrow::before { content: ""; width: 4px; height: 4px; background: #c8e2ff; box-shadow: 0 0 7px #96c6ff; border-radius: 50%; }
.hero-copy .hero-title { margin: 0 0 18px; color: #f5f6f8; font-size: clamp(35px,3.55vw,53px); line-height: 1.08; font-weight: 650; letter-spacing: -.055em; }
.hero-copy .hero-title > span { color: #bfd8ff; }
.hero-copy > p { margin: 0 0 24px; max-width: 385px; font-size: 13px; line-height: 1.75; color: #a8adb7; }
.hero-actions { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.hero-actions .primary, .hero-actions .secondary { margin: 0; min-height: 45px; padding: 12px 16px; font-size: 12px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 13px 21px; margin-top: 22px; color: #858c98; font-size: 10px; }
.hero-points > span { display: inline-flex; align-items: center; gap: 7px; }
.hero-points svg { width: 14px; height: 14px; color: #b9c8dc; }
.hero-scene { position: relative; width: 105%; max-width: 600px; aspect-ratio: 1.45; justify-self: center; isolation: isolate; pointer-events: none; }
.scene-halo { position: absolute; z-index: -2; inset: 4% -2% 0; border-radius: 50%; background: radial-gradient(ellipse at 47% 46%, #d9e8ff15, transparent 65%); filter: blur(13px); }
.scene-orbit { position: absolute; z-index: -1; left: 15%; top: 9%; width: 73%; height: 76%; transform: rotate(-29deg); border: 1px solid #c6d7f40d; border-radius: 50%; }
.hero-stage { position: absolute; z-index: 0; left: 1%; right: 0; bottom: 1%; height: 21%; border-radius: 50% 50% 32% 32% / 49% 49% 35% 35%; background: linear-gradient(180deg,#27303c 0%,#10151b 48%,#090b0e 70%); box-shadow: inset 0 1px 1px #c0d6ef6e, 0 22px 35px #0009; }
.hero-stage::before { content: ""; position: absolute; inset: 4px 3px 29%; border-radius: 50%; border: 2px solid #d2e4ff80; background: radial-gradient(ellipse,#2a3c5333,#0a0e15 68%); box-shadow: 0 0 6px #b0d0ff7d, inset 0 0 7px #8fc0ff55; }
.hero-stage::after { content: ""; position: absolute; inset: 4px 5% 42%; border-radius: 50%; border: 1px solid #ffffff28; }
.hero-orb { position: absolute; height: auto; object-fit: contain; filter: drop-shadow(0 9px 8px #0007); }
.hero-orb-grok { z-index: 1; width: 38%; left: 31%; top: -2%; }
.hero-orb-claude { z-index: 2; width: 43%; left: 0; top: 9%; mix-blend-mode: lighten; mask-image: radial-gradient(ellipse 49% 49% at 50% 51%, #000 69%, transparent 100%); }
.hero-orb-gemini { z-index: 2; width: 37%; right: -1%; top: 9%; }
.hero-orb-codex { z-index: 3; width: 36%; left: 0; bottom: 12%; }
.hero-orb-perplexity { z-index: 3; width: 37%; right: -2%; bottom: 12%; }
.hero-orb-gpt { z-index: 5; width: 52%; left: 24%; bottom: 2%; }
.section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 20px; scroll-margin-top: 12px; }
.section-kicker { display: block; color: #626b78; letter-spacing: .16em; font-size: 8px; font-weight: 550; margin-bottom: 7px; }
.section-top h2 { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.04em; margin: 0; }
.catalog-status { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; padding-bottom: 2px; }
.catalog-status > #product-count { white-space: nowrap; }
.preview-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 500; color: #b8b4a9; background: #d1bb8510; border: 1px solid #d1bb851b; border-radius: 6px; padding: 5px 7px; white-space: nowrap; }
.preview-pill i { width: 4px; height: 4px; border-radius: 50%; background: var(--warning); }
.product-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; align-items: stretch; }
.product-card { --orb-color: 117,216,172; position: relative; width: 100%; min-width: 0; display: flex; flex-direction: column; padding: 0; text-align: center; overflow: hidden; border-radius: 14px; border: 1px solid #ffffff18; background: linear-gradient(160deg,#15181d,#0d0f12 76%); box-shadow: 0 6px 15px #0002; transition: border-color .23s, box-shadow .23s, transform .23s; }
.product-card[data-tier="go"] { --orb-color: 93,208,193; }
.product-card[data-tier="pro5"] { --orb-color: 177,163,222; }
.product-card[data-tier="pro20"] { --orb-color: 211,182,119; }
.product-art { position: relative; isolation: isolate; width: 100%; height: clamp(150px,15.3vw,214px); display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 66%,rgba(var(--orb-color),.055),transparent 70%); }
.product-art::after { content: ""; z-index: 0; position: absolute; width: 67%; height: 7%; bottom: 9%; border-radius: 50%; background: rgba(var(--orb-color),.15); filter: blur(13px); }
.product-orb-image { position: absolute; z-index: 1; display: block; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten; mask-image: linear-gradient(#000 81%,transparent 100%); transition: transform .35s; }
.product-tier { position: absolute; z-index: 3; left: 11px; top: 10px; font-size: 9px; line-height: 1; color: #d9dde4; border: 1px solid #ffffff17; border-radius: 6px; padding: 6px 8px; background: #08090b8f; backdrop-filter: blur(9px); }
.product-card[data-tier="pro5"] .product-orb-image, .detail-art[data-tier="pro5"] img { filter: hue-rotate(75deg) saturate(.5); }
.product-card[data-tier="pro20"] .product-orb-image, .detail-art[data-tier="pro20"] img { filter: hue-rotate(-95deg) saturate(.6); }
.product-bottom { width: 100%; min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1px 14px 15px; }
.product-bottom h3 { width: 100%; min-height: 39px; display: grid; align-items: center; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.product-summary { width: 100%; margin: 3px 0 16px; color: #9198a4; font-size: 10px; line-height: 1.5; }
.product-price { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: auto; width: 100%; }
.product-price strong { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; color: #f2f3f5; white-space: nowrap; }
.product-price > span { color: #747c89; font-size: 9px; white-space: nowrap; }
.product-under { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; min-height: 42px; margin: 0 14px; padding: 10px 0; border-top: 1px solid #ffffff0c; color: #b1b9c7; font-size: 10px; }
.product-under svg { width: 14px; height: 14px; color: #7f8d9f; }
.product-card.is-unavailable .product-art { opacity: .64; }
.product-card.is-unavailable .product-price strong { color: #9299a4; }
.product-card.is-unavailable .product-under { justify-content: center; color: #c7b58e; }
.product-card.is-unavailable .product-under svg { display: none; }
@media (hover:hover) and (pointer:fine) {
  .product-card:hover { border-color: rgba(var(--orb-color),.42); box-shadow: 0 0 32px rgba(var(--orb-color),.065),0 15px 30px #0004; transform: translateY(-4px); }
  .product-card:hover .product-orb-image { transform: scale(1.035); }
}
.product-card:focus-visible { outline-color: var(--accent); outline-offset: 4px; }
.service-note { display: flex; align-items: center; gap: 13px; padding: 20px 0; margin-top: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.note-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #ffffff05; border: 1px solid #ffffff10; color: #b3c2d4; flex-shrink: 0; }
.note-icon svg { width: 18px; height: 18px; }
.service-note strong { font-size: 12px; font-weight: 550; color: #d9dce2; }
.service-note p { max-width: 640px; margin: 4px 0 0; color: #7e8793; font-size: 10px; line-height: 1.7; }
.service-note > .text-button { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: 10px; }
.service-note > .text-button svg { width: 14px; height: 14px; }
.catalog-footnote { margin: 13px 0 20px; color: #727a87; font-size: 10px; line-height: 1.7; }
.legal { border-top: 1px solid var(--line); padding: 19px 0 24px; margin-top: 28px; color: #646c78; font-size: 9px; line-height: 1.8; }
.legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.legal-links button { color: #979eaa; background: transparent; padding: 4px 0; font: inherit; }
.legal-links button:hover { color: var(--accent); text-decoration: underline; }
.bottom-nav { display: none; }

.icon-button, .avatar { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--secondary); flex-shrink: 0; }
.icon-button:hover, .avatar:hover { background: var(--hover); color: var(--ink); border-color: var(--line-strong); }
.icon-button svg { width: 18px; height: 18px; }
.eyebrow, .step-label { color: var(--accent); font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.page-heading { margin: 0 0 28px; }
.page-heading h1 { margin: 10px 0 10px; font-size: 34px; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--secondary); font-size: 13px; line-height: 1.8; }
.empty { padding: 40px 24px; border: 1px dashed #394959; border-radius: 20px; background: var(--surface); text-align: center; }
.empty-icon, .empty-category-icon { width: 52px; height: 52px; display: grid; place-items: center; background: #1a1e25; border: 1px solid #293c50; border-radius: 14px; color: var(--accent); margin: 0 auto 17px; }
.empty-icon svg { width: 25px; height: 25px; }
svg.empty-category-icon { padding: 13px; }
.empty h2, .empty h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.empty p { margin: 0 0 22px; color: var(--secondary); font-size: 12px; line-height: 1.8; }
.compact { padding: 35px 24px; }
.primary, .secondary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 20px; border: 1px solid #c5dfff; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; background: linear-gradient(160deg, #d4e4ff, #abcaff); box-shadow: inset 0 1px 0 #ffffff77, 0 3px 20px #a3c6ff1c; color: #0a1422; width: max-content; max-width: 100%; margin: auto; transition: background .18s, border-color .18s; }
.primary:hover:enabled { background: var(--accent-hover); }
.primary:disabled { background: #232e39; border-color: #354351; color: #9baab8; }
.primary svg, .secondary svg { width: 17px; height: 17px; }
.secondary { border-color: var(--line); background: var(--panel); color: var(--secondary); margin-top: 16px; }
.secondary:hover { background: var(--hover); border-color: var(--line-strong); color: var(--ink); }
.wide { width: 100%; }
.text-button { background: transparent; color: var(--accent); padding: 8px 0; font-size: 12px; text-align: left; }
.text-button:hover { color: var(--accent-hover); text-decoration: underline; }
.inline-message { border: 1px solid #554a36; border-radius: 14px; padding: 18px; color: #e0cba4; background: #1a1712; font-size: 13px; line-height: 1.7; }
.inline-message p { margin: 0; }
.inline-message .primary { margin-top: 16px; }
.skeleton { width: 100%; max-width: 280px; height: 354px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); animation: pulse 1.4s ease-in-out infinite; }
.faq details { border-bottom: 1px solid var(--line); padding: 21px 0; }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { position: relative; font-size: 14px; list-style: none; cursor: pointer; padding-right: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; top: -3px; right: 0; font-size: 21px; color: var(--accent); }
.faq details[open] summary::after { content: "−"; }
.faq p { font-size: 12px; line-height: 1.85; color: var(--secondary); margin: 15px 0 0; }
.info-card { display: flex; gap: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 22px; margin-top: 26px; }
.info-card > svg { color: var(--accent); }
.info-card h3 { font-size: 14px; margin: 0 0 6px; }
.info-card p { font-size: 12px; margin: 0; line-height: 1.8; color: var(--secondary); }
.info-card a, .faq a, .order-help a { color: var(--accent); }
.profile-card { padding: 28px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); text-align: center; }
.profile-avatar { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 16px; border: 1px solid #3d4653; background: #1a1e25; border-radius: 50%; font-size: 25px; color: var(--accent); }
.profile-avatar svg { width: 27px; height: 27px; }
.profile-card h2 { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -.025em; }
.profile-card p { margin: 6px 0 18px; color: var(--secondary); font-size: 12px; }
.profile-label { font-size: 9px; letter-spacing: .1em; color: var(--muted); }
.profile-row { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding: 19px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.profile-row strong { color: var(--secondary); font-weight: 500; text-align: right; }
.profile-row strong.muted { color: var(--muted); }
.profile-hint { color: var(--secondary); font-size: 12px; line-height: 1.8; margin: 20px 0; }
.telegram-entry { justify-content: space-between; }
dialog { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 24px; padding: 26px; width: min(520px, calc(100% - 32px - var(--safe-left) - var(--safe-right))); max-height: calc(var(--app-viewport-height) - 32px - var(--safe-top) - var(--safe-bottom)); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--surface); box-shadow: 0 30px 100px #0009; }
dialog::backdrop { background: #030609c9; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dialog-top .icon-button { width: 44px; height: 44px; }
.product-dialog { width: min(880px, calc(100% - 40px - var(--safe-left) - var(--safe-right))); padding: 24px; }
.product-dialog .dialog-top { margin-bottom: 20px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 30px; align-items: start; }
.detail-art { position: sticky; top: 0; min-width: 0; min-height: 340px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(ellipse at 50% 57%, #b9d5ff0b, transparent 65%), linear-gradient(#14171b, #0c0e11); }
.detail-art img { width: 100%; height: auto; max-width: 330px; }
.detail-body { min-width: 0; }
dialog h2 { margin: 0 0 11px; font-size: 29px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.detail-subtitle { color: var(--secondary); font-size: 12px; line-height: 1.8; margin: 0 0 22px; }
.plan-choice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; background: #1d232d; border: 1px solid #616f82; border-radius: 12px; }
.plan-choice strong { display: block; font-size: 14px; }
.plan-choice div > span { display: block; margin-top: 4px; color: var(--secondary); font-size: 11px; }
.selected-dot { width: 18px; height: 18px; border: 5px solid var(--accent); border-radius: 50%; background: #11161d; flex-shrink: 0; }
.detail-features { padding: 9px 0; }
.detail-features p { display: flex; gap: 10px; align-items: center; color: var(--secondary); font-size: 11px; margin: 14px 0; }
.detail-features span { width: 20px; text-align: center; color: var(--accent); font-size: 18px; flex-shrink: 0; }
.availability-note { display: flex; gap: 10px; padding: 13px 14px; background: #15181c; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 17px; }
.availability-note > span { width: 6px; height: 6px; background: var(--warning); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.availability-note p { margin: 0; color: var(--secondary); font-size: 11px; line-height: 1.8; }
.detail-footer { color: var(--muted); font-size: 10px; line-height: 1.8; text-align: center; margin: 13px 0 0; }
.detail-price { font-size: 13px; color: var(--secondary); line-height: 1.7; margin: 0 0 16px; }
.purchase-consent { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 17px; }
.purchase-consent .consent-label { margin: 0 0 5px; }
.purchase-consent .text-button { font-size: 11px; margin-left: 28px; padding: 5px 0; }
.catalog-dialog { width: min(340px, calc(100% - 32px - var(--safe-left) - var(--safe-right))); margin-left: calc(16px + var(--safe-left)); margin-top: calc(16px + var(--safe-top)); padding: 18px; border-radius: 20px; }
.catalog-dialog .dialog-top { margin-bottom: 20px; }
.catalog-dialog h2 { font-size: 22px; margin: 0; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(24px + var(--safe-bottom) + var(--app-bottom-offset)); transform: translateX(-50%); padding: 13px 18px; width: max-content; max-width: calc(100% - 32px - var(--safe-left) - var(--safe-right)); border-radius: 12px; color: #0a1422; background: #d0e3ff; box-shadow: 0 10px 40px #0008; text-align: center; font-size: 12px; }
.noscript { padding: 20px; }
.order-card { width: 100%; display: block; text-align: left; margin: 12px 0; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.order-card:hover { border-color: #6f89a5; }
.order-card h3 { font-size: 16px; margin: 0 0 9px; }
.order-card p { font-size: 11px; color: var(--secondary); margin: 5px 0; overflow-wrap: anywhere; }
.order-card strong { font-size: 12px; color: var(--accent); }
.order-card-link { display: block; margin-top: 18px; color: var(--accent); font-size: 11px; }
.back-link { display: block; background: transparent; padding: 0 0 20px; font-size: 12px; color: var(--accent); }
.order-heading p { font-size: 11px; overflow-wrap: anywhere; }
.order-summary { border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 22px; }
.order-product { display: flex; align-items: center; gap: 13px; padding-bottom: 20px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.mini-product { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #3d4653; border-radius: 12px; background: #1a1e25; color: var(--accent); font-size: 32px; flex-shrink: 0; }
.order-product h2 { font-size: 16px; line-height: 1.4; margin: 0 0 4px; }
.order-product p { font-size: 11px; color: var(--secondary); margin: 0; }
.order-summary-row { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; margin-top: 12px; }
.order-summary-row strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.order-summary-row > span:last-child { color: var(--secondary); }
.order-status { display: flex; gap: 12px; padding: 18px; border: 1px solid #353c47; border-radius: 16px; background: #171a20; margin: 17px 0; }
.status-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.status-dot[data-state="fulfilled"] { background: var(--success); }
.status-dot[data-state="needs_review"], .status-dot[data-state="fulfillment_failed"], .status-dot[data-state="action_required"], .status-dot[data-state="payment_disputed"] { background: var(--warning); }
.status-dot[data-state="cancelled"], .status-dot[data-state="refunded"] { background: var(--muted); }
.order-status h2 { font-size: 14px; margin: 0 0 7px; font-weight: 600; }
.order-status p { color: var(--secondary); font-size: 12px; line-height: 1.8; margin: 0; }
.activation-form, .action-panel { margin-top: 22px; padding: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 18px; }
.activation-form h2, .action-panel h2 { font-size: 23px; margin: 10px 0 12px; font-weight: 600; letter-spacing: -.025em; }
.form-intro, .action-panel > p { font-size: 12px; color: var(--secondary); line-height: 1.8; margin: 0 0 16px; }
.session-link { justify-content: space-between; text-align: left; font-size: 12px; margin: 17px 0; }
.session-link > span { font-size: 18px; }
.session-warning { display: flex; gap: 10px; align-items: flex-start; border-left: 3px solid #b79a62; border-radius: 0 10px 10px 0; background: #211d16; padding: 14px; margin: 18px 0; }
.session-warning svg { width: 18px; height: 18px; margin-top: 2px; color: var(--warning); }
.session-warning p { font-size: 11px; color: #d6c4a4; line-height: 1.8; margin: 0; }
.session-warning strong { display: block; font-weight: 600; color: var(--warning); margin-bottom: 3px; }
.field-label { display: block; margin: 20px 0 10px; font-size: 12px; color: var(--secondary); }
textarea { resize: vertical; }
#session-info { display: block; width: 100%; min-height: 148px; max-height: 330px; border: 1px solid var(--line-strong); border-radius: 12px; background: #0b0d10; padding: 14px; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; word-break: break-word; }
#session-info::placeholder { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--muted); opacity: 1; }
.field-hint { color: var(--muted); font-size: 11px; line-height: 1.8; margin: 9px 0 0; }
.consent-label { display: flex; gap: 10px; align-items: flex-start; margin: 19px 0; cursor: pointer; }
.consent-label input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.consent-label span { color: var(--secondary); font-size: 11px; line-height: 1.8; }
.form-error { color: var(--error); font-size: 12px; line-height: 1.8; border-left: 2px solid #c97884; padding-left: 11px; margin: 16px 0; }
.order-help { padding-top: 4px; margin-top: 19px; }
.order-help p { color: var(--muted); font-size: 11px; line-height: 1.8; margin: 0 0 5px; }
.order-help .text-button { font-size: 11px; }
.legal-copy { color: var(--secondary); font-size: 12px; line-height: 1.85; }
.legal-copy p { margin: 17px 0; }
.legal-copy p:first-child { color: var(--ink); }
#legal-dialog h2 { font-size: 25px; line-height: 1.3; margin: 23px 0 18px; }
#customer-action-panel .secondary { margin-top: 12px; }
.order-summary, .order-status, .activation-form, .action-panel { overflow-wrap: anywhere; }

/* Product media always uses the complete supplied artwork. */
.detail-art { min-height: 0; aspect-ratio: 1; overflow: hidden; border-color: #ffffff0e; background: #0d1117; }
.detail-art img { width: 100%; height: 100%; max-width: none; object-fit: contain; mix-blend-mode: lighten; }
.plan-choice { background: #ffffff06; border-color: #ffffff29; }
.selected-dot { border-width: 5px; background: #0b0d10; }
.primary { box-shadow: inset 0 1px 0 #ffffff77, 0 3px 20px #a3c6ff1c; }
.secondary { background: #ffffff04; border-color: #ffffff26; }
@keyframes enter { from {opacity:0;transform:translateY(3px)} to {opacity:1;transform:none} }
@keyframes pulse {50% {opacity:.5}}
@media (max-width:1200px) {
  .app-shell { padding-left:calc(28px + var(--safe-left));padding-right:calc(28px + var(--safe-right)); }
  .header {grid-template-columns:168px minmax(0,1fr) auto;gap:24px;}
  .workspace {grid-template-columns:168px minmax(0,1fr);column-gap:24px;}
  .header-actions .nav-item {padding:10px;}
  .header-actions .nav-item span {display:none;}
  .catalog-sidebar {padding-right:11px;}
  .category-link {padding-inline:9px;gap:8px;}
  .hero-copy .hero-title {font-size:39px;}
  .hero-copy>p {font-size:12px;}
  .hero-actions {gap:8px;}
  .hero-actions .primary,.hero-actions .secondary {font-size:10px;padding:11px 12px;}
  .store-hero {min-height:365px;}
  .product-list {gap:11px;}
  .product-bottom {padding-inline:10px;}
  .product-bottom h3 {font-size:14px;}
  .product-price strong {font-size:20px;}
  .product-price>span {font-size:8px;}
  .product-summary {font-size:9px;}
}
@media (min-width:901px) and (max-width:1040px) {
  .hero-copy .hero-title {font-size:34px;}
  .hero-eyebrow {font-size:7px;letter-spacing:.08em;}
  .hero-points {font-size:9px;gap:12px;}
  .hero-actions .secondary {display:none;}
  .product-list {grid-template-columns:repeat(2,minmax(0,1fr));}
  .product-art {height:210px;aspect-ratio:auto;}
  .product-orb-image {max-height:245px;}
  .product-bottom h3 {min-height:30px;font-size:16px;}
  .product-summary {font-size:11px;}
}
@media (max-width:900px) {
  :root {--header-height:119px;}
  .app-shell {padding:var(--safe-top) calc(24px + var(--safe-right)) calc(85px + var(--safe-bottom)) calc(24px + var(--safe-left));}
  .header {min-height:var(--header-height);padding:14px 0;display:flex;flex-wrap:wrap;gap:12px;}
  .wordmark {font-size:23px;}
  .wordmark img {width:28px;height:28px;}
  .catalog-toolbar {width:100%;max-width:none;order:2;}
  .catalog-toggle {display:grid;}
  .header-actions {display:none;}
  .workspace {display:block;padding-top:24px;}
  .catalog-sidebar {display:none;}
  .workspace-content {min-height:calc(var(--app-viewport-height) - var(--header-height) - 110px - var(--safe-top) - var(--safe-bottom));}
  .store-hero {min-height:350px;margin-top:0;}
  .hero-copy .hero-title {font-size:38px;}
  .hero-copy>p {font-size:12px;}
  .hero-scene {width:108%;}
  .hero-eyebrow {font-size:7px;}
  .hero-actions .primary,.hero-actions .secondary {font-size:11px;padding:11px 12px;}
  .hero-points {font-size:9px;gap:12px;}
  .product-list {grid-template-columns:repeat(4,minmax(0,1fr));}
  .product-summary {font-size:9px;}
  .product-under {font-size:9px;margin-inline:10px;}
  .product-bottom h3 {font-size:14px;}
  .bottom-nav {position:fixed;z-index:20;bottom:var(--app-bottom-offset);left:0;right:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid #ffffff13;padding:7px calc(14px + var(--safe-right)) calc(7px + var(--safe-bottom)) calc(14px + var(--safe-left));background:#101115f2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
  .bottom-nav .nav-item {flex-direction:column;gap:4px;min-height:47px;padding:6px 4px;border-radius:11px;font-size:10px;}
  .bottom-nav .nav-item.active {background:#ffffff07;color:#d4e0f4;}
  html[data-keyboard-open="true"] .bottom-nav {display:none;}
  .toast {bottom:calc(89px + var(--safe-bottom) + var(--app-bottom-offset));}
}
@media (max-width:700px) {
  .store-hero {grid-template-columns:minmax(0,1fr) minmax(0,.95fr);min-height:300px;}
  .hero-copy .hero-title {font-size:31px;}
  .hero-copy>p {font-size:11px;}
  .hero-actions .primary {font-size:10px;padding-inline:12px;}
  .hero-actions .secondary {display:none;}
  .hero-eyebrow {font-size:6px;padding:5px 7px;}
  .hero-points {font-size:8px;gap:10px;}
  .product-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .product-art {height:auto;aspect-ratio:1.15;}
  .product-orb-image {max-height:250px;}
  .product-bottom h3 {font-size:16px;min-height:30px;}
  .product-summary {font-size:11px;}
  .product-under {margin-inline:14px;font-size:11px;}
  .product-price strong {font-size:22px;}
  .product-price>span {font-size:10px;}
  .detail-layout {display:flex;flex-direction:column;gap:22px;}
  .detail-art {position:relative;top:auto;width:100%;height:240px;aspect-ratio:auto;}
  .detail-art img {width:240px;height:240px;}
  .detail-body {width:100%;}
  .service-note>.text-button {display:none;}
}
@media (max-width:600px) {
  .app-shell {padding-left:calc(18px + var(--safe-left));padding-right:calc(18px + var(--safe-right));}
  .header {padding-block:14px;}
  .workspace {padding-top:23px;}
  .store-hero {display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:0;margin:0 0 28px;padding:0 0 19px;}
  .hero-copy {padding-bottom:0;}
  .hero-eyebrow {font-size:7px;padding:4px 7px;margin-bottom:15px;letter-spacing:.1em;}
  .hero-copy .hero-title {font-size:clamp(31px,9.6vw,43px);line-height:1.09;margin-bottom:14px;}
  .hero-copy>p {font-size:12px;line-height:1.7;margin-bottom:19px;max-width:340px;}
  .hero-actions {flex-wrap:nowrap;gap:9px;}
  .hero-actions .primary,.hero-actions .secondary {display:flex;min-height:46px;flex:1;font-size:11px;padding:11px 12px;}
  .hero-actions .primary {flex:1.12;}
  .hero-actions svg {width:16px;height:16px;}
  .hero-points {display:none;}
  .hero-points svg {width:13px;height:13px;}
  .hero-scene {width:100%;max-width:430px;aspect-ratio:1.60;margin:13px auto 0;}
  .section-top {gap:10px;margin-bottom:17px;align-items:center;}
  .section-top h2 {font-size:23px;}
  .section-kicker {font-size:7px;letter-spacing:.13em;margin-bottom:7px;}
  .catalog-status {flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;font-size:9px;}
  .preview-pill {font-size:6px;padding:4px 5px;gap:4px;}
  .product-list {gap:12px;}
  .product-art {height:auto;aspect-ratio:1.03;}
  .product-tier {top:9px;left:9px;font-size:8px;padding:5px 6px;}
  .product-bottom {padding:0 10px 13px;}
  .product-bottom h3 {font-size:14px;min-height:36px;line-height:1.25;}
  .product-summary {font-size:9px;margin:4px 0 13px;}
  .product-price {flex-direction:column;align-items:center;gap:2px;}
  .product-price strong {font-size:21px;}
  .product-price>span {font-size:8px;}
  .product-under {min-height:38px;font-size:9px;margin-inline:11px;}
  .product-under svg {width:12px;height:12px;}
  .service-note {padding:18px 0;gap:11px;margin-top:22px;}
  .service-note strong {font-size:11px;}
  .service-note p {font-size:10px;}
  .note-icon {width:32px;height:32px;}
  .legal {margin-top:20px;padding-bottom:8px;font-size:9px;}
  .page-heading h1 {font-size:29px;}
  .page-heading p {font-size:12px;}
  .search-wrap input {font-size:16px;padding:10px 0;}
  .search-wrap input::placeholder {font-size:12px;}
  dialog,.product-dialog {padding:20px;border-radius:20px;}
  .product-dialog .dialog-top {margin-bottom:18px;}
  .detail-art {height:200px;}
  .detail-art img {width:200px;height:200px;}
  dialog h2 {font-size:28px;}
  .activation-form,.action-panel,.order-summary {padding:18px;}
  .profile-row {gap:14px;font-size:11px;}
  .empty {padding:32px 18px;}
  .empty h2,.empty h3 {font-size:19px;}
  .info-card {padding:18px;}
  #session-info {font-size:16px;}
}
@media (max-width:370px) {
  .app-shell {padding-left:calc(14px + var(--safe-left));padding-right:calc(14px + var(--safe-right));}
  .catalog-toolbar {gap:7px;}
  .catalog-toggle,.fullscreen-button {width:43px;}
  .search-wrap {padding-inline:10px;gap:8px;}
  .search-wrap input::placeholder {font-size:11px;}
  .hero-eyebrow {font-size:6px;}
  .hero-copy>p {font-size:11px;}
  .hero-actions .primary,.hero-actions .secondary {font-size:10px;padding-inline:9px;gap:6px;}
  .hero-points {font-size:8px;gap:16px;}
  .section-top h2 {font-size:21px;}
  .product-list {gap:10px;}
  .product-bottom h3 {font-size:13px;}
  .product-summary {font-size:8px;}
  .product-price strong {font-size:19px;}
  .product-under {font-size:8px;margin-inline:10px;}
  .detail-art {height:170px;}
  .detail-art img {width:170px;height:170px;}
}
@media (max-height:600px) {
  dialog {max-height:calc(var(--app-viewport-height) - 24px - var(--safe-top) - var(--safe-bottom));margin-block:auto;}
  .product-dialog .dialog-top {margin-bottom:14px;}
  .detail-art {position:relative;min-height:0;height:200px;aspect-ratio:auto;}
  .detail-art img {max-height:200px;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .product-card:hover {transform:none;}
}

.detail-price {display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-bottom:18px;}
.detail-price strong {font-size:28px;line-height:1.2;color:var(--ink);letter-spacing:-.04em;font-weight:600;}
.detail-price span {font-size:10px;color:var(--muted);}

/* Keep the close control reachable while long product conditions scroll. */
.dialog-top {position:sticky;top:-26px;z-index:10;background:var(--surface);padding-block:4px;}
.product-dialog .dialog-top {top:-24px;}
@media (max-width:600px) {.dialog-top,.product-dialog .dialog-top {top:-20px;}}