:root{
  color-scheme:dark;
  --panel:rgba(10,22,32,.91);
  --panel-strong:rgba(13,29,41,.97);
  --control:rgba(255,255,255,.09);
  --control-hover:rgba(255,255,255,.16);
  --ink:#f5f8fa;
  --muted:#bfccd4;
  --line:rgba(255,255,255,.24);
  --accent:#55bdf0;
  --accent-strong:#178fcb;
  --shadow:rgba(0,0,0,.42)
}
*{box-sizing:border-box}
html,body,#terrainMap{width:100%;height:100%;margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#07131c}
#terrainMap{position:absolute;inset:0}
.panel{
  position:absolute;z-index:10;
  top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));
  width:min(390px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;
  padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 16px 42px var(--shadow);backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%)
}
.head{display:flex;align-items:flex-start;gap:10px}
.back{flex:0 0 auto;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--control);color:var(--ink);cursor:pointer;font-size:20px}
.back:hover,.action:hover,.view-pad button:hover,.official-row a:hover{background:var(--control-hover)}
.title{min-width:0}.title small{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--accent)}
h1{font-size:18px;line-height:1.35;margin:2px 0 2px;word-break:break-word}.address{font-size:11px;color:var(--muted);line-height:1.45;margin:0 0 10px}
label{display:block;margin-top:9px;font-size:12px;font-weight:750}.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.row label{min-width:0}
select,button,input{font:inherit}
select,.action{width:100%;min-height:40px;margin-top:4px;border:1px solid var(--line);border-radius:10px;background:var(--control);color:var(--ink);padding:8px 10px}
select{color-scheme:dark}.action{cursor:pointer;font-weight:750}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
input[type="range"]{width:100%;accent-color:var(--accent)}
.view-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.view-pad button{min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--control);color:var(--ink);font-weight:800;cursor:pointer}
.view-pad .center{background:rgba(85,189,240,.16);color:#8fd8fa;border-color:rgba(85,189,240,.45)}
.official-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.official-row a,.official-row span{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:10px;border:1px solid var(--line);text-decoration:none;font-weight:800}
.official-row a{background:var(--control);color:var(--ink)}.official-row .official{background:var(--accent-strong);color:#fff;border-color:#55bdf0}.official-row .disabled{background:rgba(255,255,255,.06);color:#8798a4;cursor:not-allowed}
.gesture-help{margin-top:8px;padding:8px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:9px;font-size:10px;line-height:1.5;color:var(--muted)}
.primary{background:var(--accent-strong);color:#fff;border-color:#55bdf0}
.status{margin-top:10px;padding:9px 10px;border-radius:10px;background:rgba(85,189,240,.13);border:1px solid rgba(85,189,240,.22);font-size:11px;line-height:1.55}
.quality{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.quality span{padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);font-size:10px;font-weight:700}
.note,.credit{font-size:10px;line-height:1.5;color:var(--muted);margin:8px 0 0}.credit a{color:#9ddfff}
.marker{width:28px;height:28px;border:3px solid #fff;border-radius:50% 50% 50% 0;background:#1479c9;transform:rotate(-45deg);box-shadow:0 4px 12px rgba(0,0,0,.5)}.marker:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;left:7px;top:7px}
.maplibregl-popup-content{border-radius:12px;padding:12px 14px;font-family:inherit;background:var(--panel-strong);color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 28px var(--shadow)}
.maplibregl-popup-content strong{display:block;margin-bottom:4px}.maplibregl-popup-tip{border-top-color:var(--panel-strong)!important;border-bottom-color:var(--panel-strong)!important}.maplibregl-popup-close-button{color:var(--ink)}
.maplibregl-ctrl-group{background:rgba(10,22,32,.9)!important;border:1px solid var(--line);box-shadow:0 5px 18px rgba(0,0,0,.28)!important}.maplibregl-ctrl-group button{filter:invert(1) brightness(1.9)}
.maplibregl-ctrl-attrib{font-size:10px;background:rgba(10,22,32,.78)!important;color:var(--muted)}.maplibregl-ctrl-attrib a{color:#9ddfff}
@media(max-width:640px){
  .panel{top:auto;bottom:max(8px,env(safe-area-inset-bottom));max-height:44vh;width:calc(100vw - 16px);left:8px;padding:11px 12px;border-radius:15px}
  .row{grid-template-columns:1fr 1fr}.maplibregl-ctrl-top-right{top:max(8px,env(safe-area-inset-top))}
  h1{font-size:16px}.gesture-help,.note,.credit{font-size:9.5px}.view-pad button{min-height:40px}.quality{display:none}
}
@media(prefers-reduced-transparency:reduce){.panel{background:var(--panel-strong);backdrop-filter:none;-webkit-backdrop-filter:none}}

.feedback-link{display:flex;align-items:center;justify-content:center;min-height:42px;margin-top:8px;border:1px solid rgba(85,189,240,.45);border-radius:10px;background:rgba(85,189,240,.14);color:#a8e4ff;text-decoration:none;font-weight:800}.feedback-link:hover{background:rgba(85,189,240,.23)}