/* Екрани входу B02 (PLATFORM-E1-E2-SPEC §5): server/platform/app.css з c8fa4e5
   дослівно — так гарантовано той самий каскад, що на затверджених знімках.
   Прибрано лише вибір мови під карткою (.authlang і select.aulng, §5.3 п.1).
   ui.css на сторінку входу не підключається. */
/* Player platform — same design tokens as the join/role pages and the host app. */
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
:root{
  --ink:#10131A; --mut:#6B7480; --mut2:#8E97A3; --bg:#F4F5F7; --card:#fff;
  --line:#E4E7EC; --lineweak:#ECEEF2; --accent:#D02734; --accent-wash:#FBEAEC;
  --green:#46A758; --mafia:#7B3AED; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
body{background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif;
  min-height:100dvh;padding-bottom:86px;overflow-x:hidden}
#root{width:100%;max-width:480px;margin:0 auto;padding:18px 20px 30px;display:flex;
  flex-direction:column;gap:14px}
h1{font:600 26px/1.15 Oswald,sans-serif;text-transform:uppercase;white-space:pre-line}
h2{font:600 10.5px Manrope;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2)}
.lead{font:400 13px/1.55 Manrope;color:var(--mut);text-wrap:pretty}
.err{font:600 12.5px Manrope;color:var(--accent)}
.ok{font:600 12.5px Manrope;color:var(--green)}

/* Шапка — та сама розмітка й ті самі класи, що в brandBar (src/web.ts),
   щоб сторінки столу і платформа виглядали однією річчю. */
header.bar{width:100%;display:flex;align-items:center;gap:8px;padding:4px 0 8px}
.brandlink{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent}
.mark{width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font:600 16px Oswald;flex:none}
.brand{font:600 17px Oswald;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.brand i{color:var(--accent);font-style:normal}
.langpick{position:relative;margin-left:auto;display:flex;align-items:center;min-width:0}
.langpick::after{content:'▾';position:absolute;right:11px;pointer-events:none;
  font:600 10px Manrope;color:var(--mut2)}
select.lngsel{appearance:none;-webkit-appearance:none;min-height:34px;max-width:140px;flex:none;
  padding:0 25px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:#3D4654;font:600 12px Manrope;line-height:1;cursor:pointer;outline:none;
  text-overflow:ellipsis;white-space:nowrap}
select.lngsel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acct{font:700 12px Manrope;color:var(--ink);text-decoration:none;padding:9px 13px;
  border-radius:999px;background:var(--card);border:1px solid var(--line);flex:none;
  max-width:116px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Вигляд пігулок шапки — як на сторінках столу, а палець ловить 44px.
   overflow:visible тут обов'язковий: інакше пігулка обрізала б свою хіт-зону
   (задовгий нік натомість ріже JS). */
.brandlink,.acct{position:relative}
.acct{overflow:visible}
.brandlink::after,.acct::after{content:"";position:absolute;inset:-5px -4px}
.iconbtn{width:44px;height:44px;border-radius:50%;background:var(--card);flex:none;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--mut);cursor:pointer;text-decoration:none;font-size:15px}

.card{background:var(--card);border:1px solid var(--lineweak);border-radius:20px;padding:16px}
.pill{width:100%;height:56px;border-radius:999px;border:none;background:var(--accent);
  color:#fff;font:600 15px Oswald;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 10px 24px rgba(208,39,52,.24);cursor:pointer}
.pill:disabled{background:#EDEEF1;color:#AEB4BF;box-shadow:none;cursor:default}
.ghost{width:100%;min-height:48px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:#3D4654;font:600 13.5px Manrope;cursor:pointer}
/* Ті самі кнопки, але посиланнями — вирівнювання тексту тримає CSS, не стилі в розмітці */
a.pill,a.ghost{display:flex;align-items:center;justify-content:center;text-decoration:none}
.txt{width:100%;height:54px;border-radius:999px;border:1.5px solid var(--line);
  padding:0 22px;font:600 15px Manrope;outline:none;background:var(--card)}
.txt:focus{border-color:var(--accent)}
/* Код столу: поле на всю висоту пігулки, щоб палець влучав будь-де в ній */
.codein{flex:1;min-width:0;align-self:stretch;border:none;outline:none;background:none;
  font:600 17px var(--mono);letter-spacing:.2em;text-transform:uppercase}
textarea.txt{height:84px;border-radius:20px;padding:14px 20px;resize:none;font-weight:500}
label.fld{display:flex;flex-direction:column;gap:6px;font:600 11px Manrope;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font:600 12px Manrope;color:#3D4654}
.chip.acc{background:var(--accent-wash);border-color:rgba(208,39,52,.3);color:var(--accent)}
.mono{font-family:var(--mono)}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{background:var(--card);border:1px solid var(--lineweak);border-radius:16px;
  padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:3px}
.tile b{font:500 22px Oswald}
.tile span{font:600 9px Manrope;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut2);text-align:center;line-height:1.25}

.row{display:flex;align-items:center;gap:10px}
.list{display:flex;flex-direction:column;gap:6px}
.li{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--lineweak);border-radius:14px;padding:11px 14px}
.li .grow{flex:1;min-width:0}
.li b{font:700 14px Manrope;display:block}
.li small{font:500 11px Manrope;color:var(--mut2)}
.li .pts{font:600 13px var(--mono);font-family:var(--mono)}
.li.you{background:var(--ink);border-color:var(--ink)}
.li.you b,.li.you .pts{color:#fff}
.li.you small{color:#8E97A3}

.rolebar{display:flex;flex-direction:column;gap:4px}
.rolebar .rb-top{display:flex;justify-content:space-between;gap:10px;
  font:600 12px Manrope}
.rolebar .rb-top span:last-child{color:var(--mut2);font-weight:500;white-space:nowrap}
.rb-track{height:6px;border-radius:3px;background:var(--lineweak);overflow:hidden}
.rb-fill{height:100%;border-radius:3px;background:var(--accent)}

.seg{display:flex;gap:8px}
.seg button{flex:1;min-height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font:600 13px Manrope;color:var(--mut);cursor:pointer}
.seg button.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* Чотири ролі в рядок не влазять у 375px — тому сітка 2×2 */
.rolepick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rolepick button{min-height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font:600 12.5px Manrope;color:var(--mut);cursor:pointer;
  padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rolepick button.on{background:var(--ink);border-color:var(--ink);color:#fff}

.skins{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.skin{background:var(--card);border:1px solid var(--lineweak);border-radius:18px;
  padding:14px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.skin .sw{width:52px;height:74px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;color:#E3C56A;font:600 15px Oswald;
  box-shadow:0 6px 14px rgba(16,19,26,.18)}
.skin b{font:700 13.5px Manrope}
.skin small{font:500 11px Manrope;color:var(--mut2)}
.skin button{align-self:stretch;min-height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font:600 12px Manrope;cursor:pointer;color:#3D4654;padding:0 8px}
.skin button.buy{background:var(--accent);border-color:var(--accent);color:#fff}
.skin button.act{background:var(--green);border-color:var(--green);color:#fff}
.skin button:disabled{opacity:.5;cursor:default}

.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--card);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;
  padding:6px 6px calc(8px + env(safe-area-inset-bottom))}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:44px;flex:1;min-width:0;
  font:600 10px Manrope;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut2);text-decoration:none;padding:4px 6px;border-radius:12px}
.tabs a .tt{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs a.on{color:var(--accent)}
.tabs .ti{font-size:16px;line-height:1}

.center{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.avatar{width:76px;height:76px;border-radius:50%;background:var(--accent-wash);flex:none;
  border:1.5px solid rgba(208,39,52,.35);display:flex;align-items:center;
  justify-content:center;font:600 30px Oswald;color:var(--accent)}
.medals{display:flex;gap:8px;flex-wrap:wrap}
.medal{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font:600 13px Oswald;
  border:2px solid #C9A227}
.danger{color:var(--accent);background:none;border:none;font:600 13px Manrope;
  cursor:pointer;min-height:44px;padding:0}
footer{margin-top:18px;text-align:center;font:500 10px var(--mono);
  font-family:var(--mono);color:var(--mut2);letter-spacing:.12em;text-transform:uppercase}
/* Політика · Умови · Підтримка — над підписом, як у футері сторінок столу
   (web.ts). 8px падінгу збільшують ціль для пальця, не розсуваючи рядок. */
footer{display:flex;flex-direction:column;align-items:center;gap:8px}
.legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 8px;
  font:600 11.5px Manrope,sans-serif;letter-spacing:0;text-transform:none;color:var(--mut2)}
.legal a{color:var(--mut);text-decoration:none;padding:8px 0}

/* iPhone 375px: вужчі поля і дрібніший заголовок, щоб шапка лишалась в один рядок */
@media (max-width:400px){
  #root{padding:16px 14px 28px}
  h1{font-size:23px}
  .avatar{width:64px;height:64px;font-size:26px}
  .tile{padding:11px 4px}
  .tile b{font-size:20px}
  .acct{max-width:88px}
}

@media (min-width:900px){
  #root{max-width:720px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .rolepick{grid-template-columns:repeat(4,1fr)}
  .skins{grid-template-columns:repeat(4,1fr)}
}

/* ══ Екрани входу ══════════════════════════════════════════════════════════
   Дві половини: темна вітрина 520px і картка 394px на #F2F3F5; на телефоні
   вітрина стає шапкою 330px, а картка — формою на всю ширину. Числа зняті з
   макета (design_handoff_auth, турн 4) — округлення ламає перспективу столу. */
/* Акцент екранів входу — #E01F2D, а не спільний #D02734: інакше фокусна
   рамка перемикача мови під карткою світилась би чужим червоним. */
body.auth{--accent:#E01F2D;padding-bottom:0;background:#F2F3F5;color:#14161A}
body.auth #root{display:block;width:100%;max-width:none;margin:0;padding:0;gap:0}
.auth-wrap{display:flex;min-height:100dvh}

/* Вітрина ─ стіл, карти, логотип.
   Макет малювався під колонку 520px, а на ноуті вона виглядала вузькою смужкою.
   Тепер частки 60/40, а сцена не розтягується (це зламало б перспективу столу),
   а масштабується цілком: --kp рахує app.js як ширина колонки / 520.
   Колонка картки має мінімум 454px = картка 394 + поля 30, інакше на вузькому
   ноуті 40% з'їдали б саму картку. */
.sc{position:relative;flex:1 1 60%;min-width:0;overflow:hidden;background:#0A0B0E;color:#ECEFF3}
.sc-desk,.sc-phone{position:absolute;inset:0}
/* У розмітці лежить лише одна зі сцен (app.js, scScene), але правило потрібне:
   на злам 900px сцену міняє JS, а до того телефонна не має світитись. */
.sc-phone{display:none}
/* Карти лежать у площині столу, тому їхні left/top — координати ДО повороту:
   rotateZ виносить велике left за клип-бокс, і карта просто зникає. */
/* --kp множить лише СТІЛ: на ноуті колонка ширша за макетні 520px, і стіл має
   дійти до краю. Логотип масштабується окремо (--kl) і слабше — спільний
   множник на всю сцену зрізав би віяло карт зверху.
   perspective теж помножена на --kp: інакше на широкому екрані сітка росте, а
   камера лишається на місці, ближній кут переходить площину камери і стіл
   вивертається. Разом вони дають чистий зум — сцена всюди однакова.
   transform-origin у пікселях і біля БЛИЖНЬОГО краю сітки (1877/2179 — це
   плитка [9,11]), а не в центрі: так і ближній кут лишається перед камерою, і
   точка сходу підіймається, тож далекий край іде під верхнє затемнення, а не
   обривається смугою посеред кадру. Пікселі, а не відсотки, бо сітку
   доводилось розширювати з країв, а сцена мала лишитись тією самою.
   left рахується від СЕРЕДИНИ колонки, а не від лівого краю. Раніше тут стояла
   стала, і опорна точка масштабу лишалась на фіксованій відстані від краю: на
   ноуті 1024px колонка всього 570px, уся композиція з'їжджала праворуч, і в
   кадрі лишалось сім карт із шістнадцяти. Доданок підібраний так, щоб на
   1512px (колонка 907px) вийшло те саме -138px, що й було. Другі 792px — це
   чотири нові стовпці сітки, тобто зсув її власного початку, не композиції. */
.sc-plane{position:absolute;left:calc(50% - 1384px);bottom:-118px;width:3160px;height:2566px;
  transform:perspective(calc(545px * var(--kp,1))) rotateX(56deg) rotateZ(-32deg)
            scale(calc(.68 * var(--kp,1)));
  transform-origin:1877px 2179px;
  transform-style:preserve-3d}
.sc-b{position:absolute;width:190px;height:190px;border-radius:3px}
.sc-dom{position:absolute;right:14px;bottom:14px;font:700 15px Oswald,sans-serif;
  letter-spacing:.14em;color:#3A4252}
/* content-box навмисно: 86×120 — це сама картинка, а 1px рамка лежить зовні.
   З глобальним border-box кожна карта втрачала б по 2px, а на такій дрібній
   карті це вже помітно. Те саме для трійки-логотипа нижче. */
.sc-c{position:absolute;box-sizing:content-box;width:86px;height:120px;border-radius:9px;
  overflow:hidden;box-shadow:0 16px 26px rgba(0,0,0,.62)}
/* Ігровий арт — фігура по стегна на прозорому тлі (підложка світить крізь
   неї). object-fit:cover показав би її цілком, і на дрібній карті голова була
   б із ніготь, тому кадруємо явно: квадрат розтягнуто на 205% ширини карти й
   притиснуто до верху, тож у кадрі лишається верхні ~68% малюнка — голова,
   плечі й кольоровий акцент ролі (метелик, краватка, хрест). top:0, а не
   від'ємний — інакше зрізало б маківку капелюха в шерифа й мафії. */
.sc-c img,.sc-fan img{display:block;position:absolute;left:50%;top:0;
  width:205%;height:auto;max-width:none;transform:translateX(-50%)}
.sc-top{position:absolute;left:0;right:0;top:0;height:310px;z-index:1;
  background:linear-gradient(to bottom,#0A0B0E 34%,rgba(10,11,14,.74) 70%,rgba(10,11,14,0))}
/* Нижнє затемнення НЕ дзеркальне до верхнього (як каже README), а одна пологa
   рампа з макета — інакше передній ряд карт гасне вдвічі. */
.sc-bot{position:absolute;left:0;right:0;bottom:0;height:170px;z-index:1;
  background:linear-gradient(to top,#0A0B0E 26%,rgba(10,11,14,0))}
.sc-logo{position:absolute;left:0;right:0;top:64px;z-index:2;display:flex;
  flex-direction:column;align-items:center;gap:26px;
  transform:scale(var(--kl,1));transform-origin:center top}
.sc-fan{position:relative;width:340px;height:250px}
.halo-r{position:absolute;left:50%;top:34px;margin-left:-150px;width:300px;height:200px;
  border-radius:50%;filter:blur(6px);
  background:radial-gradient(ellipse,rgba(224,31,45,.46),transparent 68%)}
.halo-v{position:absolute;left:50%;top:18px;margin-left:-120px;width:240px;height:200px;
  border-radius:50%;filter:blur(6px);
  background:radial-gradient(ellipse,rgba(150,85,235,.5),transparent 66%)}
.fan-l,.fan-r{position:absolute;box-sizing:content-box;top:36px;width:134px;height:192px;
  border-radius:18px;overflow:hidden}
.fan-l{left:16px;background:#FBE9EC;border:1px solid rgba(224,31,45,.5);
  transform:rotate(-13deg);box-shadow:0 20px 44px rgba(0,0,0,.7),0 0 34px rgba(224,31,45,.28)}
.fan-r{right:16px;background:#E8EEFB;border:1px solid rgba(90,130,220,.5);
  transform:rotate(13deg);box-shadow:0 20px 44px rgba(0,0,0,.7),0 0 34px rgba(70,110,220,.24)}
/* #F0E6F7 — власний, тепліший відтінок центральної карти, а не мафійна плитка */
.fan-m{position:absolute;box-sizing:content-box;left:50%;top:6px;margin-left:-76px;
  width:152px;height:216px;border-radius:20px;overflow:hidden;background:#F0E6F7;
  border:1.5px solid #B87FE0;
  box-shadow:0 26px 56px rgba(0,0,0,.78),0 0 54px rgba(160,90,235,.5)}
/* Без цієї віньєтки слово лягає на світлі карти й зникає. */
.sc-word{position:relative;padding:6px 26px}
/* Ширша й пологіша за макетну: стіл під словом став світлішим, і на різкому
   спаді (суцільне до 36%, .8 на 62%) віньєтка читалась окремою чорною плямою,
   а не тінню. Три зупинки замість двох розтягують спад на всю півось. */
.sc-vig{position:absolute;left:50%;top:50%;margin:-92px 0 0 -235px;width:470px;height:184px;
  border-radius:50%;
  background:radial-gradient(ellipse,#0A0B0E 20%,rgba(10,11,14,.62) 46%,
             rgba(10,11,14,.22) 72%,rgba(10,11,14,0) 100%)}
.sc-word b{position:relative;display:block;font:700 74px/.86 Oswald,sans-serif;
  letter-spacing:.03em;text-transform:uppercase;
  text-shadow:0 2px 18px rgba(10,11,14,.9),0 0 40px rgba(224,31,45,.28)}
.sc-word i{color:#E01F2D;font-style:normal}

/* Телефонна вітрина: та сама сцена, але щільніша й темніша під шапку 330px.
   Тут --kp немає (fitShowcase працює від 900px), тож площина має сама
   покривати всю ширину брейкпоінта 320…899 — звідси сітка 12×10. */
/* left прив'язаний до СЕРЕДИНИ шапки, а не до лівого краю: --kp тут немає, і
   на планшеті 768-899px увесь стос карт збирався в лівій третині, а справа
   лишався порожній стіл. calc дає ті самі -120px на 375px і зсуває сцену
   разом із логотипом на ширших екранах. */
.sc-phone .sc-plane{left:calc(50% - 307px);bottom:0;width:1506px;height:1254px;
  transform:perspective(640px) rotateX(61deg) rotateZ(-32deg);
  transform-origin:50% 84%}
.sc-phone .sc-b{width:120px;height:120px;border-radius:2px}
.sc-phone .sc-dom{right:9px;bottom:9px;font-size:10px;letter-spacing:.12em;color:#191C23}
.sc-phone .sc-c{width:50px;height:70px;border-radius:6px;
  box-shadow:0 10px 16px rgba(0,0,0,.62)}
/* Затемнення коротше й світліше за макетне (було 230px і 46% суцільних): на
   щільній сітці воно ховало весь стіл, і в шапці лишались тільки білі карти
   по краях. Верхні 40% так само глухі — під ними статусбар. */
.sc-phone .sc-top{height:196px;
  background:linear-gradient(to bottom,#0A0B0E 40%,rgba(10,11,14,.72) 74%,rgba(10,11,14,0))}
/* Край столу має лишатись видимим і йти під форму — тому рампа пологіша */
.sc-phone .sc-bot{height:120px;
  background:linear-gradient(to top,#0A0B0E 24%,rgba(10,11,14,0))}
.sc-phone .sc-logo{top:14px;gap:12px;--kl:.74}
.sc-phone .sc-fan{width:240px;height:150px}
.sc-phone .halo-r{top:22px;margin-left:-105px;width:210px;height:130px;filter:blur(5px);
  background:radial-gradient(ellipse,rgba(224,31,45,.46),transparent 68%)}
.sc-phone .halo-v{top:12px;margin-left:-85px;width:170px;height:130px;filter:blur(5px);
  background:radial-gradient(ellipse,rgba(150,85,235,.5),transparent 66%)}
.sc-phone .fan-l,.sc-phone .fan-r{top:24px;width:88px;height:122px;border-radius:13px}
.sc-phone .fan-l{left:10px;box-shadow:0 14px 30px rgba(0,0,0,.7),0 0 24px rgba(224,31,45,.26)}
.sc-phone .fan-r{right:10px;box-shadow:0 14px 30px rgba(0,0,0,.7),0 0 24px rgba(70,110,220,.22)}
.sc-phone .fan-m{top:2px;margin-left:-50px;width:100px;height:140px;border-radius:15px;
  box-shadow:0 18px 40px rgba(0,0,0,.78),0 0 40px rgba(160,90,235,.5)}
.sc-phone .sc-word{padding:4px 20px}
/* Ще пологіша за десктопну: на телефоні карти лежать упритул до слова, і край
   еліпса перерізав обличчя на нижніх лівих картах дугою. Ширший бокс виносить
   спад із карт на стіл. */
.sc-phone .sc-vig{margin:-64px 0 0 -172px;width:344px;height:128px;
  background:radial-gradient(ellipse,#0A0B0E 18%,rgba(10,11,14,.6) 44%,
             rgba(10,11,14,.2) 70%,rgba(10,11,14,0) 100%)}
.sc-phone .sc-word b{font-size:48px;line-height:.88;
  text-shadow:0 2px 14px rgba(10,11,14,.92),0 0 30px rgba(224,31,45,.3)}

/* Картка ─ права половина */
.auth-side{flex:0 1 40%;min-width:454px;display:flex;flex-direction:column;align-items:center;
  padding:18px 30px;overflow:auto;background:#F2F3F5}
/* margin:auto замість justify-content: центрування в скролері не ріже верх */
.auth-col{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%}
.auth-card{flex:none;width:394px;max-width:100%;border-radius:24px;background:#fff;
  box-shadow:0 8px 30px rgba(20,22,26,.09);overflow:hidden}
/* Внутрішні лінійки картки — #EEF0F3, світліші за #E4E7EB роздільника й поля:
   на темнішому картка розсипалась би на три окремі блоки. */
.auth-head{padding:15px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;
  justify-content:center;gap:10px}
.auth-mark{width:32px;height:32px;border-radius:10px;background:#14161A;color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font:700 15px Oswald,sans-serif}
.auth-wm{font:700 21px Oswald,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.auth-wm i{color:#E01F2D;font-style:normal}
.auth-body{padding:18px 28px 16px;display:flex;flex-direction:column;gap:13px}
.auth-h{font:600 23px Oswald,sans-serif;text-transform:uppercase;text-align:center}
.soc{display:flex;flex-direction:column;gap:9px}
/* 48, а не 46: у макеті 46 — це внутрішня висота, рамка додана зверху.
   Поле пошти там border-box, тому лишається 46 — різниця свідома. */
.sbtn{position:relative;width:100%;height:48px;padding:0 14px;border-radius:14px;
  border:1px solid #D9DDE3;background:#fff;color:#14161A;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:11px;
  font:600 14px Manrope,sans-serif}
.sbtn:active{background:#F7F8FA}
.sbtn svg{flex:none}
.sbtn[data-state=loading],.sbtn:disabled{opacity:.6;cursor:progress}
.orline{display:flex;align-items:center;gap:12px;font:600 11px Manrope,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:#9AA1AC}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:#E4E7EB}
.au-form{display:flex;flex-direction:column;gap:9px}
.au-in{width:100%;height:46px;padding:0 15px;border-radius:14px;background:#F7F8FA;
  border:1px solid #E4E7EB;font:400 14px Manrope,sans-serif;color:#14161A;outline:none}
/* Світліший за #9AA1AC роздільника: порожнє поле не має важити як текст */
.au-in::placeholder{color:#A6ADB6}
.au-in:focus{border-color:#14161A;background:#fff}
.au-in.bad{border-color:#E01F2D;background:#FDECEE}
.au-go{width:100%;height:50px;border:none;border-radius:14px;background:#E01F2D;color:#fff;
  font:700 15px Manrope,sans-serif;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;box-shadow:0 10px 22px rgba(224,31,45,.24)}
.au-go:disabled{background:#E9ECEF;color:#9AA1AC;box-shadow:none;cursor:default}
.au-note{font:400 11.5px/1.5 Manrope,sans-serif;color:#9AA1AC;text-align:center;
  text-wrap:pretty}
/* На телефоні полотно (4c) підказку про пароль не показує — екран і так довгий.
   Ховаємо лише її: юридичний рядок реєстрації лишається на обох ширинах. */
@media (max-width:899px){ .au-hint{display:none} }
.au-err{font:600 12px/1.45 Manrope,sans-serif;color:#E01F2D;text-align:center;
  text-wrap:pretty}
.au-ok{font:600 12px/1.45 Manrope,sans-serif;color:#46A758;text-align:center}
.au-code{display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;
  font:500 12px Manrope,sans-serif;color:#9AA1AC}
.au-code:hover{color:#6B7280}
.auth-foot{padding:13px;border-top:1px solid #EEF0F3;background:#FAFBFC;display:flex;
  align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  font:400 12.5px Manrope,sans-serif;color:#6B7280}
.auth-foot a,.linkbtn{font:700 12.5px Manrope,sans-serif;color:#E01F2D;text-decoration:none;
  background:none;border:none;padding:0;cursor:pointer}
.linkbtn:disabled{color:#9AA1AC;cursor:default}
/* Екрани входу: той самий рядок посилань між карткою і вибором мови */
.authlegal{font-size:12px;color:#9AA1AC}
.authlegal a{color:#6B7280}
/* Посилання в юридичному рядку під формою — підкреслені, щоб їх було видно
   в сірому тексті без кольорової плями поруч із червоною кнопкою */
.au-legal a{color:#6B7280;font-weight:600;text-decoration:underline;
  text-decoration-color:#C9CED6;text-underline-offset:2px}

/* Екран коду */
.cdrow{display:flex;gap:8px;justify-content:center}
.cdc{flex:0 1 48px;min-width:0;height:58px;padding:0;border-radius:13px;
  border:1.5px solid #E4E7EB;background:#F7F8FA;color:#14161A;text-align:center;
  text-transform:uppercase;caret-color:#E01F2D;outline:none;
  font:600 22px 'IBM Plex Mono',ui-monospace,monospace}
.cdc.on{border-color:#14161A;background:#fff}
.cdc:focus{border-color:#E01F2D;background:#fff}
/* Блок на 15 хвилин і перевірка коду вимикають клітинки — без цього вони
   виглядають живими й мовчки ковтають набір. */
.cdc:disabled{background:#E9ECEF;border-color:#E4E7EB;color:#9AA1AC;cursor:default}
.cdrow.bad .cdc{border-color:#E01F2D;color:#E01F2D;background:#FDECEE}
.cdrow.shake{animation:cdshake .38s}
@keyframes cdshake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)}}
.mailrow{display:flex;gap:9px}
.mailrow .sbtn{font-size:13px;padding:0 8px}
.spin{width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.only-phone{display:none}

/* Телефон: вітрина — шапка, форма без білої картки, поля вищі й округліші */
@media (max-width:899px){
  .auth-wrap{flex-direction:column}
  .sc{flex:none;width:auto;height:200px}
  .sc-desk{display:none}
  .sc-phone{display:block}
  /* min-width:454px — правило десктопної колонки; на телефоні воно ширше за
     екран і давало бічний скрол, тому гасимо. */
  .auth-side{padding:0;overflow:visible;min-width:0;flex:1}
  /* Футер картки притиснутий до низу екрана, як у макеті: тягнеться тіло */
  .auth-col{margin:0;gap:0;flex:1}
  .auth-card{width:100%;max-width:560px;border-radius:0;background:none;box-shadow:none;
    flex:1;display:flex;flex-direction:column}
  .auth-head{display:none}
  .auth-body{flex:1;padding:18px 18px 20px;gap:12px}
  .auth-h{font-size:22px}
  /* У телефонного макета власні метрики: 50/54, радіус 16. Білої картки
     під формою немає, тому елементи відділяє сама заливка — рамки гасимо
     прозорим кольором (не border:none), щоб :focus і .bad могли її
     повернути, а висота лишилась тією самою. Тінь під головною кнопкою
     теж прибрана: на #F2F3F5 без картки вона читається як брудна пляма. */
  .sbtn{height:50px;border-radius:16px;border-color:transparent}
  .au-in{height:50px;padding:0 16px;border-radius:16px;background:#fff;
    border-color:transparent}
  .au-go{height:54px;border-radius:16px;box-shadow:none}
  .auth-foot{padding:0 18px 18px;background:none;border-top:none;font-size:13px}
  .auth-foot:empty{display:none}
  .auth-foot a,.linkbtn{font-size:13px}
  .authlang{padding-bottom:26px}
  .only-desk{display:none}
  .only-phone{display:flex}
}

/* Десктоп: дві половини в одному вікні, сторінка не скролиться */
@media (min-width:900px){
  body.auth{overflow:hidden}
  .auth-wrap{height:100dvh}
}