/* ============================================================
   ЭКРАН ВХОДА (/login): пароль → код из Телеграма / приложения / запасной код.
   Перенос из утверждённого макета output/brandmaker/2026-09-24/vhod-i-zashchita/
   (loginScreen(), владелец дал «ок» 24.09.2026). Страница отдельная, без app.css
   и redesign.css, поэтому токены v4 объявлены здесь. Тему и акцент ставит JS
   страницы на <html> из localStorage uiTheme/uiAccent.
   ============================================================ */

/*faces*/
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/jetbrainsmono-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/jetbrainsmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/inter-var.woff2) format('woff2')}

/* ── Токены v4 Neutral ── */
:root{
  --font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  --bg:#F4F3EF; --bg-well:#E2E1DB; --bg-page:#ECEBE6; --bg-elev:#FBFBF8;
  --hairline:#CFCEC7; --hairline-soft:#DDDCD5; --hairline-strong:#0A0A0B;
  --ink:#0A0A0B; --ink-soft:#4F4F4B; --ink-mute:#6A6A65;
  --shadow-card:0 1px 2px rgba(13,13,13,.04),0 4px 16px rgba(13,13,13,.05);
  --r-s:4px; --r-m:6px; --r-card:8px; --r-l:10px; --r-pill:999px;
  --err-text:#B80E1B; --warn-bg:#FEF3C7; --warn-on:#92400E;
  --sb-thumb:rgba(13,13,13,.18); --sb-thumb-hover:rgba(13,13,13,.32); --sb-thumb-active:rgba(13,13,13,.45);
}
[data-theme="dark"]{
  --bg:#0B0B0C; --bg-well:#1A1A1D; --bg-page:#0B0B0C; --bg-elev:#141416;
  --hairline:rgba(255,255,255,.10); --hairline-soft:rgba(255,255,255,.06); --hairline-strong:rgba(255,255,255,.24);
  --ink:#EDEDEA; --ink-soft:#A6A6A1; --ink-mute:#8C8C88;
  --shadow-card:0 1px 2px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.25);
  --err-text:#FF5560; --warn-bg:#3A2E14; --warn-on:#FCD34D;
  --sb-thumb:rgba(255,255,255,.16); --sb-thumb-hover:rgba(255,255,255,.28); --sb-thumb-active:rgba(255,255,255,.4);
}
/* акцент сменный: всё только через --accent*. На заливке всегда белый текст,
   в тёмной теме заливка темнее (DESIGN.md, правило 4 от 22.09.2026) */
:root,[data-accent="green"]{ --accent:#E3162A; --accent-fill:#D10F1F; --accent-fill-hover:#B80E1B; --on-accent:#FFFFFF; --accent-text:#C20E1C; }
[data-accent="blue"]{   --accent:#B8FF1A; --accent-fill:#B8FF1A; --accent-fill-hover:#CBFF4D; --on-accent:#0A0A0B; --accent-text:#3D6600; }
[data-accent="black"]{  --accent:#0A0A0B; --accent-fill:#0A0A0B; --accent-fill-hover:#2A2A2C; --on-accent:#FFFFFF; --accent-text:#0A0A0B; }
[data-accent="orange"]{ --accent:#FFD400; --accent-fill:#FFD400; --accent-fill-hover:#FFE14D; --on-accent:#0A0A0B; --accent-text:#7A5F00; }
/* тёмная: красный чуть светлее для текста, неон — как есть */
[data-theme="dark"],[data-theme="dark"][data-accent="green"]{ --accent:#FF3040; --accent-fill:#E3162A; --accent-fill-hover:#FF3040; --on-accent:#FFFFFF; --accent-text:#FF5560; }
[data-theme="dark"][data-accent="blue"]{   --accent:#B8FF1A; --accent-fill:#B8FF1A; --accent-fill-hover:#CBFF4D; --on-accent:#0A0A0B; --accent-text:#B8FF1A; }
[data-theme="dark"][data-accent="black"]{  --accent:#EDEDEA; --accent-fill:#EDEDEA; --accent-fill-hover:#FFFFFF; --on-accent:#0A0A0B; --accent-text:#EDEDEA; }
[data-theme="dark"][data-accent="orange"]{ --accent:#FFD400; --accent-fill:#FFD400; --accent-fill-hover:#FFE14D; --on-accent:#0A0A0B; --accent-text:#FFD400; }

/* фон html совпадает с фоном экрана: ПК — --bg-page, телефон — --bg-elev */
html{color-scheme:light;background:var(--bg-page)}
html[data-theme="dark"]{color-scheme:dark}

/* ── База ── */
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
body{font-family:var(--font);font-size:15px;line-height:1.5;color:var(--ink);background:var(--bg-page);
  -webkit-font-smoothing:antialiased;min-height:100dvh}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover)}
::-webkit-scrollbar-thumb:active{background:var(--sb-thumb-active)}
svg{display:block;flex:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit;color:inherit}
[hidden]{display:none!important}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* одно кольцо фокуса у кнопок; у полей кольцо рисует обёртка */
:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}

/* ── Карточка входа ── */
.login{min-height:100dvh;background:var(--bg-page);display:grid;place-items:center;padding:24px}
.lcard{width:100%;max-width:400px;background:var(--bg-elev);border:1px solid var(--hairline);border-radius:var(--r-l);
  box-shadow:var(--shadow-card);padding:32px;display:flex;flex-direction:column;gap:18px}
.sq{width:28px;height:28px;border-radius:8px;background:var(--accent-fill);color:var(--on-accent);display:grid;place-items:center}
.sq .ico{width:16px;height:16px;stroke-width:2.4}
.lcard .sq{width:44px;height:44px;border-radius:12px}
.lcard .sq .ico{width:22px;height:22px}
.lhead{display:flex;flex-direction:column;gap:6px}
.lhead h1{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.lhead p{font-size:14px;color:var(--ink-soft);line-height:1.5}
.lback{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px 0 4px;margin:-10px 0 -8px -4px;
  border-radius:var(--r-m);font-size:14px;font-weight:500;color:var(--ink-soft)}
.lback:hover{background:var(--bg-well);color:var(--ink)}
.lnote{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-soft)}
.lnote .ico{width:16px;height:16px;color:var(--ink-mute)}
.lalt{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden}
.lalt button{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 14px;text-align:left;font-size:14.5px;font-weight:600}
.lalt button + button{border-top:1px solid var(--hairline-soft)}
.lalt button:hover{background:var(--bg-well)}
.lalt button:focus-visible{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
.lalt .opt-note{font-weight:400;display:block}
.lalt .chev{margin-left:auto}
.lock-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--warn-bg);color:var(--warn-on)}
.lock-ic .ico{width:24px;height:24px}
.ldiv{display:flex;flex-direction:column;align-items:center;gap:2px}
.tile{width:40px;height:40px;border-radius:var(--r-m);background:var(--bg-well);display:grid;place-items:center;color:var(--ink);flex:none}
.tile .ico{width:20px;height:20px}
.opt-note{font-size:13px;color:var(--ink-soft);margin-top:2px;line-height:1.45}
.chev{color:var(--ink-mute);width:16px;height:16px}

/* ── Кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-m);
  font-size:14.5px;font-weight:600;white-space:nowrap;transition:background-color .15s ease}
.lcard .btn{width:100%}
.btn-primary{background:var(--accent-fill);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-fill-hover)}
.btn-primary[disabled]{background:var(--bg-well);color:var(--ink-mute);cursor:not-allowed}
.btn-quiet{background:var(--bg-well);color:var(--ink)}
.btn-quiet:hover{background:color-mix(in srgb,var(--bg-well) 70%,var(--ink) 8%)}
.linklike{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--accent-text);
  border-radius:var(--r-s);padding:0 2px;text-align:left}
.linklike:hover{text-decoration:underline;text-underline-offset:3px}
.linklike .ico{width:16px;height:16px}

/* ── Выноска ── */
.callout{display:flex;gap:10px;align-items:flex-start;background:var(--bg-well);border-radius:var(--r-m);padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.callout .ico{width:18px;height:18px;color:var(--ink-soft);margin-top:1px}
.callout.warn{background:var(--warn-bg);color:var(--warn-on)}
.callout.warn .ico{color:var(--warn-on)}

/* ── Поля ── */
.field{display:flex;flex-direction:column;gap:6px}
.field-l{font-size:13px;font-weight:600}
.inp{display:flex;align-items:center;gap:6px;min-height:48px;padding:0 6px 0 16px;background:var(--bg-elev);
  border:1px solid var(--hairline-strong);border-radius:var(--r-m);transition:border-color .15s ease,box-shadow .15s ease}
.inp:focus-within,.inp.focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.inp input{flex:1 1 auto;min-width:0;border:none;background:transparent;outline:none;box-shadow:none;font-size:15px;height:46px}
.inp input::placeholder{color:var(--ink-mute)}
.inp input:focus-visible{box-shadow:none}
.eye{width:40px;height:40px;border-radius:var(--r-s);display:grid;place-items:center;color:var(--ink-soft);flex:none}
.eye:hover,.eye:focus-visible{background:var(--bg-well);color:var(--ink);box-shadow:none}
.hint{font-size:12.5px;color:var(--ink-soft)}
.code{justify-content:center;padding:0 16px;min-height:60px}
.code input{text-align:center;font-size:26px;font-weight:600;letter-spacing:.32em;font-variant-numeric:tabular-nums;height:58px;padding-left:.32em}
.code.wide input{letter-spacing:.14em;font-size:22px;padding-left:.14em}
.inp.err{border-color:var(--err-text)}
.inp.err:focus-within,.inp.err.focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--err-text) 22%,transparent)}
.msg-err{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--err-text);font-weight:500;line-height:1.45}
.msg-err .ico{width:17px;height:17px;margin-top:1px}
.resend{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-soft);min-height:24px}
.resend .ico{width:16px;height:16px;color:var(--ink-mute)}
.codebox{display:flex;flex-direction:column;gap:10px}

/* ── Телефон: без карточки, форма сверху, фон карточки на весь экран ── */
@media (max-width:760px){
  html,body{background:var(--bg-elev)}
  .login{place-items:start center;padding:56px 16px 24px;background:var(--bg-elev)}
  .lcard{border:none;box-shadow:none;padding:8px 4px;max-width:420px}
  /* iOS увеличивает страницу на полях мельче 16px (макет 15px) */
  .inp:not(.code) input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }