/* ============================================================ ЭКРАН ВХОДА (/login): пароль → код из Телеграма / приложения / запасной код. Перенос из утверждённого макета output/brandmaker/2026-09-24/vhod-i-zashchita/ (loginScreen(), владелец дал «ок» 24.09.2026). Страница отдельная, без app.css и redesign.css, поэтому токены v4 объявлены здесь. Тему и акцент ставит JS страницы на из localStorage uiTheme/uiAccent. ============================================================ */ @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:#FFFFFF; --bg-well:#ECECEC; --bg-page:#F2F2F1; --bg-elev:#FFFFFF; --hairline:#E4E4E2; --hairline-soft:#EDEDEB; --hairline-strong:#CFCFCC; --ink:#0D0D0D; --ink-soft:#5D5D5D; --ink-mute:#8F8F8F; --shadow-card:0 1px 2px rgba(13,13,13,.04),0 4px 16px rgba(13,13,13,.05); --r-s:8px; --r-m:10px; --r-card:14px; --r-l:16px; --r-pill:999px; --err-text:#B91C1C; --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:#212121; --bg-well:#2F2F2F; --bg-page:#171717; --bg-elev:#2A2A2A; --hairline:rgba(255,255,255,.09); --hairline-soft:rgba(255,255,255,.06); --hairline-strong:rgba(255,255,255,.18); --ink:#ECECEC; --ink-soft:#B4B4B4; --ink-mute:#8F8F8F; --shadow-card:0 1px 2px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.25); --err-text:#F87171; --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:#1DB954; --accent-fill:#14823B; --accent-fill-hover:#116F32; --on-accent:#FFFFFF; --accent-text:#116F32; } [data-accent="blue"]{ --accent:#3B82F6; --accent-fill:#2563EB; --accent-fill-hover:#1D4ED8; --on-accent:#FFFFFF; --accent-text:#2563EB; } [data-accent="black"]{ --accent:#0D0D0D; --accent-fill:#0D0D0D; --accent-fill-hover:#333333; --on-accent:#FFFFFF; --accent-text:#0D0D0D; } [data-accent="orange"]{--accent:#F97316; --accent-fill:#C2410C; --accent-fill-hover:#B3400B; --on-accent:#FFFFFF; --accent-text:#C2410C; } [data-theme="dark"],[data-theme="dark"][data-accent="green"]{ --accent:#1DB954; --accent-fill:#14823B; --accent-fill-hover:#116F32; --on-accent:#FFFFFF; --accent-text:#1DB954; } [data-theme="dark"][data-accent="blue"]{ --accent:#3B82F6; --accent-fill:#2563EB; --accent-fill-hover:#1D4ED8; --on-accent:#FFFFFF; --accent-text:#60A5FA; } [data-theme="dark"][data-accent="black"]{ --accent:#ECECEC; --accent-fill:#ECECEC; --accent-fill-hover:#FFFFFF; --on-accent:#212121; --accent-text:#ECECEC; } [data-theme="dark"][data-accent="orange"]{--accent:#F97316; --accent-fill:#C2410C; --accent-fill-hover:#B3400B; --on-accent:#FFFFFF; --accent-text:#FB923C; } /* фон 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} }