/* Публичный вход по трём PNG; остальные экраны и роли не меняются. */
#loginScreen { --login-bg:#071b27; --login-fg:#f2f7fa; --login-muted:#a6bdce; --login-field:rgba(159,206,234,.075); --login-line:rgba(171,218,244,.10); --login-button:#04728a; --login-link:#27cee8; background:var(--login-bg); color:var(--login-fg); min-height:100vh; min-height:100svh; padding:76px 18px 44px; box-sizing:border-box; }
html[data-theme="light"] #loginScreen { --login-bg:#f3f7f9; --login-fg:#072535; --login-muted:#506777; --login-field:rgba(255,255,255,.87); --login-line:rgba(35,77,97,.07); --login-button:#14c6e1; --login-link:#078aa8; }
html[data-theme="gray"] #loginScreen { --login-bg:#abbac6; --login-fg:#072535; --login-muted:#415869; --login-field:rgba(231,243,249,.30); --login-line:rgba(230,243,251,.10); --login-button:#88d0db; --login-link:#077c96; color-scheme:light; }
#loginScreen:not([hidden]) { display:flex; align-items:center; justify-content:center; }
#loginScreen .login-card { width:100%; max-width:480px; padding:0; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; background:transparent; }
#loginScreen .login-form { width:100%; }
#loginScreen .login-brand { display:block; width:112px; height:126px; object-fit:contain; margin:0 auto 22px; }
#loginScreen .login-title { margin:0 0 9px; color:var(--login-fg); font-size:clamp(26px,7.3vw,36px); font-weight:750; text-align:center; line-height:1.18; letter-spacing:-.035em; }
#loginScreen .login-subtitle { margin:0 0 28px; color:var(--login-muted); font-size:clamp(15px,4.15vw,20px); text-align:center; line-height:1.4; }
#loginScreen .login-field { position:relative; min-height:68px; box-sizing:border-box; margin:0 0 15px; padding:10px 50px 7px 18px; border:1px solid var(--login-line); border-radius:14px; background:var(--login-field); }
#loginScreen .login-field label { display:block; margin:0; color:var(--login-muted); font-size:14px; line-height:1.4; }
#loginScreen .login-field input { display:block; width:100%; height:30px; box-sizing:border-box; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--login-fg); font-size:18px; line-height:30px; box-shadow:none; }
#loginScreen .login-field:focus-within { outline:2px solid var(--login-link); outline-offset:2px; }
#loginScreen .login-field-icon { position:absolute; right:9px; top:50%; display:grid; place-items:center; transform:translateY(-50%); width:40px; height:44px; min-height:0; padding:8px; border:0; border-radius:9px; background:transparent; color:var(--login-muted); box-shadow:none; }
#loginScreen svg { width:23px; height:23px; flex:none; }
#loginScreen .login-paste { display:flex; align-items:center; gap:12px; min-height:40px; padding:0 8px; margin:-4px 0 16px; border:0; background:transparent; color:var(--login-link); font-size:16px; box-shadow:none; }
#loginScreen .login-clipboard-status { margin:0; color:var(--login-muted); font-size:14px; line-height:1.4; }
#loginScreen .login-clipboard-status:not(:empty) { margin:-8px 0 14px; }
#loginScreen button[type="submit"] { width:100%; min-height:58px; margin:0; border:0; border-radius:13px; background:var(--login-button); color:#fff; font-size:20px; font-weight:600; box-shadow:none; }
#loginScreen .login-help { display:flex; align-items:flex-start; justify-content:center; gap:12px; max-width:320px; margin:28px auto 0; color:var(--login-muted); font-size:14px; line-height:1.4; text-align:center; }
#loginScreen .login-help span { max-width:240px; }
#loginScreen .login-theme-toggle { position:absolute; top:max(15px,env(safe-area-inset-top)); right:max(17px,env(safe-area-inset-right)); display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:50%; background:var(--login-field); color:var(--login-link); font-size:28px; box-shadow:none; }
#loginScreen button:hover { transform:none; }
#loginScreen .login-field-icon:hover { transform:translateY(-50%); }
#loginScreen button:focus-visible { outline:2px solid var(--login-link); outline-offset:3px; }
#loginScreen button:disabled { opacity:.6; }
@media(max-height:670px) { #loginScreen { padding-top:68px; align-items:flex-start; } #loginScreen .login-brand { width:76px; height:84px; margin-bottom:14px; } #loginScreen .login-subtitle { margin-bottom:20px; } }