@font-face { font-family:"CRM Inter"; src:url('/ui/app/fonts/InterVariable-subset.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
:root { color-scheme:light; --bg:#e8eaf6; --card:#f0f2fc; --field:#f8f9fd; --text:#111b35; --muted:#5e6880; --accent:#4e4df8; --accent-hover:#4241dc; --button-text:#fff; --line:#ccd1e1; --error:#a52d39; --success:#236348; --circle:#eff1fb; --shadow:0 12px 38px #39497610; --font:"CRM Inter",Inter,sans-serif; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#181b20; --card:#22262c; --field:#23282f; --text:#edf0f6; --muted:#b0b7c4; --accent:#7c98fd; --accent-hover:#94aafe; --button-text:#172035; --line:#515965; --error:#ff9ca5; --success:#a0ddbd; --circle:#20252e; --shadow:0 16px 38px #05070a24; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:88px 24px; background:var(--bg); color:var(--text); font:14px/1.5 var(--font); }
html[data-auth-page="login"] body::before,html[data-auth-page="login"] body::after { content:''; position:fixed; z-index:-1; width:740px; height:740px; border-radius:50%; background:var(--circle); pointer-events:none; }
html[data-auth-page="login"] body::before { right:-90px; top:-355px; }
html[data-auth-page="login"] body::after { left:-235px; bottom:-210px; }

.auth-shell { width:512px; max-width:100%; }
.brand { text-align:center; margin-bottom:30px; }
.auth-card { padding:44px 50px 50px; background:var(--card); border-radius:16px; box-shadow:var(--shadow); }
h1 { font-size:36px; font-weight:650; line-height:1.25; letter-spacing:-.025em; margin:0 0 26px; overflow-wrap:anywhere; }
.field { margin-bottom:22px; }
.field label { display:block; margin:0 0 7px; font-size:15px; font-weight:450; }
.input-wrap { position:relative; }
.input-wrap>svg { position:absolute; left:15px; top:16px; width:21px; height:21px; color:var(--muted); pointer-events:none; }
input:not([type="checkbox"]) { display:block; width:100%; min-width:0; height:52px; border:1px solid var(--line); border-radius:7px; background:var(--field); color:var(--text); font:16px var(--font); padding:12px 48px 12px 14px; caret-color:var(--accent); }
.input-wrap.with-icon input { padding-left:46px; }
input::placeholder { color:var(--muted); opacity:1; }
.reveal { position:absolute; right:3px; top:4px; width:44px; height:44px; padding:12px; color:var(--muted); background:transparent; border:0; border-radius:5px; cursor:pointer; }
.reveal svg { display:block; width:20px; height:20px; }
.reveal[aria-pressed="true"] { background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--text); }
.remember { display:flex; align-items:center; gap:10px; margin:-2px 0 30px; font-size:13px; color:var(--muted); cursor:pointer; }
.remember input { appearance:none; width:20px; height:20px; margin:0; border:1px solid var(--muted); border-radius:4px; background:var(--field); flex-shrink:0; display:grid; place-content:center; }
.remember input:checked { background:var(--accent); border-color:var(--accent); }
.remember input:checked::before { content:''; width:10px; height:6px; border-left:2px solid var(--button-text); border-bottom:2px solid var(--button-text); transform:rotate(-45deg) translateY(-1px); }
.primary,.secondary { display:block; width:100%; min-height:54px; border:0; border-radius:8px; padding:14px 20px; font:500 16px/1.5 var(--font); cursor:pointer; text-align:center; }
.primary { background:var(--accent); color:var(--button-text); }
.primary:hover:not(:disabled) { background:var(--accent-hover); }
.secondary { background:var(--field); border:1px solid var(--line); color:var(--text); margin-bottom:16px; }
button:disabled { opacity:.55; cursor:wait; }
input:disabled { opacity:.75; }
.theme-switch { position:fixed; top:26px; right:32px; z-index:2; display:flex; gap:4px; padding:4px; background:var(--card); border-radius:30px; }
.theme-switch button { display:grid; place-items:center; width:40px; height:36px; padding:8px; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; }
.theme-switch svg { width:22px; height:22px; }
.theme-switch button[aria-pressed="true"] { background:var(--field); color:var(--text); }
[data-theme="dark"] .theme-switch button[aria-pressed="true"] { background:var(--accent); color:var(--button-text); }
/* Тема меняет только цвета: в тёмной карточка та же, что в светлой, — с рамкой вместо тени. */
html[data-auth-page="login"][data-theme="dark"] .auth-card { border:1px solid #343b45; box-shadow:none; }

.error { margin:0 0 20px; padding:12px 14px; color:var(--error); border:1px solid var(--error); border-radius:7px; font-size:14px; overflow-wrap:anywhere; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
::selection { background:var(--accent); color:var(--button-text); }
a { color:var(--text); text-underline-offset:4px; }
html { scrollbar-color:var(--muted) var(--bg); scrollbar-width:thin; }
html[data-auth-page="password"] .auth-shell { width:535px; }
.setup-card { padding:34px; text-align:center; display:flex; flex-direction:column; }
.setup-card .brand { margin:5px 0 24px; }
.key-icon { margin:0 auto 18px; width:74px; height:74px; display:grid; place-items:center; border-radius:50%; color:var(--muted); background:color-mix(in srgb,var(--text) 5%,transparent); }
.key-icon svg { width:36px; height:36px; }
.setup-card h1 { font-size:29px; margin-bottom:8px; }
.subtitle { color:var(--muted); font-size:14px; margin:0 0 24px; overflow-wrap:anywhere; }
.setup-card form { text-align:left; }
.setup-card .field { margin-bottom:18px; }
.setup-card .field label { font-size:14px; color:var(--muted); }
.setup-card input { height:50px; }
.setup-card .primary { font-size:15px; min-height:51px; }
.invitation-label { display:none; }
.invitation-footer { color:var(--muted); font-size:12px; margin:25px 0 2px; border-top:1px solid var(--line); padding-top:20px; }
.corner-brand { display:none; }
.password-rules { list-style:none; margin:2px 0 20px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; font-size:11px; color:var(--muted); }
.password-rules li { display:flex; align-items:baseline; gap:7px; }
.password-rules li::before { content:''; width:6px; height:6px; border:1px solid currentColor; border-radius:50%; flex-shrink:0; }
.password-rules li.ok { color:var(--success); }
.password-rules li.ok::before { border-radius:0; height:5px; width:8px; border:0; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg) translateY(-2px); }
.status { color:var(--muted); margin:22px 0; line-height:1.7; }
.recovery { margin:12px 0; }
.text-link { font-size:14px; }

html[data-auth-page="password"][data-theme="dark"] .setup-card { border:1px solid #343b45; box-shadow:none; }

html[data-auth-page="password"][data-theme="dark"] .invitation-label { color:var(--muted); }

@media(max-width:600px) {
 body { padding:88px 16px 32px; align-items:flex-start; }
 .theme-switch { top:16px; right:16px; }
 .brand { margin-bottom:25px; }
 .auth-card { padding:28px 22px; }
 h1 { font-size:29px; }

 .field label { font-size:14px; }
 .remember { font-size:12px; }
 .setup-card { padding:28px 20px; }
 .setup-card h1 { font-size:25px; }

 .password-rules { grid-template-columns:1fr; }
}
@media(max-height:760px) and (min-width:601px) { body { align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }

@media(min-width:601px) and (min-height:761px) {
 html[data-auth-page="login"][data-theme] .auth-shell { transform:translateY(-36px); }
 html[data-auth-page="login"][data-theme] h1 { font-size:38px; }
 html[data-auth-page="login"][data-theme] .field label { font-size:16px; }
 html[data-auth-page="login"][data-theme] .remember { font-size:14px; }
 html[data-auth-page="login"][data-theme] .primary { font-size:18px; }
}

/* Owner-supplied lettering is geometry, independent of available fonts. */
.wordmark { width:340px; max-width:100%; margin-inline:auto; line-height:0; }
.wordmark svg { display:block; width:100%; height:auto; overflow:visible; }
.setup-card .wordmark { width:200px; }
.corner-brand .wordmark { width:120px; }
@media(max-width:600px) { .wordmark { width:260px; } }
/* Тема меняет только цвета: рамка карточки есть в обеих темах (в светлой прозрачная) — иначе карточка в тёмной была выше на 2px. */
html[data-auth-page="login"] .auth-card { border:1px solid transparent; }
.field input[aria-invalid="true"] { border-color:var(--error); }