:root{
  --bg:#12161d; --panel:#1c222c; --panel2:#232b37;
  --txt:#eef2f7; --muted:#93a0b4; --acc:#3b82f6;
  --danger:#e5484d; --warn:#f5a524; --ok:#30a46c;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font:16px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent}
#map{position:absolute;inset:0}
.hidden{display:none !important}

/* ---- маркер «я» ---- */
.me-icon{will-change:transform}
.me-icon svg{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}

/* ---- спідометр ---- */
.speedo{position:absolute;right:12px;bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:600;background:rgba(28,34,44,.92);backdrop-filter:blur(8px);
  border-radius:22px;padding:14px 6px 12px;width:118px;text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.45)}
.speed-val{font-size:44px;font-weight:700;line-height:1;letter-spacing:-1px}
.speed-unit{font-size:13px;color:var(--muted);margin-top:4px}
.speedo.over .speed-val{color:var(--danger)}
.speedo.near .speed-val{color:var(--warn)}
.speed-limit{margin:9px auto 0;width:46px;height:46px;border-radius:50%;
  background:#fff;color:#111;border:4px solid var(--danger);
  font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center}

/* ---- компас ---- */
.compass{cursor:pointer;position:absolute;left:12px;bottom:calc(96px + env(safe-area-inset-bottom));
  z-index:600;width:58px;height:58px;border-radius:50%;
  background:rgba(28,34,44,.92);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.45);font-weight:700;font-size:15px}
.compass-dial{position:absolute;inset:0;transition:transform .25s linear}
.compass-dial i{position:absolute;top:4px;left:50%;margin-left:-4px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:8px solid var(--danger)}

/* ---- кнопки ---- */
.buttons{position:absolute;left:12px;bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:600;display:flex;gap:10px}
.btn{width:58px;height:58px;border:0;border-radius:18px;background:rgba(28,34,44,.92);
  backdrop-filter:blur(8px);color:var(--txt);box-shadow:0 6px 18px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.btn svg{width:26px;height:26px;fill:currentColor}
.btn:active{transform:scale(.94)}
.btn-follow.active{color:var(--acc)}

/* Налаштування — правий верхній кут, над плашкою попередження */
.btn-settings{position:absolute;right:12px;top:calc(78px + env(safe-area-inset-top));
  z-index:750}
.btn-home{position:absolute;right:12px;top:calc(10px + env(safe-area-inset-top));
  z-index:750;text-decoration:none}

/* ---- статус ---- */
.status{position:absolute;top:calc(10px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:600;background:rgba(28,34,44,.92);
  backdrop-filter:blur(8px);padding:7px 14px;border-radius:999px;
  font-size:13px;color:var(--muted);white-space:nowrap;max-width:calc(100vw - 160px);
  overflow:hidden;
  text-overflow:ellipsis}
.status.err{color:#ffb4b4}

/* ---- попередження ---- */
.alert{position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px;right:82px;
  z-index:700;background:var(--danger);border-radius:18px;padding:12px 14px;
  display:flex;align-items:center;gap:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:pop .25s ease-out}
@keyframes pop{from{transform:translateY(-14px);opacity:0}}
/* Завчасна стадія — та сама плашка, але спокійна, на темному фоні */
.alert.early{background:var(--panel);box-shadow:0 8px 26px rgba(0,0,0,.55)}
.alert.early .alert-dist{color:var(--warn)}
.alert-dist{font-size:30px;font-weight:700;line-height:1;min-width:88px}
.alert-dist small{font-size:13px;font-weight:500;opacity:.8;margin-left:3px}
.alert-body{flex:1;min-width:0}
.alert-title{font-weight:700;font-size:16px}
.alert-sub{font-size:13px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alert-limit{background:#fff;color:#111;border-radius:12px;padding:6px 9px;
  text-align:center;font-weight:700;font-size:20px;line-height:1}
.alert-limit small{display:block;font-size:9px;font-weight:600;opacity:.65}

/* ---- прохання дозволити звук ---- */
.audio-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:760;background:var(--warn);color:#141414;border:0;border-radius:16px;
  padding:15px 20px;font-size:15px;font-weight:600;line-height:1.3;
  box-shadow:0 10px 30px rgba(0,0,0,.55);cursor:pointer;
  max-width:calc(100vw - 48px);animation:pop .25s ease-out}
.audio-prompt:active{transform:translate(-50%,-50%) scale(.96)}

/* ---- панель налаштувань ---- */
.sheet{position:absolute;inset:auto 0 0 0;z-index:800;background:var(--panel);
  border-radius:22px 22px 0 0;max-height:88%;display:flex;flex-direction:column;
  box-shadow:0 -10px 40px rgba(0,0,0,.6);animation:up .22s ease-out}
@keyframes up{from{transform:translateY(100%)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 12px 6px}
.sheet-head h2{margin:0;font-size:19px}
.btn-close{background:none;border:0;color:var(--muted);font-size:22px;cursor:pointer;padding:4px 8px}
.sheet-body{overflow-y:auto;padding:6px 12px calc(24px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch}
.row{display:block;padding:13px 0;border-bottom:1px solid #2c3543}
.row>span{display:block;margin-bottom:9px;font-size:15px}
.row b{color:var(--acc)}
.row small{display:block;color:var(--muted);font-size:12.5px;margin-top:7px}
.row.check{display:flex;align-items:center;gap:12px}
.row.check>span{margin:0}
input[type=range]{width:100%;accent-color:var(--acc)}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--acc);flex:none}
.btn-wide{width:100%;margin-top:16px;padding:14px;border:0;border-radius:14px;
  background:var(--panel2);color:var(--txt);font-size:15px;cursor:pointer}
.btn-wide:active{background:#2c3543}

/* ---- popup (MapLibre) ---- */
.maplibregl-popup-content{background:var(--panel);color:var(--txt);border-radius:14px;
  padding:12px 14px;font-size:14px;line-height:1.45;box-shadow:0 8px 26px rgba(0,0,0,.5)}
.maplibregl-popup-content b{display:block;margin-bottom:5px}
.maplibregl-popup-content .k{color:var(--muted)}
.maplibregl-popup-close-button{color:var(--muted);font-size:18px;padding:2px 7px}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--panel)}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--panel)}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--panel)}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--panel)}

.maplibregl-ctrl-attrib{background:rgba(28,34,44,.85) !important;
  color:var(--muted) !important;border-radius:8px 0 0 0}
.maplibregl-ctrl-attrib a{color:var(--acc) !important}
.maplibregl-ctrl-bottom-right{z-index:500}
.maplibregl-canvas{outline:none}

/* підпис під чекбоксом у налаштуваннях */
.row.sub{padding-top:0;border-bottom:1px solid #2c3543}
.row.sub small{margin-top:0}