/* ГИС «Городской свет» · утверждённая ночная тема авторизации · 1.5.1 */
:root{font-family:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;color-scheme:dark;color:#eef4ff;background:#071423;--gold:#f6bc49;--gold-light:#ffdc83;--muted:#bed0e7}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:clamp(22px,4vw,52px) 16px;isolation:isolate;background:#071423 url('/login-background.webp') center center / cover fixed no-repeat}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(3,13,30,.22),rgba(3,17,36,.28) 42%,rgba(3,15,33,.13)),linear-gradient(180deg,rgba(0,9,26,.08),rgba(0,9,26,.25));}
main{width:min(680px,100%);padding:clamp(22px,4vw,39px);border:1px solid rgba(242,186,79,.48);border-radius:32px;background:linear-gradient(160deg,rgba(17,38,65,.96),rgba(8,26,50,.97) 62%,rgba(16,30,48,.95));box-shadow:0 35px 100px rgba(0,0,0,.64),0 0 42px rgba(4,11,30,.23),inset 0 1px 0 rgba(255,244,205,.17);backdrop-filter:blur(18px);position:relative;overflow:hidden}
main::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);opacity:.78}
main::after{content:'';position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,rgba(250,184,62,.85),transparent);opacity:.5}
.brand{text-align:center;margin:0 auto 25px;max-width:560px}
.brand-symbol{width:112px;height:91px;display:block;margin:0 auto 2px;filter:drop-shadow(0 0 10px rgba(255,182,58,.38))}
.brand small,.brand .kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#e7cf9a;line-height:1.8}
h1{font-size:clamp(26px,4.4vw,39px);letter-spacing:.035em;font-weight:800;line-height:1.17;margin:7px 0 13px;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.18)}
em{font-style:normal;color:var(--gold-light)}
h2{font-size:19px;line-height:1.4;margin:18px 0 12px;color:#f3f7ff}
p{line-height:1.55}.brand .muted{margin:0 auto;color:var(--muted);font-size:15px;line-height:1.45;max-width:460px}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:28px 0 22px}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:14px 16px;font-weight:700;color:#13243d;background:linear-gradient(#ffdb78,#f4af31);box-shadow:inset 0 1px 0 rgba(255,255,255,.44);transition:background .2s,box-shadow .2s,transform .2s}
button:hover{filter:brightness(1.08);transform:translateY(-1px)}button:active{transform:translateY(0)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
button:disabled{opacity:.56;cursor:default}
.tabs button{min-width:0;background:linear-gradient(#1b3959,#122d4a);border:1px solid #385777;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:#edf5ff;font-size:13px;line-height:1.35;padding:14px 7px;min-height:58px}
.tabs button.active{background:linear-gradient(180deg,#ffda76,#e9a72f);border-color:#f2bd58;box-shadow:0 0 19px rgba(239,179,52,.19);color:#101f33}
.tabs button[data-tab='login']::before{content:'↪ ';font-size:19px;vertical-align:-1px}.tabs button[data-tab='invite']::before{content:'✉ ';font-size:18px;vertical-align:-1px}.tabs button[data-tab='request']::before{content:'+ ';font-size:20px;vertical-align:-2px}
label{display:block;font-size:13px;font-weight:600;color:#dbe7f7;margin:16px 0 7px}
input,textarea,select{width:100%;border-radius:10px;border:1px solid #526d90;background:rgba(5,19,39,.83);padding:12px 15px;font:inherit;color:#f4f8ff;min-height:46px;box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}
input::placeholder,textarea::placeholder{color:#96aac2}textarea{resize:vertical;min-height:92px}
form button,#openInvite{width:100%;margin-top:24px;min-height:50px;font-size:15px;box-shadow:0 8px 20px rgba(196,119,22,.16)}
section[hidden],form[hidden]{display:none!important}
section>.muted{font-size:14px;color:var(--muted)}
.error{color:#ffb4a8;min-height:20px;margin:12px 0 0;font-size:13px}.ok{color:#aaf0c4;min-height:20px;margin:12px 0 0;font-size:13px}
.footer-note{font-size:11px;color:#afbed1;line-height:1.5;margin:18px 0 0;padding-top:17px;border-top:1px solid rgba(159,182,210,.3)}
.note{padding:13px 16px;border:1px solid #45617e;border-left:3px solid var(--gold);border-radius:10px;background:rgba(20,47,75,.85);line-height:1.6}
a{color:#ffe09c}a:hover{color:#fff}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:580px){body{background-attachment:scroll;padding:16px 11px}main{padding:24px 19px;border-radius:22px}.brand-symbol{height:74px;width:90px}.tabs{gap:6px}.tabs button{padding:10px 5px;font-size:11px;min-height:55px}.twocol{grid-template-columns:1fr}h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* 1.5.3 · компактный переключатель доверенного устройства. 
   Глобальные правила input не должны растягивать checkbox. */
#loginForm .remember-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  margin: 15px 0 2px;
  padding: 9px 12px;
  border: 1px solid rgba(111, 143, 179, .4);
  border-radius: 11px;
  background: rgba(9, 28, 52, .58);
  color: #e5ecf6;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
#loginForm .remember-option:hover { background: rgba(19, 47, 80, .7); border-color: rgba(246,188,73,.58); }
#loginForm .remember-option input[type="checkbox"] {
  /* Explicitly override the full-width / 46px minimum on regular inputs */
  display: block;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  min-width: 19px;
  min-height: 19px;
  max-width: 19px;
  max-height: 19px;
  padding: 0;
  margin: 0;
  border: 1.5px solid #91aac8;
  border-radius: 5px;
  background: #091b30;
  box-shadow: none;
  vertical-align: middle;
  cursor: pointer;
}
#loginForm .remember-option input[type="checkbox"]:checked {
  background: #f6bc49;
  border-color: #f6bc49;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4.5 10 3.5 3.5 7.5-8' fill='none' stroke='%23152238' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}
#loginForm .remember-option input[type="checkbox"]:focus-visible {outline: 2px solid #ffe5a0; outline-offset: 3px;}
#loginForm .remember-option .remember-label {flex: 1 1 auto; min-width: 0;}
#loginForm .remember-option .remember-period {display: inline-block; flex: none; color:#f7d792; background:rgba(246,188,73,.12); border:1px solid rgba(246,188,73,.18); border-radius: 6px; font-size: 12px; padding: 3px 8px; white-space: nowrap;}
#loginForm button[type="submit"] {margin-top: 15px;}
@media(max-width:420px){#loginForm .remember-option{gap:9px;padding:9px}#loginForm .remember-option .remember-period{font-size:11px;padding:3px 5px}}