:root {
  color-scheme: dark;
  --bg: #0f1318; --kort: #182029; --text: #e8ecf0; --dampad: #9aa6b2; --linje: #2a3540;
  --stark: #3ddc84; --medel: #f2c94c; --svag: #ff6b6b; --accent: #4da3ff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--kort); border-bottom: 1px solid var(--linje);
  position: sticky; top: 0; z-index: 1000; }
header strong { flex: 1; }
.kort { background: var(--kort); border: 1px solid var(--linje); border-radius: 10px; margin: 12px 16px; padding: 12px 14px; }
h2 { font-size: 1rem; margin: 0 0 8px; }
.liten { font-size: .82rem; color: var(--dampad); }
.fel { color: var(--svag); }
label { display: block; margin: 8px 0; }
input, button { font: inherit; }
input[type=email], input[type=password] { width: 100%; padding: 8px; border: 1px solid var(--linje); border-radius: 6px;
  background: var(--bg); color: var(--text); }
button { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #0b1016; font-weight: 600; cursor: pointer; }
button.av { background: transparent; color: var(--accent); }
.knappar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
#karta { height: 62vh; min-height: 320px; margin: 12px 16px; border-radius: 10px; border: 1px solid var(--linje); }
.lage .prick { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dampad); margin-right: 8px; }
.varden { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 0; }
.varden div { min-width: 0; }
.varden dt { font-size: .75rem; color: var(--dampad); }
.varden dd { margin: 2px 0 0; font-size: 1.05rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 520px) { .varden { grid-template-columns: repeat(2, 1fr); } }
.morkkarta { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--kort); color: var(--text); border-bottom-color: var(--linje); }
.leaflet-control-attribution { background: rgba(15, 19, 24, .8) !important; color: var(--dampad); }
.leaflet-control-attribution a { color: var(--accent); }
.leaflet-tooltip { background: var(--kort); color: var(--text); border-color: var(--linje); }
.fartyg { background: none; border: none; }
.fartyg svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }