/* ═══════ «Горизонт»: единый стиль заставки, входа и карт ═══════ */

/* ── сцена: небо, звёзды, планета с кромкой света, красное солнце ── */
.hz-scene{position:absolute;inset:0;overflow:hidden;--hz-rim:26vh;--hz-rimA:1;--hz-day:0;--hz-sunop:1;background:#05070c}
.hz-sky{position:absolute;inset:0;
  background:radial-gradient(1100px 620px at 50% 34%,rgba(60,110,220,calc(.12 + .16 * var(--hz-day))),transparent 62%),
             radial-gradient(700px 420px at 86% 8%,rgba(248,81,73,.10),transparent 60%),
             radial-gradient(800px 500px at 8% 4%,rgba(88,166,255,.10),transparent 60%)}
.hz-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hz-planet{position:absolute;left:50%;top:calc(100% - var(--hz-rim));width:max(190vw,1500px);aspect-ratio:1;border-radius:50%;
  transform:translateX(-50%);transition:top .95s cubic-bezier(.65,0,.35,1);
  background:radial-gradient(ellipse 60% 22% at 50% 0%,rgba(96,165,255,.30),rgba(30,60,120,.10) 55%,transparent 75%),
             linear-gradient(180deg,#0a1220 0%,#060910 26%,#04060b 70%);
  box-shadow:0 -1px 0 0 rgba(190,220,255,calc(.95 * var(--hz-rimA))),
             0 -3px 14px 0 rgba(120,180,255,calc(.75 * var(--hz-rimA))),
             0 -14px 60px 6px rgba(88,166,255,calc(.42 * var(--hz-rimA))),
             0 -60px 160px 20px rgba(60,110,220,calc(.28 * var(--hz-rimA))),
             inset 0 3px 40px rgba(120,180,255,calc(.30 * var(--hz-rimA)))}
.hz-sun{position:absolute;left:38%;top:0;width:12px;height:12px;border-radius:50%;background:#f85149;transform:translate(-50%,-50%);
  opacity:var(--hz-sunop);transition:opacity 1.2s ease,left 1s cubic-bezier(.16,1,.3,1),top 1s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 22px 6px rgba(248,81,73,.75),0 0 90px 26px rgba(248,81,73,.35);animation:hzPulse 3.2s infinite}
.hz-sun::after{content:"";position:absolute;left:50%;top:50%;width:min(52vw,640px);height:2px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(255,150,140,.55) 50%,transparent);filter:blur(1px)}
@keyframes hzPulse{0%{box-shadow:0 0 0 0 rgba(248,81,73,.6),0 0 22px 6px rgba(248,81,73,.75),0 0 90px 26px rgba(248,81,73,.35)}
                   70%{box-shadow:0 0 0 22px rgba(248,81,73,0),0 0 22px 6px rgba(248,81,73,.75),0 0 90px 26px rgba(248,81,73,.35)}
                   100%{box-shadow:0 0 0 0 rgba(248,81,73,0),0 0 22px 6px rgba(248,81,73,.75),0 0 90px 26px rgba(248,81,73,.35)}}

/* ── экран входа в сцене ── */
#login{--panel:#11161f;--card:#0d1320;--fg:#e6edf3;--mut:#8b949e;--line:#222b38;--inp:rgba(255,255,255,.05);
  --accent:#58a6ff;--accentSoft:rgba(88,166,255,.16);--shadow:rgba(0,0,0,.6);
  background:#05070c;color:var(--fg);padding-bottom:9vh;font-family:system-ui,-apple-system,"SF Pro Display","Segoe UI",Roboto,sans-serif}
#login #loginBg::before,#login #loginBg::after{display:none}
#login #loginMap,#login #loginTheme{display:none}
#login .hz-home{position:absolute;top:22px;left:26px;z-index:3;color:#e6edf3;text-decoration:none;font-weight:700;font-size:17px;
  letter-spacing:-.01em;opacity:.8;display:inline-flex;align-items:center;gap:8px;transition:opacity .2s}
#login .hz-home:hover{opacity:1}
#login .hz-home svg{width:16px;height:16px}
#login .box{width:392px;border-radius:26px;padding:34px 32px 28px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 40px 110px -34px rgba(0,0,0,.95),0 0 80px -30px rgba(88,166,255,.45)}
#login .box::before{left:30px;right:30px;background:linear-gradient(90deg,transparent,rgba(150,200,255,.85),transparent)}
#login h2{font-size:28px;font-weight:700;letter-spacing:-.03em;margin:0 0 18px}
#login label{font-size:11.5px;color:#9aa7b8;letter-spacing:.02em}
#login input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:13px;padding:13px 14px 13px 40px;font-size:14.5px}
#login input:focus{border-color:rgba(120,180,255,.75);box-shadow:0 0 0 4px rgba(88,166,255,.16);background:rgba(255,255,255,.07)}
#login .lbtn{border-radius:13px;padding:13px;font-size:14.5px;letter-spacing:.01em;
  background:linear-gradient(180deg,#5aa9ff,#2f6fe0);box-shadow:0 12px 30px -6px rgba(47,111,224,.7),0 1px 0 rgba(255,255,255,.35) inset}
#login .lswitch{color:#8b949e}
/* прилёт: состояние «до» (планета закрывает экран) снимается, и всё плавно опускается к горизонту.
   Без keyframes: начальное состояние есть в разметке с первого кадра, поэтому скачков нет. */
#login{transition:opacity .7s ease}
#login.hz-fade{opacity:0}
#login .hz-planet{transition:top 1.9s cubic-bezier(.22,1,.36,1)}
#login.hz-pre .hz-planet{top:-14vh}
#login .box,#login .hz-home{transition:opacity 1.2s .35s cubic-bezier(.16,1,.3,1),transform 1.3s .35s cubic-bezier(.16,1,.3,1),filter 1.1s .35s ease}
#login.hz-pre .box,#login.hz-pre .hz-home{opacity:0;transform:translateY(28px) scale(.985);filter:blur(10px)}
html.hz-authed #login{display:none!important}
.hz-scene:not(.ready) .hz-sun{transition:none}
/* уход в карту: планета закрывает экран */
#login.hz-leaving .hz-planet{top:-14vh;transition:top .8s cubic-bezier(.65,0,.35,1)}
#login.hz-leaving .box,#login.hz-leaving .hz-home{opacity:0;transform:translateY(-30px) scale(.985);filter:blur(10px);pointer-events:none;
  transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .5s ease}
#login.hz-leaving .hz-sun{opacity:1;transform:translate(-50%,-50%) scale(1.8);transition:transform .8s ease}
@media (max-width:520px){#login .box{padding:26px 22px}#login{padding-bottom:6vh}}
@media (prefers-reduced-motion:reduce){#login *{animation:none!important;transition:none!important}}

/* ── рамка карты: сцена вокруг, стеклянные панели, тёмная тема ── */
@media (min-width:821px){
  html:not(.light) body{background:#05070c}
  html:not(.light) #app{padding:10px;
    background:radial-gradient(1000px 560px at 30% 18%,rgba(60,110,220,.14),transparent 62%),
               radial-gradient(700px 420px at 100% 0%,rgba(248,81,73,.06),transparent 60%),#05070c}
  html:not(.light) #map{border-radius:22px;border:1px solid rgba(255,255,255,.09);
    box-shadow:0 30px 80px -34px rgba(0,0,0,.9),0 0 0 1px rgba(88,166,255,.05) inset}
  html:not(.light) #side{border-radius:22px;border:1px solid rgba(255,255,255,.10);overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(12,17,26,.90);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
    box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 30px 80px -34px rgba(0,0,0,.95)}
  html:not(.light) #divider{background:transparent;border:none}
}
html:not(.light) #topctl>*{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:12px;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  transition:border-color .2s,background .2s,transform .3s cubic-bezier(.16,1,.3,1)}
html:not(.light) #topctl>*:hover{border-color:rgba(140,190,255,.55);background:rgba(88,166,255,.14);transform:translateY(-1px)}
html:not(.light) #side .card{border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border-color:rgba(255,255,255,.09);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s}
html:not(.light) #side .card:hover{background:linear-gradient(180deg,rgba(88,166,255,.10),rgba(255,255,255,.03));transform:translateY(-1px)}
html:not(.light) #side select,html:not(.light) #side button{border-radius:11px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.10)}
html:not(.light) .head{border-bottom-color:rgba(255,255,255,.08)}
html:not(.light) .seg-i.on{text-shadow:0 0 18px rgba(88,166,255,.55)}

/* проявление карты после входа */
#app.hz-enter{animation:hzMapIn 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes hzMapIn{from{opacity:0;transform:scale(1.025);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){#app.hz-enter{animation:none}}

/* режим съёмки без анимаций: ?still=1 */
html.still *{animation:none!important;transition:none!important}

/* выпадающие списки и поля в тёмной теме: системные подложки и текст (раньше значения открывались белыми) */
html:not(.light){color-scheme:dark}
html.light{color-scheme:light}
html:not(.light) select option,html:not(.light) select optgroup{background:#11161f;color:#e6edf3}
html:not(.light) select option:checked,html:not(.light) select option:hover{background:#1f3350;color:#fff}
html.light select option,html.light select optgroup{background:#ffffff;color:#17202b}
html:not(.light) select,html:not(.light) input,html:not(.light) textarea{color:#e6edf3}

/* ── светлая тема карты: тот же облик, светлая сцена ── */
@media (min-width:821px){
  html.light body{background:#e6ecf5}
  html.light #app{padding:10px;
    background:radial-gradient(1000px 560px at 30% 18%,rgba(31,111,235,.13),transparent 62%),
               radial-gradient(700px 420px at 100% 0%,rgba(209,48,43,.05),transparent 60%),#e6ecf5}
  html.light #map{border-radius:22px;border:1px solid rgba(30,50,90,.12);box-shadow:0 30px 80px -44px rgba(30,50,90,.45)}
  html.light #side{border-radius:22px;border:1px solid rgba(30,50,90,.12);overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
    -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
    box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 30px 80px -44px rgba(30,50,90,.45)}
  html.light #divider{background:transparent;border:none}
}
html.light #topctl>*{background:rgba(255,255,255,.74);border:1px solid rgba(30,50,90,.14);border-radius:12px;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  transition:border-color .2s,background .2s,transform .3s cubic-bezier(.16,1,.3,1)}
html.light #topctl>*:hover{border-color:rgba(31,111,235,.55);background:#fff;transform:translateY(-1px)}
html.light #side .card{border-radius:14px;background:linear-gradient(180deg,#ffffff,#f4f7fc);border-color:rgba(30,50,90,.10);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s}
html.light #side .card:hover{background:linear-gradient(180deg,#eef4ff,#ffffff);transform:translateY(-1px)}
html.light #side select,html.light #side button{border-radius:11px;background:#f1f5fb;border-color:rgba(30,50,90,.13)}
html.light .head{border-bottom-color:rgba(30,50,90,.10)}