/* Неоморфизм (soft UI): светлая и тёмная темы. Подключается после основного <style>.
   Тема — атрибут data-theme на <html> (ставит скрипт в <head> до отрисовки). */
:root,:root[data-theme="light"]{
  color-scheme:light;
  --nu-bg:#EFECF9; --nu-hi:#FFFFFF; --nu-sh:#D0C9E6;
  --nu-ink:#18162C; --nu-ink2:#514E68; --nu-ink3:#6B6880;
  --nu-ac1:#5A3FE0; --nu-ac2:#C700CB; --nu-ac-text:#5D18AC; --nu-ac-glow:rgba(122,56,220,.28);
  --nu-line:rgba(24,22,44,.08);
  --nu-r1:5px 5px 12px var(--nu-sh),-5px -5px 12px var(--nu-hi);
  --nu-r2:9px 9px 22px var(--nu-sh),-9px -9px 22px var(--nu-hi);
  --nu-r3:14px 14px 34px var(--nu-sh),-14px -14px 34px var(--nu-hi);
  --nu-in:inset 4px 4px 9px var(--nu-sh),inset -4px -4px 9px var(--nu-hi);
  --nu-in-sm:inset 2px 2px 5px var(--nu-sh),inset -2px -2px 5px var(--nu-hi);
  --nu-grad-word:linear-gradient(110deg,#4F37D9,#8B45E6,#D94A94,#4F37D9);
  --bg:var(--nu-bg); --ink:var(--nu-ink); --ink-soft:var(--nu-ink2); --line:var(--nu-line);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  /* блик сиреневый, не белый; тёмная сторона крупнее блика */
  --nu-bg:#282634; --nu-hi:#37324B; --nu-sh:#16141E;
  --nu-ink:#EEECF7; --nu-ink2:#B3AFCB; --nu-ink3:#9D98B8;
  --nu-ac1:#6A50F2; --nu-ac2:#C630D2; --nu-ac-text:#C6B4FF; --nu-ac-glow:rgba(150,80,240,.40);
  --nu-line:rgba(255,255,255,.07);
  --nu-r1:6px 6px 13px var(--nu-sh),-4px -4px 10px var(--nu-hi);
  --nu-r2:10px 10px 24px var(--nu-sh),-6px -6px 16px var(--nu-hi);
  --nu-r3:16px 16px 36px var(--nu-sh),-9px -9px 24px var(--nu-hi);
  --nu-in:inset 5px 5px 10px var(--nu-sh),inset -3px -3px 8px var(--nu-hi);
  --nu-in-sm:inset 2px 2px 5px var(--nu-sh),inset -2px -2px 4px var(--nu-hi);
  --nu-grad-word:linear-gradient(110deg,#8F84FF,#B98BFF,#F08DC2,#8F84FF);
}

/* ---------- основа ---------- */
html,body{background:var(--nu-bg)}
body{color:var(--nu-ink);transition:background-color .3s ease,color .3s ease}
.atmosphere,.blob{display:none}
::selection{background:var(--nu-ac1);color:#fff}
.h1,.h2,h1,h2,h3,.oa-cap,.kt-panel h3{color:var(--nu-ink)}
#hero-h .grad-word{background-image:var(--nu-grad-word)}
.lead,.text-stack .lead,.kt-lead{color:var(--nu-ink2)}
.nav-logo svg path[fill="#1D2028"],.footer-brand svg path[fill="#1D2028"]{fill:var(--nu-ink)}

/* ---------- фокус с клавиатуры ---------- */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--nu-ac1);outline-offset:4px}

/* ---------- общие «выпуклые» элементы ---------- */
.nav-links > li > a,.nav-links .nav-drop-btn,.nav-user,.btn-white,.role-c,.nav-burger,.theme-sw{
  background:var(--nu-bg);border:0;box-shadow:var(--nu-r1);
  transition:box-shadow .2s ease,color .2s ease,transform .2s ease;
}
.nav-links > li > a,.nav-links .nav-drop-btn{color:var(--nu-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-links > li > a:hover,.nav-links .nav-drop-btn:hover,.nav-user:hover,.btn-white:hover{background:var(--nu-bg);color:var(--nu-ac-text);box-shadow:var(--nu-r2)}
.nav-links > li > a:active,.nav-links .nav-drop-btn:active,.nav-user:active,.btn-white:active,.nav-burger:active{box-shadow:var(--nu-in);transform:none}
.nav-user{color:var(--nu-ink)}
.nav-burger{border-radius:14px}
.nav-burger span{background:var(--nu-ink)}

/* выпадающее и мобильное меню — приподнятая панель */
.nav-menu,.nav-mobile{background:var(--nu-bg);border:0;box-shadow:var(--nu-r3);-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-menu a,.nav-mobile a{color:var(--nu-ink)}
.nav-menu a:hover,.nav-mobile a:hover,.nav-mobile a:active{background:var(--nu-bg);box-shadow:var(--nu-in-sm);color:var(--nu-ac-text)}
.nav-mobile .nm-cap{color:var(--nu-ink3)}

/* ---------- главная кнопка: акцент, выпуклая ---------- */
.btn-primary{
  background:linear-gradient(135deg,var(--nu-ac1),var(--nu-ac2));color:#fff;border:0;
  box-shadow:var(--nu-r2),0 8px 22px var(--nu-ac-glow),inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--nu-r2),0 12px 28px var(--nu-ac-glow),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary:active{transform:none;box-shadow:inset 3px 3px 8px rgba(20,14,70,.35),inset -2px -2px 6px rgba(255,255,255,.18)}
/* знак Google — на белом круге, как требует Google */
.gbtn svg{background:#fff;border-radius:50%;padding:5px;box-sizing:content-box;box-shadow:0 1px 3px rgba(20,14,70,.25)}
.btn-white{color:var(--nu-ink)}

/* ---------- первый экран ---------- */
.oa-icon{filter:none;box-shadow:var(--nu-r3)}
.beta-note{background:var(--nu-bg);box-shadow:var(--nu-in-sm);color:var(--nu-ac-text);border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.oa-mid .beta-note{margin:4px 0 0;padding:5px 14px;font-size:12.5px}
.role-c{color:var(--nu-ac-text);-webkit-backdrop-filter:none;backdrop-filter:none}
.role:hover .role-c{transform:none;box-shadow:var(--nu-r2);background:var(--nu-bg)}
.role:active .role-c{box-shadow:var(--nu-in)}
.role-t{color:var(--nu-ink)}
.plat .l-dark{display:none}
:root[data-theme="dark"] .plat .l-light{display:none}
:root[data-theme="dark"] .plat .l-dark{display:block}

/* ---------- «Кто ты?» ---------- */
.kt-card{background:var(--nu-bg);border:0;box-shadow:var(--nu-r2);color:var(--nu-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.kt-card:hover{transform:none;box-shadow:var(--nu-r3);background:var(--nu-bg)}
.kt-card:active{box-shadow:var(--nu-in)}
.kt-ic{background:var(--nu-bg);border:0;box-shadow:var(--nu-in);color:var(--nu-ac-text);-webkit-backdrop-filter:none;backdrop-filter:none}
.kt-card .kt-ic{box-shadow:var(--nu-in)}
.kt-s{color:var(--nu-ink3)}
.kt.picked .kt-card{box-shadow:var(--nu-r1)}
.kt.picked .kt-card[aria-selected="true"]{background:var(--nu-bg);color:var(--nu-ac-text);border:0;box-shadow:var(--nu-in)}
.kt.picked .kt-card[aria-selected="true"] .kt-ic{background:linear-gradient(135deg,var(--nu-ac1),var(--nu-ac2));color:#fff;box-shadow:0 3px 10px var(--nu-ac-glow)}
.kt-panel{background:var(--nu-bg);border:0;box-shadow:var(--nu-r3);-webkit-backdrop-filter:none;backdrop-filter:none}
.kt-panel li{color:var(--nu-ink2)}
.kt-panel li::before{background:linear-gradient(135deg,var(--nu-ac1),var(--nu-ac2));box-shadow:0 2px 6px var(--nu-ac-glow)}

/* ---------- подвал ---------- */
.footer{background:var(--nu-bg);border-top:0;box-shadow:inset 0 1px 0 var(--nu-line)}
.footer-brand p,.footer-links a,.footer-legal,.footer-links-mobile a{color:var(--nu-ink2)}
.footer-links a:hover{color:var(--nu-ac-text)}
.footer-legal{border-top-color:var(--nu-line)}
.skip{background:var(--nu-bg);color:var(--nu-ink);box-shadow:var(--nu-r2)}

/* ---------- переключатель темы ---------- */
.theme-sw{position:relative;flex:none;width:62px;height:32px;padding:0;border-radius:999px;cursor:pointer;box-shadow:var(--nu-in)}
.theme-sw .ts-knob{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--nu-bg);box-shadow:var(--nu-r1);color:#E0A21B;transition:transform .28s cubic-bezier(.3,.7,.3,1),background .28s,color .28s}
.theme-sw svg{width:15px;height:15px}
.theme-sw .ic-moon{display:none}
:root[data-theme="dark"] .theme-sw .ts-knob{transform:translateX(30px);background:linear-gradient(135deg,var(--nu-ac1),var(--nu-ac2));color:#fff;box-shadow:0 2px 10px var(--nu-ac-glow)}
:root[data-theme="dark"] .theme-sw .ic-sun{display:none}
:root[data-theme="dark"] .theme-sw .ic-moon{display:block}
.theme-sw:focus-visible{outline:2px solid var(--nu-ac1);outline-offset:4px}
@media (max-width:860px){.theme-sw{width:56px;height:30px}.theme-sw .ts-knob{width:22px;height:22px}:root[data-theme="dark"] .theme-sw .ts-knob{transform:translateX(26px)}}

@media (prefers-reduced-motion:reduce){body,.theme-sw .ts-knob{transition:none}}