/* v0.3 styles */
:root{
  --bg:#0f172a;
  --panel:#0c142b;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22c55e;
  --chip:#172036;
  --card:#0c142b;
  --border:#22304a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:linear-gradient(180deg,#0b1022, #0f172a 35% 65%, #0b1022);
}

a{color:#93c5fd}

.app-header{
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
  background:rgba(15,23,42,0.7);
  backdrop-filter: blur(8px);
}
.brand{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:1rem;
  padding:1rem;
  align-items:center;
}
#headerMap{
  height:180px; border-radius:12px; overflow:hidden;
  border:1px solid var(--border);
}
.brand-right{display:flex; flex-direction:column; gap:.5rem}
.topline{display:flex; align-items:center; justify-content:space-between; gap:.75rem}
h1{margin:0; font-size:1.25rem}
.sub{margin:0; color:var(--muted)}

.lang-switch{display:flex; gap:.35rem}
.lang-switch button{
  background:#111827; color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  padding:.35rem .6rem; font-weight:600; cursor:pointer;
}
.lang-switch button.active{outline:2px solid var(--accent)}

.header-widgets{display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; margin-top:.25rem}
.compass-card{display:flex; flex-direction:column; align-items:center; gap:.35rem}
.compass{
  position:relative; width:140px; height:140px;
  border-radius:50%; border:2px solid var(--border);
  background: radial-gradient(circle at 50% 55%, #15213b, #0c142b);
}
.rose span{position:absolute; font-size:.8rem; color:var(--muted);}
.rose .n{top:6px; left:50%; transform:translateX(-50%)}
.rose .s{bottom:6px; left:50%; transform:translateX(-50%)}
.rose .e{right:6px; top:50%; transform:translateY(-50%)}
.rose .w{left:6px; top:50%; transform:translateY(-50%)}
.rose .ne{top:18px; right:22px}
.rose .se{bottom:18px; right:22px}
.rose .nw{top:18px; left:22px}
.rose .sw{bottom:18px; left:22px}

.needle{
  position:absolute; left:50%; top:50%;
  width:2px; height:58px; background:#ef4444;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(0deg);
  border-radius:2px;
  box-shadow: 0 0 6px rgba(239,68,68,.6);
}
.compass-note{color:var(--muted); font-size:.75rem}

.modes{display:flex; gap:.5rem; flex-wrap:wrap}
.modes .mode{
  background:#111827; border:1px solid var(--border); color:var(--text);
  padding:.4rem .7rem; border-radius:999px; cursor:pointer; font-weight:600;
}
.modes .mode.active{outline:2px solid var(--accent)}

.controls{display:flex; gap:1rem; align-items:center}
.controls.hidden{display:none}
.control{display:flex; flex-direction:column; gap:.35rem; font-size:.9rem}
.control .manual{display:flex; align-items:center; gap:.5rem}
input[type="range"]{width:240px}

.content{padding:1rem; max-width:1100px; margin:0 auto}
.status{display:grid; gap:1rem; grid-template-columns:1.4fr .9fr;}
.card{
  background:var(--card);
  border:1px solid var(--border);
  padding:1rem; border-radius:12px;
}
.current-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin:.25rem 0 0}
.metric-label{color:var(--muted); font-size:.85rem}
.metric-value{font-size:1.1rem; font-weight:600}

.filters-grid{display:grid; grid-template-columns: 1fr 1fr; gap:.5rem 2rem}
.filter-row{display:flex; align-items:center; gap:.5rem; padding:.2rem 0}

.results h2{margin:.5rem 0}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem 0}
.chip{
  background:var(--chip);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.35rem .65rem;
  font-size:.85rem;
}

.list{display:grid; gap:.75rem}
.item{
  display:grid; gap:.35rem;
  grid-template-columns: 88px 1fr auto;
  align-items:center;
  background:#0b1225;
  border:1px solid var(--border);
  border-radius:12px; padding:.75rem;
}
.item .thumb{
  width:80px; height:64px; border-radius:8px;
  background:#0e1a33; border:1px solid var(--border);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; color:var(--muted);
}
.item .thumb img{width:100%; height:100%; object-fit:cover}
.item h4{margin:0 0 .25rem 0; font-size:1rem}
.item .meta{color:var(--muted); font-size:.85rem}
.badges{display:flex; flex-direction:column; align-items:flex-end; gap:.35rem}
.badge{background:#0b1022; border:1px solid var(--border); padding:.25rem .5rem; border-radius:8px; font-size:.75rem}
.item a.btn{display:inline-block; margin-top:.35rem; font-size:.85rem}

.map-wrap{margin:1rem 0; border-radius:12px; overflow:hidden; border:1px solid var(--border)}
#map{height:480px; width:100%}

.app-footer{padding:1rem; display:flex; justify-content:center; color:var(--muted); font-size:.85rem; border-top:1px solid var(--border)}

@media (max-width: 900px){
  .brand{grid-template-columns: 1fr}
  #headerMap{height:160px}
  .status{grid-template-columns:1fr}
  #map{height:420px}
}