/* ═══════════════ iOS 26.4 tokens (shared with master) ═══════════════ */
:root{
  --r:14px; --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-full:9999px;
  --bg:#F2F2F7;
  --surface:#FFFFFF;
  --surface-2:#F2F2F7;
  --surface-tint:rgba(120,120,128,.10);
  --surface-translucent:rgba(255,255,255,.78);
  --bd:rgba(60,60,67,.14);
  --separator:rgba(60,60,67,.08);
  --tx:#000;
  --t2:rgba(60,60,67,.60);
  --t3:rgba(60,60,67,.30);
  --ac:#007AFF;  --ac-bg:rgba(0,122,255,.12);  --ac-bg-2:rgba(0,122,255,.18);
  --rd:#FF3B30;  --rd-bg:rgba(255,59,48,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.03), 0 1px 1px rgba(0,0,0,.04);
  --shadow-md:0 8px 24px rgba(17,24,39,.06), 0 2px 4px rgba(17,24,39,.04);
  --shadow-lg:0 30px 80px rgba(17,24,39,.14), 0 10px 20px rgba(17,24,39,.06);
  --blur-bar:saturate(180%) blur(26px);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.32,.72,0,1);
}
html[data-theme="dark"]{
  --bg:#000000;
  --surface:#1C1C1E;
  --surface-2:#2C2C2E;
  --surface-tint:rgba(118,118,128,.24);
  --surface-translucent:rgba(28,28,30,.72);
  --bd:rgba(84,84,88,.38);
  --separator:rgba(84,84,88,.32);
  --tx:#FFFFFF;
  --t2:rgba(235,235,245,.60);
  --t3:rgba(235,235,245,.30);
  --ac:#0A84FF;  --ac-bg:rgba(10,132,255,.22);  --ac-bg-2:rgba(10,132,255,.30);
  --rd:#FF453A;  --rd-bg:rgba(255,69,58,.22);
  --shadow-sm:0 1px 0 rgba(255,255,255,.04);
  --shadow-md:0 10px 28px rgba(0,0,0,.46);
  --shadow-lg:0 40px 100px rgba(0,0,0,.75);
  --blur-bar:saturate(180%) blur(30px);
}
@media (prefers-color-scheme:dark){
  html:not([data-theme]){
    --bg:#000000; --surface:#1C1C1E; --surface-2:#2C2C2E;
    --surface-tint:rgba(118,118,128,.24);
    --surface-translucent:rgba(28,28,30,.72);
    --bd:rgba(84,84,88,.38); --separator:rgba(84,84,88,.32);
    --tx:#FFFFFF; --t2:rgba(235,235,245,.60); --t3:rgba(235,235,245,.30);
    --ac:#0A84FF; --ac-bg:rgba(10,132,255,.22); --ac-bg-2:rgba(10,132,255,.30);
    --rd:#FF453A; --rd-bg:rgba(255,69,58,.22);
    --shadow-md:0 10px 28px rgba(0,0,0,.46);
    --shadow-lg:0 40px 100px rgba(0,0,0,.75);
  }
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{background:var(--bg);transition:background-color .3s var(--ease)}
body{
  font-family:'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color:var(--tx);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  background:var(--bg);
  display:flex;flex-direction:column;
  position:relative;overflow-x:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  transition:background-color .3s var(--ease), color .3s var(--ease);
}

/* Subtle ambient-glow на фоне — радикально скромнее прошлого */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60rem 40rem at 85% -10%, color-mix(in oklab, var(--ac) 10%, transparent) 0%, transparent 70%),
    radial-gradient(50rem 50rem at -10% 110%, color-mix(in oklab, var(--ac) 6%, transparent) 0%, transparent 70%);
  opacity:.9;
  transition:opacity .3s var(--ease);
}
html[data-theme="dark"] body::before,
@media (prefers-color-scheme:dark){html:not([data-theme]) body::before{opacity:1}}

/* === SVG icons class ==================================== */
.icn{
  width:20px;height:20px;flex-shrink:0;
  stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-3px;display:inline-block;
  transition:color .2s var(--ease);
}
.icn-sm{width:16px;height:16px;stroke-width:1.7}

/* === Theme switcher (top-right, pill-container) ========= */
.auth-topbar{
  position:relative;z-index:2;
  display:flex;justify-content:flex-end;align-items:center;
  padding:14px 18px;
}
.theme-switch{
  display:inline-flex;position:relative;
  background:var(--surface-tint);
  padding:2px;border-radius:var(--r-full);
  isolation:isolate;
  -webkit-backdrop-filter:var(--blur-bar);backdrop-filter:var(--blur-bar);
}
.theme-switch .ts-seg{
  position:relative;z-index:2;
  background:transparent;border:none;
  font-family:inherit;font-size:12px;font-weight:600;
  color:var(--t2);
  padding:6px 11px;min-width:34px;
  cursor:pointer;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .18s var(--ease);
  line-height:1;
}
.theme-switch .ts-seg.ts-on{color:var(--tx)}
.theme-switch .ts-pill{
  position:absolute;top:2px;left:2px;z-index:1;
  height:calc(100% - 4px);
  background:var(--surface);
  border-radius:var(--r-full);
  box-shadow:var(--shadow-sm);
  transition:transform .28s var(--spring), width .28s var(--spring);
  pointer-events:none;
}

/* === Main auth layout =================================== */
.auth-main{
  flex:1;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  padding:20px 18px 40px;
}
.auth-wrap{
  width:100%;max-width:400px;
  display:flex;flex-direction:column;gap:28px;
  text-align:center;
}

/* === Hero (логотип + приветствие) ======================= */
.auth-hero{display:flex;flex-direction:column;align-items:center;gap:18px}
.auth-logo{
  width:72px;height:72px;border-radius:22px;
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
}
.auth-logo img{
  width:54px;height:54px;object-fit:contain;
}
.auth-title-wrap{display:flex;flex-direction:column;gap:6px}
.auth-title{
  font-size:28px;font-weight:700;
  letter-spacing:-.024em;
  color:var(--tx);
  line-height:1.1;
}
.auth-sub{
  font-size:15px;color:var(--t2);
  font-weight:500;letter-spacing:-.005em;
  line-height:1.4;
}

/* === Card ============================================== */
.auth-card{
  background:var(--surface);
  border-radius:var(--r-xl);
  padding:24px;
  box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:14px;
  text-align:left;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}

/* === Field (input с leading icon) ====================== */
.field{display:flex;flex-direction:column;gap:7px}
.field label{
  font-size:12px;font-weight:600;
  color:var(--t2);
  text-transform:uppercase;letter-spacing:.04em;
  padding-left:2px;
}
.field-input{
  position:relative;
  display:flex;align-items:center;
  background:var(--surface-2);
  border:1.5px solid transparent;
  border-radius:var(--r-md);
  transition:border-color .15s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field-input .icn{
  position:absolute;left:14px;
  color:var(--t2);pointer-events:none;
  transition:color .18s var(--ease);
}
.field-input input{
  width:100%;
  padding:14px 16px 14px 42px;
  background:transparent;
  color:var(--tx);
  border:none;outline:none;
  font-size:16px;font-family:inherit;font-weight:500;
  letter-spacing:-.005em;
  -webkit-appearance:none;
}
.field-input input::placeholder{color:var(--t3)}
.field-input:focus-within{
  border-color:var(--ac);
  background:var(--surface);
  box-shadow:0 0 0 4px var(--ac-bg);
}
.field-input:focus-within .icn{color:var(--ac)}

/* === Submit button ===================================== */
.auth-btn{
  position:relative;overflow:hidden;
  width:100%;margin-top:6px;
  padding:15px 18px;
  background:var(--ac);color:#fff;
  border:none;border-radius:var(--r-md);
  font-size:17px;font-weight:650;letter-spacing:-.01em;
  font-family:inherit;cursor:pointer;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .12s var(--spring), opacity .15s var(--ease), background-color .2s var(--ease);
}
.auth-btn::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 55%);
  border-radius:inherit;
}
.auth-btn > *{position:relative;z-index:1}
.auth-btn:active{transform:scale(.97);opacity:.9}
.auth-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.auth-btn .icn{width:20px;height:20px;stroke-width:2;color:#fff}

/* Мини-спиннер для loading-стейта */
.spin{
  width:18px;height:18px;
  border:2.25px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* === Error banner ====================================== */
.auth-err{
  display:none;
  background:var(--rd-bg);
  color:var(--rd);
  border-radius:var(--r-md);
  padding:11px 14px;
  font-size:14px;font-weight:500;
  display:none;
  align-items:center;gap:10px;
  line-height:1.35;
}
.auth-err.on{display:flex;animation:errIn .3s var(--spring)}
@keyframes errIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.auth-err .icn{color:var(--rd);flex-shrink:0}

/* === Footer ============================================ */
.auth-footer{
  font-size:12px;color:var(--t3);
  font-weight:500;letter-spacing:-.005em;
  padding:0 20px;
}

/* === Reduced motion =================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}