:root{
  /* тёплая палитра: тёмный шоколадно-угольный фон, кремовый текст, медово-абрикосовый акцент */
  --bg:#14100e;--card:#1b1613;--card2:#221b17;--line:#352a21;--line2:#4a3a2d;--text:#f5eee6;--muted:#a8998a;
  --accent:#f0b46a;--accent-bg:#f0b46a1f;--blue:#f0b46a;--green:#93d3a2;--amber:#ffc978;--peri:#9fb4d6;--red:#ff7b6b;
  --btn:#201914;--btn-line:#40322a;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{background:radial-gradient(ellipse 65% 45% at 82% -8%,#4a2c1855 0,transparent 70%),radial-gradient(ellipse at 18% 0%,#2a1f18 0,#14100e 68%) fixed}
button,select,input{font:inherit}
.muted{color:var(--muted)}.sm{font-size:12px}.pad{padding:14px}

/* header */
.top{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 18px;border-bottom:1px solid var(--line);background:#120e0cf2}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{width:46px;height:30px;flex:none}
.logo path{stroke:var(--accent)}
.brand h1{margin:0;font-size:20px;letter-spacing:.2px;white-space:nowrap}
.brand p{margin:1px 0 0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-right{display:flex;align-items:center;gap:18px;flex:none}
.status{display:flex;align-items:center;gap:8px;font-size:12px;color:#cdbfb1}
.dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px currentColor;color:var(--amber);display:inline-block}
.dot.ok{background:var(--green);color:var(--green)}.dot.err{background:var(--red);color:var(--red)}
.sm-dot{width:6px;height:6px;background:var(--green);color:var(--green)}
.clock{text-align:right;font-variant-numeric:tabular-nums;line-height:1.2}
.clock strong{display:block;font-size:14px}.clock span{font-size:11px;color:var(--muted)}
.btn{background:var(--btn);color:var(--text);border:1px solid var(--btn-line);border-radius:10px;padding:8px 12px;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}.btn.wide{width:100%;margin-top:4px}

/* переключатели языка и времени */
.tog{display:flex;border:1px solid var(--btn-line);border-radius:10px;overflow:hidden;background:var(--btn)}
.tog[hidden]{display:none}
.tog button{background:none;border:0;color:var(--muted);padding:7px 10px;cursor:pointer;font-size:12px;font-weight:600}
.tog button:hover{color:var(--accent)}
.tog button.on{background:var(--accent-bg);color:var(--accent)}
.small-tag{font-size:11px}
.kv small,.lat small,.muted.sm small{display:block;color:var(--muted);font-size:11px;font-weight:400}

/* блок «О сайте»: карточка той же ширины, что и сетка, три колонки */
.about{margin:0 12px 10px;padding:16px 20px;color:#cdbfb1;font-size:13px;line-height:1.55}
.about h2{font-size:15px;color:var(--text);margin:0 0 12px}
.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px}
.about h3{font-size:13px;color:var(--accent);margin:0 0 6px;text-transform:uppercase;letter-spacing:.4px}
.about p{margin:0 0 8px}
.scale{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.scale li{display:flex;align-items:center;gap:10px}
.scale .sc{display:flex;gap:3px;width:62px;flex:none}
.scale .chip{min-width:26px;height:22px}
.pagefoot a{color:#a8998a}.pagefoot a:hover{color:var(--accent)}
.pagefoot[hidden],.pagefoot a[hidden]{display:none}
.pagefoot{margin:0 12px 24px;padding:0 4px;font-size:11px;color:#7d7064;display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:1180px){.about-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.about{margin:0 8px 10px;padding:14px}.about-grid{grid-template-columns:1fr}}

/* layout */
.layout{display:grid;grid-template-columns:290px minmax(0,1fr) 360px;gap:12px;padding:12px;height:calc(100vh - 64px)}
.col{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.left,.right{overflow-y:auto;padding-right:2px}
.mid{overflow:hidden}
.card{background:linear-gradient(150deg,#1f1915,#18130f);border:1px solid var(--line);border-radius:14px;padding:13px 14px;box-shadow:0 8px 24px #0005}
.card-title{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:10px}
.card-title .muted{margin-left:auto;font-weight:400}
.ico{color:var(--accent);font-size:16px;width:18px;text-align:center}.ico.red{color:var(--red)}
.now{font-size:24px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums;margin-bottom:4px}
.info{font-size:12px;color:#cdbfb1;background:#211a15}

/* form bits */
.chk{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:13px}
.chk input{accent-color:var(--accent);width:16px;height:16px}
.fld{margin-bottom:12px}.fld-h{display:flex;justify-content:space-between;font-size:12px;color:#cdbfb1;margin-bottom:5px}.fld-h b{color:var(--text)}
input[type=range]{width:100%;accent-color:var(--accent)}
select{width:100%;background:var(--btn);color:var(--text);border:1px solid var(--btn-line);border-radius:10px;padding:8px 10px}
select:focus{outline:none;border-color:var(--accent)}

/* chips */
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 6px;border-radius:9px;font-weight:900;font-size:17px;box-shadow:inset 0 0 0 1px #ffffff26;flex:none}
.chip.big{min-width:62px;height:62px;border-radius:14px;font-size:30px}
.chip.sm{min-width:24px;height:22px;font-size:12px;border-radius:6px}
.chip.na{background:#3a2f27;color:#bfae9e}

/* map */
.map-card{position:relative;padding:0;overflow:hidden;flex:1;min-height:420px}
#map{position:absolute;inset:0;background:#14100e}
.leaflet-container{font:inherit;background:#14100e}
/* тёплая тонировка серой подложки (в оттенок интерфейса) */
.leaflet-tile-pane{filter:sepia(.45) saturate(1.2) hue-rotate(-8deg) brightness(.98)}
.leaflet-control-zoom a{background:#1d1713!important;color:var(--text)!important;border-color:#4a3a2d!important}
.leaflet-control-zoom a:hover{color:var(--accent)!important}
.leaflet-control-attribution{background:transparent!important;color:#857a6f!important;font-size:9px!important;padding:0 4px!important;opacity:.7}
.leaflet-control-attribution a{color:#857a6f!important}
.fscale{width:100px;margin-right:10px!important;margin-bottom:6px!important;pointer-events:none}
.fscale-label{height:15px;text-align:right;font-size:11px;font-weight:400;line-height:15px;color:#d9c8b2;white-space:nowrap;text-shadow:0 0 3px #000,0 0 6px #000}
.fscale-bar{height:6px;border:2px solid #b59c80;border-top:none;box-sizing:border-box}
.leaflet-tooltip{background:#1b1613;color:var(--text);border:1px solid #4a3a2d;box-shadow:0 4px 14px #000a}
.leaflet-tooltip-top:before{border-top-color:#4a3a2d}
.dark-tiles{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}
.relief-tiles{mix-blend-mode:screen}
/* легенда: тонкая шкала без рамки и фона */
.legend{position:absolute;z-index:700;top:16px;left:20px;pointer-events:none}
.legend b,.legend .seg em{color:#c8baaa;text-shadow:0 0 3px #0a0807,0 0 6px #0a0807,0 0 8px #0a0807}
.legend b{display:block;font-size:11px;font-weight:400;margin-bottom:6px}
.legend .row{display:flex;gap:2px}
.legend .seg{width:26px;text-align:center}
.legend .seg span{display:block;height:5px;border-radius:2px;opacity:.92}
.legend .seg em{display:block;margin-top:4px;font-style:normal;font-size:10px;line-height:1.2}
.mini-wrap{position:absolute;z-index:700;left:12px;bottom:12px;width:150px;height:120px;border:1px solid #4a3a2d;border-radius:10px;overflow:hidden;box-shadow:0 4px 16px #000a;opacity:.3;transition:opacity .25s ease}
.mini-wrap:hover{opacity:1}
#mini{width:100%;height:100%;background:#14100e;cursor:pointer}
.map-msg{position:absolute;z-index:800;left:50%;top:14px;transform:translateX(-50%);background:#3a1620f2;border:1px solid #8c2b3c;color:#ffd3d9;padding:8px 14px;border-radius:9px;font-size:12px;max-width:80%}

.pbadge{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-weight:900;font-size:12px;border:2px solid #1b1613cc;box-shadow:0 0 0 1px #ffffff55,0 2px 8px #0009}
.mlabel{color:#c2ab90;font-size:11px;letter-spacing:.5px;white-space:nowrap;text-shadow:0 0 4px #000,0 0 8px #000;text-align:center;transform:translate(-50%,-50%)}
.epi{position:relative;width:150px;height:150px;pointer-events:none}
.epi i{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px solid var(--c);background:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%);animation:pulse 2.6s ease-out infinite;opacity:0}
.epi i:nth-child(2){animation-delay:.87s}.epi i:nth-child(3){animation-delay:1.74s}
.epi u{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:1px solid var(--c);opacity:.6;box-shadow:0 0 18px var(--c)}
.epi s{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--c);border:3px solid #fff;box-sizing:border-box;box-shadow:0 0 14px 3px var(--c),0 0 34px 8px color-mix(in srgb,var(--c) 50%,transparent)}
.orb{border-radius:50%;background:var(--c);opacity:.92;box-shadow:0 0 8px 1px var(--c),0 0 22px 5px color-mix(in srgb,var(--c) 45%,transparent);transition:transform .15s}
.orb-wrap:hover .orb{transform:scale(1.25)}
@keyframes pulse{0%{transform:scale(.15);opacity:.9}100%{transform:scale(1);opacity:0}}

/* bottom stats */
.stats{display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:0;padding:10px 6px;flex:none}
.stats .s{padding:2px 14px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.stats .s:first-child{border-left:0}
.stats .s small{font-size:11px;color:var(--muted)}
.stats .s b{font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums}

/* latest + detail */
.lat{display:flex;gap:12px;align-items:center}
.lat .m{font-size:26px;font-weight:800;letter-spacing:-.5px}
.lat .p{font-weight:600}
.det-head{display:flex;gap:12px;align-items:center}
.det-head h2{margin:0;font-size:18px}
.tags{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.tag{font-size:11px;padding:3px 8px;border-radius:7px;background:#2a211b;color:#d3c4b5}
.tag.ok{background:#213325;color:var(--green)}.tag.warn{background:#4a3513;color:#ffd18a}.tag.bad{background:#4d1f1c;color:#ffa294}
.det-mag{display:flex;justify-content:space-between;align-items:flex-end;margin:12px 0 8px}
.det-mag .m{font-size:38px;font-weight:850;letter-spacing:-1px;line-height:1}
.det-mag .d{text-align:right;font-size:12px;color:var(--muted)}.det-mag .d b{display:block;font-size:18px;color:var(--text)}
.kv{display:grid;grid-template-columns:20px 1fr;gap:6px 6px;font-size:13px;margin:6px 0}
.kv .k{color:var(--accent)}
.kv small{color:var(--muted);display:block;font-size:11px}
.hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.maxrow{display:flex;align-items:center;gap:10px}
.maxrow .t{font-size:12px;color:var(--muted)}
.toppref{margin-top:8px;display:grid;gap:4px}
.toppref div{display:flex;align-items:center;gap:8px;font-size:12px}
.toppref span.n{margin-left:auto;color:var(--muted)}

/* list */
.list-card{padding:12px 0 0;flex:1 1 auto;min-height:260px;display:flex;flex-direction:column}
.list-card .card-title{padding:0 14px}
.ev-list{overflow-y:auto;flex:1}
.ev{display:grid;grid-template-columns:40px 50px 1fr auto;gap:9px;align-items:center;padding:9px 14px;border-top:1px solid #2a211a;cursor:pointer}
.ev:hover,.ev.active{background:#261e18}
.ev.active{box-shadow:inset 3px 0 0 var(--accent)}
.ev .m{font-weight:800;font-size:14px}
.ev .p b{display:block;font-size:12.5px;font-weight:650;line-height:1.25}
.ev .p small{color:var(--muted);font-size:11px}
.ev .t{text-align:right;font-size:12px;font-variant-numeric:tabular-nums}.ev .t small{display:block;color:var(--muted);font-size:10.5px}
.hint{padding:9px 14px;font-size:11px;color:#bfae9e;border-top:1px solid #2a211a;background:#1f1915}

/* tsunami */
.ts{display:flex;gap:10px;align-items:flex-start}
.ts .i{font-size:20px;line-height:1.1}
.ts.ok .i{color:var(--green)}.ts.warn .i{color:var(--amber)}.ts.bad .i{color:var(--red)}
.ts b{display:block}
.ts p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.unk{position:fixed;left:12px;bottom:12px;z-index:2000;background:#1b1613;border:1px solid var(--line2);border-radius:12px;padding:10px;width:min(420px,92vw);box-shadow:0 8px 30px #000a;font-size:12px}
.unk textarea{display:block;width:100%;margin:6px 0;background:#14100e;color:var(--text);border:1px solid var(--line);border-radius:8px;font:11px/1.4 ui-monospace,monospace;padding:6px}
.unk .btn{padding:4px 10px}
.foot{font-size:10.5px;color:#7d7064;padding:2px 4px 10px}

/* полосы прокрутки: дорожка #2E2E2E со скруглением; бегунок #757575 — в покое 50% прозрачности, при прокрутке непрозрачный */
:is(.left,.right,.ev-list,html)::-webkit-scrollbar{width:14px;height:14px}
:is(.left,.right,.ev-list,html)::-webkit-scrollbar-track{background:#2E2E2E;border-radius:10px;margin:2px 0}
:is(.left,.right,.ev-list,html)::-webkit-scrollbar-thumb{background-color:rgba(117,117,117,.5);border:3px solid transparent;background-clip:padding-box;border-radius:10px;transition:background-color .25s ease}
:is(.left,.right,.ev-list,html).scrolling::-webkit-scrollbar-thumb,
:is(.left,.right,.ev-list,html)::-webkit-scrollbar-thumb:hover,
:is(.left,.right,.ev-list,html)::-webkit-scrollbar-thumb:active{background-color:#757575}
:is(.left,.right,.ev-list,html)::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){
  :is(.left,.right,.ev-list,html){scrollbar-width:thin;scrollbar-color:#757575 #2E2E2E}
}

/* responsive */
@media(max-width:1180px){
  .layout{grid-template-columns:270px minmax(0,1fr);height:auto}
  .mid{min-height:640px}.right{grid-column:1/-1;overflow:visible}.left{overflow:visible}
  .map-card{min-height:560px}
}
@media(max-width:760px){
  .top{height:auto;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 12px}
  .brand{gap:8px}.brand h1{font-size:17px;white-space:normal}
  .brand p{display:none}
  .logo{width:34px;height:22px}
  .top-right{width:100%;flex-wrap:wrap;gap:6px 10px;justify-content:flex-start}
  .clock{text-align:left;margin-right:auto}.clock strong{font-size:13px}
  .status{order:5;width:100%;font-size:11px}
  .btn{padding:7px 10px}
  .layout{display:flex;flex-direction:column;padding:8px}
  /* на телефоне после карты сразу идёт главное: карточка события и список, а слои и фильтры — ниже */
  .mid{order:1}.right{order:2}.left{order:3}
  /* vh на телефонах меняется при прокрутке (панель браузера прячется/появляется) и карта «дышит»; svh — стабильная высота */
  .map-card{min-height:58vh;flex:none;height:58vh;min-height:58svh;height:58svh;min-height:var(--mh,58svh);height:var(--mh,58svh)}
  .chk{padding:10px 0}.chk input{width:20px;height:20px}
  .about{padding:0 12px}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:8px}.stats .s{border-left:0}
  .mini-wrap{display:none}
}

/* подсказка «двумя пальцами» на сенсорных экранах */
.map-hint{position:absolute;z-index:900;left:50%;bottom:44px;transform:translateX(-50%);background:#000b;color:#f5eee6;padding:8px 14px;border-radius:10px;font-size:13px;pointer-events:none;opacity:0;transition:opacity .25s;max-width:86%;text-align:center}
.map-hint.on{opacity:1}