*{box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html,body{margin:0;height:100%;background:#0b2545;color:#eef}
.hidden{display:none!important}
#map{position:fixed;inset:0;z-index:0}

/* --- Вход --- */
.auth{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0b2545,#13315c);z-index:50}
.authBox{width:min(380px,92vw);background:#fff;color:#123;border-radius:14px;padding:22px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.authBox h1{margin:0;color:#0b2545;letter-spacing:2px}
.authBox .sub{font-size:13px;color:#456;margin:6px 0 14px}
.authBox input{width:100%;padding:11px;margin:5px 0;border:1px solid #cbd5e1;border-radius:8px;font-size:15px}
.tabs{display:flex;gap:6px;margin-bottom:8px}
.tab{flex:1;padding:8px;border:0;border-radius:8px;background:#e2e8f0;cursor:pointer}
.tab.active{background:#0b2545;color:#fff}
.primary{width:100%;padding:12px;margin-top:8px;border:0;border-radius:8px;background:#c1121f;color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.err{color:#c1121f;font-size:13px;min-height:18px;margin-top:6px}

/* --- Горна лента --- */
#topBar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;gap:8px;align-items:center;
 padding:6px 10px;background:rgba(11,37,69,.92);font-size:13px;flex-wrap:wrap}
#whoami{font-weight:700}
#meteoNow{opacity:.9;font-size:12px}
.mini{padding:6px 10px;border:0;border-radius:7px;background:#1d4e89;color:#fff;cursor:pointer;font-size:13px}
.mini.danger{background:#c1121f}

/* --- Бутон Аларма --- */
#btnAlarm{position:fixed;right:14px;bottom:20px;z-index:20;width:110px;height:110px;border-radius:50%;
 border:5px solid #fff;background:radial-gradient(circle at 35% 30%,#ff4d5a,#c1121f 70%);color:#fff;
 font-size:17px;font-weight:900;letter-spacing:1px;cursor:pointer;
 box-shadow:0 6px 24px rgba(193,18,31,.6);animation:pulse 2s infinite}
#btnAlarm small{font-size:12px;font-weight:700}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* --- Лента за позиция на бедствието (T11) --- */
#posBar{position:fixed;right:14px;bottom:140px;z-index:20;width:min(230px,70vw);
 background:rgba(11,37,69,.92);border-radius:10px;padding:8px;font-size:12px;text-align:right}
#posLabel{margin-bottom:6px}
#posBar .posBtns{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
#posBar .mini{padding:5px 8px;font-size:12px}
#posBar .mini.active{background:#c1121f}
.posHint{margin-top:6px;color:#ffd166;font-size:11px}
.geoBanner{position:fixed;top:44px;left:50%;transform:translateX(-50%);z-index:35;
 background:#b45309;color:#fff;padding:10px 14px;border-radius:10px;max-width:92vw;font-size:13px;
 box-shadow:0 6px 24px rgba(0,0,0,.45)}
.geoBanner button{margin-left:8px}
#btnGeo.denied{background:#c1121f}
#btnGeo.granted{background:#166534}

/* --- Панели --- */
.panel{position:fixed;top:44px;left:8px;z-index:30;width:min(380px,94vw);max-height:80vh;overflow:auto;
 background:#fff;color:#123;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.45);padding:10px}
.panelHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.x{border:0;background:none;font-size:22px;cursor:pointer;color:#555}
.sect{border-top:1px solid #e2e8f0;margin-top:10px;padding-top:8px;font-size:14px}
.sect textarea,.sect select,.sect input{width:100%;margin:5px 0;padding:8px;border:1px solid #cbd5e1;border-radius:7px;font-size:14px}
.hint{font-size:11px;color:#678}
.caseItem{border:1px solid #e2e8f0;border-radius:9px;padding:8px;margin:6px 0;cursor:pointer}
.caseItem:hover{background:#f1f5f9}
.caseItem .sea{color:#0369a1;font-weight:700}
.caseItem .land{color:#166534;font-weight:700}
.upd{background:#f8fafc;border-radius:7px;padding:6px;margin:4px 0;font-size:13px}
.scen{border-left:4px solid;border-radius:5px;padding:6px;margin:5px 0;font-size:13px;background:#f8fafc}

/* --- Известие --- */
#alarmToast{position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:40;
 background:#c1121f;color:#fff;padding:12px 18px;border-radius:10px;font-weight:700;
 box-shadow:0 6px 24px rgba(0,0,0,.5);max-width:92vw;text-align:center}
#timeLabel{font-weight:700;margin-left:6px}
input[type=range]{width:80%}