/* Эфемерида — живое небо, прибор на тёмном стекле, карты «Аркан» с золотом. Правила — в DESIGN.md. */

:root {
  --deep: #0d1c5e;
  --abyss: #081243;
  --ink: #f4f2ea;
  --mute: #b6c2f0;
  --line: rgba(244, 242, 234, .26);
  --hair: rgba(244, 242, 234, .14);
  --glow: #ffd772;      /* светящееся золото: кнопки, стрелка «сейчас», значки */
  --glow-hi: #ffe9a8;
  --tense: #c9a9ff;     /* напряжение: лиловый вместо красного */
  --warn: #ff9fae;      /* ошибка в форме */
  --sun: #f7cc4b;
  --title: #f8e6b2;     /* заголовки на картах */
  --on-glow: #1b1338;   /* текст на золотой кнопке */
  --glass: #0b1a60;     /* заливка значков на колесе */
  --rule: rgba(255, 215, 114, .3);   /* разделители внутри карт */
  --veil: .6;           /* затемнение под текстом первого экрана: скрипт ставит .45 ночью и .78 днём */
  --sheet: rgba(255, 255, 255, .035);
  --sheet-ink: var(--ink);
  --sheet-mute: var(--mute);
  --sheet-line: rgba(255, 215, 114, .18);

  --display: 'Oranienbaum', 'Times New Roman', serif;
  --text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 4.5vw, 64px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-color: var(--mute) var(--abyss); scrollbar-width: thin; }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, #071a63 0%, #14297c 38%, #3b2f86 72%, #a4506a 100%) fixed #0b1a5c;
  overflow-x: hidden;
}
::selection { background: var(--glow); color: var(--abyss); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
.sky { position: fixed; inset: 0; width: 100%; height: 100lvh; z-index: -1; display: block; pointer-events: none; }
.no-sky .sky { display: none; }
.has-sky body { background: #050a28; }
.skyclock { position: fixed; right: var(--pad); bottom: 16px; z-index: 6; display: none; align-items: center; gap: 8px; padding: 7px 12px; font: 400 .7rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--mute); background: rgba(6, 12, 50, .55); border: 1px solid var(--hair); border-radius: 999px; pointer-events: none; }
.has-sky .skyclock { display: inline-flex; }
.skyclock b { font-weight: 400; color: var(--ink); }
.hero__text, .hero__instrument, .tape, .top, .entry, .result, .hero::before, .stickycta { transition: opacity .8s var(--ease); }
.sky-show .hero__text, .sky-show .hero__instrument, .sky-show .tape, .sky-show .top, .sky-show .hero::before, .sky-show .stickycta { opacity: 0; pointer-events: none; }
.skycap { position: fixed; left: 50%; bottom: 13vh; z-index: 8; width: min(92vw, 900px); transform: translate(-50%, 16px); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .9s var(--ease), transform .9s var(--ease); text-shadow: 0 2px 30px rgba(3, 7, 34, .75), 0 1px 3px rgba(3, 7, 34, .5); }
.sky-show .skycap { opacity: 1; transform: translate(-50%, 0); transition-delay: .35s; }
.skycap__k { font-size: clamp(.9rem, 1.2vw, 1.1rem); color: var(--mute); }
.skycap b { font: 400 clamp(2.2rem, 5.4vw, 5rem)/1.02 var(--display); font-variant-numeric: lining-nums; text-wrap: balance; }
.skycap__note { font-size: clamp(.95rem, 1.3vw, 1.2rem); color: var(--sun); }
.skycap { padding: 22px 26px 18px; border-radius: 28px; background: radial-gradient(closest-side, rgba(5, 7, 28, .72), rgba(5, 7, 28, .5) 70%, rgba(5, 7, 28, 0)); }
.skycap__tap { margin-top: 6px; font-size: .86rem; color: var(--ink); opacity: 0; transition: opacity .8s var(--ease); }
.sky-show .skycap__tap { opacity: .85; transition-delay: 1.6s; }
.skytag span { padding: 3px 10px; border-radius: 999px; background: rgba(5, 7, 28, .55); }
.skytag--left { flex-direction: row-reverse; }
.skytag--mute span { display: none; }
.skycap--top { bottom: auto; top: 13vh; }
.skytag { position: fixed; left: 0; top: 0; z-index: 8; display: flex; align-items: center; gap: 12px; margin: -27px 0 0 -27px; font-size: .95rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .7s var(--ease); text-shadow: 0 1px 14px rgba(3, 7, 34, .8); }
.skytag.is-on { opacity: 1; transition-delay: .5s; }
.skytag i { width: 54px; height: 54px; border: 1px solid rgba(244, 242, 234, .85); border-radius: 50%; box-shadow: 0 0 0 5px rgba(244, 242, 234, .12); }
.skytag--moon i { width: 46px; height: 46px; margin: 4px; }
.skyclock i { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }

h1, h2 { font-family: var(--display); font-weight: 400; text-wrap: balance; letter-spacing: -.012em; }
h1 { font-size: clamp(2.45rem, 4.4vw + .6rem, 5rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.2vw + .4rem, 3.5rem); line-height: 1.06; }
h3 { font: 600 1.06rem/1.3 var(--text); }
.num, time, .daily__n { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 14px; background: var(--ink); color: var(--abyss); }
.skip:focus { top: 12px; }

/* глифы: одна линия, один вес */
.glyph { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.glyph .fill { fill: currentColor; stroke: none; }

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 13px 22px;
  background: linear-gradient(180deg, #fff3c9 0%, var(--glow) 46%, #f0b53a 100%); color: var(--on-glow); border: 0; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 244, 200, .75) inset, 0 0 22px rgba(255, 215, 114, .62), 0 0 64px rgba(255, 196, 84, .34), 0 12px 30px -12px rgba(255, 186, 60, .7);
  font: 600 1rem/1.2 var(--text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s, border-color .18s, transform .12s;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.btn { position: relative; }
.btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 34px rgba(255, 215, 114, .85), 0 0 90px rgba(255, 196, 84, .45); animation: glow 3.4s ease-in-out infinite; }
.btn > * { position: relative; }
.btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; clip-path: inset(0 round 999px); background-size: 300% 100%; background-position: 130% 0; background-repeat: no-repeat; transition: background-position .7s var(--ease); background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); pointer-events: none; }
.btn:hover::after { background-position: -30% 0; }
.btn:hover { background: linear-gradient(180deg, #fffaf0 0%, var(--glow-hi) 46%, #f6c552 100%); }
@keyframes glow { 50% { opacity: 1; } }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--ghost { background: rgba(255, 215, 114, .06); color: var(--glow-hi); border: 1px solid rgba(255, 215, 114, .55); min-height: 42px; padding: 9px 18px; font-weight: 500; font-size: .94rem; box-shadow: 0 0 18px rgba(255, 215, 114, .18); }
.btn--ghost::before, .btn--danger::before, .btn:disabled::before { display: none; }
.btn--ghost:hover { background: rgba(255, 215, 114, .16); border-color: var(--glow); box-shadow: 0 0 26px rgba(255, 215, 114, .4); }
.textbtn { background: none; border: 0; padding: 11px 0; color: var(--mute); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.textbtn:hover { color: var(--ink); }

/* ---------- шапка ---------- */

.top { position: absolute; inset: 0 0 auto 0; z-index: 5; display: flex; align-items: center; gap: 28px; padding: 12px max(var(--pad), calc((100vw - 1560px) / 2 + var(--pad))); }
.mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 400 1.5rem/1 var(--display); letter-spacing: .01em; }
.mark img { width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(255, 215, 114, .55)); }
.mark span { color: var(--title); letter-spacing: .02em; }
.top__nav { display: flex; gap: 26px; margin-left: auto; font-size: .94rem; }
.acc { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 26px); margin-left: auto; font-size: .94rem; }
.top__nav + .acc { margin-left: 0; }
.acc a, .acc__out { color: var(--mute); text-decoration: none; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer; transition: color .15s, border-color .15s; }
.acc a:hover, .acc__out:hover { color: var(--glow-hi); border-color: rgba(255, 215, 114, .5); }
.acc form { display: flex; }
.top__nav a { text-decoration: none; color: var(--mute); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.top__nav a:hover { color: var(--ink); border-color: var(--line); }

/* кнопка звука: в шапке — тихий кружок, в полосе чтения прогноза — с подписью. Зона нажатия 44 px, сам кружок меньше */
.snd { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0; cursor: pointer; font: 500 .88rem/1 var(--text); color: var(--mute); background: none; border: 1px solid transparent; border-radius: 999px; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; }
.snd[hidden] { display: none; }
.snd svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snd span, .snd .snd-on { display: none; }
.snd.is-on .snd-on { display: inline; }
.snd.is-on .snd-off { display: none; }
.top .snd { margin-left: -10px; }
.top .snd::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(255, 215, 114, .26); background: rgba(5, 7, 28, .28); transition: border-color .2s, box-shadow .2s; }
.top .snd svg { position: relative; }
.top .snd.is-on { color: var(--glow-hi); }
.top .snd.is-on::before { border-color: rgba(255, 215, 114, .6); box-shadow: 0 0 14px rgba(255, 215, 114, .28); }
.top .snd:hover { color: var(--glow-hi); }
.top .snd:hover::before { border-color: rgba(255, 215, 114, .8); }

/* ---------- первый экран ---------- */

.hero {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 72px);
  align-items: center; min-height: 100svh; padding: 92px max(var(--pad), calc((100vw - 1560px) / 2 + var(--pad))) 0; position: relative;
}
.hero::before { content: ''; position: absolute; inset: 0 0 -140px 0; pointer-events: none; background:
  linear-gradient(100deg, rgba(5, 11, 52, var(--veil)) 0%, rgba(5, 11, 52, calc(var(--veil) * .78)) 38%, rgba(5, 11, 52, 0) 64%),
  linear-gradient(180deg, rgba(5, 11, 52, calc(var(--veil) * .8)) 0, rgba(5, 11, 52, 0) 20%, rgba(5, 11, 52, 0) 62%, rgba(4, 8, 38, .78) calc(100% - 140px), rgba(4, 8, 38, 0) 100%); }
.hero > * { position: relative; }
.hero__text { text-shadow: 0 1px 2px rgba(4, 9, 44, .45), 0 2px 26px rgba(4, 9, 44, .75); }
.hero__text .btn, .hero__text input { text-shadow: none; }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em 0 .16em; margin: -.06em 0 -.16em; }
.w > span { display: inline-block; }
.hero__text { padding: 24px 0 36px; max-width: 640px; }
.hero__sub { margin-top: 26px; color: var(--mute); max-width: 54ch; }
.hero__note { margin-top: 16px; font-size: .88rem; color: var(--mute); }

.birth { margin-top: 30px; }
.birth label { display: block; font-size: .88rem; font-weight: 500; margin-bottom: 8px; }
.birth__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.field { min-width: 0; }
.birth input {
  /* appearance и display: на айфоне поля даты и времени иначе не сжимаются и наезжают друг на друга */
  -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; max-width: 100%;
  width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px; background: rgba(6, 13, 56, .62); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; font: 400 1rem/1.2 var(--mono); caret-color: var(--glow);
  transition: border-color .15s, background-color .15s;
}
.birth input::-webkit-date-and-time-value, .inp::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
.inp[type=date], .inp[type=time] { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; }
.birth input:hover { border-color: var(--ink); }
.birth input:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; border-color: var(--sun); background: rgba(6, 13, 56, .85); }
.birth input[aria-invalid=true] { border-color: var(--warn); }
.birth__error { grid-column: 1 / -1; margin: 2px 0 0; color: var(--ink); font-size: .94rem; padding-left: 14px; position: relative; }
.birth__error::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }

.hero__instrument { display: flex; flex-direction: column; align-items: center; padding: 8px 0 28px; min-width: 0; }
.wheel { position: relative; width: min(100%, 84svh, 860px); aspect-ratio: 1; container-type: inline-size; will-change: transform; }
.wheel::before { content: ''; position: absolute; inset: 1%; border-radius: 50%; background: radial-gradient(circle, rgba(8, 18, 74, .86) 0 28%, rgba(8, 18, 74, .66) 58%, rgba(8, 18, 74, .46) 100%); box-shadow: 0 50px 110px -30px rgba(2, 5, 28, .85), 0 0 0 1px rgba(255, 255, 255, .07) inset, 0 0 90px rgba(120, 160, 255, .10); }
.wheel__svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.w-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.w-tick { stroke: var(--ink); stroke-width: 1; stroke-opacity: .5; }
.w-tick--5 { stroke-opacity: .8; }
.w-tick--10 { stroke-width: 1.8; stroke-opacity: 1; }
.w-div { stroke: var(--ink); stroke-width: 1.2; }
.w-sign { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.w-sign .fill, .p-badge .fill { fill: var(--ink); stroke: none; }
.n-ring { stroke-opacity: .55; stroke-dasharray: 2 5; opacity: 0; }

.p-lead, .n-lead { stroke: var(--ink); stroke-width: 1; stroke-opacity: .6; }
.p-dot { fill: var(--ink); }
.p-badge circle { fill: var(--glass); stroke: var(--ink); stroke-width: 1.4; }
.p-badge g { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.planet[data-key=sun] .p-badge circle { stroke: var(--glow); stroke-width: 2; }

.n-dot { fill: var(--ink); }
.n-badge circle { fill: var(--ink); }
.n-badge g { fill: none; stroke: var(--glass); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.n-badge .fill { fill: var(--glass); stroke: none; }
.natal--approx .n-badge circle { fill: var(--mute); }
.natal--approx .n-lead, .natal--approx .n-dot { opacity: .5; }

.a-line { fill: none; stroke-linecap: round; }
.a-soft { stroke: var(--sun); }
.a-hard { stroke: var(--tense); }
.a-conj { stroke: var(--ink); }
.a-proj { stroke: var(--ink); stroke-width: 1; stroke-opacity: .35; stroke-dasharray: 3 5; }

.w-hand { filter: drop-shadow(0 0 7px rgba(255, 215, 114, .95)); }
.w-hand line { stroke: var(--glow); stroke-width: 2.4; stroke-linecap: round; }
.w-hand circle { fill: var(--glow); }
.hub-disc { fill: var(--deep); stroke: var(--ink); stroke-width: 1.5; }
.hub-tick { stroke: var(--ink); stroke-width: 1; stroke-opacity: .55; }
.hub-sec { fill: var(--glow); filter: drop-shadow(0 0 5px rgba(255, 215, 114, .95)); }
.w-aspects { filter: drop-shadow(0 0 5px rgba(255, 225, 160, .45)); }

.wheel__center {
  position: absolute; left: 50%; top: 50%; width: var(--hub, 28%); aspect-ratio: 1; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .32em; text-align: center;
  padding: 9%; pointer-events: none; z-index: 1;
}
.c-label { font-size: clamp(11px, 2cqw, 14px); color: var(--mute); line-height: 1.1; white-space: nowrap; }
.c-date { font: 400 clamp(15px, 4.3cqw, 31px)/1.02 var(--display); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.c-time { white-space: nowrap; font: 400 clamp(11px, 1.9cqw, 13px)/1.1 var(--mono); font-variant-numeric: tabular-nums; color: var(--sun); min-height: 1em; }

/* результат расчёта */
.has-result .entry { display: none; }
.wheel, .strip { transition: width .8s var(--ease); }
.hero h1 { transition: font-size .6s var(--ease), opacity .8s var(--ease); }
.has-result .wheel, .has-result .strip { width: min(100%, 64svh, 860px); }
.has-result h1 { font-size: clamp(2.1rem, 3vw + .5rem, 3.4rem); }
.result:focus { outline: 0; }
.result { margin-top: 26px; }
.result__count { font: 400 clamp(1.5rem, 2.1vw, 2rem)/1.15 var(--display); max-width: 20ch; }
.result__count b { font-weight: 400; color: var(--sun); font-size: 1.9em; line-height: .9; margin-right: .08em; font-variant-numeric: lining-nums; }
.result__range { margin-top: 14px; color: var(--mute); font-size: .94rem; }
.result__list { margin-top: 10px; border-top: 1px solid var(--line); }
.hit { display: grid; grid-template-columns: 10.5em 1fr auto; gap: 4px 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hair); transition: background-color .15s; cursor: default; }
.hit time { font-size: .8rem; line-height: 1.35; color: var(--ink); }
.arr { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; margin: 0 .2em; fill: none; stroke: var(--mute); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hit__who { font-weight: 500; }
.hit__kind { font-size: .82rem; padding-left: 14px; position: relative; color: var(--mute); }
.hit__kind::before { content: ''; position: absolute; left: 0; top: .42em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.hit--soft .hit__kind::before { background: var(--sun); }
.hit--hard .hit__kind::before { background: var(--tense); }
.hit.is-on { background: rgba(244, 242, 234, .09); }
.result__more { margin-top: 14px; font-size: .94rem; color: var(--mute); max-width: 52ch; }
.result__actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.result__actions .btn { white-space: nowrap; }

.stickycta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(5, 7, 28, 0), rgba(5, 7, 28, .92) 34%); transform: translateY(110%); transition: transform .5s var(--ease), opacity .8s var(--ease); }
.stickycta.is-on { transform: none; }
.stickycta .btn { width: 100%; }

/* лента тридцати дней */
.strip { width: min(100%, 84svh, 860px); margin-top: 22px; }
.strip__head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: .88rem; }
.strip__head span:first-child { font-weight: 600; }
.strip__hint { color: var(--mute); text-align: right; }
.strip__days { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); margin-top: 10px; border-bottom: 1px solid var(--line); touch-action: pan-y; }
.day { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 84px; padding: 0 1px; background: none; border: 0; cursor: crosshair; }
.day__bars { display: flex; flex-direction: column-reverse; gap: 2px; padding: 0 1px 3px; flex: 1; justify-content: flex-start; }
.bar { display: block; height: 11px; background: var(--ink); transform-origin: 50% 100%; border-radius: 3px; }
.bar--soft { box-shadow: 0 0 10px rgba(247, 204, 75, .7); }
.bar--hard { box-shadow: 0 0 10px rgba(201, 169, 255, .7); }
.bar--soft { background: var(--sun); }
.bar--hard { background: var(--tense); }
.day__n { font: 400 .7rem/1 var(--mono); color: var(--mute); text-align: center; white-space: nowrap; margin: 0 -8px; padding: 5px 0 6px; }
.day__bars { border-bottom: 1px solid var(--line); }
.day--mark .day__n { color: var(--ink); }
.day::before { content: ''; position: absolute; inset: 0 0 0 0; background: rgba(244, 242, 234, .1); opacity: 0; transition: opacity .12s; }
.day.is-on::before { opacity: 1; }
.day.is-on .day__n { color: var(--ink); }
.day:focus-visible { outline-offset: -2px; }
.strip__legend { display: flex; gap: 18px; margin-top: 10px; font-size: .78rem; color: var(--mute); }
.k { padding-left: 15px; position: relative; }
.k::before { content: ''; position: absolute; left: 0; top: .35em; width: 9px; height: 9px; border-radius: 3px; background: var(--ink); }
.k--soft::before { background: var(--sun); }
.k--hard::before { background: var(--tense); }

/* лента показаний */
.tape { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 14px 0 46px; text-shadow: 0 1px 12px rgba(4, 9, 44, .7); }
.tape__title span { font-family: var(--mono); font-size: .72rem; font-variant-numeric: tabular-nums; }
.tape__list { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px 14px; margin-top: 10px; }
.tape__list li { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; min-width: 0; }
.tape__glyph { grid-row: span 2; }
.tape__glyph .glyph { width: 22px; height: 22px; }
.tape__name { font-size: .82rem; font-weight: 500; line-height: 1.2; }
.tape__val { display: flex; align-items: center; gap: 5px; font: 400 .7rem/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--mute); white-space: nowrap; }
.tape__sign .glyph { width: 13px; height: 13px; stroke-width: 1.8; }

/* ---------- что такое карта рождения и транзиты ---------- */
.know { padding: clamp(70px, 17vh, 210px) 0 0; }
.know__grid { margin-top: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px clamp(28px, 5vw, 80px); }
.know__grid h3 { font: 400 clamp(1.5rem, 1.6vw + .8rem, 2rem)/1.12 var(--display); color: var(--ink); }
.know__grid p { margin-top: 12px; color: var(--mute); max-width: 54ch; }
.know__grid p + p { margin-top: 10px; }
.tape__title { font: 400 .8rem/1.3 var(--text); letter-spacing: 0; color: var(--mute); }

/* ---------- что внутри ---------- */

section { position: relative; }
.plate {
  --gap: clamp(10px, 3vw, 44px);
  width: min(1320px, calc(100% - 2 * var(--gap)));
  padding: clamp(30px, 5vw, 84px) clamp(20px, 4.6vw, 76px);
  position: relative;
}
.plate::before { content: ''; position: absolute; pointer-events: none; }
.plate > * { position: relative; }

/* «Аркан»: тёмная карта с двойной золотой рамкой, скруглённая, с мягким свечением */
.plate {
  width: min(1140px, calc(100% - 2 * var(--gap)));
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 215, 114, .07), transparent 60%), linear-gradient(180deg, rgba(9, 10, 40, .90), rgba(5, 7, 28, .86));
  border: 1px solid rgba(255, 215, 114, .5); border-radius: 36px;
  box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .9), 0 0 0 8px rgba(5, 7, 28, .5), 0 0 0 9px rgba(255, 215, 114, .18), 0 0 90px rgba(255, 215, 114, .09);
}
.plate::before { inset: 11px; border: 1px solid rgba(255, 215, 114, .2); border-radius: 26px; }
.plate h2, .legal h1 { color: var(--title); }
.plate h2::before, .legal h1::before {
  content: ''; display: block; width: 190px; height: 22px; margin-bottom: 18px; filter: drop-shadow(0 0 6px rgba(255, 215, 114, .7));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 22' fill='none' stroke='%23ffd772' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2 11h74M114 11h74'/%3E%3Cpath d='M95 1.500c1 5.500 3.500 8 9.500 9.500-6 1.500-8.500 4-9.500 9.500-1-5.500-3.500-8-9.500-9.500 6-1.500 8.500-4 9.500-9.500z' fill='%23ffd772' stroke='none'/%3E%3Ccircle cx='79' cy='11' r='1.6' fill='%23ffd772' stroke='none'/%3E%3Ccircle cx='111' cy='11' r='1.6' fill='%23ffd772' stroke='none'/%3E%3C/svg%3E") 0 50% / contain no-repeat;
}

.inside, .basis, .fit, .steps, .faq { padding: clamp(70px, 17vh, 210px) 0; }
.inside__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(24px, 5vw, 90px); align-items: end; }
.inside__intro p { color: var(--mute); max-width: 52ch; }

.sheet { margin-top: clamp(32px, 4.5vw, 60px); background: var(--sheet); color: var(--sheet-ink); border: 1px solid rgba(255, 215, 114, .26); border-radius: 24px; box-shadow: 0 0 60px rgba(255, 215, 114, .05) inset; }
.sheet__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 24px; padding: 0 clamp(18px, 3.4vw, 48px); border-bottom: 1px solid var(--sheet-line); }
.tabs { display: flex; gap: clamp(14px, 2.4vw, 34px); overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 14px 0 16px; font: 500 1rem/1.2 var(--text); color: var(--sheet-mute); cursor: pointer; transition: color .15s, border-color .15s; }
.tabs button:hover { color: var(--sheet-ink); }
.tabs button[aria-selected=true] { color: var(--sheet-ink); border-color: var(--glow); font-weight: 600; }
.sheet__stamp { order: -1; width: 100%; font-size: .8rem; color: var(--sheet-mute); padding: 16px 0 0; }
.panel { padding: clamp(24px, 3.6vw, 52px) clamp(18px, 3.4vw, 48px) clamp(28px, 4vw, 56px); min-height: 380px; }
.lead { font: 400 clamp(1.25rem, 1.5vw + .5rem, 1.75rem)/1.34 var(--display); max-width: 34em; }
.lead + .lead { margin-top: .85em; }

.dates__row { display: grid; grid-template-columns: minmax(8.5em, 14%) 1fr; gap: 6px 28px; padding: 16px 0 16px 18px; border-bottom: 1px solid var(--sheet-line); position: relative; }
.dates__row:first-child { padding-top: 4px; }
.dates__row:last-child { border-bottom: 0; padding-bottom: 0; }
.dates__row::before { content: ''; position: absolute; left: 0; top: 1.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1px var(--sheet-ink) inset; }
.dates__row:first-child::before { top: .8em; }
.dates__row--hard::before { background: var(--tense); box-shadow: none; }
.dates__when { font: 500 .84rem/1.6 var(--mono); font-variant-numeric: tabular-nums; }
.dates__what { max-width: 62ch; }
.dates__what b { display: block; font: 400 1.4rem/1.2 var(--display); margin-bottom: 4px; color: var(--title); }

.daily { width: 100%; border-collapse: collapse; font-size: .97rem; }
.daily th, .daily td { text-align: left; vertical-align: top; padding: 13px 18px 13px 0; border-bottom: 1px solid var(--sheet-line); }
.daily thead th { font: 600 .8rem/1.2 var(--text); color: var(--sheet-mute); padding-top: 0; padding-bottom: 10px; }
.daily tbody th { font: 400 .8rem/1.75 var(--mono); white-space: nowrap; color: var(--sheet-mute); width: 6.5em; }
.daily__n { font-size: 1.15rem; color: var(--sheet-ink); margin-right: 2px; }
.daily td { width: 46%; }
.daily td:last-child { padding-right: 0; }
.daily tbody tr:last-child > * { border-bottom: 0; }
.panel__after { margin-top: 26px; max-width: 62ch; color: var(--sheet-mute); }

.also { margin-top: clamp(30px, 4vw, 54px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px clamp(18px, 2.4vw, 36px); font-size: .94rem; color: var(--mute); }
.also li { border-top: 1px solid var(--rule); padding-top: 14px; }
.also b { display: block; color: var(--ink); font: 400 1.3rem/1.2 var(--display); margin-bottom: 6px; }

/* ---------- на чём основано ---------- */

.basis__intro { max-width: 880px; }
.lineage { margin-top: clamp(40px, 6vw, 84px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px clamp(24px, 4vw, 64px); position: relative; }
.lineage::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg, var(--sun), rgba(247, 204, 75, .25)); }
.lineage li { position: relative; padding-top: 34px; }
.lineage li::before { content: ''; position: absolute; left: 0; top: 0; width: 13px; height: 13px; background: var(--sun); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.lineage__when { display: block; font: 400 .78rem/1 var(--mono); color: var(--sun); margin-bottom: 10px; }
.lineage h3 { font: 400 clamp(1.7rem, 2.4vw, 2.5rem)/1.08 var(--display); }
.lineage p { margin-top: 12px; color: var(--mute); max-width: 36ch; }
.basis__close { margin-top: clamp(36px, 5vw, 64px); font: 400 clamp(1.3rem, 1.8vw, 1.9rem)/1.3 var(--display); max-width: 30em; text-wrap: balance; }
.basis__intro p { margin-top: 22px; color: var(--mute); max-width: 56ch; font-size: 1.08rem; }
/* ---------- кому ---------- */

.fit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(24px, 4vw, 64px); align-items: start; }
.fit__grid h2 { grid-column: 1 / -1; max-width: 22ch; }
.fit__lead { grid-column: 1 / -1; color: var(--mute); max-width: 60ch; margin-top: -8px; }
.fit__col h3 { padding-top: 16px; border-top: 1px solid var(--rule); font-size: 1.06rem; }
.fit__col li { position: relative; padding: 14px 0 0 24px; }
.fit__col li::before { content: ''; position: absolute; left: 0; top: 1.42em; width: 11px; height: 11px; border-radius: 50%; background: var(--sun); }
.fit__col--no li { color: var(--mute); }
.fit__col--no li::before { background: none; border: 1.5px solid var(--mute); }

/* ---------- как устроено ---------- */

.steps__list { counter-reset: s; margin-top: clamp(32px, 4.5vw, 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); }
.steps__list li { counter-increment: s; border-top: 1px solid var(--rule); padding-top: 18px; position: relative; }
.steps__list li::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 215, 114, .6); color: var(--glow-hi); border-radius: 50%; font: 400 1rem/1 var(--mono); margin-bottom: 20px; }
.steps__list li:first-child::before { background: var(--glow); border-color: var(--glow); color: var(--on-glow); box-shadow: 0 0 22px rgba(255, 215, 114, .6); }
.steps__list h3 { font: 400 1.6rem/1.15 var(--display); }
.steps__list p { margin-top: 10px; color: var(--mute); max-width: 40ch; }
.steps__price { margin-top: 44px; font-size: 1.15rem; }
.steps__go { margin-top: 34px; }

/* ---------- вопросы ---------- */

.faq__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 32px clamp(24px, 5vw, 90px); align-items: start; }
.faq__list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 400 1.4rem/1.2 var(--display); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; transition: transform .35s var(--ease), stroke .15s; }
.faq summary:hover svg { stroke: var(--sun); }
.faq details[open] summary svg { transform: rotate(45deg); stroke: var(--glow); }
.faq details p { padding: 0 44px 24px 0; color: var(--mute); max-width: 68ch; }

/* ---------- финал ---------- */

.close { --dial: max(900px, 112vw); padding: clamp(110px, 22vh, 260px) 0 calc(var(--dial) * .27 + 56px); text-align: center; overflow: hidden; text-shadow: 0 2px 30px rgba(4, 9, 44, .55); }
.close .btn { text-shadow: none; }
.close .wrap { position: relative; z-index: 1; }
.close::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 46% at 50% 34%, rgba(5, 11, 52, .74), rgba(5, 11, 52, 0) 78%); }
.close__dial { position: absolute; left: 50%; bottom: 0; width: var(--dial); aspect-ratio: 1; transform: translate(-50%, 73%); pointer-events: none; }
.close__dial .w-tick { stroke-opacity: .45; }
.close__dial .w-tick--10 { stroke-opacity: .9; }
.close__dial .w-ring { stroke-opacity: .7; }
.close__dial .w-sign { stroke-opacity: .85; }
.close__dial { will-change: transform; }
.close__pointer { position: absolute; left: 50%; bottom: calc(var(--dial) * .203); width: 3px; height: calc(var(--dial) * .066); margin-left: -1.5px; border-radius: 2px; background: var(--glow); box-shadow: 0 0 10px rgba(255, 215, 114, .9); pointer-events: none; }
.close__pointer::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--glow); }
.close h2 { font-size: clamp(2.3rem, 5vw + .4rem, 5rem); max-width: 16ch; margin: 0 auto; }
.close p { margin: 22px auto 30px; color: var(--ink); }

.foot { background: rgba(4, 8, 36, .9); padding: 34px 0 64px; font-size: .86rem; color: var(--mute); position: relative; }
.foot__grid { display: flex; justify-content: space-between; gap: 14px 40px; align-items: baseline; }
.foot__brand { font: 400 1.3rem/1 var(--display); color: var(--ink); }
.foot a { color: var(--mute); }
.foot a:hover { color: var(--glow-hi); }

/* ---------- оферта ---------- */
.legal { max-width: 900px; }
.legal h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.legal__meta { margin-top: 12px; color: var(--mute); font-size: .9rem; }
.legal .legal__lead { margin-top: 26px; font: 400 clamp(1.2rem, 1.6vw, 1.5rem)/1.35 var(--display); color: var(--title); }
.legal h2 { font-size: 1.6rem; margin-top: 42px; color: var(--ink); }
.legal h2::before { display: none; }
.legal p, .legal li { margin-top: 12px; color: var(--mute); max-width: 72ch; }
.legal ul { margin-top: 4px; }
.legal li { position: relative; padding-left: 20px; }
.legal li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--glow); }
.legal b { color: var(--ink); font-weight: 500; }
.todo { background: rgba(255, 159, 174, .16); color: var(--warn); border: 1px dashed var(--warn); border-radius: 6px; padding: 0 6px; }

/* ---------- адаптация ---------- */

@media (max-width: 1180px) {
  .tape__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .also { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .tape__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
}

@media (max-width: 940px) {
  body { font-size: 16px; }
  .has-result .wheel, .has-result .strip { width: min(100%, 620px); }
  .top__nav { display: none; }
  .top__nav + .acc { margin-left: auto; }
  .top__cta { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 84px; }
  .hero::before { background: linear-gradient(180deg, rgba(5, 11, 52, var(--veil)) 0, rgba(5, 11, 52, var(--veil)) 34%, rgba(5, 11, 52, .1) 52%, rgba(5, 11, 52, .1) 66%, rgba(4, 8, 38, .8) calc(100% - 140px), rgba(4, 8, 38, 0) 100%); }
  .hero__text { display: contents; }
  /* заголовок и форма — прямые дети сетки: без этого затемнение ложится поверх текста */
  .hero h1, .hero .entry, .hero .result { position: relative; }
  .sky-show .hero h1, .sky-show .entry, .sky-show .result { opacity: 0; pointer-events: none; }
  .hero h1, .hero .entry { text-shadow: 0 1px 2px rgba(4, 9, 44, .45), 0 2px 26px rgba(4, 9, 44, .75); }
  .hero .entry .btn, .hero .entry input { text-shadow: none; }
  /* результат и лента лежат на небе — им нужна своя тёмная карта */
  .result, .strip { background: linear-gradient(180deg, rgba(9, 10, 40, .90), rgba(5, 7, 28, .86)); border: 1px solid rgba(255, 215, 114, .4); border-radius: 26px; padding: 22px 18px; }
  .strip { margin-top: 18px; }
  .stickycta { display: block; }
  .hero h1 { order: 1; padding-top: 12px; }
  .entry, .has-result .entry { display: block; order: 2; }
  .hero__instrument { order: 3; }
  .result { order: 4; margin: 4px 0 30px; }
  .tape { order: 5; }
  #r-reset { display: none; }
  .hero__instrument { padding: 22px 0 26px; }
  .wheel, .strip { width: min(100%, 620px); }
  .inside__intro, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .steps__list, .lineage, .know__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lineage::before { display: none; }
  .lineage li { padding-top: 26px; border-top: 1px solid rgba(247, 204, 75, .35); }
  .lineage li::before { top: -7px; }
  .steps__list li::before { margin-bottom: 14px; }
}

@media (max-width: 640px) {
  .mark { font-size: 1.3rem; }
  .top__cta { display: none; }
  .hero__note { margin-top: 12px; font-size: .82rem; }
  .hero__instrument { padding-top: 14px; }
  .top { padding-top: 14px; }
  .hero { padding-top: 76px; }
  .hero__sub { margin-top: 18px; }
  .birth { margin-top: 22px; }
  .birth__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .birth .btn { grid-column: 1 / -1; }
  .plate { border-radius: 26px; }
  .plate::before { inset: 8px; border-radius: 19px; }
  .skyclock { display: none !important; }
  .skycap { bottom: 9vh; }
  .skycap--top { bottom: auto; top: 11vh; }
  .skytag { font-size: .84rem; gap: 8px; }
  .skytag i { width: 44px; height: 44px; }
  .skytag { margin: -22px 0 0 -22px; }
  .skycap { padding: 16px 14px 14px; }
  .tape__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
  .tape__val { font-size: .7rem; }
  .strip__head { flex-direction: column; gap: 4px; }
  .strip__hint { text-align: left; }
  .tabs { gap: 12px; }
  .tabs button { font-size: .88rem; }
  .sheet__bar { padding: 0 12px; }
  .panel { padding-left: 12px; padding-right: 12px; }
  .day { height: 68px; }
  .day__n { visibility: hidden; }
  .day--mark .day__n, .day:nth-child(5n) .day__n, .day.is-on .day__n { visibility: visible; }
  .hit { grid-template-columns: 1fr auto; row-gap: 2px; }
  .hit time { grid-column: 1 / -1; }
  .also { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fit__grid { grid-template-columns: minmax(0, 1fr); }
  .panel { min-height: 0; }
  .dates__row { grid-template-columns: minmax(0, 1fr); }
  .daily thead { display: none; }
  .daily, .daily tbody, .daily tr, .daily th, .daily td { display: block; width: auto; }
  .daily tr { padding: 12px 0; border-bottom: 1px solid var(--sheet-line); }
  .daily tbody th, .daily td { padding: 0; border: 0; }
  .daily td { padding-left: 16px; position: relative; margin-top: 6px; }
  .daily td::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1px var(--sheet-ink) inset; }
  .daily td:last-child::before { background: none; box-shadow: 0 0 0 1.5px var(--tense) inset; }
  .faq summary { font-size: 1.2rem; padding: 16px 0; }
  .faq details p { padding-right: 0; }
  /* расстояния между разделами на телефоне — одинаковые и в пикселях: высота экрана на айфоне «дышит» вместе с панелью браузера */
  .know { padding: 50px 0 0; }
  .inside, .basis, .fit, .steps, .faq { padding: 64px 0 0; }
  /* футер на телефоне — низкий и полупрозрачный: за ним видно землю, а солнце на восходе остаётся над ним */
  .page:not(.page--cab) .foot, body:not(.page) > .foot {
    padding: 20px 0 calc(22px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(4, 8, 36, 0) 0, rgba(4, 8, 36, .5) 55%, rgba(4, 8, 36, .78) 100%);
    text-shadow: 0 1px 8px rgba(4, 8, 36, .95);
  }
  .foot__grid { gap: 4px; }
  .foot__nav { gap: 0 20px; }
  .foot__nav a { padding: 9px 0; }
  /* дуга карты в конце страницы: на телефоне радиус меньше, чтобы она читалась как круг, а не как прямая */
  .close { --dial: 150vw; padding-top: 110px; }
}

@media (max-width: 340px) {
  .field--time label { font-size: 0; }
  .field--time label::after { content: 'Время'; font-size: .88rem; }
  .c-date { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page--cab::before { animation: none; }
  .btn::before { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ================= внутренние страницы: вход, заказ, кабинет ================= */

.page__main { padding: clamp(96px, 14vh, 140px) 0 clamp(60px, 10vh, 110px); min-height: 100svh; }
.page .top { position: absolute; }
.card { max-width: 860px; }
.card--narrow { max-width: 520px; }
.card--mid { max-width: 720px; }
.card--wide { max-width: 1040px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.card h1 { font-size: clamp(2rem, 3.4vw + .6rem, 3.1rem); color: var(--title); }
.card h1::before { content: ''; display: block; width: 150px; height: 20px; margin-bottom: 14px; filter: drop-shadow(0 0 6px rgba(255, 215, 114, .7));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 22' fill='none' stroke='%23ffd772' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2 11h74M114 11h74'/%3E%3Cpath d='M95 1.500c1 5.500 3.500 8 9.500 9.500-6 1.500-8.500 4-9.500 9.500-1-5.500-3.500-8-9.500-9.500 6-1.500 8.500-4 9.500-9.500z' fill='%23ffd772' stroke='none'/%3E%3C/svg%3E") 0 50% / contain no-repeat; }
.card__lead { margin-top: 14px; color: var(--mute); max-width: 56ch; }
.card__alt { margin-top: 22px; font-size: .94rem; color: var(--mute); }
.card__alt a, .hint a, .check a, .crumbs a { color: var(--glow-hi); }
.card__actions { margin-top: 26px; }
.card__h { font: 400 1.6rem/1.15 var(--display); color: var(--ink); margin: clamp(36px, 5vw, 56px) 0 16px; }
.card .card__h::before, .legal .card__h::before { display: none; }
.crumbs { font-size: .88rem; margin-bottom: 18px; }
.crumbs a::before { content: '← '; }

/* поля */
.form { display: grid; gap: 18px; margin-top: 26px; }
.form--short { max-width: 420px; }
.fld { display: grid; gap: 8px; min-width: 0; }
.fld label, .lbl { font-size: .9rem; font-weight: 500; }
.opt { color: var(--mute); font-weight: 400; }
.inp {
  width: 100%; min-width: 0; min-height: 52px; padding: 13px 15px; background: rgba(4, 8, 36, .6); color: var(--ink);
  border: 1px solid rgba(244, 242, 234, .32); border-radius: 14px; font: 400 1rem/1.3 var(--text); caret-color: var(--glow);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.inp--mono { font-family: var(--mono); }
textarea.inp { resize: vertical; min-height: 96px; }
.inp::placeholder { color: rgba(182, 194, 240, .55); }
.inp:hover { border-color: rgba(244, 242, 234, .6); }
.inp:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; border-color: var(--glow); background: rgba(4, 8, 36, .85); box-shadow: 0 0 22px rgba(255, 215, 114, .18); }
.inp:disabled { opacity: .45; cursor: not-allowed; }
.hint { font-size: .86rem; color: var(--mute); max-width: 62ch; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fld--short { max-width: 260px; }
.pw { position: relative; }
.pw .inp { padding-right: 96px; }
.pw__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 12px; background: none; border: 0; border-radius: 10px; color: var(--glow-hi); font-size: .86rem; cursor: pointer; }
.pw__eye:hover { background: rgba(255, 215, 114, .1); }
.btn--wide { width: 100%; }
.btn--danger { background: none; color: var(--warn); border: 1px solid var(--warn); box-shadow: none; animation: none; }
.btn--danger:hover { background: rgba(255, 159, 174, .12); }
.btn:disabled { animation: none; }

.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: .92rem; color: var(--mute); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 1px solid rgba(244, 242, 234, .5); border-radius: 7px; background: rgba(4, 8, 36, .6); cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.check input:checked { background: var(--glow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1338' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / 18px no-repeat; border-color: var(--glow); box-shadow: 0 0 14px rgba(255, 215, 114, .5); }

.formerr, .formok, .devnote { margin-top: 20px; padding: 13px 16px; border-radius: 14px; font-size: .94rem; }
.formerr { background: rgba(255, 159, 174, .12); border: 1px solid rgba(255, 159, 174, .6); color: #ffd5db; }
.formok { background: rgba(255, 215, 114, .1); border: 1px solid rgba(255, 215, 114, .5); color: var(--glow-hi); }
.devnote { background: rgba(182, 194, 240, .08); border: 1px dashed rgba(182, 194, 240, .45); color: var(--mute); }
.paysoon { padding: 16px 18px; border: 1px solid rgba(255, 215, 114, .45); border-radius: 16px; background: rgba(255, 215, 114, .07); color: var(--ink); max-width: 58ch; }
.paysoon b { display: block; margin-bottom: 4px; font: 400 1.3rem/1.2 var(--display); color: var(--glow-hi); }
span.devnote { display: inline; padding: 2px 8px; margin: 0; }

/* подсказки городов */
.combo { position: relative; }
.combo__list { position: absolute; z-index: 12; left: 0; right: 0; top: 100%; margin: 6px 0 0; max-height: 300px; overflow-y: auto; background: #080a2c; border: 1px solid rgba(255, 215, 114, .45); border-radius: 16px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9), 0 0 30px rgba(255, 215, 114, .1); }
.combo__list li { display: grid; gap: 2px; min-height: 48px; align-content: center; padding: 9px 15px; cursor: pointer; border-bottom: 1px solid var(--hair); }
.combo__list li:last-child { border-bottom: 0; }
.combo__list li b { font-weight: 500; color: var(--ink); }
.combo__list li span { font-size: .82rem; color: var(--mute); }
.combo__list li[aria-selected=true], .combo__list li:hover { background: rgba(255, 215, 114, .12); }
.combo__list .combo__none { cursor: default; color: var(--mute); font-size: .9rem; }
.combo .inp.is-picked { border-color: rgba(255, 215, 114, .6); }
.facts__note { display: block; font: 400 .78rem/1.5 var(--mono); color: var(--mute); }

/* кабинет: свой фон — ночной купол с кольцами астролябии, без горизонта и смены времени суток */
.page--cab::before {
  content: ''; position: fixed; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; z-index: 0; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='%23ffd772'%3E%3Ccircle cx='500' cy='500' r='150' stroke-width='.6'/%3E%3Ccircle cx='500' cy='500' r='245' stroke-width='.5' stroke-dasharray='1 7'/%3E%3Ccircle cx='500' cy='500' r='330' stroke-width='.7'/%3E%3Ccircle cx='500' cy='500' r='342' stroke-width='.4'/%3E%3Ccircle cx='500' cy='500' r='455' stroke-width='.5' stroke-dasharray='2 10'/%3E%3Ccircle cx='500' cy='500' r='490' stroke-width='.6'/%3E%3Cpath stroke-width='.5' d='M500 10v36M500 954v36M10 500h36M954 500h36M153.500 153.500l25.500 25.500M821 821l25.500 25.500M153.500 846.500l25.500-25.500M821 179l25.500-25.500M500 158v172M500 670v172M158 500h172M670 500h172'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: dome 600s linear infinite;
}
@keyframes dome { to { transform: rotate(360deg); } }
.page--cab .page__main, .page--cab .foot, .page--cab .top, .page--cab .reader__bar, .page--cab .reader__frame { position: relative; z-index: 1; }
/* шапка выше содержимого: иначе верхний отступ страницы перекрывает её, и ссылки не нажимаются */
.page--cab .top { position: absolute; z-index: 5; }
.page--cab .foot { background: rgba(3, 5, 22, .82); }

/* заказ */
.order { max-width: 860px; }
.step { border: 0; padding: 0; margin: clamp(30px, 4.5vw, 48px) 0 0; min-width: 0; display: grid; gap: 16px; }
.step legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 4px; font: 400 clamp(1.35rem, 1.6vw + .8rem, 1.7rem)/1.15 var(--display); color: var(--ink); }
.step legend .opt { font: 400 .9rem/1 var(--text); }
.step__n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 215, 114, .6); border-radius: 50%; font: 400 .86rem/1 var(--mono); color: var(--glow-hi); }
.goods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.good { position: relative; display: block; cursor: pointer; }
.good input { position: absolute; opacity: 0; pointer-events: none; }
.good__body { display: grid; gap: 6px; height: 100%; padding: 16px; border: 1px solid rgba(244, 242, 234, .25); border-radius: 18px; background: rgba(4, 8, 36, .45); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.good__body b { font: 400 1.25rem/1.15 var(--display); }
.good__body span { font-size: .86rem; color: var(--mute); }
.good__body i { font-style: normal; font-size: .76rem; color: var(--tense); }
.good input:checked + .good__body { border-color: var(--glow); background: rgba(255, 215, 114, .08); box-shadow: 0 0 26px rgba(255, 215, 114, .22); }
.good input:focus-visible + .good__body { outline: 2px solid var(--glow); outline-offset: 2px; }
.good--soon { cursor: default; opacity: .6; }

.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg label, .chips label { position: relative; cursor: pointer; }
.seg input, .chips input { position: absolute; opacity: 0; pointer-events: none; }
.seg span, .chips span { display: grid; place-items: center; min-height: 48px; padding: 10px 16px; border: 1px solid rgba(244, 242, 234, .3); border-radius: 999px; background: rgba(4, 8, 36, .45); text-align: center; font-size: .94rem; transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s; }
.seg input:checked + span, .chips input:checked + span { border-color: var(--glow); background: rgba(255, 215, 114, .14); color: var(--glow-hi); box-shadow: 0 0 20px rgba(255, 215, 114, .2); }
.seg input:focus-visible + span, .chips input:focus-visible + span { outline: 2px solid var(--glow); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input:disabled + span { opacity: .4; cursor: not-allowed; }

.order__end { margin-top: clamp(34px, 5vw, 52px); padding-top: 26px; border-top: 1px solid rgba(255, 215, 114, .25); display: grid; gap: 22px; }
.order__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.order__pay .btn { flex: 1 1 260px; }
.order__price { display: grid; gap: 2px; }
.order__price span { font-size: .84rem; color: var(--mute); }
.order__price b { font: 400 2rem/1 var(--display); color: var(--glow-hi); font-variant-numeric: lining-nums; }

/* кабинет */
.cab__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.orders { margin-top: 28px; display: grid; gap: 12px; }
.ord { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 20px; border: 1px solid rgba(255, 215, 114, .26); border-radius: 22px; background: rgba(255, 255, 255, .035); }
.ord__main { display: grid; gap: 6px; min-width: 0; }
.ord h2 { font: 400 1.6rem/1.1 var(--display); color: var(--ink); }
.ord h2::before { display: none; }
.ord p { font-size: .9rem; color: var(--mute); }
.pill { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; border: 1px solid rgba(182, 194, 240, .45); color: var(--mute); }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--ready { color: var(--glow-hi); border-color: rgba(255, 215, 114, .6); box-shadow: 0 0 16px rgba(255, 215, 114, .2); }
.pill--making { color: var(--tense); border-color: rgba(201, 169, 255, .55); }
.pill--failed { color: var(--warn); border-color: rgba(255, 159, 174, .6); }
.empty { margin-top: 30px; display: grid; justify-items: center; gap: 14px; padding: clamp(28px, 6vw, 56px) 16px; text-align: center; border: 1px dashed rgba(255, 215, 114, .35); border-radius: 26px; }
.empty > svg { width: 112px; height: 112px; fill: none; stroke: rgba(244, 242, 234, .7); stroke-width: 1; }
.empty__dot { fill: var(--glow); stroke: none; filter: drop-shadow(0 0 6px rgba(255, 215, 114, .9)); }
.empty__t { font: 400 1.7rem/1.15 var(--display); color: var(--ink); }
.empty p { color: var(--mute); max-width: 44ch; }
.shelf, .people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.people { grid-template-columns: minmax(0, 1fr); }
.shelf li, .people li { display: grid; gap: 6px; padding: 18px; border: 1px solid rgba(244, 242, 234, .16); border-radius: 20px; background: rgba(255, 255, 255, .025); }
.shelf b, .people b { font: 400 1.3rem/1.15 var(--display); color: var(--ink); }
.shelf span, .people span { font-size: .9rem; color: var(--mute); }
.shelf i { font-style: normal; font-size: .78rem; color: var(--tense); }

.state { margin-top: 26px; display: grid; justify-items: start; gap: 14px; padding: 22px; border: 1px solid rgba(255, 215, 114, .3); border-radius: 22px; background: rgba(255, 255, 255, .035); }
.state p { color: var(--mute); max-width: 58ch; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.facts > div { padding: 12px 0; border-bottom: 1px solid var(--hair); min-width: 0; }
.facts__wide { grid-column: 1 / -1; }
.facts dt { font-size: .82rem; color: var(--mute); }
.facts dd { margin: 4px 0 0; overflow-wrap: anywhere; }
/* профиль: слева — кто и чьи карты, справа — вход и пароль */
.prof { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; width: min(1140px, calc(100% - 2 * clamp(10px, 3vw, 44px))); max-width: none; padding: 0; }
.prof .card { width: 100%; max-width: none; margin: 0; }
.prof__facts { margin-top: 22px; }
.prof__facts dd { font-size: 1.06rem; }
.prof__side > .card__h:first-child { margin-top: 0; }
.prof__side .form { margin-top: 18px; }
.prof__side .danger { margin-top: clamp(30px, 4vw, 44px); }
.people li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
.people li > span { grid-column: 1 / -1; }
.people__sun { justify-self: end; padding: 5px 13px; border: 1px solid rgba(255, 215, 114, .5); border-radius: 999px; font-style: normal; font-size: .82rem; color: var(--glow-hi); white-space: nowrap; }
@media (max-width: 940px) { .prof { grid-template-columns: minmax(0, 1fr); } }

/* отзыв о разборе */
.fbform .step { margin-top: 30px; gap: 12px; }
.fbform .step:first-of-type { margin-top: 6px; }
.fbform .btn { margin-top: 14px; }
.rate { display: flex; gap: 2px; margin-left: -8px; }
.rate__s { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; color: rgba(244, 242, 234, .46); cursor: pointer; transition: color .18s, transform .3s cubic-bezier(.16, 1, .3, 1), filter .18s; -webkit-tap-highlight-color: transparent; }
.rate__s input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rate__s svg { width: 38px; height: 38px; fill: currentColor; pointer-events: none; }
.rate__s.is-on, .rate__s:has(input:checked), .rate__s:has(~ .rate__s input:checked) { color: var(--glow); filter: drop-shadow(0 5px 12px rgba(255, 215, 114, .55)); }
.rate__s:has(input:focus-visible) { outline: 2px solid var(--glow); outline-offset: -2px; }
.rate__s:active { transform: scale(.9); }
@media (hover: hover) {
  .rate:not(.rate--shown):hover .rate__s { color: rgba(244, 242, 234, .46); filter: none; }
  .rate:not(.rate--shown) .rate__s:hover, .rate:not(.rate--shown) .rate__s:has(~ .rate__s:hover) { color: var(--glow-hi); filter: drop-shadow(0 5px 12px rgba(255, 215, 114, .55)); }
}
.rate--shown { margin-top: 24px; }
.rate--shown .rate__s { cursor: default; }
.rate__word { min-height: 1.3em; font: 400 1.4rem/1.2 var(--display); color: var(--glow-hi); }
.rate__word:empty::before { content: 'Нажмите на звезду'; font: 400 .9rem/1.9 var(--text); color: var(--mute); }
.ord__fb { justify-self: start; min-height: 32px; display: inline-flex; align-items: center; font-size: .9rem; color: var(--glow-hi); text-underline-offset: 3px; }
.fbstat { margin-top: 24px; }
.fblist { margin-top: 28px; display: grid; gap: 12px; }
.fblist li { display: grid; gap: 8px; padding: 18px 20px; border: 1px solid rgba(244, 242, 234, .16); border-radius: 20px; background: rgba(255, 255, 255, .025); }
.fblist__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: .86rem; color: var(--mute); }
.fblist__top b { font: 400 1.3rem/1 var(--display); color: var(--glow-hi); }
.fblist__pub { color: var(--glow-hi); }
.fblist__liked { font-size: .9rem; color: var(--mute); }
.fblist__text { max-width: 76ch; white-space: pre-line; overflow-wrap: anywhere; }

.danger { border: 1px solid rgba(255, 159, 174, .35); border-radius: 18px; padding: 4px 18px; }
.danger summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; cursor: pointer; color: var(--warn); list-style: none; }
.danger summary::-webkit-details-marker { display: none; }
.danger summary::before { content: ''; flex: none; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat; }
.danger[open] summary::before { background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat; }
.danger p { color: var(--mute); max-width: 58ch; }
.danger .form { margin: 18px 0; }

/* чтение разбора */
.reader { margin: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }
.reader__bar { display: flex; align-items: center; gap: 18px; min-height: 54px; padding: 6px var(--pad); background: rgba(5, 7, 28, .96); border-bottom: 1px solid rgba(255, 215, 114, .3); }
.reader__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--glow-hi); text-decoration: none; font-size: .94rem; white-space: nowrap; }
.reader__back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reader__title { min-width: 0; font-size: .86rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader__bar .snd { margin-left: auto; padding: 0 14px 0 12px; background: rgba(255, 215, 114, .06); border-color: rgba(255, 215, 114, .5); color: var(--glow-hi); }
.reader__bar .snd span { display: inline; }
.reader__bar .snd.is-on { color: var(--on-glow); background: linear-gradient(180deg, #fff3c9 0%, #ffd772 46%, #f0b53a 100%); border-color: transparent; box-shadow: 0 0 18px rgba(255, 215, 114, .45); }
@media (max-width: 640px) { .reader__prod, .reader__bar .snd span { display: none; } .reader__bar .snd { padding: 0; } .reader__bar { gap: 12px; } }
.reader__frame { width: 100%; height: 100%; border: 0; display: block; background: transparent; color-scheme: dark; }

/* логотип: страница выбора */
.brand__row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px clamp(20px, 4vw, 48px); align-items: center; padding: 30px 0; border-top: 1px solid rgba(255, 215, 114, .22); margin-top: 30px; }
.brand__big img { width: 100%; max-width: 220px; height: auto; filter: drop-shadow(0 0 18px rgba(255, 215, 114, .45)); }
.brand__info p { color: var(--mute); max-width: 52ch; }
.brand__info .card__h { margin-top: 0; }
.brand__logo { margin-top: 22px; width: min(100%, 440px); height: auto; filter: drop-shadow(0 0 10px rgba(255, 215, 114, .35)); }
.brand__small { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
@media (max-width: 640px) { .brand__row { grid-template-columns: minmax(0, 1fr); } .brand__big img { max-width: 160px; } }

/* подвал */
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
.foot__nav a { display: inline-block; padding: 12px 0; }

@media (max-width: 640px) {
  .row2, .goods, .shelf, .facts { grid-template-columns: minmax(0, 1fr); }
  .fld--short { max-width: none; }
  .acc { gap: 16px; font-size: .9rem; white-space: nowrap; }
  .top:has(.acc--user) .mark span { display: none; }
  .top:has(.acc--user) { gap: 10px; }
  .acc--user { gap: 12px; margin-left: auto; }
  .ord .btn, .cab__head .btn { width: 100%; }
  .foot__grid { flex-direction: column; }
  .page__main { padding-top: 84px; }
  .chips span { min-height: 46px; padding: 9px 14px; }
}