/* GxMarket «Neon Vault»: основа: reset, типографика, оболочка (шапка · рейка · док), раскладка трёх версий.
   phone <768 · tablet 768-1023 · desktop ≥1024. Декор и эффекты: fx.css; компоненты, ui.css; экраны, store.css. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--top-h) + var(--safe-t) + 12px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overscroll-behavior-y: none;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }
.faint { color: var(--faint); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ============================== раскладка ============================== */
:root { --rail-w: 0px; }
@media (min-width: 768px) { :root { --rail-w: 92px; --top-h: 60px; } }
@media (min-width: 1024px) { :root { --rail-w: 236px; } }

.app { position: relative; z-index: 1; }
#view {
  min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--top-h) + var(--safe-t) + 14px) var(--gutter) calc(var(--dock-h) + var(--safe-b) + 56px);
  margin-left: var(--rail-w); max-width: calc(1180px + var(--rail-w)); box-sizing: border-box;
}
@media (min-width: 768px) { #view { padding-bottom: 72px; padding-left: calc(var(--gutter) + 12px); } }
@media (min-width: 1280px) { #view { margin-inline: auto; padding-right: var(--gutter); } }

/* ============================== шапка ============================== */
.top { position: fixed; z-index: 40; top: 0; left: var(--rail-w); right: 0; padding-top: var(--safe-t); pointer-events: none; }
.top__in {
  pointer-events: auto; position: relative; height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 var(--gutter);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.top__in::before { /* стеклянная подложка проявляется при прокрутке */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--t) var(--ease);
  background: color-mix(in oklab, var(--ink-1) 72%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(#000 82%, transparent); -webkit-mask-image: linear-gradient(#000 82%, transparent);
}
.top.is-scrolled .top__in::before { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 780; font-size: 17px; letter-spacing: -0.035em; min-height: var(--ctl); }
.brand__mark { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--ink-2); box-shadow: var(--spec), 0 0 0 1px var(--line-2), 0 6px 20px -8px var(--a-60); transition: transform var(--t) var(--ease-spring); }
.brand:active .brand__mark { transform: scale(0.9) rotate(-6deg); }
.brand__mark img { width: 100%; height: 100%; }
.by { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--muted); background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
.by svg { width: 14px; height: 14px; color: var(--info); }
.by:hover { color: var(--text); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--a-40); }
.top__sp { flex: 1; min-width: 0; }
.top__tools { display: flex; align-items: center; gap: 2px; }
.top__tools--wide { display: none; }
@media (min-width: 920px) { .top__tools--wide { display: flex; } }
@media (max-width: 479px) { .by__txt { display: none; } .by { padding: 0 8px; } }

.ibtn { position: relative; width: var(--ctl); height: var(--ctl); border-radius: var(--r-pill); display: grid; place-items: center; color: var(--muted); transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-spring); }
.ibtn svg { width: 21px; height: 21px; }
.ibtn:hover { color: var(--text); background: var(--plate-2); }
.ibtn:active { transform: scale(0.88); }
.ibtn[aria-pressed='true'] { color: var(--accent-ink); }
.ibtn__n { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--grad); color: var(--on-accent); font: 800 11px/18px var(--font); text-align: center; box-shadow: 0 0 14px -2px var(--accent); }
.lang-btn { font: 800 12px/1 var(--font); letter-spacing: 0.05em; }

/* чип баланса */
.bal {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: var(--r-pill); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
  background: var(--plate-2); box-shadow: var(--spec), inset 0 0 0 1px var(--line-2); transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t) var(--ease);
}
.bal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }
.bal:hover { box-shadow: var(--spec), inset 0 0 0 1px var(--a-40), 0 6px 24px -10px var(--a-60); }
.bal:active { transform: scale(0.95); }

/* ============================== док (phone) ============================== */
.dock {
  position: fixed; z-index: 45; left: 12px; right: 12px; bottom: max(12px, var(--safe-b)); height: var(--dock-h); padding: 6px; display: flex; gap: 4px; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink-1) 70%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--spec), inset 0 0 0 1px var(--line-2), var(--shadow-2);
}
.dock__i {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); color: var(--faint); font-weight: 700; font-size: 13px;
  transition: flex-grow 0.5s var(--ease-spring), color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease-spring);
}
.dock__i svg { width: 23px; height: 23px; flex: 0 0 auto; transition: transform var(--t) var(--ease-spring); }
.dock__l { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.5s var(--ease-spring), opacity var(--t) var(--ease); }
.dock__i:active { transform: scale(0.92); }
.dock__i.is-active { flex-grow: 2.3; color: var(--text); background: var(--plate-3); box-shadow: var(--spec), inset 0 0 0 1px var(--a-40), 0 0 28px -8px var(--a-60); }
.dock__i.is-active svg { color: var(--accent-ink); transform: scale(1.06); }
.dock__i.is-active .dock__l { max-width: 80px; opacity: 1; }
@media (min-width: 768px) { .dock { display: none; } }

/* ============================== рейка (tablet/desktop) ============================== */
.rail {
  display: none; position: fixed; z-index: 44; top: 0; bottom: 0; left: 0; width: var(--rail-w); padding: calc(var(--safe-t) + 12px) 12px 16px;
  flex-direction: column; gap: 6px;
}
@media (min-width: 768px) { .rail { display: flex; } }
.rail__brand { height: var(--top-h); display: flex; align-items: center; padding: 0 6px; margin-bottom: 8px; }
.rail__i {
  position: relative; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-radius: var(--r-md); color: var(--muted); font-weight: 650; font-size: 14.5px;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease-spring);
}
.rail__i svg { width: 22px; height: 22px; flex: 0 0 auto; }
.rail__i:hover { color: var(--text); background: var(--plate); }
.rail__i:active { transform: scale(0.97); }
.rail__i.is-active { color: var(--text); background: var(--plate-2); box-shadow: var(--spec), inset 0 0 0 1px var(--a-40), 0 0 30px -10px var(--a-60); }
.rail__i.is-active svg { color: var(--accent-ink); }
.rail__sp { flex: 1; }
@media (max-width: 1023px) { .rail__l { display: none; } .rail__i { justify-content: center; padding: 0; } .rail__brand { display: none; } }

/* ============================== заголовки экранов ============================== */
.lt { margin: 6px 0 14px; }
.lt h1 { font-size: clamp(30px, 7vw, 42px); font-weight: 800; letter-spacing: -0.047em; line-height: 1.04; }
.lt p { margin-top: 6px; color: var(--muted); font-size: 15px; max-width: 52ch; }
.sec { margin-top: 26px; }
.sec__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec__h h2 { font-size: 20px; font-weight: 760; letter-spacing: -0.035em; }
.kicker { font: 650 11.5px/1.2 var(--font); letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); }

/* ============================== подвал ============================== */
.foot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; }
.foot a { transition: color var(--t-fast); }
.foot a:hover { color: var(--text); }
.foot__by { display: inline-flex; align-items: center; gap: 6px; }
.foot__by svg { width: 14px; height: 14px; color: var(--info); }