/* ============================================================
   Страницы для взрослых: вход, а дальше личный кабинет.
   Тот же облик, что у «Моего доступа» и страницы покупки:
   светлый фон, карточки, крупные кнопки.
   Пользуются: login/index.html
   ============================================================ */
:root{
  --bg:#FFF4E4; --surface:#FFFDF8; --ink:#2D1B45; --ink-2:#6B5680; --ink-3:#A797B8;
  --pri-1:#E4D9FF; --pri-2:#A98BFF; --pri-3:#7B4FF2; --pri-4:#5836BD;
  --ok-3:#1FA76E; --warn-3:#D94A34;
  --line:rgba(45,27,69,.1);
  --brand:'Unbounded','Nunito',system-ui,sans-serif;
  --shadow:0 10px 22px -8px rgba(45,27,69,.18),0 4px 10px -4px rgba(45,27,69,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;padding:0 0 56px;background:var(--bg);color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}
.wrap{max-width:460px;margin:0 auto;padding:0 20px}
a{color:var(--pri-3);font-weight:800;text-decoration:none}
a:hover{color:var(--pri-4)}

.top{padding:20px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.top img{height:30px;display:block}
.top .back{font-weight:800;font-size:14px;color:var(--ink-2)}

h1{font-family:var(--brand);font-weight:700;font-size:27px;line-height:1.18;margin:18px 0 8px;letter-spacing:-.015em}
.lede{font-weight:700;font-size:15px;line-height:1.5;color:var(--ink-2);margin:0 0 22px}
.lede b{color:var(--ink);word-break:break-all}

.card{background:var(--surface);border-radius:24px;padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}

.field{display:block;margin-bottom:14px}
.field span{display:block;font-weight:800;font-size:13.5px;color:var(--ink-2);margin:0 0 7px 4px}
.field input{width:100%;padding:15px 16px;border:none;border-radius:16px;
  font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:17px;
  color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px rgba(45,27,69,.14);outline:none}
.field input::placeholder{color:var(--ink-3);font-weight:700}
.field input:focus{box-shadow:inset 0 0 0 2px var(--pri-2)}
/* код — крупно и вразрядку: шесть цифр читаются и сверяются с письмом с одного взгляда */
.field input.code{font-family:var(--brand);font-weight:700;font-size:28px;letter-spacing:.35em;
  text-align:center;padding:14px 10px 14px calc(10px + .35em)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 24px;border:none;
  border-radius:999px;cursor:pointer;font-family:var(--brand);font-weight:700;font-size:15px;
  color:var(--ink);text-decoration:none;transition:transform .1s,filter .15s;white-space:nowrap}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn:active{transform:translateY(3px)}
.btn:disabled{cursor:default;opacity:.6;filter:saturate(.4);transform:none}
.btn--pri{color:#fff;background:linear-gradient(180deg,#9B78FF,#7B4FF2 60%,#6E41E4);box-shadow:0 5px 0 var(--pri-4)}
.btn--wide{width:100%}

.msg{min-height:20px;margin-top:12px;font-weight:800;font-size:13.5px;line-height:1.45}
.msg--bad{color:var(--warn-3)}
.msg--ok{color:var(--ok-3)}

/* Кнопка, которая выглядит ссылкой */
.lnk{padding:0;border:none;background:none;cursor:pointer;font:inherit;font-weight:800;font-size:14px;
  color:var(--pri-3);text-decoration:underline;text-underline-offset:2px}
.lnk:disabled{color:var(--ink-3);text-decoration:none;cursor:default}
.links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 18px;margin-top:16px}

.hint{font-weight:700;font-size:13px;line-height:1.6;color:var(--ink-3);margin:14px 4px 0}

/* ── доступ и оплата ───────────────────────────────────────
   Пользуются: base/pay.html (оплата) и access/index.html («мой доступ»).
   Держим здесь, а не на страницах: облик у них общий, и разъезжаться
   им нельзя — человек ходит между ними в одном сценарии. */
.wrap--wide{max-width:640px}

/* Полоса состояния: открыт доступ или нет — первое, что видно на странице */
.state{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:22px;
  background:var(--surface);box-shadow:var(--shadow);margin-bottom:18px}
.state__dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--ink-3)}
.state--on .state__dot{background:#4ED99B;box-shadow:0 0 0 4px rgba(78,217,155,.22)}
.state b{display:block;font-family:var(--brand);font-weight:700;font-size:16px;line-height:1.3}
.state span{display:block;font-weight:700;font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}

/* Тарифы */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.plans{grid-template-columns:1fr}}
.plan{position:relative;background:var(--surface);border-radius:24px;padding:22px 20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.plan--best{background:linear-gradient(180deg,#FFFBEC,#FFF6DC);
  box-shadow:0 16px 34px -14px rgba(232,174,31,.45),inset 0 0 0 2px rgba(255,216,77,.75)}
.plan__flag{position:absolute;top:-11px;left:20px;padding:5px 13px;border-radius:999px;
  font-family:var(--brand);font-weight:700;font-size:10.5px;letter-spacing:.05em;
  background:linear-gradient(180deg,#FFF1B4,#FFD84D);color:#5C4200}
.plan__tier{font-weight:800;font-size:13px;color:var(--ink-2)}
.plan__amt{font-family:var(--brand);font-weight:700;font-size:34px;line-height:1.1;margin:4px 0 6px}
.plan__note{font-weight:700;font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:0 0 16px;flex:1}
.plan .btn{width:100%}
.plan--best .btn{color:var(--ink);background:linear-gradient(180deg,#FFF1B4,#FFD84D 60%,#FFC53A);
  box-shadow:0 5px 0 #E8AE1F}

/* Мелкий текст под тарифами и в подвале страниц доступа */
.fine{font-weight:700;font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:18px 0 0}
.fine a{color:var(--ink-2);text-decoration:underline}

/* Заголовок внутри карточки и список игр: «Мой доступ» */
.card h3{font-family:var(--brand);font-weight:700;font-size:17px;margin:0 0 6px}
.card .lede{margin:0 0 16px}
.glist div{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--line);
  font-weight:700;font-size:14px}
.glist div:first-child{border-top:none}
.glist b{font-weight:800}
.glist .n{color:var(--ink-3);font-size:13px}
.glist .mark{margin-left:auto;font-weight:800;font-size:13px;color:var(--ink-3)}
.glist .mark--on{color:var(--ok-3)}

/* Многострочное поле: список кодов на служебной странице */
.field textarea{width:100%;padding:14px 16px;border:none;border-radius:16px;resize:vertical;
  font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:15px;line-height:1.5;
  color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px rgba(45,27,69,.14);outline:none}
.field textarea:focus{box-shadow:inset 0 0 0 2px var(--pri-2)}
.field select{width:100%;padding:15px 16px;border:none;border-radius:16px;
  font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:15px;
  color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px rgba(45,27,69,.14);outline:none}