/* Polisvakt — mörkt gränssnitt, stora träffytor.
   Allt är designat för att läsas med en snabb blick i bil: hög kontrast,
   få element, inget som kräver precision med fingret. */

:root {
  --bg: #0b0f14;
  --bg-2: #141b23;
  --bg-3: #1d2733;
  --line: #26323f;
  --fg: #eef4fa;
  --fg-dim: #93a4b6;
  --accent: #3d9dff;
  --danger: #ff4d4f;
  --warn: #ffb020;
  --ok: #2fd07a;
  --radius: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 62px;

  /* Tabbarens VERKLIGA höjd.

     --tabbar-h är bara knappraden. På telefoner med hemindikator lägger
     tabbaren till --safe-bottom under den, så baren tar mer plats än sitt
     eget namn antyder. Allt som ska sluta ovanför baren måste räkna på
     summan — gör man inte det hamnar de sista trettiotalet pixlarna under
     baren, vilket är precis varför "Radera olåsta" och "Radera allt" i
     dashcamens klippbibliotek låg halvt dolda. */
  --bar-total: calc(var(--tabbar-h) + var(--safe-bottom));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  overscroll-behavior: none;
}
body { overflow: hidden; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 650; letter-spacing: -.01em; }

/* ---------- Vyer ---------- */

.view {
  position: fixed; inset: 0 0 var(--bar-total) 0;
  display: block;
}
.view[hidden] { display: none; }
.view.scroll {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-top) + 16px) 16px 24px;
}

#map { position: absolute; inset: 0; background: #0b0f14; z-index: 0; }

/* Leafletrutan inuti #map.
   Måste ha en storlek redan vid första layouten. Utan den här regeln fick
   den höjden noll när kartan skapades, och Leaflet laddade då brickor för
   en karta som var några pixlar hög. */
.pv-map { position: absolute; inset: 0; }
.leaflet-container { background: #0b0f14; font: inherit; }
.leaflet-control-attribution { background: rgba(11,15,20,.7) !important; color: #6d7d8e !important; font-size: 10px !important; }
.leaflet-control-attribution a { color: #8fa3b6 !important; }
.leaflet-bar a { background: var(--bg-2) !important; color: var(--fg) !important; border-color: var(--line) !important; }

/* ---------- HUD ---------- */

.hud {
  position: absolute; z-index: 500;
  top: calc(var(--safe-top) + 10px); left: 10px; right: 10px;
  display: flex; align-items: flex-start; gap: 10px;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }

.speedo {
  background: rgba(11,15,20,.86); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 6px 12px 5px; text-align: center; min-width: 78px;
}
.speedo-num { display: block; font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.speedo-unit { display: block; font-size: 10px; color: var(--fg-dim); letter-spacing: .08em; text-transform: uppercase; }
.speedo.fast .speedo-num { color: var(--warn); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(11,15,20,.86); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 10px; font-size: 11.5px; color: var(--fg-dim);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #5a6a7a; flex: none; }
.chip.on { color: var(--fg); }
.chip.on .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.chip.warn .dot { background: var(--warn); }
.chip.err .dot { background: var(--danger); }
.chip-trial { color: var(--warn); border-color: rgba(255,176,32,.4); }

.icon-btn {
  width: 44px; height: 44px; flex: none;
  background: rgba(11,15,20,.86); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 14px;
  font-size: 19px; display: grid; place-items: center;
}
.icon-btn.muted { color: var(--danger); border-color: rgba(255,77,79,.45); }

/* ---------- Resmål ---------- */

.route-box {
  position: absolute; z-index: 550;
  top: calc(var(--safe-top) + 62px); left: 10px; right: 10px;
}
.route-input { display: flex; gap: 8px; align-items: center; }
.route-input input {
  flex: 1; min-width: 0;
  background: rgba(11,15,20,.9); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; font-size: 15px; color: var(--fg);
  /* 16px eller större krävs för att iOS inte ska zooma in vid fokus. Här
     räcker 15px eftersom hela sidan har user-scalable=no. */
}
.route-input input::placeholder { color: #6d7d8e; }
.route-go {
  width: 46px; height: 46px; flex: none;
  background: var(--accent); color: #04101d;
  border-radius: 14px; display: grid; place-items: center;
}
.route-go svg { width: 22px; height: 22px; }

.route-results { list-style: none; margin: 8px 0 0; padding: 0; }
.route-results:empty { display: none; }
.route-results li {
  background: rgba(13,18,25,.96); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-top: none;
  padding: 13px 14px; font-size: 14.5px;
}
.route-results li:first-child { border-top: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.route-results li:last-child { border-radius: 0 0 12px 12px; }
.route-results li:only-child { border-radius: 12px; }
.route-hint { color: var(--fg-dim); }

.route-bar {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
  background: rgba(13,18,25,.96); backdrop-filter: blur(16px);
  border: 1px solid var(--accent); border-radius: 12px;
  padding: 10px 12px; font-size: 13.5px;
}
.route-bar[hidden] { display: none; }
.route-bar span { flex: 1; min-width: 0; }
.route-stop { color: var(--danger); font-size: 13.5px; font-weight: 650; padding: 4px 2px; }

/* ---------- Lägesväljare ---------- */

.mode-pick { display: flex; gap: 10px; margin: 4px 0 10px; }
.mode-card {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 14px 10px 13px; text-align: center; color: var(--fg);
}
.mode-card .mode-ico { font-size: 26px; line-height: 1; }
.mode-card b { font-size: 14.5px; }
.mode-card small { font-size: 11.5px; color: var(--fg-dim); line-height: 1.35; }
/* Det valda läget ska synas på en armlängds avstånd i solljus, inte anas. */
.mode-card.on {
  border-color: var(--accent);
  background: rgba(61,157,255,.14);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.mode-card.on small { color: var(--fg); }

/* ---------- Grupper ---------- */

.row-inline { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.row-inline input {
  flex: 1; min-width: 0;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px; font-size: 15px;
}
.group-list:empty { display: none; }
.group-row {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.group-row span { flex: 1; min-width: 0; font-weight: 600; }
.btn-ghost.small.danger { color: var(--danger); }

/* ---------- Varningsbanner ---------- */

.alert-banner {
  position: absolute; z-index: 900;
  top: calc(var(--safe-top) + 66px); left: 10px; right: 10px;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #b3241f, #8f1b17);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
  animation: slam .28s cubic-bezier(.2,1.3,.4,1);
}
.alert-banner[hidden] { display: none; }
.alert-banner.camera { background: linear-gradient(180deg, #b8770f, #8f5c07); }
@keyframes slam { from { transform: translateY(-16px) scale(.97); opacity: 0; } }
.alert-icon { font-size: 30px; line-height: 1; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-size: 19px; font-weight: 700; line-height: 1.2; }
.alert-sub { font-size: 13px; opacity: .88; margin-top: 2px; }
.alert-close { font-size: 17px; opacity: .75; padding: 6px 4px; }

/* ---------- Följ-knapp ---------- */

.follow-btn {
  position: absolute; z-index: 500; right: 12px;
  bottom: calc(var(--bar-total) + 176px);
  background: var(--accent); color: #04101d; font-weight: 650;
  border-radius: 999px; padding: 10px 18px; font-size: 14px;
  box-shadow: 0 6px 20px rgba(61,157,255,.35);
}
.follow-btn[hidden] { display: none; }

/* ---------- Egen position ---------- */

.me-arrow {
  width: 0; height: 0; margin: 4px auto 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 22px solid var(--accent);
  filter: drop-shadow(0 0 6px rgba(61,157,255,.9));
  transform-origin: 50% 65%;
}
.hazard-icon {
  display: grid; place-items: center;
  background: rgba(11,15,20,.92); border: 2px solid var(--line);
  border-radius: 50%; font-size: 18px;
}
.hazard-icon.type-police, .hazard-icon.type-control { border-color: var(--danger); }
.hazard-icon.type-camera { border-color: var(--warn); }
.hazard-icon.type-unmarked { border-color: #b07cff; }
.hazard-icon.fresh { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,77,79,.55); }
  70% { box-shadow: 0 0 0 14px rgba(255,77,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,79,0); }
}
.pick-pin { font-size: 26px; text-align: center; }
.leaflet-popup-content-wrapper { background: var(--bg-2); color: var(--fg); border-radius: 12px; }
.leaflet-popup-tip { background: var(--bg-2); }
.pop-dist, .pop-age, .pop-src { color: var(--fg-dim); font-size: 12px; }

/* ---------- Lista ---------- */

.sheet {
  position: absolute; z-index: 600; left: 0; right: 0;
  bottom: calc(var(--bar-total) + 88px);
  background: rgba(13,18,25,.94); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 4px 14px 10px;
  max-height: 34vh; overflow-y: auto;
  transition: transform .25s ease;
}
.sheet.collapsed { transform: translateY(calc(100% - 34px)); }
.sheet-grip {
  display: block; width: 42px; height: 5px; margin: 7px auto 6px;
  background: #3a4756; border-radius: 3px;
}
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; }
.sheet-head h2 { font-size: 14px; margin: 0; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .06em; }
.sheet-count { font-size: 12px; color: var(--fg-dim); }
.sheet-empty { color: var(--fg-dim); font-size: 13px; padding: 8px 0 4px; margin: 0; }
.sheet-empty[hidden] { display: none; }

.hazard-list { list-style: none; margin: 6px 0 0; padding: 0; }
.hazard-list li {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.hz-ico { font-size: 21px; width: 26px; text-align: center; flex: none; }
.hz-main { flex: 1; min-width: 0; }
.hz-title { font-size: 15px; font-weight: 600; }
.hz-meta { font-size: 12px; color: var(--fg-dim); }
.hz-dist { font-size: 14px; font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }
.hz-btns { display: flex; gap: 4px; }
.hz-btns button {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--bg-3); font-size: 15px; display: grid; place-items: center;
}

/* ---------- Rapportknappar ---------- */

.actions {
  position: absolute; z-index: 700; left: 0; right: 0;
  bottom: 0; display: flex; gap: 7px; padding: 8px 10px 10px;
  background: linear-gradient(180deg, transparent, rgba(11,15,20,.92) 42%);
}
.act {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 9px 2px 8px; font-size: 11px; font-weight: 600; color: var(--fg);
  min-height: 60px; justify-content: center;
}
.act span { font-size: 21px; line-height: 1; }
.act:active { transform: scale(.95); background: var(--bg-3); }
.act-mic { background: var(--accent); border-color: var(--accent); color: #04101d; }
.act-mic.listening { animation: mic 1.1s ease-in-out infinite; }
@keyframes mic { 50% { box-shadow: 0 0 0 12px rgba(61,157,255,.18); } }
.act[disabled] { opacity: .4; }

/* ---------- Tabbar ---------- */

.tabbar {
  position: fixed; z-index: 800; left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex; background: rgba(9,13,18,.97); border-top: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 10.5px; color: var(--fg-dim); font-weight: 600;
}
.tab span { font-size: 20px; }
.tab.active { color: var(--accent); }

/* ---------- Dashcam ---------- */

#view-dashcam { display: flex; flex-direction: column; overflow-y: auto; padding-top: var(--safe-top); }
#view-dashcam[hidden] { display: none; }

.dc-stage { position: relative; background: #000; flex: none; }
#dcCanvas { display: block; width: 100%; height: auto; max-height: 52vh; object-fit: contain; margin: 0 auto; }
.dc-idle { padding: 26px 20px 30px; text-align: center; }
.dc-idle[hidden] { display: none; }
.dc-idle-icon { font-size: 44px; }
.dc-idle p { color: var(--fg-dim); font-size: 14px; max-width: 34em; margin: 8px auto; }
.dc-idle-note { font-size: 13px !important; }
.dc-warn { color: var(--warn) !important; }
.dc-rec {
  position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,.65); border-radius: 999px; padding: 5px 11px; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.dc-controls { padding: 12px 14px; display: grid; gap: 11px; }
.dc-controls[hidden] { display: none; }
.dc-zooms { display: grid; gap: 9px; }
.zoom { display: grid; gap: 5px; font-size: 13px; color: var(--fg-dim); }
.zoom b { color: var(--fg); font-variant-numeric: tabular-nums; }
.zoom input[type=range] { width: 100%; }
.dc-row { display: flex; gap: 8px; }
.dc-row > * { flex: 1; }

.dc-library { padding: 6px 14px 24px; }
.lib-head { display: flex; justify-content: space-between; align-items: baseline; }
.lib-head h3 { font-size: 14px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.lib-storage { font-size: 12px; color: var(--fg-dim); }
.clip-list { list-style: none; margin: 8px 0; padding: 0; }
.clip-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.clip-main { flex: 1; min-width: 0; }
.clip-when { font-size: 14px; font-weight: 600; }
.clip-meta { font-size: 12px; color: var(--fg-dim); }
.clip-lock { font-size: 17px; width: 34px; height: 34px; border-radius: 9px; background: var(--bg-3); }
.clip-lock.on { color: var(--warn); }
.lib-actions { display: flex; gap: 8px; margin-top: 10px; padding-bottom: 20px; }

/* ---------- Kort och formulär ---------- */

.page-title { font-size: 26px; margin-bottom: 14px; }
.card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
}
.card h3 { font-size: 13px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .06em; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px;
}
.card h3 + .row, .card h3 + .stack { border-top: none; }
.row input[type=range] { flex: 1; max-width: 55%; }
.row input[type=checkbox] { width: 46px; height: 27px; appearance: none; background: var(--bg-3); border-radius: 999px; position: relative; transition: background .18s; flex: none; }
.row input[type=checkbox]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #8b9bad; transition: .18s; }
.row input[type=checkbox]:checked { background: var(--accent); }
.row input[type=checkbox]:checked::after { left: 22px; background: #fff; }
.row select, .stack input, .stack select {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; min-width: 0;
}
.stack { display: grid; gap: 6px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-dim); }
.stack input { width: 100%; color: var(--fg); }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; }
.hint { font-size: 12.5px; color: var(--fg-dim); margin: 8px 0 0; }
.hint i { color: var(--fg); font-style: normal; background: var(--bg-3); padding: 1px 6px; border-radius: 6px; }
.learned-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; }
.learned-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.learned-list button { color: var(--danger); font-size: 13px; }
.billing-status { font-size: 14.5px; margin: 6px 0 12px; }

/* ---------- Knappar ---------- */

.btn-primary {
  background: var(--accent); color: #04101d; font-weight: 650;
  border-radius: 12px; padding: 12px 18px; width: 100%;
}
.btn-primary.big { padding: 15px 22px; font-size: 16.5px; }
.btn-ghost {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  border-radius: 12px; padding: 11px 16px; font-weight: 600;
}
.btn-ghost.small { padding: 8px 13px; font-size: 13.5px; width: auto; }
.btn-ghost.danger, .btn-ghost .danger { color: var(--danger); }
.btn-danger { background: var(--danger); color: #fff; font-weight: 700; border-radius: 12px; padding: 12px 18px; }
.btn-danger.big { padding: 15px; font-size: 16px; }

/* ---------- Modaler ---------- */

.modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(4,7,11,.78); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 20px;
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 22px; width: 100%; max-width: 380px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  margin: auto;
}
.modal-card.wide { max-width: 520px; }
.modal-card h2 { font-size: 20px; }
.modal-card p { font-size: 14.5px; color: var(--fg-dim); margin: 0 0 14px; }
.modal-actions { display: flex; gap: 9px; margin-top: 16px; }
.modal-actions > * { flex: 1; }
.modal-actions.column { flex-direction: column; }
#clipVideo { width: 100%; border-radius: 12px; background: #000; max-height: 55vh; }

.paywall-icon { font-size: 40px; text-align: center; }
.paywall-list { margin: 0 0 6px; padding-left: 20px; font-size: 14px; color: var(--fg-dim); }
.paywall-list li { margin: 5px 0; }

.platform-pick { display: flex; gap: 8px; margin: 4px 0 16px; }
.platform-pick button {
  flex: 1; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 6px; font-size: 13.5px; font-weight: 600;
}
.platform-pick button.active { background: var(--accent); border-color: var(--accent); color: #04101d; }
.guide-steps { margin: 0; padding: 0; list-style: none; counter-reset: g; }
.guide-steps li {
  display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.45;
}
.guide-steps li:first-child { border-top: none; }
.guide-steps .g-ico { font-size: 20px; flex: none; width: 26px; text-align: center; }
.guide-steps b { color: var(--fg); }
.guide-note {
  background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.3);
  border-radius: 12px; padding: 11px 13px; font-size: 13px !important; color: var(--warn) !important;
  margin-top: 12px !important;
}

/* ---------- Röstoverlay ---------- */

.voice-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(4,7,11,.9); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.voice-overlay[hidden] { display: none; }
.voice-ring {
  width: 110px; height: 110px; border-radius: 50%;
  border: 3px solid var(--accent);
  animation: ring 1.3s ease-out infinite;
}
@keyframes ring {
  0% { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.28); opacity: 0; }
}
.voice-text { font-size: 21px; font-weight: 650; text-align: center; padding: 0 24px; min-height: 1.4em; }
.voice-hint { font-size: 14px; color: var(--fg-dim); }

/* ---------- Toast ---------- */

.toast {
  position: fixed; z-index: 1200; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 18px);
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 17px; font-size: 14px; max-width: 88vw; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: rise .22s ease;
}
.toast[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- Liggande läge ---------- */

@media (orientation: landscape) and (max-height: 500px) {
  :root { --tabbar-h: 52px; }
  .sheet { max-height: 40vh; bottom: calc(var(--bar-total) + 74px); }
  .act { min-height: 50px; font-size: 10px; }
  .act span { font-size: 18px; }
  .speedo-num { font-size: 24px; }
  #dcCanvas { max-height: 62vh; }
}

/* Kvalitet och buffert i dashcam-kontrollerna */
.dc-selects label { display: grid; gap: 4px; font-size: 12px; color: var(--fg-dim); }
.dc-selects select {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  border-radius: 12px; padding: 10px 12px; width: 100%;
}
#dcEstimate { margin: 0; }

/* Titel och undertext ska ligga på var sin rad i listorna */
.hz-main, .clip-main { display: flex; flex-direction: column; }
.hz-title, .hz-meta, .clip-when, .clip-meta { display: block; }
.hz-title, .clip-when { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Hastighetsgräns ---------- */

.limit-sign {
  width: 56px; height: 56px; flex: none;
  border-radius: 50%;
  background: #fff;
  border: 6px solid #d8232a;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.limit-sign[hidden] { display: none; }
.limit-sign span {
  color: #111; font-weight: 800; font-size: 22px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.limit-sign.alarm { animation: signAlarm .6s ease-in-out 8; }
@keyframes signAlarm {
  50% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(216,35,42,.35); }
}
.speedo.over .speedo-num { color: var(--warn); }
.speedo.way-over .speedo-num { color: var(--danger); }
.speedo.way-over { border-color: rgba(255,77,79,.6); }

/* Blekare markörer när rapporten åldras */
.hazard-icon.stale { border-style: dashed; }

/* ---------- Hotspots ---------- */

.hotspot-list { list-style: none; margin: 10px 0 12px; padding: 0; }
.hotspot-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; cursor: pointer;
}
.hotspot-list li.muted { color: var(--fg-dim); font-size: 13px; cursor: default; }
.hs-ico { font-size: 18px; width: 24px; text-align: center; flex: none; }
.hs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hs-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-meta { font-size: 12px; color: var(--fg-dim); }
.hs-count { font-size: 13px; color: var(--accent); font-weight: 650; }

/* ---------- Rapportpoäng ---------- */

.score-big { text-align: center; padding: 10px 0 14px; }
.score-big span { display: block; font-size: 44px; font-weight: 750; line-height: 1; color: var(--accent); }
.score-big small { color: var(--fg-dim); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.rep-breakdown { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13.5px; }
.rep-breakdown li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--line); color: var(--fg-dim);
}
.rep-breakdown li.muted { justify-content: flex-start; }
.sub-head { font-size: 12px !important; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 4px; }
.leaderboard { margin: 0; padding-left: 22px; font-size: 14px; }
.leaderboard li { padding: 6px 0; display: flex; justify-content: space-between; gap: 10px; }
.leaderboard li.me { color: var(--accent); font-weight: 650; }
.leaderboard li.muted { color: var(--fg-dim); list-style: none; margin-left: -22px; }

/* ---------- Ansvarsfriskrivning ---------- */

.disclaimer { max-width: 540px; }
.disc-item { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.disc-item:first-of-type { border-top: none; }
.disc-item div { font-size: 14px; line-height: 1.5; color: var(--fg-dim); }
.disc-item b { color: var(--fg); display: block; margin-bottom: 2px; font-weight: 650; }
.disc-ico { font-size: 21px; flex: none; width: 28px; text-align: center; }
.disc-accept {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 18px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 14px; padding: 13px;
  font-size: 14px; line-height: 1.45; cursor: pointer;
}
.disc-accept input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); margin: 0; }
#discAccept[disabled] { opacity: .4; }

/* ---------- QR-delning ---------- */

.qr-wrap {
  display: flex; justify-content: center;
  background: #fff; border-radius: 14px; padding: 12px; margin: 12px 0 10px;
}
.qr-wrap svg { display: block; width: 100%; max-width: 230px; height: auto; }
.qr-url {
  text-align: center; font-size: 12.5px; color: var(--fg-dim);
  margin: 0 0 12px; word-break: break-all;
}

/* ---------- Inloggning ---------- */

.auth-screen {
  position: fixed; inset: 0; z-index: 2000;
  background: radial-gradient(120% 90% at 50% 0%, #16202b 0%, #0b0f14 62%);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-top) + 28px) 20px calc(var(--safe-bottom) + 32px);
  display: flex; align-items: flex-start; justify-content: center;
}
.auth-screen[hidden] { display: none; }

.auth-card { width: 100%; max-width: 380px; margin: auto; }

.auth-brand { text-align: center; margin-bottom: 20px; }
.auth-logo {
  width: 76px; height: 76px; display: block; margin: 0 auto 12px;
  filter: drop-shadow(0 8px 22px rgba(61,157,255,.28));
}
.auth-brand h1 { font-size: 30px; margin: 0; letter-spacing: -.03em; }
.auth-region {
  margin: 2px 0 0; font-size: 12px; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: .16em;
}
.auth-lead {
  text-align: center; font-size: 14px; color: var(--fg-dim);
  line-height: 1.5; margin: 0 0 22px;
}

.auth-tabs {
  display: flex; gap: 4px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 14px; padding: 4px; margin-bottom: 18px;
}
.auth-tabs button {
  flex: 1; padding: 10px 8px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--fg-dim);
}
.auth-tabs button.active { background: var(--bg-3); color: var(--fg); }

.auth-field { display: block; margin-bottom: 14px; }
.auth-field > span {
  display: block; font-size: 12.5px; color: var(--fg-dim);
  margin-bottom: 6px; font-weight: 600;
}
.auth-field small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.auth-field input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 14px; font-size: 16px; color: var(--fg);
}
.auth-field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(61,157,255,.16);
}
.auth-field input::placeholder { color: #5d6e80; }

.pw-wrap { position: relative; display: block; }
.pw-peek {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--accent);
}

.auth-msg {
  font-size: 13.5px; line-height: 1.45; border-radius: 12px;
  padding: 11px 13px; margin: 0 0 14px;
  background: rgba(255,77,79,.1); border: 1px solid rgba(255,77,79,.32); color: #ff8f90;
}
.auth-msg[hidden] { display: none; }
.auth-msg.ok {
  background: rgba(47,208,122,.1); border-color: rgba(47,208,122,.32); color: #6ee2a6;
}

.auth-link {
  display: block; width: 100%; text-align: center; padding: 14px 0 4px;
  font-size: 13.5px; color: var(--fg-dim);
}
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--fg-dim); font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.auth-fine {
  font-size: 12px; color: #6d7d8e; text-align: center;
  line-height: 1.5; margin: 12px 0 0;
}
#authSubmit[disabled] { opacity: .55; }

/* ---------- Ingen zoom, inga oavsiktliga gester ---------- */
/* En app man kan nypa-zooma i känns som en hemsida, och i bil blir det bara
   en trasig layout man inte får tillbaka. touch-action tar bort både
   nyp-zoom och dubbeltrycks-zoom. */
html, body {
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
}
button, .act, .tab, .chip, .icon-btn { touch-action: manipulation; user-select: none; }
/* Kartan måste få nypa för att zooma — men bara kartan. */
#map, .leaflet-container { touch-action: none; }

/* Fältet får inte zooma in vid fokus på iPhone: 16px är gränsen */
input, select, textarea { font-size: 16px; }

/* ---------- Testknappar ---------- */
.test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
.test-grid button { width: 100%; text-align: left; }

/* ---------- Inloggning: trygghetstext ---------- */
.auth-hint {
  font-size: 12.5px; color: #7f8fa1; line-height: 1.5;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 13px; margin: 0 0 14px;
}

/* ---------- Introduktionsguide ---------- */
.tour { position: fixed; inset: 0; z-index: 3000; }
.tour[hidden] { display: none; }
body.tour-open { overflow: hidden; }
.tour-mask { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-ring {
  position: absolute; border: 2px solid var(--accent); border-radius: 16px;
  box-shadow: 0 0 0 4px rgba(61,157,255,.22), 0 0 26px rgba(61,157,255,.4);
  pointer-events: none; animation: tourPulse 1.9s ease-out infinite;
}
@keyframes tourPulse {
  50% { box-shadow: 0 0 0 9px rgba(61,157,255,.12), 0 0 30px rgba(61,157,255,.5); }
}
.tour-arrow {
  position: absolute; font-size: 22px; color: var(--accent);
  pointer-events: none; animation: tourBob 1.4s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(61,157,255,.7);
}
@keyframes tourBob { 50% { transform: translateY(-6px); } }

.tour-card {
  position: absolute; left: 14px; right: 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 20px 20px 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.7);
  max-width: 440px; margin-inline: auto;
}
.tour-card.centered { top: 50%; transform: translateY(-50%); }
.tour-step {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); font-weight: 700; margin-bottom: 6px;
}
.tour-card h2 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.02em; }
.tour-card p { font-size: 15px; line-height: 1.55; color: var(--fg-dim); margin: 0; }
.tour-actions { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.tour-actions .btn-primary { flex: 1; }
.tour-skip {
  font-size: 13.5px; color: var(--fg-dim); padding: 10px 4px; margin-right: auto;
}
.tour-dots { display: flex; gap: 5px; justify-content: center; margin-top: 14px; }
.tour-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: #33404f; transition: .2s;
}
.tour-dots span.on { background: var(--accent); width: 18px; border-radius: 3px; }

.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.modal-actions button { flex: 1; min-width: 96px; padding: 12px 10px; border-radius: 12px; }

/* Nattläge: dämpa gränssnittet ytterligare när det är mörkt ute */
body.is-night .speedo,
body.is-night .chip,
body.is-night .icon-btn { background: rgba(8,11,15,.9); }
/* Talknappen ska INTE dämpas på natten.
   Regeln nedan gällde tidigare alla .act, och eftersom "body.is-night .act"
   är mer specifik än ".act-mic" vann den — talknappen blev nästan svart, med
   nästan svart text ovanpå. Den var i praktiken osynlig i mörker, alltså
   precis när man behöver den mest. */
body.is-night .act:not(.act-mic) { background: #10161d; }
body.is-night .sheet { background: rgba(9,13,18,.96); }

/* Nytt lösenord efter återställningslänk */
.reset-form h2 { font-size: 20px; margin: 0 0 6px; }
.reset-form[hidden] { display: none; }
#authSubmit[disabled] { opacity: .6; }

/* ---------- Uppdateringskort ---------- */
.card-update { border-color: rgba(61,157,255,.35); background: rgba(61,157,255,.06); }
.update-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.update-row b { display: block; font-size: 14.5px; }
.update-row .hint { margin: 2px 0 0; }
.update-row .btn-primary { width: auto; flex: none; padding: 11px 20px; }

/* ---------- Prisnivåer ---------- */
.plans { display: grid; gap: 10px; margin: 10px 0 12px; }
.plan {
  position: relative; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: .15s;
}
.plan.popular { border-color: rgba(61,157,255,.5); }
.plan.chosen { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,157,255,.15); }
.plan-badge {
  position: absolute; top: -9px; right: 14px; background: var(--accent); color: #04101d;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .05em;
}
.plan-head { display: flex; justify-content: space-between; align-items: baseline; }
.plan-name { font-size: 17px; font-weight: 650; }
.plan-price { font-size: 22px; font-weight: 750; color: var(--accent); }
.plan-price small { font-size: 12px; font-weight: 500; color: var(--fg-dim); }
.plan-tagline { font-size: 13px; color: var(--fg-dim); margin: 2px 0 8px; }
.plan ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--fg-dim); }
.plan li { margin: 3px 0; }
.prepay {
  background: rgba(47,208,122,.08); border: 1px solid rgba(47,208,122,.3);
  border-radius: 14px; padding: 12px 15px;
}
.prepay b { display: block; font-size: 14px; color: #6ee2a6; margin-bottom: 3px; }
.prepay span { font-size: 13px; color: var(--fg-dim); }

/* ---------- Tillbehör ---------- */
.shop { display: grid; gap: 10px; margin-top: 12px; }
.product {
  display: flex; gap: 13px; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px;
}
.prod-ico { font-size: 28px; flex: none; }
.prod-body { flex: 1; min-width: 0; }
.prod-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.prod-head b { font-size: 15.5px; }
.prod-price { font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.prod-tag { font-size: 13px; color: var(--fg); margin: 2px 0 5px; }
.prod-text { font-size: 12.5px; color: var(--fg-dim); line-height: 1.5; }
.prod-status {
  display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--warn); background: rgba(255,176,32,.12); border-radius: 6px;
  padding: 2px 7px; margin: 8px 0;
}
.product .btn-ghost { display: block; margin-top: 4px; }
.product .btn-ghost.chosen { border-color: var(--ok); color: #6ee2a6; }

/* Statusrad under användarnamnsfältet */
.field-note { display: block; font-size: 12px; margin-top: 5px; color: var(--fg-dim); min-height: 1em; }
.field-note.good { color: #6ee2a6; }
.field-note.bad { color: #ff8f90; }

/* ---------- Tryck och håll ---------- */
.act { position: relative; overflow: hidden; }
.act::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 100%; width: 0;
  background: rgba(61,157,255,.28); pointer-events: none; border-radius: 14px;
}
.act.holding::after { width: 100%; transition: width var(--hold-ms, 600ms) linear; }
.act.fired { background: var(--ok); border-color: var(--ok); color: #04101d; }
.act-mic::after { background: rgba(255,255,255,.3); }

/* ---------- Ångra ---------- */
.undo-bar {
  position: absolute; z-index: 750; left: 12px; right: 12px;
  bottom: calc(var(--bar-total) + 96px);
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 14px; padding: 11px 14px; font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: rise .2s ease;
}
.undo-bar[hidden] { display: none; }
.undo-bar span { flex: 1; min-width: 0; }
.undo-bar button {
  color: var(--accent); font-weight: 700; font-size: 14px; padding: 6px 10px;
  border-radius: 9px; background: rgba(61,157,255,.14);
}

/* ---------- Dashcam: varför ---------- */
.dc-why { text-align: left; max-width: 36em; margin: 18px auto 4px; }
.dc-why h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--fg-dim); margin: 0 0 8px;
}
.why-item { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
.why-item:first-of-type { border-top: none; }
.why-item span { font-size: 19px; flex: none; width: 26px; text-align: center; }
.why-item div { font-size: 13.5px; color: var(--fg-dim); line-height: 1.5; }
.why-item b { color: var(--fg); }

/* Bekräfta eller avfärda — ord istället för tummar */
.hz-btns { display: flex; gap: 5px; flex: none; }
.hz-btns button {
  width: auto; height: auto; padding: 7px 10px; border-radius: 9px;
  background: var(--bg-3); font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line);
}
.hz-btns .hz-yes { color: #6ee2a6; border-color: rgba(47,208,122,.3); }
.hz-btns .hz-no  { color: #ff9c9d; border-color: rgba(255,77,79,.28); }
@media (max-width: 380px) {
  .hz-btns button { padding: 7px 8px; font-size: 11px; }
}

/* ---------- Ny version-banner på kartan ---------- */
.update-banner {
  position: absolute; z-index: 880;
  top: calc(var(--safe-top) + 66px); left: 10px; right: 10px;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #1d6fd0, #16559f);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius); padding: 11px 12px 11px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  animation: slam .28s cubic-bezier(.2,1.3,.4,1);
}
.update-banner[hidden] { display: none; }
.ub-icon { font-size: 20px; font-weight: 700; flex: none; }
.ub-text { flex: 1; min-width: 0; }
.ub-text b { display: block; font-size: 15px; }
.ub-text span { font-size: 12.5px; opacity: .9; }
.update-banner > button {
  background: #fff; color: #14477f; font-weight: 700; font-size: 13.5px;
  padding: 9px 14px; border-radius: 10px; flex: none;
}
.update-banner .ub-close {
  background: transparent; color: #fff; opacity: .7; font-size: 15px;
  padding: 6px 2px; width: auto;
}

/* Statusfärger på uppdateringskortet i inställningar */
.update-mark {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
  background: rgba(47,208,122,.16); color: #6ee2a6;
}
.card-update.busy .update-mark { background: rgba(61,157,255,.16); color: var(--accent); }
.card-update.found .update-mark { background: rgba(61,157,255,.2); color: var(--accent); }
.card-update.warn .update-mark { background: rgba(255,176,32,.16); color: var(--warn); }
.update-text { flex: 1; min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════
   BOTTENDELEN — omgjord
   
   Buggen som klippte knapparna: .view slutar redan vid tabbarens
   överkant (inset ...var(--tabbar-h)...), men .sheet och .actions
   räknade in tabbarens höjd EN GÅNG TILL i sina bottenvärden. Allt
   sköts uppåt, och knapparna hamnade delvis under tabbaren.
   
   Nu staplas de i ordning från tabbaren och uppåt, utan att någon
   räknar om samma höjd två gånger.
   ═══════════════════════════════════════════════════════════════════ */

:root { --act-h: 76px; }

/* Rapportknappar: sitter direkt ovanför tabbaren */
.actions {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 8px; padding: 10px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(9,13,18,.94) 45%);
}
.act {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: var(--act-h);
  background: rgba(24,32,42,.92); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 16px;
  font-size: 11.5px; font-weight: 600; color: var(--fg);
  letter-spacing: -.01em;
}
.act svg { width: 26px; height: 26px; flex: none; }
.act span { line-height: 1; }
.act:active { transform: scale(.96); }

/* Talknappen: bredare, blå, störst träffyta.
   Den enda knappen man ska kunna träffa utan att titta, så den får kosta
   både bredd och kontrast. Ljusare blått än förut och en ljus kant — den
   satt tidigare för nära bakgrundens mörker för att sticka ut i solljus. */
.act-mic {
  flex: 1.6;
  background: linear-gradient(180deg, #6cb8ff, #3d9dff);
  border-color: #9ad0ff; color: #04121f;
  box-shadow: 0 6px 22px rgba(61,157,255,.55);
}
.act-mic svg { width: 30px; height: 30px; }
.act-mic span {
  font-size: 13px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.act-mic:active { background: linear-gradient(180deg, #3d9dff, #2b7fd6); }
.act-mic.listening { animation: mic 1.1s ease-in-out infinite; }

/* Mikrofonen är nekad. Gult säger "du måste göra något" — grått hade sagt
   "trasig", och det är den inte. */
.act-mic.needs-permission {
  background: linear-gradient(180deg, #ffc451, var(--warn));
  border-color: #ffd98f;
  box-shadow: 0 6px 22px rgba(255,176,32,.5);
}

/* Listan: precis ovanför knapparna */
.sheet {
  bottom: calc(var(--act-h) + 22px);
  max-height: 30vh;
  border-radius: 18px; margin: 0 10px;
  left: 0; right: 0;
  border: 1px solid var(--line);
  padding: 2px 14px 10px;
}
.sheet.collapsed { transform: translateY(calc(100% - 30px)); }

/* Tom lista tar inte halva skärmen */
.sheet.empty { max-height: none; }
.sheet.empty .sheet-empty { padding: 4px 0 2px; }

.follow-btn { bottom: calc(var(--act-h) + 34vh); }
.undo-bar   { bottom: calc(var(--act-h) + 22px); }

/* Tabbar med riktiga ikoner */
.tab svg { width: 23px; height: 23px; }
.tab { gap: 4px; font-size: 11px; letter-spacing: -.01em; }
.tab.active svg { filter: drop-shadow(0 0 8px rgba(61,157,255,.5)); }

/* Ljudknappen får också ikon */
.icon-btn svg { width: 21px; height: 21px; }

@media (max-width: 380px) {
  .act { font-size: 10.5px; }
  .act svg { width: 23px; height: 23px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  :root { --act-h: 58px; }
  .act svg { width: 21px; height: 21px; }
  .sheet { max-height: 34vh; }
}

/* ═══════════ Roadmap som en kedja ═══════════ */
.roadmap { margin-top: 14px; }

.rm-progress { margin-bottom: 16px; }
.rm-bar {
  height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden;
}
.rm-bar span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #c8971f, #f0cf6b, #c8971f);
  box-shadow: 0 0 12px rgba(240,207,107,.45);
}
.rm-count {
  font-size: 12px; color: var(--fg-dim); margin-top: 6px; text-align: right;
}

.rm-node { display: flex; gap: 13px; }
.rm-spine {
  position: relative; flex: none; width: 22px;
  display: flex; flex-direction: column; align-items: center;
}
.rm-dot {
  width: 15px; height: 15px; border-radius: 50%; flex: none; margin-top: 3px;
  border: 2px solid #3a4756; background: var(--bg);
}
/* Länken går nedåt mot nästa nod — kedjan byggs underifrån */
.rm-link { flex: 1; width: 3px; background: #26323f; margin: 3px 0; border-radius: 2px; }
.rm-link.gold {
  background: linear-gradient(180deg, #f0cf6b, #c8971f);
  box-shadow: 0 0 8px rgba(240,207,107,.35);
}

.rm-body { flex: 1; min-width: 0; padding-bottom: 18px; }
.rm-head { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.rm-head b { font-size: 14.5px; }
.rm-body p { font-size: 12.5px; color: var(--fg-dim); margin: 3px 0 0; line-height: 1.5; }
.rm-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex: none;
  background: var(--bg-3); color: var(--fg-dim);
}

/* Klart: guld */
.rm-node.done .rm-dot {
  border-color: #f0cf6b;
  background: linear-gradient(180deg, #f0cf6b, #c8971f);
  box-shadow: 0 0 10px rgba(240,207,107,.5);
}
.rm-node.done .rm-tag { background: rgba(240,207,107,.14); color: #f0cf6b; }
.rm-node.done .rm-head b { color: var(--fg); }

/* Pågår: pulserar blått */
.rm-node.now .rm-dot {
  border-color: var(--accent); background: var(--accent);
  animation: rmPulse 1.8s ease-out infinite;
}
.rm-node.now .rm-tag { background: rgba(61,157,255,.16); color: var(--accent); }
@keyframes rmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,157,255,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(61,157,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,157,255,0); }
}

.rm-node.next .rm-dot { border-color: #5a6a7a; }
.rm-node.later .rm-dot { border-color: #33404f; }
.rm-node.later .rm-head b, .rm-node.later p { opacity: .72; }

/* Byggs inte: överstruket, matt */
.rm-node.never .rm-dot { border-color: #3a2a2a; background: #1a1214; }
.rm-node.never .rm-head b { text-decoration: line-through; opacity: .6; }
.rm-node.never .rm-tag { background: rgba(255,77,79,.1); color: #b06a6b; }
.rm-node.never p { opacity: .7; }

/* ============ Bilingenkännaren ============
   Sökaren delar scen med dashcamen — samma yta, ett läge i taget. */
.pl-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}

.pl-controls { padding: 12px 14px 4px; }

.pl-status {
  margin: 0 0 10px;
  font-size: 15px; font-weight: 600;
  color: var(--ink, #eef4fa);
  min-height: 1.4em;
}

.pl-list { list-style: none; margin: 6px 0 0; padding: 0; }

.pl-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line, #1a232d);
}

/* Regnumret är det enda man faktiskt läser här, så det får vara stort och
   mekaniskt. Siffror med fast bredd gör att raderna ligger i linje. */
.pl-nr {
  font: 700 19px/1.1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.pl-meta { font-size: 12.5px; color: var(--dim, #93a4b6); }

.pl-item.egen .pl-nr { color: #2fd07a; }
.pl-item.egen { background: rgba(47, 208, 122, .07); }

#setPlEgna {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 8px;
  padding: 9px 10px;
  border: 1px solid var(--line, #26323f);
  border-radius: 8px;
  background: var(--field, #0f1620);
  color: inherit;
  font: 600 15px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .05em;
  resize: vertical;
}