/* ============================================================
   АККАУНТ — регистрация и вход (экран #p-auth).

   Один экран на обе формы: вкладки переключают режим, а не страницу, поэтому
   поля не «прыгают» и ошибка остаётся на месте. Плитка карточки — те же
   стеклянные токены, что у остальных экранов (var(--card)/var(--bord)), своей
   палитры здесь нет.

   Два макета, как и везде в арене (см. styles/desktop.css): на телефоне —
   колонка с карточкой; на ≥1024 экран разворачивается в две колонки, потому
   что одна карточка посреди пустой сцены — это растянутая мобилка, а не
   веб-версия. Левая колонка объясняет, что даёт аккаунт, и существует только
   на десктопе.
   ============================================================ */
.au-wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 22px 40px;font-family:'Manrope',sans-serif}
.au-main{width:100%;display:flex;flex-direction:column;align-items:center}
.au-side{display:none} /* колонка «зачем аккаунт» — только на десктопе */
.au-close{position:absolute;top:18px;left:18px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--bord);display:flex;align-items:center;justify-content:center;
  color:var(--text);font-size:18px;cursor:pointer;z-index:3}

.au-logo{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:19px;letter-spacing:.5px;margin-bottom:16px}
.au-logo .a{color:var(--text)}
.au-logo .b{background:linear-gradient(90deg,#FFD98A,#FF9D2B);-webkit-background-clip:text;background-clip:text;color:transparent}

.au-card{width:100%;max-width:380px;border-radius:20px;padding:16px 16px 14px;
  background:var(--lg);border:1px solid var(--lg-brd);box-shadow:var(--shadow-card)}

/* ---- вкладки режима ---- */
.au-tabs{display:flex;gap:6px;padding:4px;margin-bottom:14px;
  border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--bord)}
.au-tabs button{flex:1;border:0;border-radius:11px;padding:10px 0;cursor:pointer;
  background:transparent;color:var(--muted);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:13px}
.au-tabs button.on{background:linear-gradient(135deg,#7C5CFF,#B14BFF);color:#fff;
  box-shadow:0 8px 20px rgba(124,92,255,.35)}

/* ---- поля ---- */
.au-f{display:block;margin-bottom:11px}
.au-f>span{display:block;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--dim);margin:0 0 6px 2px}
.au-f input{width:100%;box-sizing:border-box;border-radius:13px;padding:13px 14px;
  background:rgba(255,255,255,.05);border:1px solid var(--bord);color:var(--text);
  font-family:'Manrope',sans-serif;font-size:14.5px;outline:0;transition:border-color .18s ease,background .18s ease}
.au-f input::placeholder{color:var(--dim)}
.au-f input:focus{border-color:rgba(124,92,255,.65);background:rgba(124,92,255,.08)}
.au-f.bad input{border-color:rgba(255,59,92,.6);background:rgba(255,59,92,.08)}

/* ---- отказ: показывается только когда он есть ---- */
.au-err{display:none;margin:2px 0 10px;padding:9px 12px;border-radius:12px;
  background:rgba(255,59,92,.1);border:1px solid rgba(255,59,92,.35);
  color:#FFB3C0;font-size:12.5px;line-height:1.4}
.au-err.on{display:block}

.au-go{width:100%;border:0;border-radius:14px;padding:14px 0;cursor:pointer;
  background:linear-gradient(135deg,#7C5CFF,#B14BFF);color:#fff;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:17px;letter-spacing:.4px;
  box-shadow:0 10px 26px rgba(124,92,255,.42)}
.au-go:active{transform:scale(.985)}
.au-go:disabled{opacity:.55;box-shadow:none;cursor:default}
#authForm.busy .au-f input{opacity:.6;pointer-events:none}

.au-hint{margin-top:11px;text-align:center;font-size:11.5px;color:var(--dim)}

.au-guest{margin-top:16px;border:1px solid var(--bord);border-radius:13px;padding:11px 18px;cursor:pointer;
  background:rgba(255,255,255,.05);color:var(--muted);font-family:'Manrope',sans-serif;font-weight:700;font-size:12.5px}
.au-guest:active{transform:scale(.97)}

.au-note{max-width:380px;margin-top:14px;text-align:center;font-size:11px;color:var(--dim);line-height:1.5}

/* ---- карточка «Аккаунт» в профиле ---- */
.pf-mail{font-family:'Manrope',sans-serif;font-size:13px;word-break:break-all}

/* =====================================================================
   ДЕСКТОП (≥1024) — две колонки на всю сцену.

   Экран забирает ширину сайдбара (навигация на нём скрыта, как на столе и
   в матчмейкинге — см. FULLSCREEN в src/shell.js) и отменяет общую для
   `.page` читаемую колонку в 680px из styles/desktop.css: здесь макет
   собственный. Селекторы с `body[data-screen="auth"]` — чтобы правило
   действовало только на этом экране и не перебивало чужие.
   ===================================================================== */
@media (min-width:1024px){
  body[data-screen="auth"] #shell{padding-left:0}
  body[data-screen="auth"] #p-auth{left:0;right:0;width:auto;inset:0}

  .au-wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;align-items:center;
    gap:clamp(40px,6vw,88px);max-width:1060px;margin:0 auto;padding:48px 40px}
  .au-main{width:auto;align-items:stretch}
  .au-close{left:auto;right:22px;top:22px}
  .au-logo{display:none} /* на десктопе логотип живёт в левой колонке */
  .au-card{max-width:none;padding:20px 20px 16px;border-radius:22px}
  .au-guest{align-self:center;margin-top:18px}

  /* ---- левая колонка ---- */
  .au-side{display:block;max-width:520px}
  .au-side-logo{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:24px;letter-spacing:.5px}
  .au-side-logo .a{color:var(--text)}
  .au-side-logo .b{background:linear-gradient(90deg,#FFD98A,#FF9D2B);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .au-side-h{margin:18px 0 26px;font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;
    font-size:clamp(26px,2.6vw,34px);line-height:1.2;letter-spacing:-.2px}

  .au-side-list{list-style:none;display:flex;flex-direction:column;gap:16px}
  .au-side-list li{display:flex;gap:13px;align-items:flex-start}
  .au-side-list i{flex:none;width:38px;height:38px;border-radius:12px;font-size:19px;
    display:flex;align-items:center;justify-content:center;color:var(--p1);
    background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.28)}
  .au-side-list b{display:block;font-size:14px;font-weight:700;margin-bottom:3px}
  .au-side-list span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}
  .au-side-foot{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.6px;
    text-transform:uppercase;color:var(--dim)}
}

/* Узкий десктоп/планшет в альбоме: двух колонок не хватит по ширине — форма
   остаётся одна, но по центру всей сцены, а не в колонке 680px. */
@media (min-width:769px) and (max-width:1023px){
  body[data-screen="auth"] #scr{max-width:none}
}