:root{
  color-scheme:light dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#f4f8f7;--surface:#fff;--surface2:#eef4f2;--text:#17221f;--muted:#64736e;
  --line:#dce7e3;--green:#167a5a;--green-soft:#dff3eb;--blue:#1d6fa5;--blue-soft:#e2f1fa;
  --shadow:0 12px 30px rgba(23,34,31,.08)
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
button{font:inherit}
.app-shell{max-width:760px;margin:0 auto;min-height:100vh;padding:env(safe-area-inset-top) 16px calc(28px + env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 4px 18px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--green)}
h1{margin:2px 0 2px;font-size:30px;line-height:1.05}
.topbar p{margin:0;color:var(--muted);font-size:14px}
.live-pill{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);padding:8px 10px;border-radius:999px;font-size:12px;box-shadow:var(--shadow)}
.live-pill span{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.live-pill.offline span{background:#a05b3a;box-shadow:0 0 0 4px rgba(160,91,58,.12)}
.summary-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,var(--surface),var(--surface2));border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.summary-label{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
.summary-card strong{display:block;margin-top:4px;font-size:18px}
.summary-card small{display:block;margin-top:4px;color:var(--muted)}
.refresh-btn{border:1px solid var(--line);background:var(--surface);width:44px;height:44px;border-radius:14px;font-size:22px;cursor:pointer}
.refresh-btn:disabled{opacity:.5}
.filters{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 4px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:9px 12px;border-radius:999px;font-weight:700;font-size:13px}
.filter.active{background:var(--text);color:var(--surface);border-color:var(--text)}
.status-section{margin-top:22px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 2px 10px}
.section-head h2{font-size:18px;margin:2px 0 0}
.section-kicker{font-size:11px;font-weight:900;letter-spacing:.12em}
.transit-kicker{color:var(--blue)}
.delivered-kicker{color:var(--green)}
.count-badge{min-width:34px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.cards{display:grid;gap:10px}
.cargo-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 7px 20px rgba(23,34,31,.05)}
.cargo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cargo-title{font-size:18px;font-weight:850;line-height:1.18}
.cargo-qty{font-weight:800;white-space:nowrap}
.cargo-meta{margin-top:5px;color:var(--muted);font-size:13px}
.status-line{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.status-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.status-dot.transit{background:var(--blue)}
.status-dot.delivered{background:var(--green)}
.status-copy strong{display:block;font-size:14px}
.status-copy small{display:block;color:var(--muted);margin-top:2px}
.destination-chip{display:inline-flex;margin-top:10px;background:var(--surface2);border-radius:999px;padding:6px 9px;font-size:12px;font-weight:800}
.empty{border:1px dashed var(--line);border-radius:16px;padding:18px;color:var(--muted);text-align:center;background:transparent}
.state-card{margin-top:20px;padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.state-card strong{display:block;color:var(--text);margin-bottom:4px}
.hidden{display:none}
footer{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:11px;padding:28px 4px 10px}
@media (max-width:430px){
  .app-shell{padding-left:12px;padding-right:12px}
  h1{font-size:27px}
  .summary-card{padding:15px}
  .cargo-card{padding:14px}
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1513;--surface:#171f1c;--surface2:#1d2925;--text:#edf4f1;--muted:#99aaa4;
    --line:#2b3a35;--green:#55c69c;--green-soft:rgba(85,198,156,.12);--blue:#72b9e6;--blue-soft:rgba(114,185,230,.12);
    --shadow:0 12px 30px rgba(0,0,0,.18)
  }
}

/* KARINGOTRAFIKEN ECOSYSTEM DESIGN V1
   Gemensam identitet: maritim, tydlig och publikvänlig. */
:root{
  --kt-ocean:#2e8f9b;
  --kt-ocean-bright:#54c0c8;
  --kt-green:#55b98c;
  --kt-amber:#d8ad55;
  --kt-red:#d96f72;
  --kt-radius-card:20px;
  --kt-radius-control:14px;
}
body{background-image:radial-gradient(circle at 50% -150px,rgba(46,143,155,.10),transparent 360px)}
.topbar{position:relative;border-bottom:1px solid rgba(46,143,155,.12);padding-bottom:18px}
.topbar:after{content:"";position:absolute;left:4px;bottom:-1px;width:58px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--kt-ocean-bright),var(--kt-green))}
.topbar .eyebrow{color:var(--kt-ocean);letter-spacing:.145em}
.topbar .eyebrow:before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--kt-green);box-shadow:0 0 0 3px rgba(85,185,140,.12);vertical-align:1px}
.summary-card,.cargo-card,.state-card{border-radius:var(--kt-radius-card)}
.refresh-btn,.filter{border-radius:var(--kt-radius-control)}
.filter{border-radius:999px}
.filter.active{background:linear-gradient(180deg,#21464b,#18373b);border-color:#315b60}
.live-pill{border-radius:999px}
.cargo-card{box-shadow:0 8px 24px rgba(23,34,31,.06)}
.status-dot.transit{background:var(--kt-ocean)}
.status-dot.delivered{background:var(--kt-green)}
.transit-kicker{color:var(--kt-ocean)}
.delivered-kicker{color:var(--kt-green)}


/* KARINGOTRAFIKEN ECOSYSTEM DESIGN V1.1
   Publik vy nära karingotrafiken.se: off-white, vitt, klar blå och mörk grafit. */
:root{
  --kt-brand:#1494d4;
  --kt-brand-deep:#0b709f;
  --kt-brand-soft:#e4f3fa;
  --kt-ink:#202428;
  --kt-offwhite:#f6f6f4;
  --kt-success:#2fa66f;
  --bg:#f6f6f4;
  --surface:#ffffff;
  --surface2:#eef6fa;
  --text:#202428;
  --muted:#69777d;
  --line:#d9e3e7;
  --green:#2fa66f;
  --green-soft:#eaf7f0;
  --blue:#1494d4;
  --blue-soft:#e4f3fa;
  --shadow:0 10px 26px rgba(41,65,75,.09);
  color-scheme:light;
}
html,body{background:var(--bg);color:var(--text)}
body{
  background-image:linear-gradient(180deg,rgba(20,148,212,.035),transparent 320px);
}
.topbar{
  border-bottom-color:rgba(20,148,212,.12);
}
.topbar:after{
  width:76px;
  background:var(--kt-brand);
}
.topbar .eyebrow{color:var(--kt-brand)}
.topbar .eyebrow:before{
  background:var(--kt-brand);
  box-shadow:0 0 0 3px rgba(20,148,212,.12);
}
.summary-card{
  background:#fff;
  border-color:var(--line);
}
.cargo-card,.state-card{
  background:#fff;
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.filter{
  background:#fff;
  border-color:var(--line);
  color:var(--text);
}
.filter.active{
  background:var(--kt-brand);
  border-color:var(--kt-brand);
  color:#fff;
}
.refresh-btn,.count-badge{
  background:#fff;
  border-color:var(--line);
  color:var(--text);
}
.destination-chip{
  background:var(--kt-brand-soft);
  color:#31525f;
}
.status-dot.transit{background:var(--kt-brand)}
.status-dot.delivered{background:var(--kt-success)}
.transit-kicker{color:var(--kt-brand-deep)}
.delivered-kicker{color:var(--kt-success)}
.live-pill{
  background:#fff;
  border-color:var(--line);
}
.live-pill span{
  background:var(--kt-success);
  box-shadow:0 0 0 4px rgba(47,166,111,.12);
}
.empty{background:rgba(255,255,255,.36)}
footer{color:#758288}