/* G2U Ocean Blue — one palette shared by storefront, checkout and admin. */
:root {
  /* Ocean Blue design tokens */
  --bg: #080f1d;
  --bg2: #0c1628;
  --card: #111c30;
  --card2: #17243a;
  --line: #253754;
  --line2: #304665;
  --text: #f4f8ff;
  --text2: #cad8ed;
  --muted: #94a9c7;
  --accent: #2563eb;
  --accent-h: #3b82f6;
  --on-accent: #ffffff; /* white text on royal blue buttons */
  --accent2: #60a5fa;
  --violet: #1d4ed8;
  --accent-soft: rgba(37,99,235, .15);
  --violet-soft: rgba(59,130,246, .13);
  --green: #22c55e; --amber: #f59e0b; --red: #ef4444; --blue: #3b82f6;
  --r: 10px;
  --r-sm: 8px;
  --cut: 10px;            /* срезанные углы у кнопок и плиток */
  --shadow: 0 16px 40px rgba(0, 0, 0, .5);
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Unbounded', 'Onest', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
.order-delivery { display: grid; gap: 14px; min-width: 0; margin-bottom: 20px; }
.order-delivery[hidden] { display: none; }
.order-delivery h3, .order-delivery p { margin: 0; }
.order-delivery strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: #93c5fd; }
.order-delivery p { color: var(--muted); font-size: 13px; }
.order-delivery progress { display: block; appearance: none; width: 100%; height: 8px; border: 0; border-radius: 8px; overflow: hidden; background: #253754; accent-color: #3b82f6; }
.order-delivery progress::-webkit-progress-bar { background: #253754; }
.order-delivery progress::-webkit-progress-value { background: #3b82f6; border-radius: 8px; }
.order-delivery progress::-moz-progress-bar { background: #3b82f6; border-radius: 8px; }
.order-delivery.is-overdue strong { color: #fbbf24; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
p a, .prose a, .flash a, .empty a, label a, .table a { color: var(--accent2); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(26px, 4vw, 38px); }
h2 { font-size: 26px; }
h3 { font-size: 17px; font-weight: 700; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.main { padding-top: 28px; padding-bottom: 64px; min-height: 60vh; }
.is-home .main { padding: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.center-row { justify-content: center; }
section { margin: 40px 0; }
.ico { width: 20px; height: 20px; flex: none; }
.ico.sm { width: 16px; height: 16px; }
.ibox { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--card2); color: var(--accent2); flex: none; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border: 0; border-radius: 999px;
  padding: 10px 22px; font: inherit; font-weight: 700; font-size: 14px; color: #fff; background: var(--accent);
  transition: background .15s, transform .1s, border-color .15s; white-space: nowrap;
}
.btn:hover { background: var(--accent-h); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 7px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-ghost, .btn-pill-ghost { background: var(--card2); border: 1px solid var(--line2); color: var(--text); }
.btn-ghost:hover, .btn-pill-ghost:hover { background: var(--line); border-color: var(--line2); }
.message-read { display: inline-block; margin-left: 6px; color: #8d9bb0; font-size: 12px; line-height: 1; letter-spacing: -4px; padding-right: 4px; white-space: nowrap; vertical-align: baseline; }
.message-read.is-read { color: #22c55e; }
.btn-danger { background: transparent; border: 1px solid var(--red); color: var(--red); }
.btn-danger:hover { background: rgba(239,68,68,.12); color: var(--red); }
.x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; padding: 6px; }
.x:hover { color: var(--red); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.icon-btn:hover { border-color: var(--line2); }
.icon-btn .badge { position: absolute; top: -6px; right: -6px; }
.badge { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; line-height: 20px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; text-align: center; font-weight: 800; }

/* ---------- Шапка ---------- */
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(8,18,34,.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.05); }
.topbar-in { display: flex; align-items: center; gap: 18px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: .01em; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 18px; box-shadow: 0 6px 18px rgba(29,78,216,.45); }
.menu { display: flex; align-items: center; gap: 4px; }
.menu-link, .dd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; color: var(--text2); font: inherit; font-weight: 600; font-size: 14px; background: none; border: 0; cursor: pointer; }
.menu-link:hover, .dd-btn:hover, .dd:focus-within .dd-btn { color: #fff; background: var(--card2); }
.nav-admin { color: var(--accent2); }
.dd { position: relative; }
.dd-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; display: none; min-width: 260px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.dd:hover .dd-panel, .dd:focus-within .dd-panel, .dd.open .dd-panel { display: grid; }
.dd::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.dd-games { grid-template-columns: 1fr 1fr; gap: 2px; min-width: 420px; }
.dd-game, .dd-cat, .dd-all { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.dd-game:hover, .dd-cat:hover, .dd-all:hover { background: var(--card2); }
.dd-all { grid-column: 1 / -1; color: var(--accent2); justify-content: center; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.dd-cats { min-width: 320px; }
.dd-cat .ibox { width: 38px; height: 38px; }
.dd-cat b { display: block; }
.dd-cat small { color: var(--muted); font-weight: 500; }
.search { position: relative; flex: 1; max-width: 380px; }
.search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { padding-left: 42px; border-radius: 999px; background: var(--bg2); }
.spacer { flex: 1; }
.top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); color: var(--muted); }
.lang-switch a { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--muted); }
.lang-switch a.active { background: var(--accent); color: #fff; }
.burger { display: none; }

/* ---------- Формы ---------- */
input, select, textarea {
  font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 14px; width: 100%; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,78,216,.25); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); }
input[type=color] { padding: 4px; height: 44px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.form { display: grid; gap: 16px; }
.grid2 { grid-template-columns: 1fr 1fr; }
.span2 { grid-column: 1 / -1; }
.row select { width: auto; }
.checks { display: grid; gap: 10px; align-content: end; }
.admin-product-settings { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line2); border-radius: var(--r); }
.admin-product-settings > h2 { margin: 0 0 6px; font-family: var(--font); font-size: 18px; }
.admin-product-settings > .form { margin-top: 16px; }
.admin-product-settings > .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-product-settings label { min-width: 0; }
@media (max-width: 680px) { .admin-product-settings > .grid2 { grid-template-columns: minmax(0, 1fr); } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.card + .card { margin-top: 16px; }
.narrow { max-width: 440px; margin: 24px auto; }
.flash { padding: 12px 16px; border-radius: var(--r-sm); margin: 16px 0; border: 1px solid; }
.flash-success { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); }
.flash-error { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); }
.flash-info { background: rgba(29,78,216,.1); border-color: rgba(29,78,216,.35); }
.copy-link { margin-top: 8px; font-size: 13px; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line2); border-radius: var(--r); }
.pill { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: #93c5fd; font-size: 13px; font-weight: 700; margin-bottom: 16px; }
.crumbs { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.crumbs a:hover { color: var(--text); }
.grad { background: linear-gradient(120deg, #a3dfff 0%, #6cb9ff 50%, #0185ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Плитки и обложки игр ---------- */
.gtile { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; font-weight: 800; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.gtile.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.gtile.lg { width: 56px; height: 56px; border-radius: 14px; font-size: 16px; }
.gtile.xl { width: 84px; height: 84px; border-radius: 20px; font-size: 22px; }
.cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-ph { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; color: #fff;
  background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--c1) 85%, #fff 0%), transparent 60%), linear-gradient(160deg, var(--c1), var(--c2) 75%, #081322); }
.cover-ph::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.2px); background-size: 14px 14px; mask-image: linear-gradient(180deg, #000, transparent 70%); }
.cover-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); }
.cover-short { position: absolute; top: 12%; left: 0; right: 0; text-align: center; font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -.02em; opacity: .95; text-shadow: 0 4px 18px rgba(0,0,0,.35); z-index: 1; }
.cover-name { position: relative; z-index: 1; font-weight: 800; font-size: 15px; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }

/* ---------- Главная ---------- */
.h-hero { position: relative; margin: 0; padding: 92px 0 72px; overflow: hidden; isolation: isolate; }
.h-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 0%, rgba(29,78,216,.25), transparent 70%), linear-gradient(180deg, rgba(8,18,34,.55) 0%, rgba(8,18,34,.85) 55%, var(--bg) 100%); }
.h-hero-bg { position: absolute; inset: -40px -40px 0; z-index: -2; display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; transform: rotate(-6deg) scale(1.15); opacity: .35; filter: blur(1.5px) saturate(1.1); }
.h-bgtile { aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; }
.h-bgtile:nth-child(even) { transform: translateY(60px); }
.h-hero-in { text-align: center; }
.h-title { font-size: clamp(34px, 6vw, 64px); line-height: 1.05; letter-spacing: -.03em; margin-bottom: 18px; }
.h-sub { color: var(--text2); font-size: 16px; margin: 0 0 32px; }
.h-sub i { font-style: normal; color: var(--accent2); padding: 0 6px; }
.h-search { position: relative; display: flex; align-items: center; max-width: 620px; margin: 0 auto 32px; padding: 6px; background: rgba(15,32,55,.85); border: 1px solid var(--line2); border-radius: 999px; box-shadow: var(--shadow); }
.h-search .ico { margin: 0 4px 0 14px; color: var(--muted); }
.h-search input { border: 0; background: transparent; box-shadow: none; padding: 10px 8px; font-size: 15px; }
.h-search input:focus { box-shadow: none; }
.h-cats { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 26px; }
.h-cat { display: grid; justify-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text2); }
.h-cat .ibox { width: 52px; height: 52px; border-radius: 14px; background: rgba(26,31,46,.9); border: 1px solid var(--line); transition: transform .15s, border-color .15s, background .15s; }
.h-cat:hover .ibox { transform: translateY(-3px); border-color: var(--accent); background: var(--accent-soft); }
.h-cat .ico { width: 22px; height: 22px; }

.h-sec { margin: 0 auto; padding-top: 56px; padding-bottom: 56px; }
.h-h2 { text-align: center; font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.h-h2.left { text-align: left; }
.h-lead { text-align: center; color: var(--text2); max-width: 620px; margin: 0 auto 36px; }
.h-lead.small { margin-top: -4px; font-size: 14px; color: var(--muted); }

.h-games { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 16px; margin-top: 36px; }
.h-game.is-more { display: none; }
.h-games.show-all .h-game.is-more { display: block; }
.h-game-cover { display: block; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: var(--card); transition: transform .2s, box-shadow .2s; }
.h-game-cover:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
.h-game-name { display: block; margin: 10px 0 8px; font-weight: 700; }
.h-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.h-tags a { padding: 5px 11px; border-radius: 6px; background: rgba(156,163,175,.1); color: #e1ebfa; font-size: 13px; font-weight: 600; transition: background .15s; }
.h-tags a:hover { background: var(--accent); color: #fff; }
.h-games + .center { margin-top: 28px; }

.h-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 16px; overflow-x: auto; padding: 6px 2px 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #3B82F6 #13253A; }
.h-rail:hover { scrollbar-color: #60A5FA #13253A; }
.h-rail::-webkit-scrollbar { height: 10px; }
.h-rail::-webkit-scrollbar-track { background: #13253A; border-radius: 999px; box-shadow: inset 0 0 0 1px #2C445E; }
.h-rail::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #2563EB, #60A5FA); border: 2px solid #13253A; border-radius: 999px; }
.h-rail::-webkit-scrollbar-thumb:hover { background: #60A5FA; }
.h-rail::-webkit-scrollbar-thumb:active { background: #93C5FD; }
.h-rail::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports selector(::-webkit-scrollbar) {
  .h-rail, .h-rail:hover { scrollbar-width: auto; scrollbar-color: auto; }
}
.h-rail > * { scroll-snap-align: start; }
.h-rail + .center { margin-top: 18px; }

.h-how { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; }
.h-steps { display: grid; gap: 12px; }
.h-step { position: relative; overflow: hidden; display: grid; gap: 6px; text-align: left; padding: 20px 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; transition: background .2s, border-color .2s; }
.h-step:hover { border-color: var(--line2); }
.h-step-head { display: flex; align-items: center; gap: 14px; font-size: 18px; }
.h-step-head .ico { color: var(--accent2); width: 22px; height: 22px; }
.h-step-text { display: none; padding-left: 36px; color: rgba(255,255,255,.85); font-size: 14px; }
.h-step-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255,255,255,.55); }
.h-step.active { background: var(--accent); border-color: var(--accent); }
.h-step.active .ico { color: #fff; }
.h-step.active .h-step-text { display: block; }
.h-step.active .h-step-bar { animation: stepbar 5s linear forwards; }
.h-steps.paused .h-step-bar { animation-play-state: paused; }
@keyframes stepbar { to { width: 100%; } }

.h-mock { position: relative; min-height: 520px; }
.h-mock.h-checkout-demo { align-self: center; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; overflow: hidden; border: 1px solid #304665; border-radius: 16px; background: #0d1a2c; box-shadow: 0 24px 70px #0004; }
.demo-browser { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid #2c445e; background: #13253a; }
.demo-browser b { letter-spacing: .04em; }
.demo-browser b span { color: #60a5fa; }
.demo-browser > span { color: #94a9c7; font-size: 12px; }
.demo-browser > .ico { justify-self: end; color: #4ade80; }
.demo-browser-brand { justify-self: start; min-width: 0; }
.demo-browser-brand .logo-wordmark { display: block; width: 72px; height: 25px; }
.demo-browser-address { justify-self: center; white-space: nowrap; }
.demo-screen { display: flex; flex-direction: column; gap: 20px; min-height: 420px; padding: 28px; }
.demo-screen[hidden] { display: none; }
.demo-panels { display: grid; min-width: 0; }
.demo-panels > .demo-screen { grid-area: 1 / 1; min-width: 0; }
/* Decorative panels share a grid cell, reserving space for the tallest step. */
.demo-panels > .demo-screen[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.demo-playback { justify-self: start; min-height: 36px; padding: 4px 0; border: 0; background: transparent; color: #94a9c7; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.demo-playback:hover { color: #dbeafe; }
.demo-playback:focus-visible { outline: 2px solid #60a5fa; outline-offset: 4px; }
.demo-playback[hidden] { display: none; }
.h-checkout-demo .demo-screen:not([hidden]) > * { animation: demo-reveal .48s cubic-bezier(.2,.7,.2,1) both; }
.h-checkout-demo .demo-screen:not([hidden]) > :nth-child(2) { animation-delay: .06s; }
.h-checkout-demo .demo-screen:not([hidden]) > :nth-child(3) { animation-delay: .14s; }
.h-checkout-demo .demo-screen:not([hidden]) > :nth-child(4) { animation-delay: .24s; }
.h-checkout-demo .demo-screen:not([hidden]) > :nth-child(5) { animation-delay: .34s; }
.h-checkout-demo .demo-screen:not([hidden]) > :nth-child(6) { animation-delay: .44s; }
.demo-type { display: inline-block; max-width: 100%; vertical-align: top; overflow-wrap: anywhere; }
.demo-screen:not([hidden]) .demo-type { animation: demo-type 1s steps(18,end) var(--type-delay,.5s) both; }
.demo-screen:not([hidden]) .demo-input:has(.demo-type) { animation: demo-field-focus 3.5s var(--type-delay,.5s) both; }
.demo-screen:not([hidden]) .demo-product { animation: demo-product-select 1.8s .15s both; }
.demo-screen:not([hidden]) .demo-quantity b { animation: demo-quantity-pop .5s .8s both; }
.demo-screen:not([hidden]) .demo-terms .ico { animation: demo-check-in .5s 2.5s both; }
.demo-screen:not([hidden]) .demo-action { position: relative; overflow: hidden; }
.demo-screen:not([hidden]) .demo-action::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 25%,#ffffff25 50%,transparent 75%); animation: demo-button-sheen 1s 3.2s both; pointer-events: none; }
.demo-order-progress { height: 5px; border-radius: 8px; background: #253754; overflow: hidden; }
.demo-order-progress > span { display: block; height: 100%; width: 75%; border-radius: inherit; background: linear-gradient(90deg,#2563eb,#60a5fa); transform-origin: left; }
.demo-screen:not([hidden]) .demo-order-progress > span { animation: demo-order-fill 3.6s .3s both; }
.demo-typing { display: flex; align-items: center; gap: 5px; height: 24px; overflow: hidden; }
.demo-typing i { width: 5px; height: 5px; border-radius: 50%; background: #94a9c7; }
.demo-screen:not([hidden]) .demo-typing { animation: demo-typing-hide .25s 1.3s both; }
.demo-screen:not([hidden]) .demo-typing i { animation: demo-typing-dot .7s 2; }
.demo-screen:not([hidden]) .demo-typing i:nth-child(2) { animation-delay: .1s; }
.demo-screen:not([hidden]) .demo-typing i:nth-child(3) { animation-delay: .2s; }
.demo-screen:not([hidden]) .demo-chat .bub { animation: demo-reveal .4s 1.5s both; }
.demo-screen:not([hidden]) .demo-chat .bub.me { animation-delay: 2.6s; }
.demo-screen:not([hidden]) .demo-success-icon { position: relative; animation: demo-success-pop .7s cubic-bezier(.2,.9,.25,1.25) .1s both; }
.demo-screen:not([hidden]) .demo-success-icon path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: demo-check-draw .65s .45s forwards; }
.demo-screen:not([hidden]) .demo-success-icon::after { content: ''; position: absolute; inset: -28px; border-radius: 50%; border: 1px solid #4ade8050; animation: demo-success-ring 1s .3s both; }
.h-checkout-demo.demo-paused *, .h-checkout-demo.demo-paused *::after { animation-play-state: paused !important; }
@keyframes demo-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes demo-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes demo-field-focus { 0%,100% { border-color: #2c445e; box-shadow: none; } 20%,75% { border-color: #3b82f6; box-shadow: 0 0 0 3px #2563eb18; } }
@keyframes demo-product-select { 0% { border-color: #2c445e; box-shadow: none; } 45%,100% { border-color: #3b82f6; box-shadow: 0 0 0 3px #2563eb12; } }
@keyframes demo-quantity-pop { 45% { transform: scale(1.18); color: #93c5fd; } }
@keyframes demo-check-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes demo-button-sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes demo-order-fill { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
@keyframes demo-typing-hide { to { height: 0; opacity: 0; } }
@keyframes demo-typing-dot { 50% { opacity: .35; transform: translateY(-3px); } }
@keyframes demo-success-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes demo-check-draw { to { stroke-dashoffset: 0; } }
@keyframes demo-success-ring { from { opacity: .8; transform: scale(.55); } to { opacity: 0; transform: scale(1.15); } }
@media(prefers-reduced-motion:reduce) {
  .h-checkout-demo *, .h-checkout-demo *::after, .h-steps .h-step-bar { animation: none !important; }
  .h-checkout-demo .demo-success-icon path { stroke-dashoffset: 0; }
  .h-checkout-demo .demo-typing { display: none; }
}
.demo-screen h3, .demo-screen p { margin: 0; }
.demo-eyebrow { color: #94a9c7; font-size: 11px; letter-spacing: .12em; }
.demo-product { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #2c445e; border-radius: 12px; background: #13253a; min-width: 0; }
.demo-product > div { min-width: 0; overflow-wrap: anywhere; }
.demo-product small { display: block; color: #a2b4cd; }
.demo-field { display: grid; gap: 7px; font-size: 14px; }
.demo-input { padding: 11px 14px; min-height: 46px; border: 1px solid #2c445e; border-radius: 8px; background: #13253a; color: #cad8ed; overflow-wrap: anywhere; }
.demo-quantity { display: flex; justify-content: space-between; }
.demo-action { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: auto; padding: 13px 16px; background: #2563eb; color: #fff; font-weight: 750; font-size: 14px; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.demo-terms { display: flex; align-items: flex-start; gap: 8px; color: #a2b4cd; font-size: 13px; }
.demo-terms .ico { color: #4ade80; flex-shrink: 0; }
.demo-timeline { display: flex; gap: 8px; font-size: 11px; color: #94a9c7; }
.demo-timeline span { flex: 1; padding-top: 10px; border-top: 3px solid #2c445e; }
.demo-timeline .done { color: #4ade80; border-color: #4ade80; }
.demo-timeline .current { color: #60a5fa; border-color: #3b82f6; }
.demo-chat { padding: 18px; border: 1px solid #2c445e; border-radius: 12px; background: #13253a; }
.demo-chat .bub + .bub { margin-top: 12px; }
.demo-success { text-align: center; justify-content: center; }
.demo-success-icon { display: grid; place-items: center; align-self: center; width: 64px; height: 64px; border: 1px solid #4ade8050; border-radius: 50%; color: #4ade80; background: #4ade8010; }
.h-checkout-demo .demo-success { gap: 14px; }
.demo-review { display: grid; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #2c445e; text-align: left; min-width: 0; }
.demo-review > b { font-size: 15px; }
.demo-review-stars { display: flex; gap: 6px; }
.demo-review-stars > span { display: grid; place-items: center; width: 34px; height: 34px; background: #2563eb; color: #fff; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.demo-review-stars .ico { fill: currentColor; width: 16px; height: 16px; }
.demo-review-comment { min-height: 76px; padding: 12px 14px; border: 1px solid #2c445e; border-radius: 8px; background: #0b1526; color: #94a9c7; font-size: 13px; overflow-wrap: anywhere; }
.demo-screen:not([hidden]) .demo-review-stars > span { animation: demo-check-in .35s var(--star-delay) both; }
@media(max-width:600px) { .demo-screen { padding: 20px; } .demo-browser { padding: 14px 20px; } }
.mock-glow { position: absolute; inset: 10% 15%; border-radius: 50%; background: radial-gradient(circle, rgba(29,78,216,.35), transparent 65%); filter: blur(20px); }
.mock-order, .mock-chat, .mock-done { position: absolute; background: rgba(15,32,55,.92); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px; backdrop-filter: blur(6px); transition: transform .3s, box-shadow .3s, border-color .3s; }
.mock-order { top: 4%; right: 2%; width: 66%; }
.mock-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.mock-row b { display: inline-flex; align-items: center; gap: 8px; }
.mock-item { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.mock-item small { display: block; color: var(--muted); }
.mock-progress { height: 6px; border-radius: 3px; background: var(--line); margin: 16px 0 8px; overflow: hidden; }
.mock-progress span { display: block; height: 100%; width: 66%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.mock-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 600; }
.mock-chat { top: 31%; left: 0; width: 54%; z-index: 1; }
.mock-who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mock-who .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.ava { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 800; font-size: 14px; flex: none; }
.bub { margin: 0 0 8px; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: var(--card2); font-size: 13px; width: fit-content; max-width: 90%; }
.bub.me { margin-left: auto; border-radius: 14px 14px 4px 14px; background: var(--accent); }
.mock-done { bottom: 0; right: 6%; width: 46%; display: grid; justify-items: center; gap: 8px; text-align: center; }
.mock-done > .ico { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--accent); color: #fff; }
.h-mock[data-active="0"] .mock-order, .h-mock[data-active="1"] .mock-order, .h-mock[data-active="2"] .mock-chat, .h-mock[data-active="3"] .mock-done { transform: translateY(-6px) scale(1.02); border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 4px rgba(29,78,216,.18); z-index: 2; }

.h-bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.bento { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 26px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.bento h3 { font-size: 22px; margin: 0 0 6px; }
.bento p { margin: 0; color: var(--text2); font-size: 14px; }
.b-tall { grid-row: span 2; }
.b-wide { grid-column: span 2; }
.bento-art { flex: 1; display: grid; place-items: center; margin-bottom: 18px; }
.art-chat { align-content: center; justify-items: stretch; gap: 4px; }
.art-chat .bub { font-size: 14px; }
.art-icon .ico { width: 92px; height: 92px; padding: 20px; border-radius: 28px; color: #fff; background: linear-gradient(135deg, var(--accent), #0185ff); box-shadow: 0 20px 50px rgba(29,78,216,.45); stroke-width: 1.6; }
.art-mask { display: flex; align-items: center; justify-content: center; gap: 10px; }
.art-mask span:first-child { padding: 12px 18px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line2); font-weight: 700; letter-spacing: .04em; color: var(--text2); }
.lockchip { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff; }
.art-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.art-pay span { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line2); font-weight: 700; font-size: 14px; }
.art-pay span:nth-child(2) { background: var(--accent); border-color: var(--accent); }

.h-rating { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; color: var(--text2); }
.h-rating > .ico { color: var(--accent2); }
.stars { display: inline-flex; gap: 2px; }
.stars span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--line); color: #fff; }
.stars span.on { background: var(--accent); }
.stars .ico { width: 14px; height: 14px; fill: currentColor; stroke-width: 0; }
.h-rev-rail { grid-auto-columns: minmax(300px, 380px); }
.rev { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: var(--r); background: rgba(26,31,46,.7); border: 1px solid var(--line); }
.rev-head { display: flex; align-items: center; gap: 12px; }
.rev-head > div { flex: 1; }
.rev-head small { display: block; color: var(--muted); }
.rev p { margin: 0; color: var(--text2); }

.h-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 300px; padding: 26px; border-radius: 14px; background: rgba(26,31,46,.75); border: 1px solid var(--line); }
.stat-card .ibox { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--text2); margin-bottom: 26px; }
.stat-card b { font-size: 46px; line-height: 1; letter-spacing: -.03em; font-weight: 800; }
.stat-card > span:not(.ibox) { margin-top: 6px; font-weight: 600; color: var(--text2); }
.stat-card p { margin: auto 0 0; padding-top: 24px; font-size: 14px; color: var(--text2); }
.stat-card.blue { background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 50%), #0b6bfb; border-color: #3686fc; }
.stat-card.blue .ibox { background: rgba(255,255,255,.18); color: #fff; }
.stat-card.blue > span:not(.ibox), .stat-card.blue p { color: #fff; }

.h-faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.h-faq .muted { margin: 0 0 20px; }
.qa { border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 0 20px; margin-bottom: 10px; }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; font-weight: 700; font-size: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ico { transition: transform .2s; color: var(--muted); }
.qa[open] summary .ico { transform: rotate(180deg); }
.qa p { margin: 0 0 18px; color: var(--text2); }

.h-cta { margin: 0; padding: 110px 0; text-align: center; background: radial-gradient(50% 80% at 50% 100%, rgba(29,78,216,.35), transparent 70%); border-top: 1px solid var(--line); }
.h-cta h2 { font-size: clamp(32px, 5vw, 54px); margin-bottom: 12px; }
.h-cta p { color: var(--text2); max-width: 540px; margin: 0 auto 28px; font-size: 17px; }

/* ---------- Карточки товаров ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.pcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); transition: transform .15s, border-color .15s, box-shadow .15s; }
.pcard:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); color: var(--text); }
.pcard.is-out { opacity: .55; }
.pcard h3 { margin: 0; font-size: 16px; }
.pcard-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pcard-top > .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
.price { font-size: 18px; font-weight: 800; }
.cat { margin-left: auto; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; }
.cat-currency { background: rgba(245,158,11,.15); color: #fbbf24; }
.cat-boost { background: var(--accent-soft); color: #93c5fd; }
.cat-account { background: rgba(34,211,238,.14); color: #67e8f9; }

.gbanner { display: flex; align-items: center; gap: 24px; padding: 28px; border-radius: var(--r); border: 1px solid var(--line); margin: 0 0 20px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 22%, var(--card)), color-mix(in srgb, var(--c2) 10%, var(--card))); }
.gbanner h1 { margin-bottom: 4px; }
.gbanner p { margin: 0; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.tab { padding: 8px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab.active .muted { color: rgba(255,255,255,.75); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sec-head h2 { margin: 0; }

/* ---------- Страница товара ---------- */
.product { display: grid; grid-template-columns: 1fr 390px; gap: 32px; align-items: start; }
.product-info h1 { margin-top: 12px; }
.facts { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 24px; }
.facts div { display: grid; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.buybox { position: sticky; top: 88px; display: grid; gap: 16px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.qty { display: grid; grid-template-columns: 44px 1fr 44px; gap: 6px; }
.qty button { background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-sm); font-size: 18px; cursor: pointer; }
.qty input { text-align: center; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); }
.total b { font-size: 24px; }
.qty-block { display: grid; gap: 10px; }
.qty-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.qty-head .lbl { font-weight: 600; font-size: 14px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent), var(--accent2)) 0 / var(--p, 0%) 100% no-repeat, var(--line); }
.range:focus { box-shadow: none; }
.range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.range-scale { display: flex; justify-content: space-between; margin-top: -4px; }
.you-get { padding: 10px 12px; border-radius: var(--r-sm); background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); font-size: 14px; }
.you-get b { color: #fbbf24; }
.field { display: grid; gap: 6px; }
.field .lbl { font-weight: 600; font-size: 14px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; }
.seg-opt { position: relative; display: block; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-opt span { display: block; text-align: center; padding: 8px 10px; border-radius: 8px; font-weight: 700; color: var(--muted); transition: background .15s, color .15s; }
.seg-opt input:checked + span { background: var(--accent); color: #fff; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent2); }
.seg-opt:hover span { color: var(--text); }

/* ---------- Корзина и заказ ---------- */
.cart { display: grid; grid-template-columns: 1fr 370px; gap: 24px; align-items: start; }
.cart-items { display: grid; gap: 12px; }
.cline { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 16px; align-items: center; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.cline-qty { display: flex; gap: 6px; align-items: center; }
.cline-qty input { width: 84px; }
.cline-sum { white-space: nowrap; }
.summary { position: sticky; top: 88px; display: grid; gap: 12px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.sline { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sline b { white-space: nowrap; }
.order-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.order-head h1 { margin: 0; }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.paybox { border-color: var(--accent); background: linear-gradient(135deg, rgba(29,78,216,.14), var(--card)); margin-bottom: 16px; }
.timeline { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0; margin: 0 0 20px; }
.timeline li { display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.timeline li span { height: 6px; border-radius: 3px; background: var(--line); }
.timeline li.done { color: var(--text); }
.timeline li.done span { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.timeline li.now { font-weight: 800; }
.status { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.st-amber { background: rgba(245,158,11,.15); color: #fbbf24; }
.st-blue { background: rgba(59,130,246,.18); color: #93c5fd; }
.st-violet { background: rgba(59,130,246,.15); color: #93c5fd; }
.st-green { background: rgba(34,197,94,.15); color: #86efac; }
.st-gray { background: rgba(141,149,168,.15); color: var(--muted); }
.st-red { background: rgba(239,68,68,.15); color: #fca5a5; }
.chat { display: grid; gap: 12px; }
.chat h3 { margin: 0; }
.msgs { display: grid; gap: 10px; max-height: 420px; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; align-content: start; grid-auto-rows: max-content; padding-right: 4px; }
.msg { padding: 10px 14px; border-radius: 12px; max-width: 88%; word-wrap: break-word; }
.msg-who { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.msg-customer { justify-self: end; background: var(--accent-soft); }
.msg-admin { justify-self: start; background: var(--card2); border: 1px solid var(--line); }
.msg-system { justify-self: center; background: transparent; color: var(--muted); font-size: 13px; text-align: center; max-width: 100%; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.quick-replies-editor { display: grid; gap: 20px; min-width: 0; }
.quick-replies-editor > h2, .quick-replies-editor > p { margin: 0; }
.quick-replies-editor form { scroll-margin-top: 90px; min-width: 0; }
.quick-reply-editor-row { display: grid; gap: 16px; margin: 0; padding: 18px; border: 1px solid var(--line2); border-radius: 12px; min-width: 0; }
.quick-reply-editor-row legend { color: var(--muted); padding: 0 6px; font-size: 13px; }
.quick-reply-editor-row label { min-width: 0; }
.quick-reply-editor-row textarea { resize: vertical; font-size: 16px; }
.is-admin > .main:has(.admin-order-grid) { max-width: 1520px; }
.admin-order-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.35fr); gap: 24px; }
.admin-order-grid > div { min-width: 0; }
.admin-order-grid .chat { gap: 18px; }
.admin-order-grid .chat-head { flex-wrap: wrap; }
.admin-order-grid .msgs { min-height: 320px; max-height: 560px; align-content: start; gap: 14px; padding: 12px 4px; }
.admin-order-grid .msg { max-width: 94%; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.admin-order-grid .msg-who { font-size: 13px; }
.admin-order-grid .chat-form { grid-template-columns: minmax(0,1fr); gap: 12px; }
.admin-order-grid .chat-form textarea { min-height: 140px; font-size: 16px; resize: vertical; }
.admin-order-grid .chat-form > button { justify-self: end; min-height: 46px; min-width: 150px; }
.admin-order-grid .proof-form { min-width: 0; }
@media(max-width:980px) { .admin-order-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:600px) {
  .admin-order-grid .chat { padding: 16px; }
  .admin-order-grid .msgs { min-height: 260px; max-height: 460px; }
  .admin-order-grid .chat-form > button { width: 100%; }
}
.review-form h3 { margin: 0; }
.rate-pick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rate-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-pick label { cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--line); color: #fff; }
.rate-pick label .ico { width: 20px; height: 20px; fill: currentColor; stroke-width: 0; }
.rate-pick input:checked ~ label, .rate-pick label:hover, .rate-pick label:hover ~ label { background: var(--accent); }
.rate-pick input:focus-visible + label { outline: 2px solid var(--accent2); }
.rev-mini { display: grid; gap: 8px; }
.rev-mini p { margin: 0; }

.table-wrap { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { color: var(--muted); font-weight: 600; font-size: 13px; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(255,255,255,.02); }

/* ---------- Инфо-страницы ---------- */
.prose { max-width: 820px; margin: 0 auto; }
.prose h3 { margin-top: 24px; }
.prose .qa { background: var(--bg2); }

/* ---------- Админка ---------- */
.admin { display: grid; grid-template-columns: 200px 1fr; gap: 28px; }
.aside { display: grid; gap: 4px; align-content: start; position: sticky; top: 88px; }
.aside a { padding: 10px 14px; border-radius: var(--r-sm); color: var(--muted); font-weight: 600; }
.aside a:hover { background: var(--card); color: var(--text); }
.aside a.active { background: var(--accent-soft); color: var(--text); }
.admin-main { min-width: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.stat { display: grid; gap: 4px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.stat b { font-size: 26px; }
.danger-zone { margin-top: 16px; }
.en-block { border: 1px dashed var(--line2); border-radius: 12px; padding: 12px 16px; }
.en-block summary { cursor: pointer; }
.en-block > .form { margin-top: 14px; }

/* ---------- Подвал ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg2); padding: 40px 0 24px; }
.foot-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 40px; }
.foot-cats a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.foot-cats a .ico { color: var(--accent2); }
.foot-cats a:hover { border-color: var(--accent); }
.footer-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.foot-tag { color: var(--text2); margin: 14px 0 0; max-width: 320px; }
.footer h4 { margin: 0 0 12px; font-size: 14px; }
.footer-in > div > a:not(.logo), .footer-in > div > span { display: block; color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.footer-in > div > a:hover { color: var(--text); }
.foot-help { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.copy { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  .h-games { grid-template-columns: repeat(4, 1fr); }
  .h-stats { grid-template-columns: repeat(2, 1fr); }
  .search { max-width: 260px; }
}
@media (max-width: 980px) {
  .product, .cart, .order-grid, .h-how, .h-faq { grid-template-columns: 1fr; }
  .buybox, .summary { position: static; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .admin { grid-template-columns: 1fr; }
  .aside { position: static; display: flex; overflow-x: auto; }
  .aside a { white-space: nowrap; }
  .footer-in { grid-template-columns: 1fr 1fr; }
  .h-bento { grid-template-columns: 1fr 1fr; }
  .b-tall { grid-row: auto; grid-column: span 2; }
  .h-mock { min-height: 400px; max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 860px) {
  .burger { display: inline-grid; }
  .search { display: none; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 18px; background: var(--bg); border-bottom: 1px solid var(--line); max-height: calc(100vh - 68px); overflow-y: auto; }
  .menu.open { display: flex; }
  .dd-panel { position: static; display: grid; box-shadow: none; border: 0; padding: 0 0 8px; min-width: 0; background: transparent; }
  .dd-games { grid-template-columns: 1fr 1fr; min-width: 0; }
  .dd-btn { pointer-events: none; padding-left: 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
  .dd-btn .ico { display: none; }
  .menu-link { padding: 12px 0; border-top: 1px solid var(--line); border-radius: 0; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .topbar-in { gap: 10px; height: 60px; }
  .hide-xs { display: none; }
  .lang-switch { padding-left: 4px; }
  .lang-switch > .ico { display: none; }
  .h-hero { padding: 56px 0 48px; }
  .h-hero-bg { grid-template-columns: repeat(4, 1fr); }
  .h-search .btn { display: none; }
  .h-cats { gap: 12px 18px; }
  .h-games { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .h-sec { padding-top: 40px; padding-bottom: 40px; }
  .h-bento, .h-stats { grid-template-columns: 1fr; }
  .b-tall, .b-wide { grid-column: auto; }
  .bento { min-height: 240px; }
  .stat-card { min-height: 240px; }
  .h-mock { min-height: 470px; }
  .mock-order { width: 88%; right: 0; }
  .mock-chat { width: 78%; top: 36%; }
  .mock-done { width: 66%; right: 0; }
  .grid2 { grid-template-columns: 1fr; }
  .cline { grid-template-columns: auto 1fr auto; }
  .cline-qty { grid-column: 2; }
  .cline-sum { grid-column: 3; grid-row: 1; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .gbanner { flex-direction: column; align-items: flex-start; padding: 20px; }
  .foot-cats { grid-template-columns: 1fr 1fr; }
  .footer-in { grid-template-columns: 1fr; }
  .h-faq { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 480px) {
  .topbar-in { gap: 8px; }
  .top-right { gap: 6px; }
  .top-right .btn { padding: 7px 12px; }
  .top-right .btn .ico { display: none; }
  .icon-btn { width: 36px; height: 36px; }
  .logo { font-size: 18px; gap: 8px; }
  .logo-mark { width: 30px; height: 30px; font-size: 16px; }
  .lang-switch a { padding: 3px 7px; }
}

/* ---------- Фирменный фон G2U ---------- */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(/static/bg.svg?v=20261019ocean2) center / cover no-repeat; }
.footer { background: rgba(10,23,40,.85); }

/* ---------- Страница раздела: выбор игры ---------- */
.cat-hero { position: relative; margin: -28px 0 0; padding: 36px 0 8px; overflow: hidden; isolation: isolate; }
.cat-hero-bg { position: absolute; inset: -30px -20px 0; z-index: -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; opacity: .22; filter: blur(3px); transform: rotate(-4deg) scale(1.1);
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%); }
.cat-hero-bg span { aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; }
.cat-head { display: flex; align-items: center; gap: 18px; margin: 8px 0 22px; }
.cat-head h1 { margin: 0 0 4px; }
.cat-head p { margin: 0; }
.ibox.lg { width: 60px; height: 60px; border-radius: 16px; background: var(--accent); color: #fff; box-shadow: 0 10px 30px rgba(29,78,216,.4); }
.ibox.lg .ico { width: 28px; height: 28px; }
.tab { display: inline-flex; align-items: center; gap: 6px; }
.cg-sec { margin: 22px 0 36px; }
.cg-h { display: flex; align-items: center; gap: 10px; font-size: 24px; margin-bottom: 18px; }
.fire { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--bg); }
.fire .ico { width: 18px; height: 18px; fill: var(--bg); stroke: var(--bg); stroke-width: 1; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 14px; }
.cg { display: grid; gap: 10px; }
.cg-cover { display: block; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: var(--card); transition: transform .2s, box-shadow .2s; }
.cg:hover .cg-cover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 2px var(--accent); }
.cg-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cg-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-count { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: rgba(156,163,175,.12); border: 1px solid var(--line); color: var(--text2); font-size: 12px; font-weight: 700; }
.cg-count .ico { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .cat-hero-bg { grid-template-columns: repeat(4, 1fr); }
  .cg-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-head { gap: 12px; }
  .ibox.lg { width: 48px; height: 48px; }
}
.fire .ico path:last-child { fill: #fff; stroke: none; }

/* ---------- Раздел «Предметы», режимы игры ---------- */
.cat-item { background: rgba(59,130,246,.16); color: #93c5fd; }
.modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mode-chip { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: 12px; font-weight: 700; }
.foot-cats { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .foot-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .foot-cats { grid-template-columns: 1fr 1fr; } }
.gbanner-cover { flex: none; width: 96px; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }


/* =====================================================================
   ФИРМЕННЫЙ СТИЛЬ G2U — Ocean Blue, широкие заголовки, срезанные углы
   ===================================================================== */
.chamfer, .btn, .ibox, .tab, .h-tags a, .cg-count, .lang-switch a, .icon-btn, .seg-opt span, .stars span, .rate-pick label, .pill, .status, .cat, .badge {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  border-radius: 0;
}
.btn {
  -webkit-clip-path: none;
  clip-path: none;
  border-radius: 11px;
}
.status, .cat, .badge, .stars span, .cg-count, .lang-switch a { --cut: 5px; }
.pill, .tab, .h-tags a, .seg-opt span, .rate-pick label { --cut: 7px; }

h1, h2, h3, .h-title, .h-h2, .cg-h, .logo, .price, .total b, .stat-card b, .cover-name, .bento h3, .h-cta h2, .stat b, .order-head h1 {
  font-family: var(--font-display); letter-spacing: -.01em;
}
h1 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; }
h2 { font-size: 23px; font-weight: 700; }
h3 { font-weight: 700; font-size: 16px; }
.h-title { font-size: clamp(30px, 5.2vw, 58px); font-weight: 800; letter-spacing: -.025em; }
.h-h2 { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; }
.price { font-size: 17px; }
.total b { font-size: 22px; }

/* Кнопки */
.btn { color: var(--on-accent); background: var(--accent); font-weight: 800; letter-spacing: .01em; }
.btn:hover { color: var(--on-accent); background: var(--accent-h); box-shadow: 0 0 0 0 transparent; }
.btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; background: #1d4ed8; color: #fff; }
.btn-ghost, .btn-pill-ghost { background: var(--card2); color: var(--text); border: 0; box-shadow: inset 0 0 0 1px var(--line2); }
.btn-ghost:hover, .btn-pill-ghost:hover { color: var(--text); background: var(--line); box-shadow: inset 0 0 0 1px var(--accent2); }
.btn-danger { box-shadow: inset 0 0 0 1px var(--red); border: 0; }
.icon-btn { border: 0; box-shadow: inset 0 0 0 1px var(--line2); }
.icon-btn .badge { top: -4px; right: -4px; }
.badge { background: var(--accent); color: var(--on-accent); }

/* Логотип */
.logo { gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: .02em; }
.logo-mark { width: 34px; height: 34px; border-radius: 0; background: none; box-shadow: none; display: inline-block; }
.logo-mark svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 14px rgba(37,99,235,.35)); }
.logo-u { color: var(--accent); }
.logo .logo-wordmark { display: inline-block; flex: 0 0 auto; width: 96px; height: 34px; line-height: 0; }
.logo-wordmark svg { display: block; width: 100%; height: 100%; }
.why-g2u-brand > .logo-wordmark { display: block; width: 156px; height: 70px; }
@media(max-width:640px) { .logo .logo-wordmark { width: 78px; height: 28px; } }

/* Ссылки, акценты */
p a, .prose a, .flash a, .empty a, label a, .table a, .dd-all, .nav-admin { color: var(--accent); }
.grad { background: linear-gradient(95deg, #2563eb 0%, #7dd3fc 35%, #60a5fa 75%, #1d4ed8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pill { background: var(--accent-soft); color: var(--accent); }
.ibox { background: var(--card2); color: var(--accent); }
.ibox.lg { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.h-sub i { color: var(--accent); }
.lang-switch { border-radius: 0; background: transparent; border: 0; padding: 0; gap: 4px; }
.lang-switch > .ico { display: none; }
.lang-switch a { background: var(--card2); color: var(--muted); padding: 5px 9px; }
.lang-switch a.active { background: var(--accent); color: var(--on-accent); }
.menu-link:hover, .dd-btn:hover, .dd:focus-within .dd-btn { color: var(--accent); background: transparent; }
.dd-panel { border-radius: var(--r); }
.dd-game:hover, .dd-cat:hover { background: var(--card2); color: var(--accent); }

/* Формы */
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.seg-opt input:checked + span { background: var(--accent); color: var(--on-accent); }
.seg { border-radius: var(--r-sm); }
.range { background: linear-gradient(90deg, var(--violet), var(--accent)) 0 / var(--p, 0%) 100% no-repeat, var(--line); }
.range::-webkit-slider-thumb { background: var(--accent); border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--accent), 0 2px 10px rgba(37,99,235,.5); }
.range::-moz-range-thumb { background: var(--accent); border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--accent); }
.you-get { background: var(--violet-soft); border-color: rgba(96,165,250,.4); border-radius: var(--r-sm); }
.you-get b { color: var(--accent); }
.flash-info { background: var(--violet-soft); border-color: rgba(96,165,250,.4); }

/* Вкладки и теги */
.tab { border: 0; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.tab:hover { color: var(--accent); }
.tab.active { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.tab.active .muted { color: rgba(8,15,29,.6); }
.h-tags a { border-radius: 0; background: var(--card2); }
.h-tags a:hover { background: var(--accent); color: var(--on-accent); }
.cat-currency { background: rgba(245,158,11,.16); color: #fbbf24; }
.cat-boost { background: var(--accent-soft); color: var(--accent); }
.cat-item { background: var(--violet-soft); color: #93c5fd; }
.cat-account { background: rgba(34,211,238,.14); color: #67e8f9; }
.st-blue { background: var(--violet-soft); color: #93c5fd; }

/* Карточки: синяя метка при наведении */
.pcard, .card, .bento, .stat-card, .rev, .qa, .h-step, .summary, .buybox, .cline, .facts div, .catcard, .gbanner { border-radius: var(--r); }
.pcard { position: relative; }
.pcard::after { content: ''; position: absolute; top: -1px; right: -1px; width: 18px; height: 18px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); border-top-right-radius: var(--r); opacity: 0; transition: opacity .15s; }
.pcard:hover { border-color: var(--line2); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(37,99,235,.25); }
.pcard:hover::after { opacity: 1; }
.pcard .btn-sm { padding: 6px 14px; }
.cg:hover .cg-cover, .h-game-cover:hover { box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 2px var(--accent); }
.h-game-cover, .cg-cover { border-radius: var(--r-sm); }
.cg-count { border: 0; }
.cg-count .ico { color: var(--accent); }
.fire { background: var(--accent); }
.fire .ico { fill: var(--on-accent); stroke: var(--on-accent); }
.fire .ico path:last-child { fill: var(--accent); }

/* Главная */
.h-hero::after { background: radial-gradient(55% 70% at 50% 0%, rgba(29,78,216,.32), transparent 70%), radial-gradient(40% 40% at 80% 90%, rgba(37,99,235,.08), transparent 70%), linear-gradient(180deg, rgba(8,15,29,.55) 0%, rgba(8,15,29,.88) 55%, var(--bg) 100%); }
.h-search { border-radius: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); background: rgba(15,30,50,.92); border: 0; box-shadow: inset 0 0 0 1px var(--line2), var(--shadow); }
.h-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.h-cat .ibox { border: 0; box-shadow: inset 0 0 0 1px var(--line2); border-radius: 0; }
.h-cat:hover .ibox { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.h-cat:hover { color: var(--accent); }
.h-step-head .ico { color: var(--accent); }
.h-step.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.h-step.active .ico, .h-step.active .h-step-text { color: var(--on-accent); }
.h-step-bar { background: rgba(8,15,29,.4); }
.mock-order, .mock-chat, .mock-done { border-radius: var(--r); background: rgba(15,30,50,.94); }
.h-mock[data-active="0"] .mock-order, .h-mock[data-active="1"] .mock-order, .h-mock[data-active="2"] .mock-chat, .h-mock[data-active="3"] .mock-done { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 4px rgba(37,99,235,.14); }
.mock-progress span, .timeline li.done span { background: linear-gradient(90deg, var(--violet), var(--accent)); }
.mock-done > .ico { background: var(--accent); color: var(--on-accent); border-radius: 0; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.ava { background: linear-gradient(135deg, var(--violet), var(--accent2)); }
.bub.me { background: var(--violet); color: #fff; }
.art-icon .ico { background: linear-gradient(135deg, var(--violet), #38bdf8); border-radius: 0; clip-path: polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px); box-shadow: none; }
.lockchip { background: var(--accent); color: var(--on-accent); border-radius: 0; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.art-pay span { border-radius: 0; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); border: 0; box-shadow: inset 0 0 0 1px var(--line2); }
.art-pay span:nth-child(2) { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.stars span.on { background: var(--accent); color: var(--on-accent); }
.h-rating > .ico { color: var(--accent); }
.stat-card.blue { background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.35), transparent 55%), var(--accent); border-color: var(--accent); }
.stat-card.blue .ibox { background: rgba(8,15,29,.12); color: var(--on-accent); }
.stat-card.blue b, .stat-card.blue > span:not(.ibox), .stat-card.blue p { color: var(--on-accent); }
.stat-card .ibox { border-radius: 0; }
.h-cta { background: radial-gradient(50% 80% at 50% 100%, rgba(29,78,216,.35), transparent 70%); }
.qa[open] { box-shadow: inset 3px 0 0 var(--accent); }
.rate-pick input:checked ~ label, .rate-pick label:hover, .rate-pick label:hover ~ label { background: var(--accent); color: var(--on-accent); }
.paybox { border-color: var(--accent); background: linear-gradient(135deg, rgba(37,99,235,.1), var(--card)); }
.msg-customer { background: var(--violet-soft); }
.foot-cats a { border-radius: 0; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.foot-cats a .ico { color: var(--accent); }
.foot-cats a:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.aside a.active { background: var(--accent-soft); color: var(--accent); }
.stats .stat b { color: var(--text); }

/* Бегущая лента под первым экраном */
.ticker { position: relative; z-index: 2; margin: -18px 0 0; background: var(--accent); color: var(--on-accent); transform: rotate(-1.6deg); overflow: hidden; box-shadow: 0 10px 40px rgba(37,99,235,.18); }
.ticker-in { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 14px; padding: 12px 14px; font-family: var(--font-display); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ticker span::after { content: ''; width: 9px; height: 9px; background: var(--on-accent); transform: rotate(45deg); }
.ticker-2 { margin-top: -40px; background: var(--violet); color: #fff; transform: rotate(1.4deg); z-index: 1; opacity: .9; }
.ticker-2 .ticker-in { animation-direction: reverse; animation-duration: 46s; }
.ticker-2 span::after { background: #fff; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker-wrap { position: relative; padding: 24px 0 18px; overflow: hidden; }
@media (max-width: 720px) {
  h1 { font-size: 24px; }
  .h-title { font-size: 30px; }
  .ticker span { font-size: 12px; padding: 10px 12px; }
}
.ticker { margin: -18px -60px 0; transform: rotate(-2.2deg); }
.ticker-2 { margin-top: -44px; transform: rotate(2deg); }
.h-games { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 720px) { .h-games { grid-template-columns: repeat(2, 1fr); } }
.search input { border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* ---------- Страница игры: панель разделов, блок валюты, ряды ---------- */
.gnav { position: sticky; top: 68px; z-index: 20; margin-top: -28px; background: rgba(8,15,29,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.gnav-in { display: flex; align-items: center; gap: 22px; min-height: 56px; }
.gnav-game { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 16px; white-space: nowrap; }
.gnav-game:hover { color: var(--accent); }
.gnav-links { display: flex; gap: 4px; flex: 1; min-width: 0; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.gnav-links a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 18px 14px; color: var(--text2); font-weight: 600; font-size: 14px; white-space: nowrap; }
.gnav-links a .ico { color: var(--muted); }
.gnav-links a:hover, .gnav-links a:hover .ico { color: var(--accent); }
.gnav-links a.active { color: var(--accent); }
.gnav-links a.active .ico { color: var(--accent); }
.gnav-links a.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--accent); }
.gnav-n { font-size: 11px; font-weight: 800; padding: 1px 6px; background: var(--card2); color: var(--muted); clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); }
.gnav-links a.active .gnav-n { background: var(--accent); color: var(--on-accent); }
.gnav-modes { display: flex; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.g-page { padding-top: 22px; }
.g-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 0 22px; }
.g-head h1 { margin: 0; }

.g-cur { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; min-height: 300px; margin: 6px 0 44px; border-radius: var(--r); background: linear-gradient(115deg, var(--card) 0%, var(--card) 45%, rgba(15,30,50,.4) 100%); border: 1px solid var(--line2); isolation: isolate; }
.g-cur::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 0% 100%, rgba(37,99,235,.14), transparent 60%), radial-gradient(50% 80% at 100% 0%, rgba(29,78,216,.25), transparent 60%); }
.g-cur::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.g-cur-art { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: -1; mask-image: linear-gradient(90deg, transparent, #000 45%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); opacity: .9; }
.g-cur-art .cover { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.g-cur-body { padding: 34px 38px; }
.g-cur-body h1 { margin: 0 0 8px; font-size: clamp(24px, 3.4vw, 38px); }
.g-cur-body .muted { margin: 0 0 18px; max-width: 520px; }
.g-cur-body .pill { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.g-cur-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.g-cur-price small { color: var(--muted); font-size: 15px; }
.g-cur-price b { font-family: var(--font-display); font-size: clamp(34px, 5vw, 54px); line-height: 1; color: var(--accent); letter-spacing: -.02em; text-shadow: 0 0 40px rgba(37,99,235,.25); }
.g-cur-price span { color: var(--text2); font-weight: 600; }

/* Общая страница игры: большой hero и отдельные сетки категорий. */
.g-game-hero { min-height: 340px; margin-bottom: 34px; scroll-margin-top: 140px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.g-game-hero .g-cur-body { min-width: 0; padding: 30px 34px; }
.g-game-hero .g-cur-body h1 { font-size: clamp(26px, 3.2vw, 40px); overflow-wrap: normal; word-break: normal; }
.g-game-hero .g-cur-price { margin-bottom: 18px; }
.g-game-hero .g-cur-price b { font-size: clamp(32px, 4.3vw, 48px); }
.g-game-hero .g-cur-price b, .g-game-hero .g-cur-unit { white-space: nowrap; }
.g-game-hero .g-cur-unit { font-size: 14px; }
.g-game-hero .g-cur-art { width: 48%; }
.g-game-hero .g-cur-art > .cover { display: block; height: 100%; }
.g-game-hero .g-cur-art .cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.g-game-hero .cover-ph { display: flex !important; align-items: center; justify-content: center; flex-direction: column; }
.g-game-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g-game-hero .modes { margin-bottom: 20px; }
.g-game-section { scroll-margin-top: 140px; margin-bottom: 30px; }
.g-game-section .rail-head h2 { overflow-wrap: anywhere; }
.g-game-section .pgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); gap: 14px; }
.g-category-head { margin: 2px 0 24px; }
.g-category-head h1 { font-size: clamp(24px, 3vw, 36px); overflow-wrap: normal; }
.item-tools { margin: 0 0 24px; position: relative; z-index: 2; }
.item-filter-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.item-filter-form > label { min-width: 140px; margin: 0; }
.item-filter-form .item-search { flex: 1 1 220px; max-width: 340px; }
.item-filter-form input, .item-filter-form select { min-height: 42px; font-size: 13px; }
.item-filter-form .item-sort { margin-left: auto; }
.item-filter-form > .btn, .item-filter-form > a { margin-bottom: 2px; }
.item-price { position: relative; min-width: 110px; }
.item-price > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 42px; padding: 8px 14px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--card); font-size: 13px; }
.item-price-panel { position: absolute; top: calc(100% + 8px); left: 0; width: 320px; padding: 16px; border: 1px solid #365171; border-radius: 12px; background: #111F34; color: #F6F8FF; box-shadow: 0 16px 40px #00000073; }
.item-price-panel label { min-width: 0; font-size: 12px; margin: 0; }
.item-price > summary:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
.item-searches { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.item-searches a { border-radius: 999px; padding: 3px 10px; background: var(--card2); color: var(--text2); font-size: 12px; }
.item-searches a:hover { color: var(--accent); }
.filter-option-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.filter-option-row > label:not(.check) { flex: 1 1 180px; }
[data-item-game][hidden], [data-item-attributes][hidden] { display: none; }
[data-custom-modes][hidden], [data-mode-hint][hidden] { display: none; }
.dropdown { position: relative; min-width: 170px; }
.dropdown.is-open { z-index: 5; }
.dropdown-trigger { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; min-height: 42px; padding: 10px 13px; border: 1px solid #293e5b; border-radius: 11px; background: #152239; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.dropdown-trigger > .ico { transition: transform 180ms ease; }
.dropdown.is-open .dropdown-trigger > .ico { transform: rotate(180deg); }
.dropdown-trigger:hover, .dropdown.is-open .dropdown-trigger { border-color: #2563eb; }
.dropdown-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.dropdown-menu { position: absolute; top: calc(100% + 7px); left: 0; right: 0; padding: 5px; max-height: min(300px, 50dvh); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #293e5b; border-radius: 11px; background: #152239; box-shadow: 0 14px 34px #0008; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; }
.dropdown.is-open .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.dropdown-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; padding: 10px; border-radius: 7px; cursor: pointer; color: var(--text2); font-size: 13px; }
.dropdown-option:hover, .dropdown-option.is-active { background: #2563eb1e; }
.dropdown-option[aria-selected="true"] { color: #2563eb; }
.dropdown-check { opacity: 0; color: #2563eb; }
.dropdown-option[aria-selected="true"] .dropdown-check { opacity: 1; }
.item-filter-form .item-sort { min-width: 205px; }
/* Catalogue popups live outside clipping/stacking containers. Keep the entire
   panel opaque, including its first frame, rather than fading its opacity. */
.catalog-filter-popup { position: fixed; inset: auto; margin: 0; min-width: 0; max-width: calc(100vw - 24px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #365171; border-radius: 12px; background: #111F34; color: #F6F8FF; box-shadow: 0 16px 40px #00000073; opacity: 1; visibility: visible; pointer-events: auto; transform: none; backdrop-filter: none; transition: none; z-index: 65; scrollbar-width: thin; scrollbar-color: #527bb0 #111F34; }
.catalog-filter-popup[hidden] { display: none; }
.catalog-filter-popup .dropdown-option { overflow-wrap: anywhere; }
.catalog-filter-popup .dropdown-option[aria-selected="true"] { color: #80b5ff; }
.catalog-filter-popup .dropdown-check { color: #80b5ff; }
.item-price-panel h3 { font: inherit; font-size: 14px; font-weight: 700; margin: 0 0 14px; }
.price-range-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.price-range-fields label > span:first-child { display: block; margin-bottom: 6px; color: #b1c4df; }
.price-range-input { position: relative; display: flex; align-items: center; }
.price-range-input input { width: 100%; min-width: 0; height: 42px; padding: 9px 29px 9px 10px; border: 1px solid #365171; border-radius: 8px; background: #192E49; color: #F6F8FF; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.price-range-input input::-webkit-inner-spin-button, .price-range-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.price-range-input > span { position: absolute; right: 10px; pointer-events: none; color: #abc2e1; font-size: 13px; }
.price-range-input input:focus-visible { border-color: #347FFF; outline: 2px solid #347FFF; outline-offset: 2px; }
.price-range-track { position: relative; height: 44px; margin-top: 10px; touch-action: none; cursor: pointer; }
.price-range-rail { position: absolute; left: 12px; right: 12px; top: 19px; height: 6px; border-radius: 999px; background: linear-gradient(to right,#304159 0%,#304159 var(--price-low,0%),#347FFF var(--price-low,0%),#347FFF var(--price-high,100%),#304159 var(--price-high,100%),#304159 100%); pointer-events: none; }
.price-range-track .price-slider { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; pointer-events: none; touch-action: none; }
.price-range-track .price-slider::-webkit-slider-runnable-track { height: 6px; background: transparent; border: 0; }
.price-range-track .price-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; border: 2px solid #70B8FF; background: #2563EB; box-shadow: 0 2px 7px #0005; cursor: grab; pointer-events: auto; }
.price-range-track .price-slider::-moz-range-track, .price-range-track .price-slider::-moz-range-progress { height: 6px; background: transparent; border: 0; }
.price-range-track .price-slider::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #70B8FF; background: #2563EB; box-shadow: 0 2px 7px #0005; cursor: grab; pointer-events: auto; }
.price-range-track .price-slider:hover::-webkit-slider-thumb, .price-range-track .price-slider.is-dragging::-webkit-slider-thumb { box-shadow: 0 0 0 5px #347FFF26, 0 0 14px #347FFF55; }
.price-range-track .price-slider:hover::-moz-range-thumb, .price-range-track .price-slider.is-dragging::-moz-range-thumb { box-shadow: 0 0 0 5px #347FFF26, 0 0 14px #347FFF55; }
.price-range-track .price-slider:focus-visible { z-index: 2; }
.price-range-track .price-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid #F6F8FF; outline-offset: 3px; }
.price-range-track .price-slider:focus-visible::-moz-range-thumb { outline: 2px solid #F6F8FF; outline-offset: 3px; }
.price-range-track .price-slider:disabled { opacity: .5; }
.product-gallery { margin-bottom: 24px; }
.product-main-photo { display: block; width: 100%; max-height: 460px; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--r); background: var(--card); }
.product-thumbnails { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding: 3px; }
.product-thumbnails button { flex: 0 0 66px; height: 60px; padding: 2px; border: 1px solid var(--line2); border-radius: 7px; background: var(--card); cursor: pointer; }
.product-thumbnails button[aria-pressed="true"] { border-color: var(--accent); }
.product-thumbnails button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.product-thumbnails img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.product-photo-editor { margin-top: 22px; }
.product-photo-list { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0; }
.product-photo-card { width: 200px; }
.product-photo-card > img { display: block; width: 100%; height: 130px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.product-photo-card form { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.site-controls { display: flex; align-items: center; gap: 9px; }
.preferences-toggle, .notification-toggle { border: 1px solid var(--line2); background: #152239; color: var(--text); cursor: pointer; font: inherit; }
.preferences-toggle { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.preferences-toggle:hover, .notification-toggle:hover { border-color: var(--accent); }
.site-flag { display: inline-block; width: 22px; height: 16px; flex: 0 0 22px; object-fit: fill; border-radius: 3px; vertical-align: middle; }
.site-flag[hidden] { display: none; }
.preferences-flag { display: inline-flex; align-items: center; flex-shrink: 0; }
.preferences-short { display: none; }
.notification-toggle { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.notification-badge { position: absolute; top: -4px; right: -5px; min-width: 17px; padding: 1px 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 800; }
.notification-badge[hidden], .notification-panel[hidden], .notification-error[hidden] { display: none; }
.notification-control { position: relative; }
.notification-panel { position: fixed; display: flex; flex-direction: column; width: 560px; max-width: calc(100vw - 24px); margin: 0; padding: 12px; overflow: hidden; border: 1px solid #273C59; border-radius: 14px; background: #080F1D; color: #F4F7FF; box-shadow: 0 18px 48px rgba(0,0,0,.5); backdrop-filter: none; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity 160ms cubic-bezier(0.16,1,0.3,1), transform 160ms cubic-bezier(0.16,1,0.3,1); z-index: 60; }
.notification-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; transition-duration: 230ms; }
.notification-panel.is-closing { transform: translateY(-7px); }
.notification-panel:focus-visible { outline: 2px solid #3B82F6; outline-offset: 3px; }
.notification-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; }
.notification-heading h3 { margin: 0; font-size: 15px; line-height: 24px; color: #F4F7FF; }
.control-close { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--line2); border-radius: 9px; color: var(--muted); background: transparent; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.control-close:hover { color: var(--accent); border-color: var(--accent); }
.notification-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; padding: 10px 0; border-bottom: 1px solid #273C59; }
.notification-actions button, .notice-footer button { background: #101D30; color: #9AAEC9; border: 1px solid #273C59; border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 11px; cursor: pointer; }
.notification-actions button:hover:not(:disabled), .notice-footer button:hover:not(:disabled) { background: #192E49; color: #F4F7FF; border-color: #3B82F6; }
.notification-actions button:disabled { opacity: .4; cursor: default; }
.notification-actions button { white-space: nowrap; line-height: 18px; }
.notification-list { min-height: 0; max-height: min(630px, 70dvh); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #527BB0 #080F1D; padding-top: 8px; }
.notification-list:hover { scrollbar-color: #60A5FA #080F1D; }
.notification-list::-webkit-scrollbar { width: 6px; }
.notification-list::-webkit-scrollbar-track { background: #080F1D; border-radius: 999px; }
.notification-list::-webkit-scrollbar-thumb { background: #527BB0; border: 1px solid #080F1D; border-radius: 999px; }
.notification-list::-webkit-scrollbar-thumb:hover { background: #60A5FA; }
@supports selector(::-webkit-scrollbar) {
  .notification-list, .notification-list:hover { scrollbar-width: auto; scrollbar-color: auto; }
}
.notice-item { display: flex; gap: 10px; padding: 12px 9px; margin: 0 0 6px; border: 1px solid #233753; border-left-width: 2px; border-radius: 8px; background: #101D30; }
.notice-item:last-child { margin-bottom: 0; }
.notice-item.is-unread { background: #14243C; border-left-color: #3B82F6; }
.notice-symbol { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: #192E49; color: #3B82F6; }
.notice-content { min-width: 0; flex: 1; }
.notice-content > a { display: grid; gap: 5px; overflow-wrap: anywhere; }
.notice-content strong { font-size: 12px; color: #F4F7FF; }
.notification-panel .muted { color: #9AAEC9; }
.notification-panel .notice-footer > span { color: #7189A9; }
.notice-content .small { font-size: 11px; }
.notice-footer { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; }
.notification-error { flex: 0 0 auto; margin: 8px 0 0; color: var(--red); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .notification-panel, .notification-panel.is-open, .notification-panel.is-closing { transition: none; transform: none; }
}
.settings-dialog { width: 460px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 28px); padding: 0; border: 1px solid var(--line2); border-radius: 12px; background: #152239; color: var(--text); box-shadow: 0 24px 80px #000a; overflow: visible; }
.settings-dialog::backdrop { background: #000a; backdrop-filter: blur(4px); }
.settings-dialog > form { max-height: calc(100dvh - 28px); overflow-y: auto; border-radius: 12px; }
.settings-heading { display: flex; align-items: center; gap: 12px; padding: 20px; }
.settings-heading h2 { font-family: var(--font); font-size: 18px; margin: 0 0 4px; }
.settings-heading p { font-size: 12px; color: var(--muted); margin: 0; }
.settings-heading .control-close { margin-left: auto; }
.settings-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.settings-fields { padding: 0 20px 12px; }
.settings-fields .dropdown { width: 100%; }
.settings-fields .dropdown-trigger { margin-top: 6px; }
.settings-currencies { padding: 0; margin: 18px 0 10px; border: 0; min-width: 0; }
.settings-currencies legend { font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.settings-currency-options { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line2); border-radius: 9px; }
.settings-currency-options label { position: relative; flex: 1; margin: 0; cursor: pointer; }
.settings-currency-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.settings-currency-options label > span { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 10px 6px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.settings-currency-options input:checked + span { color: var(--accent); background: #ffffff0e; }
.settings-currency-options input:focus-visible + span { outline: 2px solid var(--accent); }
.settings-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line2); }
.preferences-toggle:focus-visible, .notification-toggle:focus-visible, .control-close:focus-visible, .notice-footer button:focus-visible, .notification-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mobile-account-link { display: none; }
@media (max-width: 720px) {
  .settings-heading { padding: 16px; }
}
@media (max-width: 480px) {
  .site-controls { gap: 5px; }
  .preferences-summary { display: none; }
  .preferences-short { display: inline; font-size: 10px; }
  .preferences-toggle { padding: 8px; }
  .notification-toggle { width: 34px; height: 34px; }
}
@media (max-width: 400px) {
  .top-right > .btn { display: none; }
  .mobile-account-link { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .dropdown-menu, .dropdown-trigger > .ico { transition: none; }
}
@media (max-width: 720px) {
  .item-filter-form > label { flex: 1 1 140px; min-width: 0; }
  .item-filter-form .item-search { flex-basis: 100%; max-width: none; }
  .item-filter-form .item-sort { margin-left: 0; }
  .item-filter-form > .dropdown { flex: 1 1 150px; min-width: 0; }
  .dropdown-option { min-height: 44px; }
}
@media (max-width: 720px) {
  .g-game-hero { grid-template-columns: 1fr; }
  .g-game-hero .g-cur-body { padding: 28px 22px; }
  .g-game-hero .g-cur-art { width: 100%; opacity: .2; }
  .g-game-hero .g-cur-body { position: relative; z-index: 1; }
  .g-game-section .rail-head { align-items: flex-start; }
}

.g-sec { margin: 0 0 40px; }
.rail-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.rail-head h2 { margin: 0; font-size: clamp(19px, 2.4vw, 24px); }
.rail-ctrl { display: flex; gap: 8px; align-items: center; }
.ico.rot90 { transform: rotate(90deg); }
.ico.rot-90 { transform: rotate(-90deg); }
.g-rail { grid-auto-columns: minmax(280px, calc((100% - 48px) / 4)); padding-bottom: 8px; scrollbar-width: none; }
.g-rail::-webkit-scrollbar { display: none; }

/* Общая карточка витрины: обложка, характеристики, покупка, магазин. */
.pcard-cover { position: relative; display: grid; place-items: center; flex: none; aspect-ratio: 16 / 11; padding: 14px; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 45%, rgba(37,99,235,.15), transparent 75%), linear-gradient(145deg, #152239, #0a1424); }
.pcard-photo { display: block; width: 100%; height: 100%; min-height: 0; position: absolute; inset: 0; padding: 14px; object-fit: contain; object-position: center; }
.pcard-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; max-width: 100%; color: var(--muted); text-align: center; font-size: 12px; }
.pcard-placeholder > .ico { width: 52px; height: 52px; color: var(--accent); opacity: .55; stroke-width: 1.2; }
.pcard-placeholder > span { overflow-wrap: anywhere; }
.pcard-badges { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 12px 14px 0; margin: 0; }
.pcard-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; padding: 5px 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 6px; background: #152239; color: var(--text); font-size: 11px; line-height: 1.3; }
.pcard-chip > .ico { width: 13px; height: 13px; color: var(--accent); }
.pcard-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-chip-label { color: var(--muted); }
.pcard .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pcard-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 14px; min-width: 0; }
.pcard .pcard-top { gap: 7px; }
.pcard .pcard-top .gtile { flex: none; }
.pcard h3 { font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.pcard-stock { margin-top: -4px; }
.pcard-purchase { margin-top: auto; padding-top: 4px; }
.pcard-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pcard-price .price { font-size: 24px; }
.pcard .pcard-buy { display: flex; width: 100%; min-height: 42px; justify-content: center; gap: 8px; margin-top: 12px; padding: 10px 14px; }
.pcard-buy .ico { width: 16px; height: 16px; }
.pcard-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: rgba(255,255,255,.025); font-size: 11px; }
.pc-shop { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-family: var(--font-display); font-size: 12px; }
.pc-shop .ico { width: 15px; height: 15px; color: var(--accent); }
.pcard-trust { overflow-wrap: anywhere; }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Storefront card accents use category IDs and system badge provenance, never labels.
   Keep --accent untouched: Buy buttons and custom badge colors retain their own styles. */
.pcard[data-product-category] { --pc-category-color: #A8B7CD; --pc-category-rgb: 168,183,205; }
.pcard[data-product-category="currency"] { --pc-category-color: #F5C84C; --pc-category-rgb: 245,200,76; }
.pcard[data-product-category="boost"] { --pc-category-color: #A78BFA; --pc-category-rgb: 167,139,250; }
.pcard[data-product-category="item"] { --pc-category-color: #38BDF8; --pc-category-rgb: 56,189,248; }
.pcard[data-product-category="account"] { --pc-category-color: #FB923C; --pc-category-rgb: 251,146,60; }
.pcard[data-product-category]::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px; z-index: 2;
  background: rgba(var(--pc-category-rgb), .75); pointer-events: none;
}
/* Replace the old blue corner decoration with the full, subtle category line. */
.pcard[data-product-category]::after { display: none; }
.pcard[data-product-category]:hover, .pcard[data-product-category]:focus-visible {
  border-color: rgba(var(--pc-category-rgb), .5);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 18px rgba(var(--pc-category-rgb), .1);
}
.pcard[data-product-category]:focus-visible { outline-color: var(--pc-category-color); }
.pcard[data-product-category] .pcard-chip[data-badge-source="system"].pc-chip-category {
  color: var(--pc-category-color); border-color: rgba(var(--pc-category-rgb), .36);
  background: rgba(var(--pc-category-rgb), .08);
}
.pcard[data-product-category] .pcard-chip[data-badge-source="system"].pc-chip-delivery {
  color: #4ADE80; border-color: rgba(74,222,128,.36); background: rgba(74,222,128,.08);
}
.pcard[data-product-category] .pcard-chip[data-badge-source="system"].pc-chip-category > .ico,
.pcard[data-product-category] .pcard-chip[data-badge-source="system"].pc-chip-delivery > .ico { color: inherit; flex-shrink: 0; }
/* Currency system badges only. Keep dimensions and editable product badges intact. */
.pcard[data-product-category="currency"] .pcard-chip[data-badge-source="system"].badge-gold {
  color: #F5C84C; border-color: rgba(245, 200, 76, .55); background: rgba(245, 200, 76, .12);
}
.pcard[data-product-category="currency"]:hover .pcard-chip[data-badge-source="system"].badge-gold,
.pcard[data-product-category="currency"]:focus-visible .pcard-chip[data-badge-source="system"].badge-gold {
  border-color: rgba(245, 200, 76, .75); background: rgba(245, 200, 76, .18);
}
@media (max-width: 420px) {
  .pcard-badges { padding: 10px 12px 0; }
  .pcard-body { padding: 12px; }
  .pcard-footer { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard { transition: none; }
  .pcard:hover { transform: none; }
}

@media (max-width: 980px) {
  .g-rail { grid-auto-columns: minmax(260px, calc((100% - 16px) / 2)); }
  .gnav-modes { display: none; }
}
@media (max-width: 720px) {
  .gnav { top: 60px; }
  .gnav-in { gap: 10px; }
  .gnav-game b { display: none; }
  .gnav-links { justify-content: flex-start; }
  .gnav-links a { padding: 16px 10px; }
  .g-cur { grid-template-columns: 1fr; min-height: 0; }
  .g-cur-art { width: 100%; opacity: .25; mask-image: none; -webkit-mask-image: none; }
  .g-cur-body { padding: 26px 22px; }
  .g-rail { grid-auto-columns: 82%; }
}
.search .ico { z-index: 1; }

/* ---------- «Игровые услуги нового уровня» (новый вид) ---------- */
.fx { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.fx-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: var(--r); background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); isolation: isolate; transition: border-color .2s, transform .2s; }
.fx-card:hover { border-color: var(--line2); transform: translateY(-2px); }
.fx-card h3 { font-size: 20px; margin: 14px 0 4px; }
.fx-card > p, .fx-pay-text > p { margin: 0; color: var(--text2); font-size: 14px; }
.fx-top { display: flex; justify-content: space-between; align-items: center; }
.fx-num { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--accent); letter-spacing: .08em; }
.fx-num::before { content: ''; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--accent); }

/* 01 — чат */
.fx-chat { grid-row: span 2; }
.fx-chat::before { content: ''; position: absolute; inset: auto -30% -30% -30%; height: 70%; z-index: -1; background: radial-gradient(closest-side, rgba(29,78,216,.28), transparent); }
.fx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--green); }
.fx-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.18); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }
.fx-chatbox { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; margin-top: 18px; padding: 16px; border-radius: var(--r-sm); background: rgba(8,15,29,.55); box-shadow: inset 0 0 0 1px var(--line); }
.fx-chathead { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.fx-chathead .ava { background: var(--accent); color: var(--on-accent); font-family: var(--font-display); border-radius: 0; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.fx-chathead .logo-mark,.demo-chat .mock-who .logo-mark { flex: 0 0 34px; width: 34px; height: 34px; }
.fx-chathead small { display: block; color: var(--muted); font-size: 12px; }
.fx-chatbox .bub { font-size: 14px; }
.bub.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.bub.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.bub.typing i:nth-child(2) { animation-delay: .2s; } .bub.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* 02 — гарантия */
.fx-guard::before { content: ''; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; z-index: -1; background: radial-gradient(closest-side, rgba(37,99,235,.16), transparent); }
.fx-big { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.fx-big b { font-family: var(--font-display); font-size: clamp(44px, 5vw, 64px); line-height: 1; color: var(--accent); letter-spacing: -.03em; text-shadow: 0 0 40px rgba(37,99,235,.25); }
.fx-shield .ico { width: 64px; height: 64px; padding: 14px; color: #fff; background: linear-gradient(135deg, var(--violet), #38bdf8); clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); stroke-width: 1.7; }

/* 03 — приватность */
.fx-mask { display: grid; gap: 8px; margin-top: 18px; }
.fx-field { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 10px 12px; background: rgba(8,15,29,.55); box-shadow: inset 0 0 0 1px var(--line2); border-radius: var(--r-sm); }
.fx-field b { grid-column: 1; font-size: 14px; letter-spacing: .03em; }
.fx-field .lockchip, .fx-field > .ico { grid-column: 2; grid-row: 1 / span 2; }
.fx-field .lockchip { width: 34px; height: 34px; }
.fx-field.off { opacity: .7; }
.fx-field.off b { color: var(--accent); }
.fx-field.off > .ico { color: var(--muted); width: 20px; height: 20px; }

/* 04 — оплата (широкая, текст слева, схема справа) */
.fx-pay { grid-column: span 2; flex-direction: row; align-items: center; gap: 28px; }
.fx-pay-text { flex: 1.1; display: flex; flex-direction: column; gap: 6px; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fx-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 13px; font-weight: 700; background: rgba(8,15,29,.5); box-shadow: inset 0 0 0 1px var(--line2); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.fx-chips span.on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.fx-flow { flex: 1; position: relative; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 6px; padding: 22px 18px 72px; border-radius: var(--r-sm); background: rgba(8,15,29,.55); box-shadow: inset 0 0 0 1px var(--line); }
.fx-step { display: grid; justify-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text2); }
.fx-step span { display: grid; place-items: center; width: 38px; height: 38px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.fx-step.done span { background: var(--violet); color: #fff; box-shadow: none; }
.fx-step.now span { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.fx-line { height: 2px; background: linear-gradient(90deg, var(--violet), var(--accent)); margin-bottom: 20px; }
.fx-receipt { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line2); }
.fx-receipt b { font-family: var(--font-display); font-size: 18px; }
.fx-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--accent); }

@media (max-width: 980px) {
  .fx { grid-template-columns: 1fr 1fr; }
  .fx-chat { grid-row: auto; grid-column: span 2; }
  .fx-chatbox { min-height: 0; }
}
@media (max-width: 720px) {
  .fx { grid-template-columns: 1fr; }
  .fx-chat, .fx-pay { grid-column: auto; }
  .fx-pay { flex-direction: column; align-items: stretch; gap: 18px; }
}
.cur-switch a { min-width: 30px; text-align: center; }
.rub-note { margin: 2px 0 0; }
@media (max-width: 480px) { .cur-switch a, .lang-switch a { padding: 4px 6px; min-width: 0; } }
.prefs { display: inline-flex; gap: 8px; }
.menu-prefs { display: none; }
@media (max-width: 860px) {
  .top-right .prefs { display: none; }
  .menu-prefs { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 0 4px; border-top: 1px solid var(--line); }
}

/* ---------- Название игры поверх обложки ---------- */
.cover-art { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; container-type: inline-size; }
.cover-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-title {
  position: absolute; left: 6%; right: 6%; bottom: 7%; text-align: center;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .98; letter-spacing: -.01em;
  font-size: clamp(14px, 12cqw, 46px);
  background: linear-gradient(180deg, #fff 0%, #fff 45%, color-mix(in srgb, var(--c1) 55%, #fff) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 14px color-mix(in srgb, var(--c1) 70%, transparent));
  text-wrap: balance;
}
.cover-title::after { content: ''; display: block; width: 28%; height: 4px; margin: 8px auto 0; background: var(--c1); box-shadow: 0 0 12px var(--c1); }
.h-bgtile .cover-title, .g-cur-art .cover-title, .gbanner-cover .cover-title, .cat-hero-bg .cover-title { display: none; }

/* ---------- Живой чат ---------- */
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chat-head h3 { margin: 0; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live-dot.on { color: var(--green); }
.live-dot.on::before { background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.18); animation: pulse 1.8s ease-in-out infinite; }
.msg-new { animation: msgIn .25s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Подсказки поиска ---------- */
.search, .h-search { position: relative; }
.h-search { clip-path: none; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 50; max-height: 70vh; overflow-y: auto; padding: 8px; text-align: left;
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: var(--shadow); }
.sg-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sg-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--text); }
.sg-item:hover, .sg-item.active { background: var(--card2); color: var(--text); }
.sg-item.active { box-shadow: inset 3px 0 0 var(--accent); }
.sg-thumb { flex: none; width: 34px; height: 45px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--bg2); }
.sg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.sg-name b { color: var(--accent); font-weight: 800; }
.sg-name small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.sg-n { flex: none; font-size: 12px; color: var(--muted); }
.sg-price { flex: none; text-align: right; font-weight: 800; font-size: 14px; }
.sg-price small { display: block; color: var(--muted); font-weight: 500; font-size: 11px; }
.sg-none { padding: 12px 10px; color: var(--muted); font-size: 14px; }
.sg-all { justify-content: center; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--accent); font-weight: 700; font-size: 13px; }
.h-hero { overflow: visible; z-index: 5; }
.h-hero-clip { position: absolute; inset: 0; overflow: hidden; z-index: -2; }
.h-hero::after { z-index: -1; }
.ticker-wrap { position: relative; z-index: 1; }

/* ---------- Админка: фильтры товаров ---------- */
.ptools { justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.psearch { flex: 1; max-width: 360px; }
.psort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.psort select { width: auto; padding: 8px 10px; }
.filters { display: grid; gap: 10px; padding: 16px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flabel { width: 64px; flex: none; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; font-size: 13px; font-weight: 600; color: var(--text2); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.fchip:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--line2); }
.fchip.active { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.fchip span { font-size: 11px; font-weight: 800; opacity: .7; }
.gtile.xs { width: 20px; height: 20px; font-size: 8px; border-radius: 5px; }
.pg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ptable td { white-space: normal; }
.ptable tr.is-hidden td { opacity: .55; }
.ptable tr.is-hidden td:last-child, .ptable tr.is-hidden td:nth-last-child(2) { opacity: 1; }
.nowrap { flex-wrap: nowrap; gap: 6px; }
.tgl { font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; padding: 4px 10px; border: 0; color: var(--muted); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2);
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.tgl.on { background: rgba(34,197,94,.16); color: #86efac; box-shadow: none; }
.tgl.star { font-size: 14px; padding: 2px 9px; }
.tgl.star.on { background: var(--accent); color: var(--on-accent); }
.tgl:hover { color: var(--text); }
@media (max-width: 720px) { .flabel { width: 100%; } .psearch { max-width: none; } }

.catalog-box{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-top:24px;padding:18px 20px;flex-wrap:wrap}
.catalog-box p{margin:6px 0 0;max-width:640px}

/* ---------- Доставка: статус «Доставлен», подтверждение, пруфы ---------- */
.st-teal { background: rgba(45,212,191,.15); color: #5eead4; }
.confirm-box { border-color: rgba(37,99,235,.35); }
.confirm-box.is-delivered { background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(29,78,216,.08)); border-color: var(--accent); }
.confirm-box h3 { margin-top: 0; }
.confirm-box form { margin: 14px 0 8px; }
.proofs { margin: 12px 0; }
.proofs-lbl { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.proofs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.proofs-grid .msg-file { margin: 0; }
.proofs-grid .msg-file img, .proofs-grid video.msg-file { width: 100%; height: 120px; object-fit: cover; }
.msg-file { display: block; margin: 6px 0 4px; border-radius: 10px; overflow: hidden; max-width: 320px; background: #000; }
.msg-file img { display: block; width: 100%; max-height: 260px; object-fit: contain; }
video.msg-file { width: 100%; max-height: 260px; }
.proof-form { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.proof-drop { display: block; padding: 14px; border: 1.5px dashed var(--line); border-radius: 12px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.proof-drop:hover, .proof-drop.drag { border-color: var(--accent); background: rgba(37,99,235,.06); }
.proof-drop.has-files { border-style: solid; border-color: var(--accent); }
.proof-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.proof-drop b { display: block; margin-bottom: 2px; }
.proof-form .check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.proof-form .row { display: flex; gap: 12px; align-items: center; }
.proof-bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.proof-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* ---------- Кнопки заказа в админке ---------- */
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 6px; padding: 14px; border-radius: 12px; background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.25); }
.order-actions form { margin: 0; }
.order-actions .act-hint { flex-basis: 100%; margin: 0 0 2px; font-size: 14px; }
.btn-danger { color: #fca5a5 !important; border-color: rgba(248,113,113,.45) !important; }
.btn-danger:hover { background: rgba(248,113,113,.12) !important; }
.manual-status { margin: 10px 0 6px; }
.manual-status summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.manual-status form { margin-top: 8px; }

/* ---------- Сводка: продажи ---------- */
.live-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lchip { display: inline-flex; gap: 6px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--text2); font-size: 14px; }
.lchip b { color: var(--text); font-size: 16px; }
.lchip.hot { border-color: var(--accent); }
.lchip.hot b { color: var(--accent); }
a.lchip:hover { border-color: var(--line2); color: var(--text); }
.scope { margin: -4px 0 16px; }
.stats5 { grid-template-columns: repeat(5, 1fr); margin-bottom: 18px; }
.stats5 .stat b { font-size: 22px; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.btable td:first-child { width: 60%; }
.mbar { height: 4px; margin-top: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.mbar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.rchart { position: relative; padding-top: 22px; }
.rc-max { position: absolute; top: 0; left: 0; }
.rc-bars { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; height: 200px; align-items: end; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 49px, rgba(255,255,255,.04) 49px 50px); }
.rc-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; outline: none; cursor: default; }
.rc-bar { width: 100%; max-width: 40px; margin: 0 auto; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 0; transition: opacity .15s; }
.rc-bar.zero { height: 2px !important; background: var(--line2); }
.rc-bars:hover .rc-bar { opacity: .45; }
.rc-col:hover .rc-bar, .rc-col:focus .rc-bar { opacity: 1; }
.rc-x { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.rchart { padding-bottom: 26px; }
.rc-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: none; z-index: 5; padding: 8px 10px; border-radius: 8px; background: #142139; border: 1px solid var(--line2); white-space: nowrap; font-size: 12px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); pointer-events: none; }
.rc-tip b { display: block; font-size: 14px; }
.rc-tip span { color: var(--muted); }
.rc-col:hover .rc-tip, .rc-col:focus .rc-tip { display: block; bottom: auto; top: -46px; }
.rc-col:first-child .rc-tip, .rc-col:nth-child(2) .rc-tip { left: 0; transform: none; }
.rc-col:last-child .rc-tip, .rc-col:nth-last-child(2) .rc-tip { left: auto; right: 0; transform: none; }
@media (max-width: 900px) { .stats5 { grid-template-columns: repeat(3, 1fr); } .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .stats5 { grid-template-columns: repeat(2, 1fr); } .rc-bars { gap: 2px; } .rchart.dense .rc-x { font-size: 10px; } }

/* ---------- Статьи (блог) ---------- */
.blog-head { margin: 8px 0 18px; max-width: 760px; }
.blog-head h1 { margin: 0 0 8px; }
.blog-filter { margin-bottom: 20px; }
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.a-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; color: var(--text); transition: border-color .15s, transform .15s; }
.a-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.a-cover { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--card2); }
.a-cover-ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.a-cover-ph span { font-family: Unbounded, sans-serif; font-weight: 800; font-size: 34px; color: rgba(255,255,255,.9); text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.a-card-body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.a-card-body b { font-size: 17px; line-height: 1.3; }
.a-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.a-tag { padding: 2px 8px; border-radius: 6px; background: var(--violet-soft, rgba(29,78,216,.15)); color: #93c5fd; font-weight: 700; font-size: 12px; }
.a-more { display: inline-flex; gap: 6px; align-items: center; color: var(--accent); font-weight: 700; font-size: 14px; }
.pager { display: flex; gap: 6px; justify-content: center; margin: 24px 0; }
.article { max-width: 1060px; }
.a-head { max-width: 780px; margin: 6px 0 22px; }
.a-head h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; margin: 10px 0 12px; }
.a-lead { font-size: 18px; color: var(--text2); margin: 0; }
.a-hero { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--r); margin-bottom: 26px; }
.a-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 40px; align-items: start; }
.a-layout:not(:has(.a-toc)) { grid-template-columns: minmax(0, 780px); }
.a-toc { position: sticky; top: 90px; display: grid; gap: 6px; font-size: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.a-toc b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.a-toc a { color: var(--text2); } .a-toc a:hover { color: var(--accent); }
.a-toc .lvl3 { padding-left: 12px; font-size: 13px; }
.a-body { font-size: 17px; line-height: 1.75; color: var(--text2); }
.a-body h2 { font-size: 26px; color: var(--text); margin: 36px 0 12px; scroll-margin-top: 90px; }
.a-body h3 { font-size: 20px; color: var(--text); margin: 28px 0 10px; scroll-margin-top: 90px; }
.a-body h4 { font-size: 17px; color: var(--text); margin: 22px 0 8px; }
.a-body p { margin: 0 0 16px; }
.a-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.a-body strong { color: var(--text); }
.a-body ul, .a-body ol { margin: 0 0 18px; padding-left: 22px; } .a-body li { margin: 6px 0; }
.a-body img { display: block; max-width: 100%; border-radius: 12px; margin: 18px 0; }
.a-body blockquote { margin: 18px 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: rgba(37,99,235,.06); border-radius: 0 10px 10px 0; color: var(--text); }
.a-body code { padding: 1px 6px; border-radius: 5px; background: var(--card2); font-size: .9em; }
.a-body hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.a-shop, .a-related { margin-top: 44px; }
.a-shop .g-head h2, .a-related h2 { margin: 0; }
.a-related .a-grid { margin-top: 16px; }
@media (max-width: 860px) { .a-layout { grid-template-columns: 1fr; gap: 18px; } .a-toc { position: static; } .a-body { font-size: 16px; } }
/* Редактор статьи */
.art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.art-side { display: grid; gap: 16px; position: sticky; top: 84px; }
.art-form .form { gap: 14px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6; }
.slug-row { display: flex; align-items: center; gap: 6px; }
.slug-row input { flex: 1; }
.cnt { float: right; font-size: 12px; color: var(--muted); font-weight: 600; }
.cnt.near { color: #fbbf24; } .cnt.over { color: #f87171; }
.md-help pre { white-space: pre-wrap; font-size: 13px; background: var(--card2); padding: 12px; border-radius: 10px; margin: 8px 0; }
.md-help summary, .en-block summary { cursor: pointer; }
.en-block { display: grid; gap: 12px; padding-top: 6px; border-top: 1px dashed var(--line); }
.en-block[open] > summary { margin-bottom: 6px; }
.check.pub { font-size: 16px; }
.seo-box h3 { margin: 0; }
.serp-box { display: grid; gap: 3px; margin-top: 6px; padding: 12px 14px; background: #fff; border-radius: 10px; font-family: Arial, sans-serif; }
.serp-url { color: #202124; font-size: 12px; }
.serp-title { color: #1a0dab; font-size: 18px; font-weight: 400; line-height: 1.3; }
.serp-desc { color: #4d5156; font-size: 13px; line-height: 1.45; }
.seo-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.seo-checks li { padding-left: 22px; position: relative; }
.seo-checks li.ok { color: var(--text2); } .seo-checks li.ok::before { content: '✓'; position: absolute; left: 4px; color: var(--accent); font-weight: 800; }
.seo-checks li.no { color: var(--muted); } .seo-checks li.no::before { content: '○'; position: absolute; left: 4px; color: #fbbf24; }
.seo-checks li.seo-score { padding: 0; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.seo-tips ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text2); }
.del-form { margin-top: 16px; }
@media (max-width: 1000px) { .art-grid { grid-template-columns: 1fr; } .art-side { position: static; } }


/* Promo code input and apply action on one line */
.coupon-row { display: flex; align-items: stretch; gap: 8px; margin-top: 6px; }
.coupon-row input { flex: 1 1 auto; min-width: 0; width: 0; }
.coupon-row .coupon-apply { flex: 0 0 auto; white-space: nowrap; padding-inline: 18px; }
@media (max-width: 420px) { .coupon-row { gap: 6px; } .coupon-row .coupon-apply { padding-inline: 12px; } }

/* Product badge editor (admin only). */
.offer-badges-admin { margin-top: 16px; display: grid; gap: 13px; }
.offer-badge-editor-list { display: grid; gap: 8px; }
.offer-badge-edit-row { display: grid; grid-template-columns: 135px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 9px; align-items: end; padding: 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 11px; }
.offer-badge-edit-row label { min-width: 0; }
.offer-badge-edit-row label input, .offer-badge-edit-row label select { min-width: 0; width: 100%; }
.offer-badge-controls { display: flex; gap: 3px; align-items: center; padding-bottom: 2px; }
.offer-badge-controls button { min-width: 33px; height: 34px; padding: 3px; border-radius: 7px; border: 1px solid var(--line2); background: var(--card); color: var(--text2); cursor: pointer; }
.offer-badge-controls button:hover { background: var(--accent-soft); border-color: var(--accent); }
.offer-badge-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.offer-badge-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.offer-badge-preview { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; }
.offer-badge-preview > span { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 1px solid #3479ee; border-radius: 25px; padding: 6px 10px; font-size: 12px; font-weight: 650; color: #f0f6ff; background: #14243a; overflow-wrap: anywhere; }
.offer-badge-preview > span .ico { width: 16px; height: 16px; flex-shrink: 0; }
/* Editable offer badges share the same icon-based palette in the shop and preview. */
.offer-highlight[data-badge-icon], .offer-badge-preview > span[data-badge-icon] {
  --offer-badge-color: #A8B7CD; --offer-badge-rgb: 168,183,205;
  color: var(--offer-badge-color); border-color: rgba(var(--offer-badge-rgb), .38);
  background: linear-gradient(rgba(var(--offer-badge-rgb), .07), rgba(var(--offer-badge-rgb), .07)), #111C30;
}
.offer-highlight[data-badge-icon="currency"], .offer-highlight[data-badge-icon="trophy"], .offer-highlight[data-badge-icon="star"],
.offer-badge-preview > span[data-badge-icon="currency"], .offer-badge-preview > span[data-badge-icon="trophy"], .offer-badge-preview > span[data-badge-icon="star"] {
  --offer-badge-color: #F5C84C; --offer-badge-rgb: 245,200,76;
}
.offer-highlight[data-badge-icon="check"], .offer-highlight[data-badge-icon="shield"], .offer-highlight[data-badge-icon="lock"], .offer-highlight[data-badge-icon="bolt"], .offer-highlight[data-badge-icon="clock"],
.offer-badge-preview > span[data-badge-icon="check"], .offer-badge-preview > span[data-badge-icon="shield"], .offer-badge-preview > span[data-badge-icon="lock"], .offer-badge-preview > span[data-badge-icon="bolt"], .offer-badge-preview > span[data-badge-icon="clock"] {
  --offer-badge-color: #4ADE80; --offer-badge-rgb: 74,222,128;
}
.offer-highlight[data-badge-icon="boost"], .offer-highlight[data-badge-icon="gamepad"],
.offer-badge-preview > span[data-badge-icon="boost"], .offer-badge-preview > span[data-badge-icon="gamepad"] {
  --offer-badge-color: #A78BFA; --offer-badge-rgb: 167,139,250;
}
.offer-highlight[data-badge-icon="gem"], .offer-highlight[data-badge-icon="globe"], .offer-highlight[data-badge-icon="headset"], .offer-highlight[data-badge-icon="users"],
.offer-badge-preview > span[data-badge-icon="gem"], .offer-badge-preview > span[data-badge-icon="globe"], .offer-badge-preview > span[data-badge-icon="headset"], .offer-badge-preview > span[data-badge-icon="users"] {
  --offer-badge-color: #38BDF8; --offer-badge-rgb: 56,189,248;
}
/* Hot badge: vivid ember red with a warm halo.
   Scope to the fire icon so Gold, Boosting, Items and other badges keep their palettes. */
.offer-highlight[data-badge-icon="fire"], .offer-badge-preview > span[data-badge-icon="fire"] {
  --offer-badge-color: #FF8072;
  --offer-badge-rgb: 255,69,58;
  color: var(--offer-badge-color);
  background: linear-gradient(145deg, #64191D 0%, #390E15 100%);
  border-color: #FF453A;
  box-shadow: 0 0 16px rgba(255,59,48,.40), 0 3px 9px rgba(71,6,12,.28), inset 0 1px 0 rgba(255,155,133,.19);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.offer-highlight[data-badge-icon="fire"]:hover {
  border-color: #FF8172;
  box-shadow: 0 0 22px rgba(255,59,48,.52), 0 3px 10px rgba(71,6,12,.32), inset 0 1px 0 rgba(255,155,133,.24);
}
.offer-highlight[data-badge-icon] > .ico, .offer-badge-preview > span[data-badge-icon] > .ico { color: inherit; }

/* One category-aware product benefits component, shared by all four layouts. */
.why-g2u {
  container-type: inline-size; isolation: isolate; overflow: hidden; min-width: 0;
  margin-top: 30px; padding: clamp(18px, 2.2vw, 28px); border: 1px solid #2C445E;
  border-radius: 18px; background: #0D1A2C; color: #F6F8FF;
}
.why-g2u-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(90px, 16%, 140px); align-items: center; gap: 22px; }
.why-g2u-content { min-width: 0; }
.why-g2u-heading { margin-bottom: 22px; }
.why-g2u .why-g2u-heading h2 { margin: 0 0 10px; color: #F6F8FF; font-size: clamp(21px, 2vw, 28px); line-height: 1.35; overflow-wrap: anywhere; }
.why-g2u-heading p { margin: 0; color: #A2B4CD; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.why-g2u-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; padding: 0; margin: 0; list-style: none; }
.why-g2u-card {
  --why-tone: #7DB3FF; --why-rgb: 125,179,255;
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 10px;
  padding: 17px; border: 1px solid #2C445E; border-radius: 12px; background: #13253A;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.why-g2u-card[data-benefit-tone="green"] { --why-tone: #4ADE80; --why-rgb: 74,222,128; }
.why-g2u-card[data-benefit-tone="gold"] { --why-tone: #F5C84C; --why-rgb: 245,200,76; }
.why-g2u[data-why-category="item"] .why-g2u-card[data-benefit-tone="blue"] { --why-tone: #60A5FA; --why-rgb: 96,165,250; }
.why-g2u-card[data-benefit-tone="violet"] { --why-tone: #A78BFA; --why-rgb: 167,139,250; }
.why-g2u-card[data-benefit-tone="orange"] { --why-tone: #FB923C; --why-rgb: 251,146,60; }
.why-g2u-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; margin-bottom: 2px; border-radius: 10px; color: var(--why-tone); background: rgba(var(--why-rgb), .08); }
.why-g2u-icon .ico { width: 24px; height: 24px; }
.why-g2u .why-g2u-card h3 { margin: 0; font-family: var(--font); color: #F6F8FF; font-size: 14px; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; }
.why-g2u-card p { margin: 0; color: #A2B4CD; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.why-g2u-brand { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; min-width: 0; opacity: .45; user-select: none; }
.why-g2u-brand::before { content: ''; position: absolute; inset: -40px -30px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse, #2563eb55, transparent 70%); }
.why-g2u-brand .logo-mark { width: 88px; height: 88px; border-radius: 0; background: transparent; box-shadow: none; }
.why-g2u-brand .logo-mark svg { display: block; width: 100%; height: 100%; }
.why-g2u-brand > span:last-child { font-family: var(--font-display); font-size: clamp(25px, 2.5vw, 37px); font-weight: 800; line-height: 1; white-space: nowrap; }
.why-g2u-footer { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; padding-top: 17px; border-top: 1px solid #2C445E; color: #A2B4CD; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.why-g2u-footer .ico { flex: 0 0 16px; width: 16px; height: 16px; color: #4ADE80; }
@media (hover: hover) { .why-g2u-card:hover { border-color: #476483; background: #162B42; box-shadow: 0 6px 18px #0002; } }
@container (max-width: 560px) {
  .why-g2u-layout { grid-template-columns: minmax(0, 1fr) 78px; gap: 14px; }
  .why-g2u-card { padding: 13px; }
  .why-g2u-brand .logo-mark { width: 68px; height: 68px; }
  .why-g2u-brand > span:last-child { font-size: 25px; }
}
@container (max-width: 440px) {
  .why-g2u-layout { grid-template-columns: minmax(0, 1fr); }
  .why-g2u-brand { display: none; }
}
@container (max-width: 360px) { .why-g2u-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }
@media (max-width: 760px) {
  .why-g2u-layout { grid-template-columns: minmax(0, 1fr); }
  .why-g2u-brand { display: none; }
}
@media (max-width: 420px) {
  .why-g2u { padding: 16px; border-radius: 14px; }
  .why-g2u-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}
@media (prefers-reduced-motion: reduce) { .why-g2u-card { transition: none; } }
@media (max-width: 820px) { .offer-badge-edit-row { grid-template-columns: 1fr 1fr; } .offer-badge-edit-row label:nth-child(1) { grid-column: 1 / -1; } .offer-badge-controls { justify-content: flex-end; } }
@media (max-width: 490px) { .offer-badge-edit-row { grid-template-columns: 1fr; } .offer-badge-edit-row label:nth-child(1) { grid-column: auto; } }

/* Ocean Blue finishing touches (shared public/admin interfaces) */
:root { --blue-focus: rgba(59,130,246,.24); }
body { background-color: var(--bg); }
.topbar { background: rgba(8,18,34,.91); border-color: rgba(96,165,250,.16); }
.footer { background: rgba(9,21,38,.94); }
.btn:not(.btn-ghost):not(.btn-pill-ghost):not(.btn-danger) { box-shadow: 0 5px 19px rgba(29,78,216,.22); }
.btn:not(.btn-ghost):not(.btn-pill-ghost):not(.btn-danger):hover { box-shadow: 0 7px 23px rgba(37,99,235,.3); }
.btn:focus-visible, .icon-btn:focus-visible, a:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
input:focus, select:focus, textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px var(--blue-focus); }
input[type=checkbox], input[type=radio] { accent-color: #2563eb; }
::selection { background: rgba(59,130,246,.42); color: #fff; }

/* Home 2026: polished category shortcuts and matching trust strip.
   Deliberately scoped to home; ticker and other product/admin icons stay as they were. */
.h-cats { gap: 14px 17px; align-items: stretch; }
.h-cat {
  position: relative; width: 98px; padding: 8px 4px 10px; gap: 9px;
  color: #dce8fb; font-size: 12px; line-height: 1.35;
  transition: color .18s ease, transform .18s ease;
}
.h-cat .ibox {
  position: relative; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 17px;
  background: linear-gradient(145deg, rgba(15,33,60,.92), rgba(8,17,34,.98));
  border: 1px solid rgba(88,130,201,.24);
  box-shadow: inset 0 1px 0 rgba(156,191,240,.08), 0 10px 22px rgba(0,0,0,.22);
  color: #4f8dff;
  transition: transform .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.h-cat .ico { width: 27px; height: 27px; stroke-width: 1.7; opacity: .92; }
.h-cat-label { display: block; white-space: nowrap; }
.h-cat:hover, .h-cat:focus-visible { color: #fff; transform: translateY(-2px); }
.h-cat:hover .ibox, .h-cat:focus-visible .ibox {
  color: #dcecff; border-color: #5b9bff;
  background: linear-gradient(145deg, #173d78, #102a54);
  box-shadow: 0 10px 25px rgba(18,56,120,.28), 0 0 0 3px rgba(96,165,250,.10);
}
.h-cat:focus-visible { outline: 2px solid #93c5fd; outline-offset: 4px; border-radius: 8px; }
.h-cat:active .ibox { transform: scale(.96); }
.h-benefits { margin-top: 16px; margin-bottom: 0; }
.h-benefits-inner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #244061; border-radius: 16px;
  background: linear-gradient(110deg, #102744, #0d213b 55%, #0c1d35);
  box-shadow: inset 0 1px 0 rgba(130,183,255,.10), 0 12px 30px rgba(0,0,0,.14);
  padding: 12px 4px;
}
.h-benefit { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 18px; }
.h-benefit + .h-benefit { border-left: 1px solid #30496b; }
.h-benefit-icon {
  flex: 0 0 48px; height: 48px; display: grid; place-items: center;
  border-radius: 14px;
  color: #56aeff;
  background: linear-gradient(135deg, rgba(37,99,235,.21), rgba(4,20,40,.25));
  border: 1px solid rgba(96,165,250,.19);
}
.h-benefit:nth-child(2) .h-benefit-icon { color: #38c3ff; }
.h-benefit:nth-child(3) .h-benefit-icon { color: #7c9cff; }
.h-benefit:nth-child(4) .h-benefit-icon { color: #60a5fa; }
.h-benefit-icon .ico { width: 26px; height: 26px; stroke-width: 1.85; }
.h-benefit-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.h-benefit-copy strong { font-size: 13px; line-height: 1.3; color: #f4f8ff; font-weight: 750; }
.h-benefit-copy small { font-size: 11px; line-height: 1.45; color: #9eb3d1; }
@media (max-width: 1040px) {
  .h-benefits-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-benefit:nth-child(3) { border-left: 0; }
  .h-benefit:nth-child(n+3) { border-top: 1px solid #30496b; }
}
@media (max-width: 620px) {
  .h-cats { gap: 6px 4px; justify-content: space-around; }
  .h-cat { width: 30%; padding: 6px 2px; font-size: 11px; }
  .h-cat .ibox { width: 54px; height: 54px; border-radius: 15px; }
  .h-benefits { margin-top: 10px; }
  .h-benefits-inner { padding: 6px 3px; gap: 0; }
  .h-benefit { gap: 8px; padding: 12px 9px; }
  .h-benefit-icon { flex-basis: 36px; height: 36px; border-radius: 10px; }
  .h-benefit-icon .ico { width: 21px; height: 21px; }
  .h-benefit-copy strong { font-size: 11px; }
  .h-benefit-copy small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-cat, .h-cat .ibox { transition: none; }
}


/* Theme polish: less monochrome, softer neutral links, green review stars */
.h-benefits { margin-top: 26px; }
.h-benefit:nth-child(1) .h-benefit-icon { color: #4ade80; }
.h-benefit:nth-child(2) .h-benefit-icon { color: #38bdf8; }
.h-benefit:nth-child(3) .h-benefit-icon { color: #8b5cf6; }
.h-benefit:nth-child(4) .h-benefit-icon { color: #f59e0b; }

.table td > a:not(.btn),
.table td > a:not(.btn) b,
.table td a:not(.btn):not(.fchip):not(.tab):not(.nav-admin) {
  color: #c7d2e5;
  transition: color .16s ease;
}
.table td > a:not(.btn):hover,
.table td > a:not(.btn):hover b,
.table td a:not(.btn):not(.fchip):not(.tab):not(.nav-admin):hover {
  color: #eef4ff;
}

.h-reviews .stars span.on,
.h-rating .stars span.on,
.rev .stars span.on {
  background: #22c55e;
  color: #052814;
}

.g-cur-body .pill {
  background: rgba(255,255,255,.08);
  color: #e6edf9;
  box-shadow: inset 0 0 0 1px rgba(207,222,243,.14);
}
.g-cur-body .pill .ico { color: #dbe7f8; }

.g-cur-price b {
  color: #4f8dff;
  text-shadow: 0 0 36px rgba(79,141,255,.18);
}

.ticker-wrap,
.ticker,
.ticker-2 { display: none !important; }


/* Diablo 4: atmospheric game artwork without changing the global Ocean Blue theme.
   The marker is set server-side from the game slug on game, product and article pages. */
body.game-theme-diablo4 {
  --diablo-rune: #ae5666;
  --diablo-rune-soft: rgba(174,86,102,.35);
  background-color: #080f1d;
}
body.game-theme-diablo4::before {
  content: '';
  position: fixed;
  inset: 68px 0 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(7,15,29,.09), rgba(6,13,25,.27) 72%, rgba(6,13,25,.55)), url('/static/themes/diablo4-ambient.webp?v=1');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
body.game-theme-diablo4 > .main,
body.game-theme-diablo4 > .footer { position: relative; z-index: 1; }
body.game-theme-diablo4 .footer { background: rgba(7,16,30,.97); }
body.game-theme-diablo4 .topbar { background: rgba(7,17,33,.96); }
body.game-theme-diablo4 .gnav { background: rgba(9,19,36,.94); border-bottom-color: rgba(174,86,102,.28); }
body.game-theme-diablo4 .gnav-links a.active::after { background: var(--diablo-rune); }
body.game-theme-diablo4 .gnav-links a.active,
body.game-theme-diablo4 .gnav-links a.active .ico { color: #efb1b8; }
body.game-theme-diablo4 .gnav-links a.active .gnav-n { background: #552737; color: #ffe0e2; }
body.game-theme-diablo4 .crumbs { color: #bdc7d8; }
/* Blue interactive controls intentionally stay blue. Only small thematic details are red. */
body.game-theme-diablo4 .g-game-hero {
  background: linear-gradient(115deg, rgba(14,27,48,.96), rgba(14,25,43,.91));
  border-color: rgba(173,88,102,.40);
  box-shadow: 0 18px 50px rgba(0,0,0,.36);
}
body.game-theme-diablo4 .g-game-hero::after { background: var(--diablo-rune); }
body.game-theme-diablo4 .g-game-hero::before { background: radial-gradient(70% 100% at 20% 75%, rgba(104,38,58,.13), transparent 65%); }
body.game-theme-diablo4 .g-game-hero .pill { color: #e6d6dc; background: rgba(116,53,66,.16); }
body.game-theme-diablo4 .g-game-section .pcard,
body.game-theme-diablo4 .g-game-section .card { background: rgba(17,28,48,.95); }
body.game-theme-diablo4 .product-offer.offer-editorial {
  background: linear-gradient(145deg, rgba(15,27,47,.97), rgba(10,20,37,.965) 64%, rgba(9,18,33,.975));
  border-color: rgba(173,88,102,.38);
  box-shadow: 0 24px 65px rgba(0,0,0,.48);
}
body.game-theme-diablo4 .offer-editorial .offer-copy::before {
  background: radial-gradient(ellipse at 25% 30%, rgba(103,39,58,.11), transparent 75%);
}
body.game-theme-diablo4 .offer-editorial .offer-requirements { border-color: rgba(173,88,102,.30); background: #192d4a; }
body.game-theme-diablo4 .product .buybox { background: rgba(15,27,46,.96); border-color: rgba(173,88,102,.30); }
body.game-theme-diablo4 .product-info { background: rgba(11,22,40,.88); border: 1px solid rgba(173,88,102,.22); border-radius: var(--r); padding: clamp(16px,2.5vw,26px); }
body.game-theme-diablo4 .a-toc, body.game-theme-diablo4 .a-body { background: rgba(12,23,42,.92); border-radius: var(--r); }
body.game-theme-diablo4 .a-body { padding: clamp(16px,3vw,30px); }
@media (max-width: 760px) {
  /* Keep forms and text readable on narrow screens; no horizontal scrolling or costly fixed image. */
  body.game-theme-diablo4::before { background-position: center top; opacity: .5; }
  body.game-theme-diablo4 .product-info { padding: 16px; }
}
/* Product-page additions and saved offers stay scoped to their own components. */
.buybox .product-parameter[data-faction-ready="1"] > .dropdown-trigger, .buybox .product-parameter[data-faction-ready="1"] > .dropdown-menu, .buybox .product-parameter[data-faction-ready="1"] > select { display: none; }
.buybox .faction-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.buybox .faction-card { display: flex; justify-content: center; align-items: center; gap: 8px; min-width: 0; min-height: 58px; padding: 8px; border: 1px solid #344e70; border-radius: 9px; background: #0d1a2c; color: #c7d6e9; cursor: pointer; font: inherit; font-size: 13px; overflow-wrap: anywhere; }
.buybox .faction-card img, .buybox .faction-emblem { display: block; flex-shrink: 0; object-fit: contain; width: 32px; height: 32px; }
.buybox .matrix-group > span:has(> .faction-emblem) { flex-wrap: nowrap; gap: 8px; min-height: 58px; }
.buybox .matrix-group .faction-emblem { margin: 0; }
.buybox .faction-option-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; overflow-wrap: anywhere; }
.buybox .faction-card > span { min-width: 0; text-align: left; }
.buybox .faction-alliance[aria-checked="true"] { border-color: #438aff; background: #153c71; color: #fff; }
.buybox .faction-horde[aria-checked="true"] { border-color: #ed5467; background: #382035; color: #fff; }
.buybox .faction-card:hover { border-color: #7298c4; }
.buybox .faction-card:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }
.wishlist-heart { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #2c445e; border-radius: 50%; background: #0d1a2cf2; color: #f6f8ff; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.wishlist-heart .ico { width: 21px; height: 21px; }
.wishlist-heart:hover { background: #1b3655; border-color: #7298c4; }
.wishlist-heart[aria-pressed="true"] { color: #fb7185; border-color: #fb718580; }
.wishlist-heart[aria-pressed="true"] .ico { fill: currentColor; }
.wishlist-heart:focus-visible, .wishlist-nav:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }
.wishlist-nav [data-wishlist-count][hidden] { display: none; }
.wishlist-heart:disabled { cursor: progress; }
.wishlist-heart.wishlist-inline { position: relative; top: auto; right: auto; margin: 0 0 16px; }
.product-gallery, .wishlist-item { position: relative; min-width: 0; }
.wishlist-item > .pcard { height: 100%; }
.wishlist-grid { margin: 24px 0; }
.product-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 0 0 18px; color: #a2b4cd; font-size: 13px; }
.product-rating > span:first-child { color: #f6f8ff; font-size: 14px; font-weight: 500; }
.product-rating b { color: #f6f8ff; }
.product-rating a { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid #304c70; border-radius: 7px; background: #13253a; color: #dbeafe; font-size: 14px; font-weight: 650; text-underline-offset: 3px; }
.product-rating a:hover { color: #fff; background: #193252; border-color: #60a5fa; }
.product-rating a:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
.product-review-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.product-review-stars .ico { display: block; width: 17px; height: 17px; stroke: currentColor; fill: currentColor; }
.product-review-stars .is-filled { color: #22c55e; }
.product-review-stars .is-empty { color: #40546c; }
.product-reviews { margin: 32px 0; scroll-margin-top: 95px; min-width: 0; }
.product-reviews:focus-visible { outline: 2px solid #93c5fd; outline-offset: 4px; }
.product-reviews h2 { margin-bottom: 8px; }
.product-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; margin: 20px 0; }
.product-review-card { min-width: 0; padding: 20px; background: #0d1a2c; border: 1px solid #2c445e; border-radius: 12px; }
.product-review-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 12px; }
.product-review-card time { margin-left: auto; font-size: 11px; color: #a2b4cd; }
.product-review-avatar { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #304c70; border-radius: 50%; background: #132b46; color: #b5d5ff; }
.product-review-card p { white-space: pre-wrap; overflow-wrap: anywhere; color: #c7d6e9; line-height: 1.7; margin-bottom: 0; }
.product-review-pages { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 540px) { .wishlist-nav { flex-shrink: 0; } .product-review-card { padding: 16px; } }

/* Customer order page: a full-height conversation, distinct from the admin chat. */
.customer-order-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: start;
  gap: 24px;
}
.customer-order-grid > div { min-width: 0; }
.customer-order-grid > .chat {
  min-width: 0;
  min-height: 650px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px;
  border-color: #304a6c;
  background: linear-gradient(165deg, #122139 0%, #101c30 65%);
  box-shadow: 0 16px 42px rgba(0,0,0,.16);
}
.customer-order-grid > .chat .chat-head {
  padding-bottom: 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid #283b56;
}
.customer-order-grid > .chat .msgs {
  flex: 1 1 auto;
  width: 100%;
  min-height: 365px;
  max-height: 510px;
  overflow-y: auto;
  align-content: start;
  gap: 14px;
  padding: 12px 8px 20px 2px;
  scrollbar-width: thin;
  scrollbar-color: #35577e transparent;
}
.customer-order-grid > .chat .msg { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.customer-order-grid > .chat .chat-form {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #283b56;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}
.customer-order-grid > .chat .chat-form textarea {
  min-width: 0;
  min-height: 96px;
  font-size: 15px;
  resize: vertical;
}
.customer-order-grid > .chat .chat-form .btn { min-width: 106px; min-height: 46px; }
@media(max-width:980px) {
  .customer-order-grid { grid-template-columns: minmax(0, 1fr); }
  .customer-order-grid > .chat { min-height: 560px; }
  .customer-order-grid > .chat .msgs { min-height: 300px; max-height: 450px; }
}
@media(max-width:600px) {
  .customer-order-grid { gap: 18px; }
  .customer-order-grid > .chat { min-height: 520px; padding: 16px; }
  .customer-order-grid > .chat .msgs { min-height: 260px; max-height: 400px; }
  .customer-order-grid > .chat .chat-form { grid-template-columns: minmax(0, 1fr); }
  .customer-order-grid > .chat .chat-form textarea { min-height: 86px; }
  .customer-order-grid > .chat .chat-form .btn { width: 100%; }
}

/* G2U ROUND CONTROLS PATCH v1 — keep this block at end */
/* No more polygon-cut corners in header search or its home-page equivalent. */
.search input,
.h-search {
  -webkit-clip-path: none;
  clip-path: none;
  border-radius: 12px;
}
.search input {
  min-height: 44px;
  border: 1px solid var(--line2);
  background: var(--bg2);
}
.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.17);
}
.h-search {
  border-radius: 14px;
  overflow: visible; /* preserve autocomplete dropdown */
}

/* Header: wishlist, cart and account buttons use the same height and radius. */
.top-right > .icon-btn,
.top-right > .btn {
  -webkit-clip-path: none;
  clip-path: none;
  border-radius: 11px;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.top-right > .icon-btn {
  width: 42px;
  min-width: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line2);
  box-shadow: none;
  background: var(--card2);
  color: var(--text);
}
.top-right > .btn {
  padding: 0 16px;
  font-size: 13px;
  line-height: 1.2;
}
.top-right > .btn.btn-ghost {
  border: 1px solid var(--line2);
  box-shadow: none;
  background: var(--card2);
  color: var(--text);
}
.top-right > .icon-btn:hover,
.top-right > .btn.btn-ghost:hover {
  background: #1b304c;
  border-color: #5074a1;
  color: #fff;
}
.top-right > .icon-btn:focus-visible,
.top-right > .btn:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 3px;
}

/* Admin order actions: same dimensions, modern soft corners, distinct meaning. */
.order-actions form { display: inline-flex; }
.order-actions form > .btn {
  -webkit-clip-path: none;
  clip-path: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 134px;
  min-height: 46px;
  height: 46px;
  box-sizing: border-box;
  padding: 0 18px;
  border-radius: 11px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}
.order-actions form > .btn.btn-danger {
  border: 1px solid #dc2626 !important;
  background: #dc2626;
  color: #fff !important;
  box-shadow: 0 5px 19px rgba(220,38,38,.22);
}
.order-actions form > .btn.btn-danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}
@media (max-width: 420px) {
  .top-right > .icon-btn { width: 38px; min-width: 38px; height: 38px; min-height: 38px; }
  .top-right > .btn { height: 38px; min-height: 38px; padding: 0 12px; }
  .order-actions form { flex: 1 1 128px; }
  .order-actions form > .btn { width: 100%; min-width: 0; }
}

/* G2U_GLOBAL_SCROLLBAR_NO_ARROWS_V1 */
/* Consistent Ocean Blue scrollbars; preserve deliberately hidden carousels. */
html { scrollbar-color: #527bb0 #111824; scrollbar-width: thin; }
* { scrollbar-color: #527bb0 #111824; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: #111824; border-radius: 999px; }
*::-webkit-scrollbar-thumb { background: #527bb0; border: 1px solid #111824; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #6f9ddb; }
/* Remove up/down/left/right arrow buttons, including native single buttons. */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}
/* Keep intentionally invisible rails and mobile/navigation scrollbars invisible. */
.g-rail, .gnav-links { scrollbar-width: none; }
.g-rail::-webkit-scrollbar, .gnav-links::-webkit-scrollbar { display: none; }
/* End G2U_GLOBAL_SCROLLBAR_NO_ARROWS_V1 */

/* g2u-game-category-title-links-v1: headings are clickable while preserving existing game page layout. */
.g-page .g2u-game-category-title-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .36em;
  border-radius: 5px;
  transition: color .17s ease;
}
.g-page .g2u-game-category-title-link .ico {
  width: .62em;
  height: .62em;
  color: #70aaff;
  opacity: .65;
  transform: translateY(-.03em);
  transition: opacity .17s ease, transform .17s ease;
}
.g-page .g2u-game-category-title-link:hover,
.g-page .g2u-game-category-title-link:focus-visible { color: #8dc2ff; }
.g-page .g2u-game-category-title-link:hover .ico,
.g-page .g2u-game-category-title-link:focus-visible .ico { opacity: 1; transform: translate(.12em, -.03em); }
.g-page .g2u-game-category-title-link:focus-visible { outline: 2px solid #70aaff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .g-page .g2u-game-category-title-link, .g-page .g2u-game-category-title-link .ico { transition: none; }
}

/* g2u-hide-demo-pause-v1: hide only the pause/resume control; keep the demo running. */
body.is-home .h-steps > .demo-playback { display: none !important; }

/* g2u-transparent-benefits-v1 — Home advantages: fully transparent, original icons and layout. */
body.is-home .h-benefits-inner {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.is-home .h-benefit + .h-benefit {
  border-left-color: rgba(115, 159, 218, .34);
}
@media (max-width: 1040px) {
  body.is-home .h-benefit:nth-child(3) { border-left: 0; }
  body.is-home .h-benefit:nth-child(n+3) { border-top-color: rgba(115, 159, 218, .24); }
}

/* Equal, centered dividers independent of each benefit's text height. */
body.is-home .h-benefit {
  position: relative;
}
body.is-home .h-benefit + .h-benefit {
  border-left: 0;
}
body.is-home .h-benefit + .h-benefit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 48px;
  transform: translateY(-50%);
  background: rgba(115, 159, 218, .34);
  pointer-events: none;
}
@media (max-width: 1040px) {
  body.is-home .h-benefit:nth-child(3)::before { display: none; }
}
@media (max-width: 620px) {
  body.is-home .h-benefit + .h-benefit::before { height: 36px; }
}
@media (min-width: 1041px) {
  body.is-home .h-benefits-inner {
    display: flex;
    padding-left: 0;
    padding-right: 0;
  }

  body.is-home .h-benefit {
    flex: 1 1 auto;
    justify-content: center;
    padding: 12px 20px;
  }

  body.is-home .h-benefit-copy {
    width: auto;
  }

}