/* NAUTEX · основа: тема, цвета, страница, кнопки */
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-tap-highlight-color: transparent;
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; margin: 0; }
html, body { background: #F3F0EA; }
html:has(#tdk:checked), body:has(#tdk:checked) { background: #12202E; }
@media (prefers-color-scheme: dark) {
  html:has(#tauto:checked), body:has(#tauto:checked) { background: #12202E; }
}
body {
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}

/* ---------- Переключатель темы в шапке (без скриптов) ---------- */
.rb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.theme-tg { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg); box-shadow: var(--shadow-small); }
.theme-tg label {
  position: relative; width: 38px; height: 36px; display: grid; place-items: center; border-radius: 999px; cursor: pointer; color: var(--muted);
  transition: box-shadow .14s ease-out, color .14s ease-out;
}
.theme-tg label::after { content: ""; position: absolute; inset: -6px; }
#tlt:checked ~ .page .theme-tg label[for="tlt"],
#tdk:checked ~ .page .theme-tg label[for="tdk"] { color: var(--tb-active); box-shadow: inset 4px 4px 8px var(--sd), inset -4px -4px 8px var(--sl); }
#tlt:focus-visible ~ .page .theme-tg label[for="tlt"],
#tdk:focus-visible ~ .page .theme-tg label[for="tdk"] { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Цвета. Светлая тема по умолчанию ---------- */
.page {
  --bg: #F3F0EA; --text: #4A2813; --muted: #6F4A30;
  --sl: #FFFFFF; --sd: #D3CCC0;
  --blue: #6FB7E9; --blue-text: #0F2F47;
  --cta: #A1340A; --cta-text: #FFFFFF;
  --btn-shadow: 0 8px 16px -8px rgba(110,30,5,.65);
  --btn-pressed: inset 4px 4px 9px #6E2205, inset -3px -3px 8px #C4501F;
  --badge-bg: #DE542A; --badge-ink: #FFFFFF;
  --ai-sl: #E8F4FC; --ai-sd: #A5C7E0;
  --ex-ic-bg: #EAF6FD; --ex-ic-sh: none;
  --focus: #4A2813;
  --ok: #2F6B2A; --err: #A1260B;
  --ai-bg: #CFE6F7; --ai-ink: #0F2F47; --ai-muted: #3B6383;
  --ai-q: #0F2F47; --ai-q-ink: #CFE6F7;
  --ai-ghost: #CFE6F7; --ai-ghost-ink: #0F2F47;
  --hl: #A1340A; --hl-tint: rgba(161,52,10,.07);
  --ai-cta: var(--cta); --ai-cta-ink: var(--cta-text); --ai-cta-press: var(--btn-pressed);
  --rev-ink: #FFF6EF; --rev-muted: #FFE3D4;
  --tb-bg: #A6D1F0; --tb-hi: #CDE7F9; --tb-lo: #78A9CE; --tb-ink: #0F2F47; --tb-active: #A1340A;
  --tb-shadow: 0 12px 28px -12px rgba(15,47,71,.55);
  --tb-top: #C4E3F8; --tb-bot: #95C6EA; --tb-edge: rgba(255,255,255,.75); --tb-deep: rgba(15,47,71,.22);
  --plate-ink: #0F2F47; --plate-muted: #2F5675;
  --blue-press: inset 3px 3px 7px #4F97C9, inset -3px -3px 7px #93CBF1;
  --link: #0F2F47;
  --logo-ink: #143258; --num: #A1340A; --ic-ink: #A1340A;
  --plate-grad: linear-gradient(150deg, #C4E3F8, #94C9ED);
  --rev-grad: linear-gradient(150deg, #A1340A, #7A2507);
  --plate-raise: 8px 10px 22px -6px rgba(40,95,140,.45), -6px -6px 14px #FFFFFF, inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(15,47,71,.12);
  --rev-raise: 8px 10px 22px -6px rgba(110,30,5,.5), -6px -6px 14px #FFFFFF, inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(0,0,0,.2);

  --shadow-card: 9px 9px 20px var(--sd), -9px -9px 20px var(--sl);
  --shadow-small: 5px 5px 11px var(--sd), -5px -5px 11px var(--sl);
  --shadow-inset: inset 5px 5px 10px var(--sd), inset -5px -5px 10px var(--sl);
}
/* Тёмная тема: выбрана вручную */
#tdk:checked ~ .page {
  --bg: #12202E; --text: #E6EEF5; --muted: #A7B8C6;
  --sl: #1B2C3D; --sd: #070F17;
  --blue: #7CC4F2; --blue-text: #0B2638;
  --btn-shadow: 0 8px 16px -8px rgba(0,0,0,.75);
  --btn-pressed: inset 4px 4px 9px #5E1C04, inset -3px -3px 8px #C4501F;
  --focus: #7CC4F2;
  --ok: #A8D9A0; --err: #FFB49A;
  --ai-bg: #A1340A; --ai-ink: #FFFFFF; --ai-muted: #FFE3D4;
  --ai-ghost: #12202E; --ai-ghost-ink: #E6EEF5;
  --hl: #DE542A; --hl-tint: rgba(222,84,42,.12);
  --ai-q: #7CC4F2; --ai-q-ink: #0B2638;
  --ai-cta: #7CC4F2; --ai-cta-ink: #0B2638; --ai-cta-press: inset 3px 3px 7px #4E95C4, inset -3px -3px 7px #A9DBF8;
  --rev-ink: #EAF5FD; --rev-muted: #B9D6EC;
  --tb-bg: #1A2A3B; --tb-hi: #263A4F; --tb-lo: #0A141E; --tb-ink: #D3E1EC; --tb-active: #7CC4F2;
  --tb-top: #253A50; --tb-bot: #16242F; --tb-edge: rgba(255,255,255,.12); --tb-deep: rgba(0,0,0,.45);
  --badge-bg: #DE542A; --badge-ink: #FFFFFF;
  --ai-sl: #C4501F; --ai-sd: #6E2205;
  --ex-ic-bg: #7CC4F2; --ex-ic-sh: inset 3px 3px 7px #4E95C4, inset -3px -3px 7px #A9DBF8;
  --tb-shadow: 0 12px 28px -10px rgba(0,0,0,.75);
  --plate-ink: #E6EEF5; --plate-muted: #A7B8C6;
      --blue-press: inset 3px 3px 7px #4E95C4, inset -3px -3px 7px #A9DBF8;
  --link: #7CC4F2;
  --logo-ink: #FFFFFF; --num: #EE9A78; --ic-ink: #A1340A;
  --plate-grad: linear-gradient(150deg, #1A2C3E, #0F1B27);
  --rev-grad: linear-gradient(150deg, #2E5C82, #1F4364);
  --plate-raise: 8px 10px 20px -4px #050B12, -5px -5px 12px #1B2C3D, inset 1px 1px 0 rgba(255,255,255,.08), inset -1px -1px 0 rgba(0,0,0,.35);
  --rev-raise: 8px 10px 20px -4px #050B12, -5px -5px 12px #1B2C3D, inset 1px 1px 0 rgba(255,255,255,.12), inset -1px -1px 0 rgba(0,0,0,.3);
}
/* Тёмная тема: «Авто», когда на телефоне включена тёмная тема */
@media (prefers-color-scheme: dark) {
  #tauto:checked ~ .page {
    --bg: #12202E; --text: #E6EEF5; --muted: #A7B8C6;
    --sl: #1B2C3D; --sd: #070F17;
    --blue: #7CC4F2; --blue-text: #0B2638;
    --btn-shadow: 0 8px 16px -8px rgba(0,0,0,.75);
    --btn-pressed: inset 4px 4px 9px #5E1C04, inset -3px -3px 8px #C4501F;
    --focus: #7CC4F2;
    --ok: #A8D9A0; --err: #FFB49A;
    --ai-bg: #A1340A; --ai-ink: #FFFFFF; --ai-muted: #FFE3D4;
  --ai-ghost: #12202E; --ai-ghost-ink: #E6EEF5;
  --hl: #DE542A; --hl-tint: rgba(222,84,42,.12);
  --ai-q: #7CC4F2; --ai-q-ink: #0B2638;
  --ai-cta: #7CC4F2; --ai-cta-ink: #0B2638; --ai-cta-press: inset 3px 3px 7px #4E95C4, inset -3px -3px 7px #A9DBF8;
    --rev-ink: #EAF5FD; --rev-muted: #B9D6EC;
    --tb-bg: #1A2A3B; --tb-hi: #263A4F; --tb-lo: #0A141E; --tb-ink: #D3E1EC; --tb-active: #7CC4F2;
  --tb-top: #253A50; --tb-bot: #16242F; --tb-edge: rgba(255,255,255,.12); --tb-deep: rgba(0,0,0,.45);
  --badge-bg: #DE542A; --badge-ink: #FFFFFF;
  --ai-sl: #C4501F; --ai-sd: #6E2205;
  --ex-ic-bg: #7CC4F2; --ex-ic-sh: inset 3px 3px 7px #4E95C4, inset -3px -3px 7px #A9DBF8;
    --tb-shadow: 0 12px 28px -10px rgba(0,0,0,.75);
  --plate-ink: #E6EEF5; --plate-muted: #A7B8C6;
      --blue-press: inset 3px 3px 7px #4E95C4, inset -3px -3px 7px #A9DBF8;
  --link: #7CC4F2;
  --logo-ink: #FFFFFF; --num: #EE9A78; --ic-ink: #A1340A;
  --plate-grad: linear-gradient(150deg, #1A2C3E, #0F1B27);
  --rev-grad: linear-gradient(150deg, #2E5C82, #1F4364);
  --plate-raise: 8px 10px 20px -4px #050B12, -5px -5px 12px #1B2C3D, inset 1px 1px 0 rgba(255,255,255,.08), inset -1px -1px 0 rgba(0,0,0,.35);
  --rev-raise: 8px 10px 20px -4px #050B12, -5px -5px 12px #1B2C3D, inset 1px 1px 0 rgba(255,255,255,.12), inset -1px -1px 0 rgba(0,0,0,.3);
  }
}

/* ---------- Страница ---------- */
.page {
  max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--text);
  padding: 0 18px calc(132px + env(safe-area-inset-bottom, 0px)); overflow-x: clip;
  transition: background-color .2s ease-out, color .2s ease-out;
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; }
.logo-plate { flex: 0 1 auto; min-width: 0; padding: 8px 12px; border-radius: 16px; background: var(--bg); box-shadow: var(--shadow-small); color: var(--logo-ink); }
.logo-svg { display: block; height: 32px; width: auto; max-width: 100%; }
@media (max-width: 379px) {
  .top { gap: 8px; }
  .top .logo-plate { padding: 7px 10px; }
  .top .logo-svg { height: 26px; }
  .theme-tg label { width: 32px; height: 32px; }
}
.menu {
  width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--bg);
  color: var(--text); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-small);
  transition: transform .14s ease-out, box-shadow .14s ease-out;
}
.menu:active { transform: scale(.96); box-shadow: var(--shadow-inset); }

/* ---------- Кнопки ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; min-height: 54px;
  border-radius: 16px; border: 0; cursor: pointer; text-decoration: none;
  font: 600 16px/1 "Golos Text", system-ui, sans-serif;
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s cubic-bezier(.2,.8,.2,1), filter .14s ease-out;
}
.btn:focus-visible, .menu:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn:active { transform: scale(.97); }
.btn-main, .btn-cta { background: var(--cta); color: var(--cta-text); box-shadow: var(--btn-shadow); }
.btn-main:active, .btn-cta:active { box-shadow: var(--btn-pressed); }
.btn-ghost { background: var(--bg); color: var(--text); box-shadow: var(--shadow-small); }
.btn-ghost:active { box-shadow: var(--shadow-inset); }
.btn-cta { width: 100%; margin-top: 18px; }
@media (hover: hover) {
  .btn-main:hover, .btn-cta:hover { filter: brightness(1.07); }
  .btn-ghost:hover { filter: brightness(.98); }
}

/* ---------- Кнопка партнёрской программы в шапке ---------- */
.pt-btn {
  position: relative; flex: none; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--num); box-shadow: var(--shadow-small); cursor: pointer;
}
.pt-btn:active { box-shadow: var(--shadow-inset); }
.pt-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 379px) {
  .top .logo-svg { height: 21px; }
  .pt-btn { width: 36px; height: 36px; }
  .pt-btn::after { content: ""; position: absolute; inset: -4px; }
}