/* Страница входа приложения (pages/app/auth.php).
   ⚠ ЛЕЖИТ ОТДЕЛЬНЫМ ФАЙЛОМ И ПОДКЛЮЧАЕТСЯ В <head> НАМЕРЕННО. Раньше эти правила стояли
   <style>-блоками в теле страницы, и браузер успевал нарисовать вход БЕЗ стилей - после
   выхода из аккаунта было видно «кривую вёрстку», которая потом рывком сменялась нормальной.
   Пока страница пряталась на 400мс, этого не замечали; как только прятать перестали - вылезло. */

html.app-restoring .auth, html.app-restoring .ah-tabbar { visibility: hidden; }

/* ═══ Страница входа v3 (по макету IMG_5485) ═══ */
body.app-auth { background: #f7f5f2; }
body.app-auth .app-shell { display: block; padding: 0; max-width: 520px; margin: 0 auto; min-height: 100%; }
.auth--v3 { position: relative; padding: 0 0 0; color: #0f141d; overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
.auth--v3 .av-hero, .auth--v3 .av-cats, .auth--v3 .av-tabs,
.auth--v3 .auth__form, .auth--v3 .av-feats, .auth--v3 .av-legal { position: relative; z-index: 2; }

/* ── ГЕРО ── */
/* Верхний отступ = safe-area (чёлка/статус-бар) + 16px: в нативной оболочке контент иначе
   прижат к самому верху под статус-бар. Фото геро (.av-hero__ph, absolute top:0) остаётся
   в самый верх и уходит под статус-бар, как в макете. --safe-top кэшируется в app_header.php. */
.av-hero { padding: calc(var(--safe-top, env(safe-area-inset-top)) + 16px) 5% 0; }
.av-hero__ph { position: absolute; top: 0; right: 0; width: 55%; height: 205px; object-fit: cover; object-position: 46% 62%; z-index: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 22%, #000 46%); mask-image: linear-gradient(to right, transparent 0%, transparent 22%, #000 46%); }
.av-logo { display: block; height: 58px; width: auto; margin: 4px 0 0; }
.av-kicker { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .17em; color: #3a3f47; }
.av-h1 { margin: 8px 0 0; font-size: 21px; line-height: 1.13; font-weight: 800; letter-spacing: -.03em; color: #141922; }
.av-sub { margin: 9px 0 0; max-width: 55%; font-size: 14px; line-height: 1.3; color: #6f6c68; }
.av-script { position: absolute; top: 96px; right: 3.5%; width: 39%; height: auto; z-index: 3; pointer-events: none; }

/* ── КАТЕГОРИИ ── */
.av-cats { display: flex; gap: 2.4%; padding: 13px 5% 0; }
.av-cat { flex: 1 1 0; min-width: 0; background: #ece2d4; border-radius: 16px; padding-bottom: 10px; }
.av-cat__ph { position: relative; height: 66px; border-radius: 16px 16px 0 0; background: #ccc center/cover no-repeat; }
.av-cat__ic { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center; color: #141922; font-size: 15px; box-shadow: 0 3px 8px rgba(0,0,0,.14); }
.av-cat__lb { margin-top: 22px; text-align: center; font-size: 11.5px; font-weight: 700; color: #232830; line-height: 1.15; padding: 0 3px; }

/* ── ТАБЫ ── */
.av-tabs { display: flex; gap: 7px; margin: 16px 5% 0; padding: 6px; background: #e7e4e0; border-radius: 17px; border: 0; }
.auth--v3 .av-tab { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; cursor: pointer;
    background: transparent; color: #3a3f47; border-radius: 13px; padding: 11px 6px; font-size: 15.5px; font-weight: 800; box-shadow: none; }
.auth--v3 .av-tab i { font-size: 15px; }
.av-tab__t { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.12; text-align: left; }
.av-tab__t small { font-weight: 500; font-size: 12px; color: #8a8781; }
.auth--v3 .av-tab.is-active { background: #0f141d; color: #fff; box-shadow: 0 6px 16px rgba(15,20,29,.22); }
.auth--v3 .av-tab.is-active .av-tab__t small { color: rgba(255,255,255,.7); }

/* ── ФОРМЫ ── */
.auth--v3 .auth__form { display: none; flex-direction: column; gap: 0; padding: 0 5%; margin-top: 15px; }
.auth--v3 .auth__form.is-active { display: flex; }
.auth--v3 .auth__field { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.auth--v3 .auth__field:first-child { margin-top: 0; }
.auth--v3 .auth__field > label { font-size: 15px; font-weight: 800; color: #141922; }
.auth--v3 .auth__inp { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid #eae4dc;
    border-radius: 15px; height: 48px; box-shadow: 0 2px 10px rgba(60,50,40,.05); }
.auth--v3 .auth__inp-ic { flex: 0 0 auto; width: 50px; display: flex; align-items: center; justify-content: center; color: #2a2f38; font-size: 17px; }
.auth--v3 .auth__inp input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: #141922; padding: 0 8px 0 0; }
.auth--v3 .auth__inp input::placeholder { color: #b3afa8; }
/* Убираем «обводку внутри инпута» на фокусе: снимаем outline/box-shadow с самого input,
   а фокус-аффорданс переносим на всю рамку поля (.auth__inp). */
.auth--v3 .auth__inp input:focus, .auth--v3 .auth__inp input:focus-visible { outline: none; box-shadow: none; }
.auth--v3 .auth__inp:focus-within { border-color: #d3bd90; box-shadow: 0 0 0 3px rgba(176,124,46,.14); }
.auth--v3 .auth__eye { flex: 0 0 auto; width: 50px; border: 0; background: none; color: #6f6c68; font-size: 17px; cursor: pointer; }
.auth--v3 .auth__ok { position: absolute; right: 15px; color: #16a34a; font-size: 17px; }

.auth--v3 .auth__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.auth--v3 .auth__remember { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 700; color: #141922; cursor: pointer; }
.auth--v3 .auth__remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth--v3 .auth__box { width: 27px; height: 27px; border-radius: 8px; background: #fff; border: 2px solid #cfc9c0; display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 13px; }
.auth--v3 .auth__remember input:checked + .auth__box { background: #0f141d; border-color: #0f141d; color: #fff; }
.auth--v3 .auth__forgot { border: 0; background: none; color: #b07c2e; font-size: 15px; font-weight: 800; cursor: pointer; padding: 0; }
.auth--v3 .auth__hint, .auth--v3 .auth__err { font-size: 13.5px; margin-top: 11px; }
.auth--v3 .auth__err { color: #b91c1c; }
.auth--v3 .auth__hint { color: #6f6c68; }

.auth--v3 .auth__btn { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 16px; border: 0; cursor: pointer;
    background: #0f141d; color: #fff; font-size: 18px; font-weight: 800; height: 52px; border-radius: 16px; box-shadow: 0 10px 24px rgba(15,20,29,.20); }
.auth--v3 .auth__btn i { font-size: 17px; }
.auth--v3 .auth__btn:active { opacity: .9; }

/* регистрация: карточка с заголовком (по макету) */
.auth--v3 .auth__note { background: rgba(176,124,46,.10); color: #8a5e1e; border: 1px solid rgba(176,124,46,.25); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px; }
.auth--v3 .auth__note[hidden] { display: none; }
.auth--v3 form.auth__form[data-authpane="register"] { margin: 15px 5% 0; padding: 24px 20px 22px;
    background: #f7f4ee; border: 1px solid #ece5da; border-radius: 24px; box-shadow: 0 8px 24px rgba(60,50,40,.05); }
.av-reghead { margin-bottom: 4px; }
.av-regttl { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #141922; }
.av-regsub { margin: 8px 0 0; font-size: 15px; line-height: 1.35; color: #6f6c68; }

/* ── ФИЧИ ── */
.av-feats { display: flex; gap: 2.5%; padding: 24px 5% 0; }
.av-feat { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 8px; }
.av-feat__ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #ece2d4; display: flex; align-items: center; justify-content: center; color: #141922; font-size: 16px; }
.av-feat__tx { min-width: 0; display: flex; flex-direction: column; }
.av-feat__tx b { font-size: 13px; font-weight: 800; color: #141922; line-height: 1.15; }
.av-feat__tx span { font-size: 11px; color: #8a8781; line-height: 1.2; margin-top: 2px; }

/* ── СОГЛАШЕНИЕ ── */
.av-legal { text-align: center; padding: 14px 8% 0; font-size: 14px; line-height: 1.5; color: #8a8781; }
.av-legal a { color: #b07c2e; font-weight: 800; text-decoration: none; }

/* ── НИЖНИЙ ВОДЯНОЙ ЗНАК ── */
.av-bottom { display: block; width: 100%; height: auto; margin-top: 2px; }

/* появление */
.auth--v3.is-loading { opacity: 0; }
.auth--v3 { opacity: 1; transition: opacity .3s ease; }
.auth--v3.no-anim { transition: none; }   /* высота чёлки уже известна - показываем сразу, без проявления */

/* Микровзаимодействия (лёгкие, только transform/opacity) */
.auth--v3 .av-cat { transition: transform .18s cubic-bezier(.22,.9,.3,1), box-shadow .18s ease; }
.auth--v3 .av-cat:active { transform: translateY(-2px) scale(.985); box-shadow: 0 10px 22px rgba(60,50,40,.14); }
.auth--v3 .av-tab { transition: background .28s ease, color .22s ease, box-shadow .28s ease; }
.auth--v3 .auth__btn { position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .2s ease; }
.auth--v3 .auth__btn:active { transform: scale(.985); }
.auth--v3 .auth__btn::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.20), transparent); transform: skewX(-18deg); pointer-events: none; }
.auth--v3 .av-feat__ic { transition: transform .2s ease; }
.auth--v3 .av-feat:active .av-feat__ic { transform: scale(1.08); }
/* Блик по кнопке — один раз после появления */
.auth--v3.av-in .auth__btn::after { animation: avShine 1.5s ease 1.1s 1 both; }
@keyframes avShine { from { left: -70%; } to { left: 150%; } }
@media (prefers-reduced-motion: reduce) { .auth--v3 .auth__btn::after { display: none; } }