/* ═══════════════════════════════════════════════════════════════════════════
   SpellBook · ЕДИНАЯ МОДАЛКА АВТОРИЗАЦИИ (email-OTP) — САМОДОСТАТОЧНЫЕ стили.
   Разметка: includes/auth_modal.php · логика: /js/auth.js · бэкенд: /auth_email.php

   Отличие от блока в marketplace.css: все дизайн-токены объявлены ЛОКАЛЬНО на
   .authmodal (не зависят от токенов страницы и не конфликтуют с CSS assistant.php).
   Две темы: тёмная — по умолчанию; светлая — по [data-theme="light"] (маркет) ИЛИ
   body.light-theme (header.php / assistant.php). Внешний вид идентичен маркетплейсу.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Локальные токены (тёмная тема по умолчанию) ─────────────────────────────── */
.authmodal{
  --modal:#101011; --ring:rgba(255,255,255,0.08); --line-2:rgba(255,255,255,0.14);
  --surface:#1c1c1f; --raised:#26262a; --wash:#303034;
  --text:#f0f0f0; --text-2:#9a9a9a; --text-3:#6a6a6a; --text-4:#4f4f4f;
  --btn:#f0f0f0; --btn-text:#0d0d0d; --pos:#2ebd85; --neg:#e5484d;
  --font-display:"Chakra Petch","Chakra Petch Fallback",system-ui,sans-serif;
  --font-body:"Exo 2","Exo 2 Fallback",system-ui,sans-serif;
  --ease:cubic-bezier(0.4,0,0.2,1); --dur:200ms;
}
[data-theme="light"] .authmodal,
body.light-theme .authmodal{
  --modal:#ffffff; --ring:rgba(0,0,0,0.10); --line-2:rgba(0,0,0,0.16);
  --surface:#fff; --raised:#f0f0f1; --wash:#e8e8ea;
  --text:#18181b; --text-2:#5c5c66; --text-3:#8a8a93; --text-4:#a8a8b0;
  --btn:#18181b; --btn-text:#fff; --pos:#1a9e6b; --neg:#d83a3f;
}
@media (prefers-reduced-motion: reduce){ .authmodal{ --dur:0ms; } }

/* ── Модалка ─────────────────────────────────────────────────────────────────── */
.authmodal{ position:fixed; inset:0; z-index:100000; display:none; }
.authmodal.is-open{ display:block; }
.am-scrim{ position:absolute; inset:0; background:rgba(0,0,0,0.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.authmodal.is-open .am-scrim{ animation:amScrim 0.26s var(--ease) both; }
@keyframes amScrim{ from{ opacity:0; } to{ opacity:1; } }

/* Панель — десктоп: центрированная карточка по высоте контента (без пустоты) */
.am-panel{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(468px, 92vw);
  height:auto; max-height:calc(100dvh - 28px);
  background:var(--modal); border:1px solid var(--ring); border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,0.46), 0 4px 16px rgba(0,0,0,0.28);
  display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:contain;
}
.authmodal.is-open .am-panel{ animation:amPop 0.30s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes amPop{ from{ opacity:0; transform:translate(-50%,-48%) scale(0.96); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }

/* Грабёр — только в режиме sheet (мобилка) */
.am-handle{ display:none; width:42px; height:4px; flex-shrink:0; margin:9px auto 0; border-radius:2px; background:var(--line-2); }

/* Верхняя панель: назад (слева, только на экране кода) + закрыть (справа) */
.am-bar{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 12px 0; flex-shrink:0; height:48px; }
.am-iconbtn{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:var(--raised); color:var(--text-2); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.am-iconbtn:hover{ background:var(--wash); color:var(--text); }
.am-iconbtn:active{ transform:scale(0.94); }
.am-iconbtn svg{ width:17px; height:17px; }
.am-back{ position:absolute; left:12px; top:0; }
.am-back[hidden]{ display:none; }

/* Тело фикс. высоты — две сцены стопкой (кроссфейд). */
.am-body{ position:relative; display:grid; min-height:0; isolation:isolate; }
.authmodal.am-kb .am-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.authmodal.am-kb .am-body::-webkit-scrollbar{ display:none; }
.am-screen{
  grid-area:1 / 1; position:relative; z-index:1; padding:40px 28px 28px; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center;
  opacity:0; visibility:hidden; transform:translateY(6px) scale(0.99); pointer-events:none;
  transition:opacity 0.22s var(--ease), transform 0.26s var(--ease), visibility 0s linear 0.26s;
}
.am-screen.is-active{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity 0.26s var(--ease) 0.04s, transform 0.30s var(--ease) 0.04s, visibility 0s; }

/* Бренд-знак */
.am-logo{ position:relative; z-index:1; width:140px; height:140px; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.am-logo-mark{
  width:96px; height:96px;
  background-color:#fff;
  -webkit-mask:url("/images/sb-logosvg.svg") center / contain no-repeat;
          mask:url("/images/sb-logosvg.svg") center / contain no-repeat;
}
[data-theme="light"] .am-logo-mark,
body.light-theme .am-logo-mark{ background-color:#141416; }

/* Тёплая подсветка позади знака */
.am-body::before, .am-body::after{
  content:""; position:absolute; left:50%; top:110px; z-index:0; pointer-events:none;
  width:190px; height:190px; margin-left:-95px; margin-top:-95px; border-radius:50%;
  transition:opacity 0.2s var(--ease);
}
.am-body::before{
  background:radial-gradient(50% 50% at 50% 48%, rgba(255,150,60,0.85), rgba(255,120,30,0) 70%);
  filter:blur(20px); opacity:0.92; will-change:transform, filter;
  animation:amGlowPulse 3.5s ease-in-out infinite;
}
.am-body::after{
  background:conic-gradient(from 0deg,
     rgba(255,110,40,0), rgba(255,140,50,0.55), rgba(255,196,98,0.64),
     rgba(255,110,50,0.5), rgba(255,150,60,0.55), rgba(255,110,40,0));
  filter:blur(18px); opacity:0.82; will-change:transform;
  animation:amGlowSpin 5.5s linear infinite;
}
/* Светлая тема — голубое свечение вместо оранжевого */
[data-theme="light"] .am-body::before,
body.light-theme .am-body::before{
  opacity:0.74;
  background:radial-gradient(50% 50% at 50% 48%, rgba(74,160,255,0.76), rgba(40,120,255,0) 70%);
}
[data-theme="light"] .am-body::after,
body.light-theme .am-body::after{
  background:conic-gradient(from 0deg,
     rgba(40,120,255,0), rgba(70,150,255,0.55), rgba(120,205,255,0.64),
     rgba(60,140,255,0.5), rgba(90,175,255,0.55), rgba(40,120,255,0));
}
@keyframes amGlowPulse{
  0%,100%{ transform:scale(0.9); filter:blur(20px) brightness(0.9)  saturate(1);    }
  50%    { transform:scale(1.1); filter:blur(23px) brightness(1.38) saturate(1.2); }
}
@keyframes amGlowSpin{ to{ transform:rotate(360deg); } }

.am-title{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; line-height:1.2; color:var(--text); letter-spacing:-0.01em; margin:0 0 8px; }
.am-sub{ font-size:0.9375rem; line-height:1.5; color:var(--text-2); max-width:320px; margin:0 0 22px; }

/* Поле почты с инлайн-кнопкой */
.am-form{ width:100%; max-width:340px; }
.am-field{ display:flex; align-items:center; gap:6px; height:52px; padding:5px 5px 5px 16px; border:1px solid var(--line-2); border-radius:13px; background:var(--surface); transition:border-color var(--dur) var(--ease); }
.am-field:focus-within{ border-color:var(--text-3); }
.am-input{ flex:1; min-width:0; background:none; border:none; outline:none; -webkit-tap-highlight-color:transparent; color:var(--text); font-family:var(--font-body); font-size:1rem; }
.am-input:focus, .am-input:focus-visible{ outline:none; box-shadow:none; }
.am-input::placeholder{ color:var(--text-4); }
.am-go{ position:relative; width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:none; border-radius:10px; background:var(--btn); color:var(--btn-text); cursor:pointer; transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.am-go:hover{ filter:brightness(0.92); }
.am-go:active{ transform:scale(0.95); }
.am-go:disabled{ cursor:default; }
.am-go-arrow{ width:19px; height:19px; transition:opacity 0.15s var(--ease); }
.am-spin{ position:absolute; width:18px; height:18px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; opacity:0; animation:amSpin 0.7s linear infinite; }
@keyframes amSpin{ to{ transform:rotate(360deg); } }
.authmodal.is-busy .am-go-arrow{ opacity:0; }
.authmodal.is-busy .am-spin{ opacity:1; }

/* Соглашение */
.am-agree{ font-size:0.75rem; line-height:1.55; color:var(--text-3); max-width:340px; margin:18px 0 0; }
.am-agree a{ color:var(--text-2); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.am-agree a:hover{ color:var(--text); }

/* Ошибка */
.am-error{ min-height:0; max-height:0; overflow:hidden; font-size:0.8125rem; line-height:1.4; color:var(--neg); margin:0; opacity:0; transition:opacity 0.2s var(--ease), max-height 0.2s var(--ease), margin 0.2s var(--ease); }
.am-error.is-on{ max-height:48px; opacity:1; margin:12px 0 0; }

/* OTP-боксы */
.am-otp{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(6px,2.4vw,11px); width:100%; max-width:316px; margin:6px 0 0; }
.am-otp-box{ width:100%; height:56px; min-width:0; text-align:center; font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--text); background:var(--surface); border:1.5px solid var(--line-2); border-radius:11px; outline:none; -webkit-tap-highlight-color:transparent; caret-color:var(--text-2); transition:border-color 0.15s var(--ease), background 0.15s var(--ease); -moz-appearance:textfield; }
.am-otp-box::-webkit-outer-spin-button, .am-otp-box::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.am-otp-box.is-filled{ border-color:var(--text-3); background:var(--raised); }
.am-otp-box:focus, .am-otp-box:focus-visible{ border-color:var(--text); background:var(--raised); outline:none; box-shadow:none; }
.am-verifying .am-otp{ opacity:0.55; pointer-events:none; }

.am-sent{ font-size:0.875rem; line-height:1.5; color:var(--text-2); margin:20px 0 0; }
.am-sent b{ color:var(--text); font-weight:600; word-break:break-all; }
.am-resend-row{ font-size:0.8125rem; color:var(--text-3); margin:14px 0 0; }
.am-resend{ border:none; background:none; padding:0; font:inherit; font-weight:600; color:var(--text); cursor:pointer; text-decoration:underline; text-underline-offset:2px; transition:opacity var(--dur) var(--ease); }
.am-resend:hover:not(:disabled){ opacity:0.7; }
.am-resend:disabled{ color:var(--text-4); cursor:default; text-decoration:none; }
.am-resend-timer{ color:var(--text-4); font-variant-numeric:tabular-nums; }

/* Успех — галочка */
.am-check{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:96px; height:96px; opacity:0; pointer-events:none; }
.authmodal.am-success .am-check{ opacity:1; transition:opacity 0.2s var(--ease); }
.am-check svg{ width:100%; height:100%; display:block; overflow:visible; }
.am-ring-draw{ fill:none; stroke:var(--pos); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:101; stroke-dashoffset:101; transform-box:fill-box; transform-origin:center; transform:rotate(-90deg);
  will-change:transform, stroke-dashoffset, filter; }
.am-tick{ fill:none; stroke:var(--pos); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:101; stroke-dashoffset:101; }
.authmodal.am-success .am-screen[data-screen="code"] > *:not(.am-check){ opacity:0; transition:opacity 0.22s var(--ease); }
.authmodal.am-success .am-body::before, .authmodal.am-success .am-body::after{ opacity:0; }

/* ── Bottom-sheet (мобилка) ──────────────────────────────────────────────────── */
@media (max-width:680px){
  .am-scrim{ background:rgba(0,0,0,0.62); }
  .am-handle{ display:block; }
  .am-bar{ height:40px; padding-top:6px; }
  .am-panel{
    top:auto; left:0; right:0; bottom:var(--am-kb, 0px);
    width:100%; max-width:none;
    height:auto; max-height:calc(100dvh - 12px);
    transform:translateY(100%);
    border-radius:22px 22px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    box-shadow:0 -10px 44px rgba(0,0,0,0.5);
    transition:transform 0.42s cubic-bezier(0.16,1,0.3,1),
               bottom 0.30s cubic-bezier(0.22,1,0.36,1),
               height 0.30s cubic-bezier(0.22,1,0.36,1);
    padding-bottom:max(env(safe-area-inset-bottom, 0px), 10px);
    will-change:transform;
  }
  .authmodal.is-open .am-panel{ animation:none; }
  .am-screen{ padding:50px 24px 30px; justify-content:flex-start; }
  .am-logo{ width:90px; height:90px; margin-bottom:4px; }
  .am-logo-mark{ width:60px; height:60px; }
  .am-body::before, .am-body::after{ top:95px; width:164px; height:164px; margin-left:-82px; margin-top:-82px; }
  .am-title{ font-size:1.34rem; margin-bottom:6px; }
  .am-sub{ font-size:0.9rem; margin-bottom:14px; }
  .am-agree{ margin-top:12px; font-size:0.72rem; }
  .am-otp-box{ height:52px; font-size:1.36rem; }
  .am-go{ width:44px; height:44px; }
  .am-input{ font-size:1.0625rem; }

  .authmodal.am-kb .am-handle{ opacity:0; }
  .authmodal.am-kb .am-bar{ height:34px; }
  .authmodal.am-kb .am-screen{ justify-content:flex-start; padding-top:10px; }
  .authmodal.am-kb .am-logo{ display:none; }
  .authmodal.am-kb .am-body::before, .authmodal.am-kb .am-body::after{ opacity:0; }
  .authmodal.am-kb .am-title{ margin-bottom:6px; }
  .authmodal.am-kb .am-sub{ margin-bottom:16px; }
  .authmodal.am-kb .am-agree{ margin-top:14px; }
  .authmodal.am-kb .am-sent{ margin-top:16px; }
}
@media (max-width:680px) and (max-height:700px){
  .am-screen{ padding:18px 22px 18px; }
  .am-logo{ width:74px; height:74px; margin-bottom:2px; }
  .am-logo-mark{ width:50px; height:50px; }
  .am-body::before, .am-body::after{ top:55px; width:128px; height:128px; margin-left:-64px; margin-top:-64px; }
  .am-title{ font-size:1.25rem; margin-bottom:5px; }
  .am-sub{ font-size:0.875rem; margin-bottom:12px; }
  .am-otp-box{ height:48px; font-size:1.3rem; }
  .am-agree{ margin-top:10px; font-size:0.7rem; }
  .am-sent{ margin-top:14px; }
}
@media (max-height:520px){
  .am-logo{ width:88px; height:88px; margin-bottom:12px; }
  .am-logo-mark{ width:60px; height:60px; }
  .am-title{ font-size:1.3rem; margin-bottom:6px; }
  .am-sub{ margin-bottom:16px; }
  .am-agree{ margin-top:12px; }
  .am-screen{ justify-content:flex-start; padding-top:22px; }
  .am-body::before, .am-body::after{ top:66px; width:138px; height:138px; margin-left:-69px; margin-top:-69px; }
}
@media (prefers-reduced-motion: reduce){
  .authmodal.is-open .am-scrim, .authmodal.is-open .am-panel{ animation-duration:0.01ms; }
  .am-screen, .am-check, .am-error, .am-go-arrow, .am-panel{ transition-duration:0.01ms; }
  .am-body::before, .am-body::after{ animation:none; }
  .authmodal.am-success .am-check{ opacity:1; }
}