/* EDGE components. Зависит от tokens.css и base.css. */

/* ---------- Шапка / навигация ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.site-header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--text); flex: none; }
.brand__logo { width: 32px; height: 32px; image-rendering: pixelated; border-radius: 6px; }
.brand__name { font-family: var(--font-pixel); font-size: 1.05rem; letter-spacing: .04em; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav__link { display: block; padding: .5rem .75rem; border-radius: var(--radius); color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 550; transition: color var(--dur-1), background var(--dur-1); }
.nav__link:hover { color: var(--text); background: var(--accent-soft); }
.nav__link[aria-current="page"] { color: var(--text); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius); transition: background var(--dur-1), border-color var(--dur-1); }
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.burger { display: none; gap: 4px; align-content: center; }
.burger__bar { display: block; width: 18px; height: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease), opacity var(--dur-1); }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .burger { display: inline-grid; }
  .site-header__actions { margin-left: auto; }
  .nav { position: absolute; inset: var(--header-h) 0 auto 0; margin: 0; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-2); padding: var(--sp-3) var(--gutter) var(--sp-5); max-height: calc(100vh - var(--header-h)); overflow-y: auto; display: none; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; gap: 2px; }
  .nav__link { padding: .85rem .9rem; font-size: var(--fs-md); }
}

/* ---------- Кнопки ---------- */
.btn { --_bg: var(--surface-2); --_fg: var(--text); --_bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: .6rem 1.15rem;
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); border-radius: var(--radius); box-shadow: var(--bevel);
  font-weight: 600; font-size: var(--fs-sm); text-decoration: none; line-height: 1.2; transition: transform var(--dur-1), filter var(--dur-1), background var(--dur-1); }
.btn:hover { filter: brightness(1.12); color: var(--_fg); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgb(0 0 0 / .3); }
.btn--primary { --_bg: var(--accent-strong); --_fg: var(--text-on-accent); --_bd: transparent; }
.btn--ghost { --_bg: transparent; box-shadow: none; }
.btn--lg { min-height: 52px; padding: .8rem 1.5rem; font-size: var(--fs-md); }
.btn--sm { min-height: 36px; padding: .35rem .8rem; font-size: var(--fs-xs); }
.btn--danger { --_bg: var(--danger-bg); --_fg: var(--danger); --_bd: var(--danger); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.linklike:hover { color: var(--text); }

/* IP-кнопка */
.ip-btn { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius); background: rgb(11 7 22 / .75); box-shadow: var(--bevel); color: #ece8fa; overflow: hidden; text-align: left; padding: 0; min-height: 52px; }
.ip-btn__addr { display: grid; place-items: center start; padding: 0 1rem; font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; }
.ip-btn__act { display: grid; place-items: center; padding: 0 1rem; background: var(--accent-strong); color: #fff; font-weight: 650; font-size: var(--fs-sm); transition: background var(--dur-1); }
.ip-btn:hover .ip-btn__act { background: var(--accent-hover); }
.ip-btn.is-copied .ip-btn__act { background: #15803d; }

/* ---------- Карточки, сетки ---------- */
.section { padding-block: var(--sp-8); position: relative; }
.section--tight { padding-block: var(--sp-7); }
.section__head { max-width: 62ch; margin-bottom: var(--sp-6); }
.eyebrow { font-family: var(--font-pixel); font-size: .65rem; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-2); }
.lede { font-size: var(--fs-lg); color: var(--text-muted); max-width: 60ch; }
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.card { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 88%, var(--bg))); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-1); position: relative; min-width: 0; }
.card h3 { margin-bottom: var(--sp-2); }
.card p:last-child { margin-bottom: 0; }
.card--link { text-decoration: none; color: inherit; display: block; transition: transform var(--dur-2) var(--ease), border-color var(--dur-2); }
.card--link:hover { transform: translateY(-3px); border-color: var(--accent); color: inherit; }
.card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-size: 1.4rem; margin-bottom: var(--sp-4); border: 1px solid var(--border); }

.page-head { padding-block: var(--sp-8) var(--sp-6); position: relative; border-bottom: 1px solid var(--border); background: radial-gradient(60% 120% at 85% -20%, var(--accent-soft), transparent 70%); }
.page-head h1 { margin-bottom: var(--sp-3); }
.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--sp-7); font-size: var(--fs-xl); }
.prose h3 { margin-top: var(--sp-5); font-size: var(--fs-lg); font-family: var(--font-ui); }
.prose li { margin-bottom: var(--sp-2); }

/* ---------- Роли ---------- */
.role { --c: var(--role-player); display: inline-flex; align-items: center; gap: .4em; padding: .15rem .6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: var(--fs-xs); font-weight: 650; line-height: 1.5; white-space: nowrap; }
.role::before { content: ""; width: .55em; height: .55em; background: var(--c); border-radius: 1px; }
.role--owner { --c: var(--role-owner); } .role--admin { --c: var(--role-admin); } .role--moderator { --c: var(--role-moderator); }
.role--helper { --c: var(--role-helper); } .role--builder { --c: var(--role-builder); } .role--youtuber { --c: var(--role-youtuber); }
.role--sponsor { --c: var(--role-sponsor); } .role--vip { --c: var(--role-vip); } .role--player { --c: var(--role-player); }
.role-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }

/* ---------- Статус / бейджи ---------- */
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; background: var(--text-faint); flex: none; vertical-align: .05em; }
.dot--up { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.dot--down { background: var(--danger); }
.dot--warn { background: var(--warn); }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; background: rgb(11 7 22 / .6); border: 1px solid var(--border-strong); font-size: var(--fs-sm); color: #ece8fa; }
.badge { display: inline-block; padding: .1rem .55rem; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 650; background: var(--surface-3); color: var(--text); border: 1px solid var(--border); }
.badge--soon { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.badge--ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.badge--danger { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

/* ---------- Формы ---------- */
.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label, .label { font-weight: 600; font-size: var(--fs-sm); }
.input { width: 100%; min-height: 46px; padding: .6rem .9rem; background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); }
.input::placeholder { color: var(--text-faint); }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.hint { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface-2); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.alert--error { border-color: var(--danger); background: var(--danger-bg); color: var(--text); }
.alert--ok { border-color: var(--ok); background: var(--ok-bg); }
.alert--info { border-color: var(--info); }
.switch { display: flex; gap: var(--sp-3); align-items: flex-start; }
.switch input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent-strong); flex: none; }

/* ---------- Таблицы ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 480px; }
.table--compact { min-width: 0; }
.table th, .table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }

/* ---------- Аватары (блочные, без внешних сервисов) ---------- */
.avatar { width: 36px; height: 36px; border-radius: 4px; image-rendering: pixelated; flex: none; background: var(--surface-3); display: block; }
.player-cell { display: flex; align-items: center; gap: var(--sp-3); }

/* ---------- FAQ / details ---------- */
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--sp-3); }
.faq summary { cursor: pointer; padding: var(--sp-4); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-pixel); font-size: 1.4rem; color: var(--accent); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 var(--sp-4) var(--sp-4); color: var(--text-muted); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Шаги ---------- */
.steps { display: grid; gap: var(--sp-5); counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); list-style: none; padding: 0; margin: 0; }
.step { counter-increment: step; position: relative; padding-top: var(--sp-6); }
.step::before { content: counter(step, decimal-leading-zero); position: absolute; top: -.2rem; left: var(--sp-5); font-family: var(--font-pixel); font-size: 1.5rem; color: var(--accent); text-shadow: 3px 3px 0 var(--accent-soft); line-height: 1; }
.steps--long { grid-template-columns: 1fr; }
.steps--long .step { padding-left: calc(var(--sp-5) + 3.5rem); padding-top: var(--sp-5); }
.steps--long .step::before { top: var(--sp-4); }
@media (max-width: 560px) { .steps--long .step { padding-left: var(--sp-5); padding-top: var(--sp-7); } .steps--long .step::before { top: var(--sp-3); } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: var(--sp-5); transform: translate(-50%, 140%); z-index: var(--z-toast); background: var(--surface-3); color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius); padding: .7rem 1.1rem; box-shadow: var(--shadow-2); transition: transform var(--dur-2) var(--ease); max-width: calc(100vw - 2rem); }
.toast.is-on { transform: translate(-50%, 0); }

/* ---------- Подвал ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-deep); margin-top: var(--sp-8); padding-top: var(--sp-7); }
.site-footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
.footer-title { font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-3); }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.footer-list a { color: var(--text-muted); text-decoration: none; }
.footer-list a:hover { color: var(--text); text-decoration: underline; }
.footer-list .linklike { color: var(--text-muted); text-decoration: none; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-5); margin-top: var(--sp-6); border-top: 1px solid var(--border); color: var(--text-faint); font-size: var(--fs-xs); }

/* ---------- Появление при скролле ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ======================================================================
   ГЛАВНАЯ: сцена «луна над обсидиановым горизонтом»
   ====================================================================== */
.scene { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(620px, 100svh - var(--header-h) - 24px, 860px); display: flex; align-items: center;
  background: linear-gradient(180deg, #04020a 0%, #0b0618 38%, #1b0f3a 78%, #2a1659 100%); color: var(--text); }
.scene::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url("/assets/img/noise.db6613bfa1.png"); opacity: .8; pointer-events: none; }
.scene__stars { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); z-index: 0; transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--sy, 0) * -24px), 0); }
.scene__aurora { position: absolute; inset: 0; z-index: 0; background: radial-gradient(40% 50% at 78% 28%, rgb(123 47 224 / .28), transparent 70%), radial-gradient(50% 40% at 15% 70%, rgb(70 30 140 / .35), transparent 70%); pointer-events: none; }
.scene__moon { position: absolute; z-index: 1; right: clamp(.5rem, 7vw, 8rem); top: clamp(1.5rem, 7vh, 6rem); width: clamp(170px, 30vw, 440px); aspect-ratio: 1; image-rendering: pixelated;
  filter: drop-shadow(0 0 48px var(--glow)) drop-shadow(0 0 140px rgb(123 47 224 / .45));
  transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--sy, 0) * -50px), 0); animation: moon-float 14s ease-in-out infinite; }
@keyframes moon-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.scene__clouds { position: absolute; z-index: 1; left: 0; right: 0; top: 36%; height: 160px; background: url("/assets/img/clouds.0dafbac4c8.svg") repeat-x 0 0 / 1600px 160px; opacity: .8; animation: clouds 180s linear infinite; transform: translateY(calc(var(--sy, 0) * -30px)); }
.scene__clouds--2 { top: 8%; opacity: .45; background-size: 1100px 110px; animation-duration: 260s; animation-direction: reverse; height: 110px; }
@keyframes clouds { to { background-position-x: -1600px; } }
.scene__far, .scene__near { position: absolute; left: 0; width: 100%; z-index: 2; object-fit: cover; object-position: 55% 100%; pointer-events: none; image-rendering: pixelated; }
.scene__far { bottom: 34px; aspect-ratio: 1600 / 260; min-height: 170px; transform: translateY(calc(var(--sy, 0) * -10px)); }
.scene__near { bottom: 0; aspect-ratio: 1600 / 300; min-height: 200px; }
.scene__portal-glow { position: absolute; z-index: 2; bottom: 80px; left: calc(50% + 5.5%); width: 220px; height: 220px; margin-left: -110px; background: radial-gradient(closest-side, rgb(160 90 255 / .5), transparent); mix-blend-mode: screen; animation: glow 4s ease-in-out infinite; pointer-events: none; }
@media (max-width: 900px) { .scene__portal-glow { left: 60%; } }
@keyframes glow { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
.scene__content { position: relative; z-index: 3; padding-block: var(--sp-7) clamp(200px, 24vw, 290px); }
.scene__copy { max-width: 640px; }
.scene h1 { font-size: var(--fs-hero); line-height: 1.3; margin-bottom: var(--sp-5); color: #f6f3ff; text-shadow: 3px 3px 0 #3b1d8a, 0 0 40px rgb(164 124 255 / .35); letter-spacing: 0; }
.scene h1 .accent { color: #c4a8ff; display: block; }
.scene .eyebrow { color: #c4a8ff; }
.scene .lede { color: #cfc7ea; }
.scene__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); align-items: stretch; }
.scene__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.scene .btn--ghost { color: #ece8fa; --_bd: #6a58a8; background: rgb(11 7 22 / .45); }
.scene .btn--primary { --_bg: #6d3fd6; }

/* Дрейфующие «сны»-частицы рисует canvas; здесь — подсветка секций сети */
.network .card { overflow: hidden; }
.network .card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; background: radial-gradient(closest-side, var(--accent-soft), transparent); pointer-events: none; }
.server-stat { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.server-stat strong { color: var(--text); font-variant-numeric: tabular-nums; }

.discord-band { position: relative; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: clamp(1.5rem, 5vw, 3.5rem); background: radial-gradient(70% 140% at 100% 0%, rgb(123 47 224 / .35), transparent 70%), linear-gradient(135deg, #130c26, #1d1240); color: #ece8fa; }
[data-theme="light"] .discord-band { background: radial-gradient(70% 140% at 100% 0%, rgb(123 47 224 / .35), transparent 70%), linear-gradient(135deg, #2a1659, #3b1d8a); }
.discord-band h2 { color: #f6f3ff; max-width: 20ch; }
.discord-band p { color: #cfc7ea; max-width: 52ch; }

.news-list { display: grid; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.news-item { display: grid; gap: var(--sp-1); }
.news-item time { font-size: var(--fs-xs); color: var(--text-faint); letter-spacing: .06em; text-transform: uppercase; }
.news-item h3 { margin: 0; font-family: var(--font-ui); font-size: var(--fs-lg); }
.news-item h3 a { color: var(--text); text-decoration: none; }
.news-item h3 a:hover { color: var(--accent); }

/* ---------- Статус / uptime ---------- */
.uptime { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; margin-top: var(--sp-3); }
.uptime i { display: block; height: 28px; border-radius: 2px; background: var(--ok); opacity: .9; }
.uptime i.is-warn { background: var(--warn); }
.uptime i.is-down { background: var(--danger); }
.uptime i.is-none { background: var(--surface-3); }
.status-row { display: grid; gap: var(--sp-2); }
.status-row__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.big-num { font-family: var(--font-pixel); font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); line-height: 1.2; }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; border-radius: var(--radius-sm); color: transparent !important; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Игроки ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); align-items: center; }
.toolbar .input { flex: 1 1 240px; max-width: 420px; }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.segmented button { background: var(--surface); border: 0; padding: .6rem 1rem; min-height: 44px; color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); }
.segmented button + button { border-left: 1px solid var(--border-strong); }
.segmented button[aria-pressed="true"] { background: var(--accent-strong); color: #fff; }

/* ---------- Донаты ---------- */
.plans { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.plan { display: flex; flex-direction: column; gap: var(--sp-3); }
.plan__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.plan--vip { border-top: 3px solid var(--role-vip); } .plan--sponsor { border-top: 3px solid var(--role-sponsor); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.plan li { padding-left: 1.4rem; position: relative; }
.plan li::before { content: "◆"; position: absolute; left: 0; color: var(--accent); font-size: .7em; top: .35em; }
.tiers { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0; }
.tier { display: flex; align-items: center; gap: var(--sp-3); padding: .7rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; }
.tier:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tier:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tier input { accent-color: var(--accent-strong); width: 18px; height: 18px; }
.tier__price { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-muted); }
legend { padding: 0; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

/* ---------- Кабинет ---------- */
.account { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.account__nav { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 2px; }
.account__nav button { text-align: left; background: transparent; border: 0; border-radius: var(--radius); padding: .75rem .9rem; min-height: 44px; color: var(--text-muted); font-weight: 600; }
.account__nav button:hover { background: var(--accent-soft); color: var(--text); }
.account__nav button[aria-selected="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.account__panel > * + * { margin-top: var(--sp-5); }
.kv { display: grid; grid-template-columns: minmax(110px, 180px) 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.kv dt { color: var(--text-muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.list-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.list-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.list-rows li:last-child { border-bottom: 0; }
.list-rows .grow { flex: 1 1 200px; min-width: 0; }
.login-box { max-width: 480px; margin-inline: auto; }
.divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-faint); font-size: var(--fs-xs); margin: var(--sp-5) 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.token-box { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .06em; padding: var(--sp-3) var(--sp-4); background: var(--bg-deep); border: 1px dashed var(--accent); border-radius: var(--radius); overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .account { grid-template-columns: 1fr; }
  .account__nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); gap: var(--sp-1); }
  .account__nav button { white-space: nowrap; }
  .account__nav button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--accent); }
  .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: var(--sp-3); }
}
.mock-banner { background: var(--warn-bg); border-bottom: 1px solid var(--warn); color: var(--text); text-align: center; padding: .4rem var(--gutter); font-size: var(--fs-xs); }

/* ---------- Карта ---------- */
.map-frame { width: 100%; height: min(72vh, 720px); min-height: 360px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-deep); display: block; }

/* ======================================================================
   скрытая страница снов
   ====================================================================== */
.dream { background: #04020a; color: #ece8fa; min-height: 100vh; }
.dream .site-header, .dream .site-footer { display: none; }
.dream__stage { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; isolation: isolate; overflow: hidden; padding: var(--sp-6) var(--gutter); }
.dream__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.dream__fog { position: absolute; inset: 0; z-index: 0; background: radial-gradient(50% 45% at 50% 52%, rgb(123 47 224 / .38), transparent 70%), radial-gradient(80% 60% at 50% 120%, rgb(60 20 120 / .6), transparent 70%); animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.dream__portal { position: relative; width: clamp(120px, 22vw, 200px); aspect-ratio: 4 / 5; margin: 0 auto var(--sp-6); display: grid; place-items: center; }
.dream__portal-frame { position: absolute; inset: 0; border: 18px solid #1b1033; box-shadow: inset 0 0 0 4px #2b1a52, 0 0 0 4px #0b0715, 0 0 80px rgb(123 47 224 / .6); background: #7b2fe0; }
.dream__portal-frame::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / .18) 0 8deg, transparent 8deg 22deg); mix-blend-mode: overlay; animation: spin 24s linear infinite; }
.dream__portal-frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgb(199 155 255 / .8), transparent); animation: flick 3.4s steps(6, end) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flick { 0%, 100% { opacity: .9; } 30% { opacity: .35; } 60% { opacity: .7; } }
.dream__content { position: relative; z-index: 2; max-width: 560px; }
.dream h1 { font-size: clamp(1.8rem, 1rem + 4vw, 3.6rem); letter-spacing: .08em; text-shadow: 3px 3px 0 #3b1d8a, 0 0 30px rgb(164 124 255 / .6); margin-bottom: var(--sp-4); animation: dream-glitch 7s steps(1, end) infinite; }
@keyframes dream-glitch { 0%, 92%, 100% { transform: none; text-shadow: 3px 3px 0 #3b1d8a, 0 0 30px rgb(164 124 255 / .6); } 93% { transform: translateX(-3px); text-shadow: -3px 0 0 #ff4d8d, 3px 0 0 #4de3ff; } 95% { transform: translateX(2px); } }
.dream p { color: #b9aedc; }
.dream__whisper { font-family: var(--font-pixel); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #9d8be0; margin-top: var(--sp-6); animation: whisper 6s ease-in-out infinite; }
@keyframes whisper { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding-block: var(--sp-9); }
.notfound__code { font-family: var(--font-pixel); font-size: clamp(3rem, 16vw, 7rem); line-height: 1; color: var(--accent); text-shadow: 6px 6px 0 var(--accent-soft); margin: 0; }

@media (max-width: 560px) {
  .scene__content { padding-block: var(--sp-6) 200px; }
  .ip-btn { width: 100%; }
  .ip-btn__addr { flex: 1; font-size: .95rem; }
  .scene__moon { opacity: .5; top: 1rem; right: -2.5rem; }
  .section { padding-block: var(--sp-7); }
}

/* ---------- Утилиты (вместо inline-стилей: CSP без 'unsafe-inline') ---------- */
.h-xl { font-size: clamp(.8rem, .7rem + .45vw, 1rem); line-height: 1.5; } h3.h-xl { font-family: var(--font-ui); font-size: var(--fs-xl); } .m-0 { margin: 0; }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); } .mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.pad-5 { padding: var(--sp-5); } .w-full { width: 100%; } .mx-auto { margin-inline: auto; } .jc-center { justify-content: center; }
.stack-3 { display: grid; gap: var(--sp-3); } .hint-gap { margin: var(--sp-2) 0 var(--sp-4); }
.avatar--lg { width: 48px; height: 48px; } .col-num { width: 3rem; }
.link-plain { color: var(--text); text-decoration: none; } .link-inherit { color: inherit; }
.on-dark { color: #ece8fa; } .on-dark-accent { color: #c4a8ff; }
.band-soft { background: linear-gradient(180deg, transparent, var(--accent-soft), transparent); }
.mt-gap-grid { margin-top: var(--sp-5); }
.prose, .card, .alert { overflow-wrap: anywhere; }
.dream .mock-banner { display: none; }

/* ---------- «Скоро» (кабинет/статистика без Core) ---------- */
.soon-card { max-width: 720px; }
.soon-list { margin-bottom: var(--sp-4); display: grid; gap: var(--sp-2); }

/* ---- скрытая страница-пасхалка (не в навигации, noindex) ---- */
.lit { background: #1c1805; color: #2a2406; min-height: 100vh; }
.lit .site-header, .lit .site-footer, .lit .mock-banner { display: none; }
.lit__stage { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; isolation: isolate; overflow: hidden; padding: var(--sp-6) var(--gutter); }
.lit__walls { position: absolute; inset: 0; z-index: 0; background:
  repeating-linear-gradient(90deg, rgb(120 100 20 / .35) 0 2px, transparent 2px 64px),
  repeating-linear-gradient(0deg, rgb(255 244 160 / .06) 0 3px, transparent 3px 7px),
  linear-gradient(180deg, #cdbb55 0%, #b3a03c 55%, #8f7e28 100%); }
.lit__flicker { position: absolute; inset: 0; z-index: 1; background: #fff9c4; opacity: 0; mix-blend-mode: soft-light; animation: lit-flicker 6.5s steps(1, end) infinite; }
.lit__vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 60% at 50% 45%, transparent 30%, rgb(18 14 0 / .78) 100%); }
.lit__content { position: relative; z-index: 2; max-width: 520px; padding: var(--sp-6); background: rgb(24 20 2 / .62); border: 1px solid rgb(255 244 160 / .25); }
.lit h1 { font-size: clamp(1.4rem, 1rem + 2.6vw, 2.4rem); letter-spacing: .06em; color: #fff3a6; text-shadow: 0 0 18px rgb(255 240 120 / .5); margin-bottom: var(--sp-4); }
.lit p { color: #e6d98a; }
.lit__hint { font-family: var(--font-pixel); font-size: .65rem; letter-spacing: .3em; text-transform: uppercase; color: #a79a4a; margin-top: var(--sp-5); animation: whisper 7s ease-in-out infinite; }
@keyframes lit-flicker { 0%, 100% { opacity: 0; } 8% { opacity: .35; } 9% { opacity: 0; } 42% { opacity: 0; } 43% { opacity: .5; } 44% { opacity: .1; } 45% { opacity: .55; } 46% { opacity: 0; } 80% { opacity: .2; } 81% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lit__flicker, .lit__hint { animation: none; } }