:root {
  --bg: #0f1418; --kort: #182027; --kant: #2a343d; --text: #e6ebef; --svag: #8b98a3;
  --gron: #3cb43c; --rod: #dc2828; --bla: #1e78dc; --gra: #969696; --gul: #f0b400; --orange: #ffa000;
  --primar: #2f8f5b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.dold { display: none !important; }
.svag { color: var(--svag); font-weight: normal; font-size: 12px; }
.fel { color: #ff6b6b; }
h1 { margin: 0 0 4px; font-size: 22px; }
h2 { font-size: 14px; margin: 12px 0 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
h2:first-child { margin-top: 0; }
button, select, input { font: inherit; color: var(--text); background: #222c35; border: 1px solid var(--kant); border-radius: 6px; padding: 6px 10px; }
button { cursor: pointer; }
button:hover { border-color: var(--svag); }
button.primar { background: var(--primar); border-color: var(--primar); }
button.lank, a.lank { background: none; border: none; color: var(--svag); text-decoration: none; font-size: 13px; }
a.lank:hover { color: var(--text); }

#inlogg { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
#inloggform { background: var(--kort); border: 1px solid var(--kant); border-radius: 10px; padding: 24px; width: 100%; max-width: 320px; display: grid; gap: 10px; }

header { display: flex; align-items: center; gap: 16px; padding: 8px 16px; border-bottom: 1px solid var(--kant); flex-wrap: wrap; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav button { background: none; border-color: transparent; }
nav button.vald { background: #222c35; border-color: var(--kant); }
.status { margin-left: auto; font-size: 12px; color: var(--svag); }
.status .prick { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--rod); }
.status .prick.pa { background: var(--gron); }

main { padding: 16px; }
.rad { display: flex; gap: 16px; flex-wrap: wrap; }
.kort { background: var(--kort); border: 1px solid var(--kant); border-radius: 10px; padding: 14px; min-width: 0; }
.bred { flex: 3 1 560px; }
.smal { flex: 1 1 300px; }

.bildram { position: relative; width: 100%; background: #000; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; }
.bildram img, .bildram canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bildram.klickbar canvas { cursor: crosshair; }

.plan { width: 100%; aspect-ratio: 1; background: #11181e; border: 1px solid var(--kant); border-radius: 6px; }

.fraga { display: flex; gap: 8px; margin-top: 10px; }
.fraga input { flex: 1; min-width: 0; }
.svar { margin-top: 8px; padding: 10px; background: #11181e; border-radius: 6px; white-space: pre-wrap; }

.handelselista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.handelselista li { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; align-items: start; padding: 8px; background: #11181e; border-radius: 6px; }
.handelselista img { width: 140px; border-radius: 4px; cursor: zoom-in; }
.handelselista.kompakt li { grid-template-columns: 1fr; gap: 2px; padding: 6px 8px; }
.handelselista .claude { color: #b9c7d2; font-size: 13px; margin-top: 4px; }
.handelselista .knappar { display: flex; gap: 4px; }
.knappar button.ratt.pa { background: var(--gron); border-color: var(--gron); }
.knappar button.falsk.pa { background: var(--rod); border-color: var(--rod); }
.regel { font-weight: 600; }
@media (max-width: 640px) {
  .handelselista li { grid-template-columns: 1fr; }
  .handelselista img { width: 100%; }
}

.verktyg { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.tabell { width: 100%; border-collapse: collapse; }
.tabell td, .tabell th { padding: 4px; text-align: left; border-bottom: 1px solid var(--kant); }
.tabell input { width: 70px; }
label { display: grid; gap: 4px; margin: 6px 0; }
.verktyg label { display: flex; align-items: center; gap: 4px; margin: 0; }
.zonlista { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.zonlista li { display: flex; gap: 8px; align-items: center; padding: 4px 8px; background: #11181e; border-radius: 6px; }
.zonlista .farg { width: 10px; height: 10px; border-radius: 2px; }
.zonlista button { margin-left: auto; padding: 2px 8px; }

.formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 24px; }
.formular label { grid-template-columns: 1fr 110px; align-items: center; }
.formular input[type=checkbox] { justify-self: start; width: 18px; height: 18px; }
.formular small { grid-column: 1 / -1; color: var(--svag); }

.tal { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tal div { background: #11181e; border-radius: 6px; padding: 10px; }
.tal b { display: block; font-size: 20px; }

#storbild { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: grid; place-items: center; padding: 16px; cursor: zoom-out; z-index: 10; }
#storbild img { max-width: 100%; max-height: 100%; }

#bryggruta { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; z-index: 11; }
#bryggform { background: var(--kort); border: 1px solid var(--kant); border-radius: 10px; padding: 20px; width: 100%; max-width: 440px; }
#bryggform .steg { padding-left: 18px; margin: 12px 0 0; display: grid; gap: 4px; }
label.visa { display: flex; align-items: center; gap: 6px; }