/* версия: v2026-08-01-buy-banner */
/* UStudy base.css — метка проверки версии: v2026-07-22-golos */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');
:root{
  --ink:#10162F;
  --ink-soft:#4A5470;
  --bg:#F6F8FD;
  --card:#FFFFFF;
  --line:#E3E9F5;
  --blue:#3B46E0;
  --blue-dark:#2A33B8;
  --blue-soft:#EBEDFD;
  --amber:#FFAA1E;
  --amber-soft:#FFF4DE;
  --amber-ink:#8A5B00;
  --mint:#17B389;
  --mint-soft:#E2F8F1;
  --mint-ink:#0E8A68;
  --rose:#E0466A;
  --rose-soft:#FCE7EC;
  --rose-ink:#B12246;
  --radius:18px;
  --shadow:0 12px 40px rgba(42,51,184,.10);
  --font-display:'Golos Text',sans-serif;
  --font-body:'Golos Text',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Атрибут hidden должен скрывать элемент всегда. Без этого правила любой
   собственный display (например, у .btn — inline-flex) перебивает встроенное
   скрытие браузера, и «скрытая» кнопка рисуется пустым прямоугольником.
   Правило обязано быть вне медиазапросов: раньше оно стояло внутри
   @media(max-width:480px) и на десктопе не работало вовсе — оттуда пустые
   секции и кнопки-призраки. */
[hidden]{display:none !important}
body{font-family:var(--font-body);font-weight:400;background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
.wrap{max-width:980px;margin:0 auto;padding:0 24px;width:100%}

nav{position:sticky;top:0;z-index:50;background:rgba(246,248,253,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo svg{height:26px;width:auto;display:block}
.nav-right{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;justify-content:flex-end}
.nav-right>*{flex:none}
.nav-auth{display:flex;align-items:center;gap:10px}
.nav-link{font-family:var(--font-body);font-weight:800;font-size:14px;color:var(--blue);text-decoration:none;padding:8px 6px;white-space:nowrap}
.nav-link:hover{color:var(--blue-dark)}
.nav-link-btn{font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--ink-soft);background:none;border:none;cursor:pointer;padding:8px 2px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.nav-link-btn:hover{color:var(--ink)}
.step-tag{font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 14px}

/* На телефоне все пункты шапки в одну строку не помещаются (логотип,
   Кабинет, История, имя, Выйти, WhatsApp, язык). Вместо горизонтальной
   прокрутки — перенос на вторую строку: так всё видно и по всему можно
   попасть пальцем, ничего не нужно листать. */
@media(max-width:560px){
  .nav-inner{flex-wrap:wrap;height:auto;padding:10px 0;gap:8px}
  .nav-right{width:100%;justify-content:flex-end;flex-wrap:wrap;gap:8px 10px}
  .nav-auth{display:flex;align-items:center;justify-content:flex-end;gap:8px 10px;flex-wrap:wrap}
}

@media(max-width:480px){
  .wrap{padding:0 16px}
  .logo svg{height:20px}
  .nav-right{gap:6px}
  .nav-auth{gap:6px}
  .nav-link{font-size:12.5px;padding:6px 4px}
  .nav-link-btn{font-size:11.5px;padding:6px 2px}
  .nav-auth .nav-link{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .step-tag{display:none}
  .btn{font-size:15px;padding:13px 20px}
  .langflip button{font-size:12px;padding:4px 9px}
}

/* Очень узкие экраны (iPhone SE и подобные, ~320-380px): переключатель
   языка в шапке съедает место, которое нужнее ссылкам — на главной он
   продублирован в теле страницы, поэтому здесь его прячем. */
@media(max-width:380px){
  .nav-link{font-size:12.5px;padding:6px 3px}
}

/* Переключатель языка — выпадающий список на нативном <details>:
   не требует JS для открытия/закрытия и работает во всех браузерах. */
.langflip{flex:none;position:relative}
.langflip>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-family:var(--font-mono);font-weight:700;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.langflip>summary::-webkit-details-marker{display:none}
.langflip>summary::after{content:'▾';font-size:10px;line-height:1}
.langflip>summary:hover{border-color:#C9D2F2;color:var(--ink)}
.langflip[open]>summary{border-color:var(--blue);color:var(--blue-dark)}
.langflip-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:var(--shadow);min-width:92px}
.langflip-menu button{border:none;background:none;font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--ink-soft);padding:8px 12px;border-radius:8px;cursor:pointer;text-align:left;white-space:nowrap}
.langflip-menu button:hover{background:var(--bg);color:var(--ink)}
.langflip-menu button.on{background:var(--blue);color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:800;font-size:16px;text-decoration:none;border:none;cursor:pointer;border-radius:14px;padding:14px 26px;transition:transform .15s,background .15s}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(59,70,224,.35)}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-1px)}
/* Второстепенное действие рядом с главным: та же форма и размер, но
   обводка вместо заливки — видно, что это альтернатива, а не равный выбор. */
.btn-outline{background:none;color:var(--blue);box-shadow:inset 0 0 0 2px var(--line)}
.btn-outline:hover{box-shadow:inset 0 0 0 2px var(--blue);background:var(--blue-soft);transform:translateY(-1px)}

footer{padding:26px 0;color:var(--ink-soft);font-size:13.5px;text-align:center}

/* Карточка пакета — используется и на главной, и в окне выбора
   на странице слабых тем, поэтому живёт в общих стилях. */
.pkg-card{display:flex;flex-direction:column;background:var(--bg);border:2px solid var(--line);border-radius:16px;padding:20px;transition:border-color .15s,transform .15s}
.pkg-card:hover{border-color:#C9D2F2;transform:translateY(-2px)}
.pkg-card.featured{border-color:var(--blue);background:var(--card)}
.pkg-name{font-family:var(--font-display);font-weight:800;font-size:17px}
.pkg-desc{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.5}
.pkg-price{font-family:var(--font-display);font-weight:800;font-size:20px;margin-top:14px}
.pkg-price small{display:block;font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--ink-soft);margin-top:2px}
.pkg-price.none{font-size:14px;font-weight:700;color:var(--ink-soft)}
.pkg-feats{list-style:none;margin:16px 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.pkg-feats li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.45}
.pkg-feats li::before{content:'✓';position:absolute;left:0;top:0;color:var(--mint-ink);font-weight:800}
.pkg-btn{margin-top:auto;font-family:var(--font-body);font-weight:800;font-size:13.5px;border:none;border-radius:12px;padding:12px 18px;cursor:pointer;background:var(--amber);color:var(--ink);transition:background .15s}
.pkg-btn:hover{background:var(--amber-ink);color:#fff}
.pkg-card.featured .pkg-btn{background:var(--blue);color:#fff}
.pkg-card.featured .pkg-btn:hover{background:var(--blue-dark)}

/* Переключатель предметов — общий для «Твой путь» и страницы слабых тем. */
.subject-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.subject-pill{font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:9px 18px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.subject-pill:hover{border-color:#C9D2F2}
.subject-pill.active{background:var(--blue);border-color:var(--blue);color:#fff}
@media(max-width:560px){
  .subject-pills{gap:6px;margin-bottom:18px}
  .subject-pill{font-size:12.5px;padding:7px 13px}
}