/* ═══════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
  /* OKLCH color system */
  --bg0: oklch(0.98 0.003 250);
  --bg1: oklch(0.955 0.005 250);
  --bg2: oklch(0.92 0.008 250);
  --bgc: oklch(0.99 0.002 250);
  --bg-glass: rgba(255,255,255,0.72);
  --bg-glass-strong: rgba(255,255,255,0.88);

  --t0: oklch(0.15 0.02 250);
  --t1: oklch(0.35 0.02 250);
  --t2: oklch(0.50 0.015 250);
  --t3: oklch(0.65 0.01 250);

  --bd: rgba(0,0,0,0.07);
  --bdh: rgba(0,0,0,0.14);
  --bd-glass: rgba(255,255,255,0.5);

  --ac: oklch(0.55 0.18 250);
  --ac-bright: oklch(0.65 0.2 250);
  --acs: oklch(0.55 0.18 250 / 0.08);
  --act: oklch(0.45 0.2 250);

  --red: oklch(0.55 0.22 25);
  --red-bright: oklch(0.65 0.25 25);
  --reds: oklch(0.55 0.22 25 / 0.07);
  --amb: oklch(0.65 0.18 70);
  --ambs: oklch(0.65 0.18 70 / 0.07);
  --grn: oklch(0.6 0.18 155);
  --grn-bright: oklch(0.7 0.2 155);
  --grns: oklch(0.6 0.18 155 / 0.07);
  --pur: oklch(0.5 0.22 300);
  --purs: oklch(0.5 0.22 300 / 0.06);
  --teal: oklch(0.65 0.14 195);

  --f: 'DM Sans', system-ui, -apple-system, sans-serif;
  --m: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
  --r: 16px;
  --rs: 10px;
  --sh: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --shh: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --sh-glow-g: 0 0 20px oklch(0.6 0.18 155 / 0.15);
  --sh-glow-a: 0 0 20px oklch(0.65 0.18 70 / 0.12);
  --sh-glow-r: 0 0 20px oklch(0.55 0.22 25 / 0.12);

  --grain-opacity: 0.03;
  --map-stroke: oklch(0.5 0.015 250);
  --map-fill: oklch(0.92 0.008 250);
  --map-route: var(--ac);
}

[data-theme="dark"] {
  --bg0: oklch(0.13 0.015 260);
  --bg1: oklch(0.16 0.018 260);
  --bg2: oklch(0.20 0.02 260);
  --bgc: oklch(0.17 0.02 260);
  --bg-glass: rgba(20,22,35,0.78);
  --bg-glass-strong: rgba(20,22,35,0.92);

  --t0: oklch(0.92 0.01 250);
  --t1: oklch(0.78 0.01 250);
  --t2: oklch(0.60 0.015 250);
  --t3: oklch(0.42 0.015 260);

  --bd: rgba(255,255,255,0.06);
  --bdh: rgba(255,255,255,0.13);
  --bd-glass: rgba(255,255,255,0.08);

  --ac: oklch(0.72 0.14 250);
  --ac-bright: oklch(0.82 0.16 250);
  --acs: oklch(0.72 0.14 250 / 0.12);
  --act: oklch(0.82 0.14 250);

  --red: oklch(0.72 0.18 25);
  --red-bright: oklch(0.80 0.20 25);
  --reds: oklch(0.72 0.18 25 / 0.12);
  --ambs: oklch(0.65 0.18 70 / 0.1);
  --grns: oklch(0.6 0.18 155 / 0.1);
  --purs: oklch(0.5 0.22 300 / 0.1);

  --sh: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
  --shh: 0 8px 40px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
  --sh-glow-g: 0 0 30px oklch(0.6 0.18 155 / 0.2);
  --sh-glow-a: 0 0 30px oklch(0.65 0.18 70 / 0.15);
  --sh-glow-r: 0 0 30px oklch(0.55 0.22 25 / 0.15);

  --grain-opacity: 0.04;
  --map-stroke: oklch(0.35 0.02 260);
  --map-fill: oklch(0.20 0.02 260);
  --map-route: var(--ac-bright);
}

/* ═══════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 15px; scroll-behavior: smooth; scroll-padding-top: 80px }
body {
  font-family: var(--f);
  background: var(--bg1);
  color: var(--t0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.4s ease, color 0.3s ease;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ac), var(--teal), var(--grn));
  z-index: 10001;
  width: 0%;
  transition: width 0.1s linear;
}

/* ═══════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px) scale(0.95);
  background: var(--t0);
  color: var(--bg0);
  padding: 10px 22px 10px 16px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--f);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
}
.toast svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ═══════════════════════════════════════════════
   APP CONTAINER
   ═══════════════════════════════════════════════ */
.app {
  max-width: 1260px;
  margin: 0 auto;
  padding: 72px 16px 80px;
}
@media (min-width: 768px) { .app { padding: 78px 28px 80px } }
@media (min-width: 1200px) { .app { padding: 82px 36px 80px } }

/* ═══════════════════════════════════════════════
   TOPBAR — Sticky Glass
   ═══════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--bd-glass);
  transition: padding 0.3s ease, background 0.3s ease;
  gap: 12px;
}
.topbar.scrolled {
  padding: 6px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
[data-theme="dark"] .topbar.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.3) }
@media (min-width: 768px) {
  .topbar { padding: 12px 28px }
  .topbar.scrolled { padding: 8px 28px }
}
.tbl { display: flex; align-items: center; gap: 10px }
.tb-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--red), oklch(0.6 0.2 35));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px oklch(0.55 0.22 25 / 0.25);
  position: relative;
}
.tb-logo::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  border: 1px solid oklch(0.55 0.22 25 / 0.15);
}
a.tb-logo { text-decoration: none; color: #fff; cursor: pointer; transition: transform 0.15s ease }
a.tb-logo:hover { transform: scale(1.08) }
.tb-info { font-size: 12px; color: var(--t2); line-height: 1.35 }
.tb-info strong { color: var(--t0); font-weight: 600; font-size: 13px }
.tba { display: flex; align-items: center; gap: 8px }
.tb-btn {
  background: var(--bg-glass-strong);
  border: 1px solid var(--bd);
  border-radius: var(--rs);
  padding: 7px 12px;
  font-size: 11.5px;
  font-family: var(--f);
  color: var(--t2);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(8px);
}
.tb-btn:hover {
  border-color: var(--bdh);
  color: var(--t0);
  background: var(--bg2);
  transform: translateY(-1px);
}
.tb-btn:active { transform: translateY(0) }
.tb-btn svg { width: 15px; height: 15px }
.tb-btn .kbd {
  font-family: var(--m);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  color: var(--t3);
  margin-left: 2px;
}

/* Theme toggle — enhanced */
.tsw {
  width: 42px;
  height: 24px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 24px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}
.tsw::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--t3);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
[data-theme="dark"] .tsw { background: var(--acs); border-color: var(--ac) }
[data-theme="dark"] .tsw::after {
  left: 21px;
  background: var(--ac-bright);
  box-shadow: 0 0 8px var(--ac);
}

/* ═══════════════════════════════════════════════
   ALERT BANNER
   ═══════════════════════════════════════════════ */
.alert-banner {
  background: linear-gradient(135deg, oklch(0.55 0.22 25 / 0.06), oklch(0.65 0.18 70 / 0.04));
  border: 1px solid oklch(0.55 0.22 25 / 0.12);
  border-radius: var(--r);
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--t1);
  line-height: 1.5;
  animation: fadeSlideDown 0.5s ease backwards;
}
.alert-banner .alert-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.alert-banner strong { color: var(--red); font-weight: 600 }

/* ═══════════════════════════════════════════════
   SEARCH BAR — Glowing Focus
   ═══════════════════════════════════════════════ */
.sbar {
  position: relative;
  margin-bottom: 12px;
  animation: fadeSlideDown 0.4s ease 0.1s backwards;
}
.sbar input {
  width: 100%;
  padding: 13px 18px 13px 44px;
  background: var(--bgc);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  font-size: 14.5px;
  font-family: var(--f);
  color: var(--t0);
  transition: all 0.3s ease;
  outline: none;
  box-shadow: var(--sh);
}
.sbar input:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 4px var(--acs), var(--sh), 0 0 20px var(--acs);
}
.sbar input::placeholder { color: var(--t3) }
.sbar .s-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--t3);
  transition: color 0.2s;
}
.sbar input:focus ~ .s-icon { color: var(--ac) }

/* ═══════════════════════════════════════════════
   FILTER CHIPS — Animated
   ═══════════════════════════════════════════════ */
.flt {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
  animation: fadeSlideDown 0.4s ease 0.15s backwards;
}
.chip {
  padding: 7px 16px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--bd);
  background: var(--bgc);
  color: var(--t2);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  position: relative;
  overflow: hidden;
}
.chip:hover {
  border-color: var(--bdh);
  color: var(--t0);
  transform: translateY(-1px);
}
.chip:active { transform: translateY(0) scale(0.97) }
.chip.on {
  background: var(--ac);
  color: #fff;
  border-color: var(--ac);
  box-shadow: 0 2px 12px var(--acs);
}
.chip.on:hover { background: var(--act) }
.slbl { font-size: 11px; color: var(--t3); margin-left: auto; font-style: italic }

/* ═══════════════════════════════════════════════
   GRID — Container Queries Ready
   ═══════════════════════════════════════════════ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 16px;
}
@media (max-width: 700px) { .grid { grid-template-columns: 1fr } }

/* ═══════════════════════════════════════════════
   CARD — Glass + Glow + Animated Entry
   ═══════════════════════════════════════════════ */
.card {
  background: var(--bgc);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease;
  box-shadow: var(--sh);
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px);
  animation: cardReveal 0.5s ease forwards;
}
.card:hover {
  border-color: var(--bdh);
  box-shadow: var(--shh);
  transform: translateY(-3px);
}
.card.glow-g:hover { box-shadow: var(--shh), var(--sh-glow-g) }
.card.glow-a:hover { box-shadow: var(--shh), var(--sh-glow-a) }
.card.glow-r:hover { box-shadow: var(--shh), var(--sh-glow-r) }

.card.hl {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px var(--acs), var(--shh);
  transform: translateY(-3px);
}

/* Stagger delays */
.card:nth-child(1) { animation-delay: 0.05s }
.card:nth-child(2) { animation-delay: 0.12s }
.card:nth-child(3) { animation-delay: 0.19s }
.card:nth-child(4) { animation-delay: 0.26s }
.card:nth-child(5) { animation-delay: 0.33s }
.card:nth-child(6) { animation-delay: 0.40s }

/* Card stripe — animated gradient */
.cstr {
  height: 4px;
  position: relative;
  overflow: hidden;
}
.cstr::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: translateX(-100%);
  animation: shimmer 3s ease-in-out infinite;
}
.sg { background: linear-gradient(90deg, oklch(0.6 0.2 155), oklch(0.75 0.18 165)) }
.sa { background: linear-gradient(90deg, oklch(0.65 0.2 70), oklch(0.78 0.16 80)) }
.sr { background: linear-gradient(90deg, oklch(0.55 0.25 25), oklch(0.7 0.2 35)) }

.cin { padding: 18px 20px 16px; display: flex; flex-direction: column; flex: 1 }

/* Card header */
.chd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
  gap: 8px;
}
.ccy {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--m);
  color: var(--t3);
  padding: 0 4px;
}
@media (max-width: 900px) { .kh { display: none } }

.clk {
  font-size: 11px;
  color: var(--ac);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.7;
  transition: all 0.2s;
  padding: 4px 8px;
  border-radius: 6px;
}
.clk:hover { opacity: 1; background: var(--acs) }
.cnm {
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.4;
  margin-bottom: 14px;
}

/* Transport row */
.ctr {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--t2);
  flex-wrap: wrap;
}
.ctr .tv { font-weight: 600; color: var(--t0) }

/* ═══════════════════════════════════════════════
   MINI MAP — Inline SVG Poland
   ═══════════════════════════════════════════════ */
.mini-map {
  margin: 10px 0 14px;
  padding: 10px;
  border-radius: var(--rs);
  background: var(--bg1);
  border: 1px solid var(--bd);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mini-map svg { flex-shrink: 0 }
.mini-map .map-meta {
  font-size: 11px;
  color: var(--t3);
  line-height: 1.4;
}
.mini-map .map-meta .dist-val {
  font-family: var(--m);
  font-weight: 600;
  font-size: 13px;
  color: var(--t0);
}
.dist-bar {
  height: 4px;
  background: var(--bg2);
  border-radius: 4px;
  margin-top: 6px;
  overflow: hidden;
  width: 100%;
}
.dist-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}
.dist-bar-fill.sg-fill { background: linear-gradient(90deg, oklch(0.6 0.2 155), oklch(0.75 0.18 165)) }
.dist-bar-fill.sa-fill { background: linear-gradient(90deg, oklch(0.65 0.2 70), oklch(0.78 0.16 80)) }
.dist-bar-fill.sr-fill { background: linear-gradient(90deg, oklch(0.55 0.25 25), oklch(0.7 0.2 35)) }

/* Route dash animation */
.route-line {
  stroke-dasharray: 4 3;
  animation: dashMove 1.5s linear infinite;
}

/* ═══════════════════════════════════════════════
   PHONES
   ═══════════════════════════════════════════════ */
.phs { display: flex; flex-direction: column; gap: 3px }
.ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--rs);
  transition: all 0.15s ease;
  cursor: pointer;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.ph:hover { background: var(--bg2) }
.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), var(--acs) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.ph.ripple::after { opacity: 1 }
.phr { font-size: 12px; color: var(--t2); flex-shrink: 0 }
.phn {
  font-family: var(--m);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--t0);
  text-align: right;
  white-space: nowrap;
}
/* tel: link for mobile, plain text for desktop */
a.ph-tel { text-decoration: none; color: inherit; display: none }
.ph-copy { display: inline }
@media (pointer: coarse) {
  a.ph-tel { display: inline }
  .ph-copy { display: none }
}
.ph.hero {
  background: var(--reds);
  border: 1px solid oklch(0.55 0.22 25 / 0.1);
  border-radius: var(--rs);
}
.ph.hero .phr { color: var(--red); font-weight: 600 }
.ph.hero .phn { font-size: 16px; font-weight: 600; color: var(--red) }
[data-theme="dark"] .ph.hero .phn { color: var(--red-bright) }
[data-theme="dark"] .ph.hero .phr { color: var(--red-bright) }

.phst {
  position: absolute;
  right: -2px;
  top: -6px;
  font-size: 9px;
  font-family: var(--m);
  background: var(--grn);
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px oklch(0.6 0.18 155 / 0.3);
}
.ph.ndim { opacity: 0.3 }

/* 24h pulsating indicator */
.h24-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grn);
  display: inline-block;
  margin-right: 4px;
  flex-shrink: 0;
  position: relative;
}
.h24-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--grn);
  animation: pulse-ring 2s ease-out infinite;
}

/* More phones accordion */
.mw {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mw > div { overflow: hidden }
.mw.open { grid-template-rows: 1fr }
.mb {
  font-size: 11.5px;
  color: var(--t3);
  text-align: center;
  padding: 8px 0 2px;
  cursor: pointer;
  transition: color 0.2s;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.mb:hover { color: var(--ac) }
.mb .mb-arrow {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}
.mb.open .mb-arrow { transform: rotate(180deg) }

/* ═══════════════════════════════════════════════
   CAPABILITIES
   ═══════════════════════════════════════════════ */
.caps {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bd);
}
.cap {
  font-size: 10.5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
  background: var(--bg2);
  color: var(--t2);
  transition: all 0.2s;
}
.cap.y {
  background: var(--grns);
  color: var(--grn);
}
[data-theme="dark"] .cap.y { color: var(--grn-bright) }

/* ═══════════════════════════════════════════════
   SIoS BUTTON — Breathing Glow
   ═══════════════════════════════════════════════ */
.cbot { margin-top: auto }
.sios-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
}
.sios-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 0;
  border-radius: var(--rs);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--f);
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  border: 1px solid var(--bd);
}
.sios-btn .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  position: relative;
}
.sios-btn.active {
  background: var(--acs);
  color: var(--act);
  border-color: oklch(0.55 0.18 250 / 0.2);
}
.sios-btn.active .dot {
  background: var(--grn);
  animation: breathe 2.5s ease-in-out infinite;
}
.sios-btn.active .dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--grn);
  animation: pulse-ring 2.5s ease-out infinite;
}
.sios-btn.active:hover {
  background: var(--ac);
  color: #fff;
  box-shadow: 0 4px 16px var(--acs);
}
.sios-btn.inactive {
  background: var(--bg2);
  color: var(--t3);
  cursor: default;
  border-color: transparent;
}
.sios-btn.inactive .dot { background: var(--t3) }

/* Card actions */
.cacts { display: flex; gap: 6px; margin-top: 10px }
.ca {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--t3);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  border: none;
  background: transparent;
  font-family: var(--f);
}
.ca:hover { background: var(--bg2); color: var(--t1); transform: translateY(-1px) }
.ca:active { transform: translateY(0) }

/* ═══════════════════════════════════════════════
   LPR — Emergency Section
   ═══════════════════════════════════════════════ */
.lpr {
  background: var(--bgc);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 16px 20px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: var(--sh);
  position: relative;
  overflow: hidden;
  animation: fadeSlideUp 0.5s ease 0.5s backwards;
}
.lpr::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--pur), oklch(0.6 0.2 280));
}
.lpr-l { display: flex; align-items: center; gap: 14px }
.lpr-b {
  background: var(--purs);
  color: var(--pur);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  letter-spacing: 0.08em;
  font-family: var(--m);
  position: relative;
}
[data-theme="dark"] .lpr-b { color: oklch(0.78 0.16 300) }
.lpr-n {
  font-family: var(--m);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lpr-n:hover { color: var(--ac) }
.lpr-n .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  position: relative;
  animation: breathe 1.5s ease-in-out infinite;
}
.lpr-n .pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  animation: pulse-ring 1.5s ease-out infinite;
}
.lpr-s { font-size: 11.5px; color: var(--t3) }
.lpr-r { display: flex; gap: 8px }
.lpr-r a {
  font-size: 12px;
  padding: 8px 16px;
  border-radius: var(--rs);
  background: var(--bg2);
  color: var(--t1);
  text-decoration: none;
  font-weight: 500;
  border: 1px solid var(--bd);
  transition: all 0.2s;
}
.lpr-r a:hover {
  background: var(--acs);
  color: var(--act);
  border-color: var(--ac);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.foot {
  text-align: center;
  padding: 20px 0 4px;
  font-size: 11px;
  color: var(--t3);
  line-height: 1.7;
  animation: fadeSlideUp 0.5s ease 0.55s backwards;
}
.foot span { cursor: pointer; color: var(--ac); transition: opacity 0.2s }
.foot span:hover { opacity: 0.8 }
.eps-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--t2);
  font-style: italic;
  background: var(--ambs);
  padding: 8px 16px;
  border-radius: var(--rs);
  display: inline-block;
  border: 1px solid oklch(0.65 0.18 70 / 0.1);
}

/* ═══════════════════════════════════════════════
   COMMAND PALETTE
   ═══════════════════════════════════════════════ */
.cmd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(20vh, 160px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cmd-overlay.open { display: flex; opacity: 1 }
.cmd-box {
  width: min(560px, 92vw);
  background: var(--bgc);
  border: 1px solid var(--bdh);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  overflow: hidden;
  transform: scale(0.96) translateY(-8px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cmd-overlay.open .cmd-box { transform: scale(1) translateY(0) }
.cmd-input {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid var(--bd);
  background: transparent;
  font-size: 16px;
  font-family: var(--f);
  color: var(--t0);
  outline: none;
}
.cmd-input::placeholder { color: var(--t3) }
.cmd-results {
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13.5px;
  color: var(--t1);
}
.cmd-item:hover, .cmd-item.active { background: var(--acs); color: var(--t0) }
.cmd-item .cmd-num {
  font-family: var(--m);
  font-size: 10px;
  color: var(--t3);
  background: var(--bg2);
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--bd);
}
.cmd-item .cmd-city { font-weight: 600 }
.cmd-item .cmd-name { font-size: 11.5px; color: var(--t2); margin-left: auto; text-align: right; max-width: 50% }
.cmd-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--bd);
  font-size: 10.5px;
  color: var(--t3);
  display: flex;
  gap: 14px;
  font-family: var(--m);
}
.cmd-footer kbd {
  background: var(--bg2);
  border: 1px solid var(--bd);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}

/* ═══════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════ */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(16px) }
  to { opacity: 1; transform: translateY(0) }
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-10px) }
  to { opacity: 1; transform: translateY(0) }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px) }
  to { opacity: 1; transform: translateY(0) }
}
@keyframes shimmer {
  0% { transform: translateX(-100%) }
  50% { transform: translateX(100%) }
  100% { transform: translateX(100%) }
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8 }
  100% { transform: scale(2.2); opacity: 0 }
}
@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1) }
  50% { opacity: 0.6; transform: scale(0.85) }
}
@keyframes dashMove {
  to { stroke-dashoffset: -14 }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(6px) }
  to { opacity: 1; transform: translateY(0) }
}

/* ═══════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card { opacity: 1; transform: none }
  .cstr::after { animation: none }
  .route-line { animation: none }
  .h24-dot::after { animation: none }
  .sios-btn.active .dot { animation: none }
  .sios-btn.active .dot::after { animation: none }
  .lpr-n .pulse-dot { animation: none }
  .lpr-n .pulse-dot::after { animation: none }
}

/* ═══════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════ */
@media print {
  body { background: #fff !important; color: #000 !important }
  body::before { display: none }
  .scroll-progress { display: none }
  .app { padding: 0 }
  .topbar, .sbar, .flt, .lpr, .foot, .cacts, .mb, .sios-row, .tba,
  .alert-banner, .cmd-overlay, .mini-map { display: none !important }
  .grid { display: block }
  .card {
    break-inside: avoid;
    border: 1px solid #ccc;
    box-shadow: none;
    margin-bottom: 12px;
    opacity: 1;
    transform: none;
    animation: none;
  }
  .card.phide { display: none !important }
  .ph { cursor: default }
  .phst { display: none }
  .cstr { height: 4px; -webkit-print-color-adjust: exact; print-color-adjust: exact }
  .mw { grid-template-rows: 1fr !important }
  .mw > div { overflow: visible !important }
  .pin-overlay { display: none !important }
}

/* ═══════════════════════════════════════════════
   PIN ACCESS SCREEN
   ═══════════════════════════════════════════════ */
.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.13 0.015 260 / 0.6);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  animation: pinFadeIn 0.3s ease;
}

@keyframes pinFadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}

.pin-card {
  background: var(--bg-glass-strong);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  box-shadow: var(--shh), 0 0 80px oklch(0.55 0.18 250 / 0.08);
  padding: 2.5rem 2rem 2rem;
  width: min(380px, 90vw);
  text-align: center;
  animation: pinSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pinSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.96) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}

.pin-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  font-family: var(--f);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
  box-shadow: 0 4px 16px oklch(0.55 0.22 25 / 0.25);
}

.pin-title {
  font-family: var(--f);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--t0);
  margin-bottom: 0.25rem;
}

.pin-subtitle {
  font-family: var(--f);
  font-size: 0.82rem;
  color: var(--t2);
  margin-bottom: 1.6rem;
  line-height: 1.4;
}

.pin-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.pin-digit {
  width: 54px;
  height: 62px;
  border: 1.5px solid var(--bd);
  border-radius: var(--rs);
  background: var(--bg1);
  color: var(--t0);
  font-family: var(--m);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -moz-appearance: textfield;
  caret-color: var(--ac);
}

.pin-digit::-webkit-outer-spin-button,
.pin-digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pin-digit:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px var(--acs);
  background: var(--bg0);
}

.pin-digit.pin-error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--reds);
  background: var(--bg0);
}

.pin-msg {
  font-family: var(--f);
  font-size: 0.82rem;
  color: var(--red);
  min-height: 1.4em;
  margin-bottom: 0.5rem;
  transition: opacity 0.2s;
}

.pin-msg:empty {
  opacity: 0;
}

@keyframes pinShake {
  0%, 100% { transform: translateX(0) }
  15%      { transform: translateX(-8px) }
  30%      { transform: translateX(8px) }
  45%      { transform: translateX(-6px) }
  60%      { transform: translateX(6px) }
  75%      { transform: translateX(-3px) }
  90%      { transform: translateX(3px) }
}

.pin-shake .pin-inputs {
  animation: pinShake 0.45s ease;
}

/* Logout link in footer */
.pin-logout {
  display: inline-block;
  margin-left: 0.6em;
  color: var(--t3);
  cursor: pointer;
  font-size: 11px;
  transition: color 0.2s;
  text-decoration: none;
  border-bottom: 1px dotted var(--t3);
}
.pin-logout:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* ═══════════════════════════════════════════════
   BED AVAILABILITY DISPLAY
   ═══════════════════════════════════════════════ */

/* Bed display row — injected after .caps */
.bed-display {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--rs);
  background: var(--grns);
  border: 1px solid oklch(0.6 0.18 155 / 0.15);
  animation: fadeSlideUp 0.25s ease;
}
.bed-display.bed-old {
  background: var(--ambs);
  border-color: oklch(0.65 0.18 70 / 0.18);
}

.bed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  font-family: var(--f);
  color: var(--t1);
  line-height: 1.4;
}

.bed-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.bed-ward {
  font-size: 12px;
  white-space: nowrap;
}
.bed-ward strong {
  font-family: var(--m);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Green = beds available */
.bed-avail {
  color: var(--grn);
}
.bed-avail strong {
  color: var(--grn);
}
[data-theme="dark"] .bed-avail { color: var(--grn-bright) }
[data-theme="dark"] .bed-avail strong { color: var(--grn-bright) }

/* Red = zero beds */
.bed-zero {
  color: var(--red);
}
.bed-zero strong {
  color: var(--red);
}
[data-theme="dark"] .bed-zero { color: var(--red-bright) }
[data-theme="dark"] .bed-zero strong { color: var(--red-bright) }

/* Separator pipe */
.bed-sep {
  color: var(--t3);
  font-weight: 300;
  margin: 0 2px;
}

/* Timestamp */
.bed-time {
  font-size: 11px;
  font-family: var(--m);
  color: var(--t2);
  margin-left: auto;
  white-space: nowrap;
}

/* Warning badge for >4h old data */
.bed-warn-badge {
  font-size: 10px;
  color: var(--amb);
  font-weight: 600;
  white-space: nowrap;
}

/* Clear button */
.bed-clear {
  background: none;
  border: none;
  color: var(--t3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  transition: all 0.15s;
  font-family: var(--f);
  flex-shrink: 0;
}
.bed-clear:hover {
  color: var(--red);
  background: var(--reds);
}

/* ── Bed input field ── */
.bed-input-wrap {
  margin-top: 8px;
  animation: fadeSlideUp 0.2s ease;
}

.bed-input {
  width: 100%;
  padding: 9px 14px;
  background: var(--bg1);
  border: 1.5px solid var(--bd);
  border-radius: var(--rs);
  font-size: 13px;
  font-family: var(--f);
  color: var(--t0);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bed-input:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px var(--acs);
}
.bed-input::placeholder {
  color: var(--t3);
  font-size: 12px;
}
.bed-input.bed-input-err {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--reds);
  animation: pinShake 0.35s ease;
}

/* Bed button style — inherits .ca but with subtle highlight */
.bed-btn {
  color: var(--t2) !important;
}
.bed-btn:hover {
  color: var(--grn) !important;
  background: var(--grns) !important;
}

/* Print: hide bed inputs, show bed displays */
@media print {
  .bed-input-wrap { display: none !important }
  .bed-btn { display: none !important }
  .bed-clear { display: none !important }
  .bed-display {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ═══════════════════════════════════════════════
   MOBILE — Phone-optimized (≤480px)
   ═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Grid: narrower min so cards fit on 320-375px screens */
  .grid { grid-template-columns: 1fr; gap: 12px }

  /* App container: tighter padding */
  .app { padding: 64px 10px 72px }

  /* Topbar: compact */
  .topbar { padding: 8px 12px; gap: 8px }
  .topbar.scrolled { padding: 6px 12px }
  .tb-info { font-size: 11px }
  .tb-info strong { font-size: 11.5px }
  .tb-btn .kbd { display: none }
  .tb-btn { padding: 6px 8px; font-size: 10.5px }
  .tba { gap: 5px }

  /* Search bar */
  .sbar input { padding: 11px 14px 11px 38px; font-size: 14px }
  .sbar .s-icon { left: 12px }

  /* Card inner padding */
  .cin { padding: 14px 14px 12px }

  /* City name */
  .ccy { font-size: 17px }
  .cnm { font-size: 12px; margin-bottom: 10px }

  /* Transport row */
  .ctr { gap: 10px; font-size: 11.5px }

  /* Mini map: hide on very small screens to save space */
  .mini-map { padding: 8px; gap: 8px }
  .mini-map .map-meta .dist-val { font-size: 12px }

  /* ── PHONES: vertical layout ── */
  .ph {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    min-height: 44px; /* touch target */
    gap: 2px;
  }
  .phr {
    font-size: 11.5px;
    text-align: left;
    order: 1;
  }
  .phn, a.ph-tel {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    white-space: normal;
    word-break: break-all;
    letter-spacing: 0.05em;
    order: 2;
  }
  .ph.hero .phn, .ph.hero a.ph-tel {
    font-size: 20px;
    font-weight: 700;
  }

  /* 24h dot */
  .h24-dot { margin-right: 3px }

  /* "dzwoniono" timestamp */
  .phst {
    right: 6px;
    top: 6px;
    font-size: 8.5px;
    padding: 2px 6px;
  }

  /* More phones button */
  .mb { padding: 10px 0 4px; font-size: 12px }

  /* Capabilities */
  .caps { margin-top: 10px; padding-top: 10px; gap: 4px }
  .cap { font-size: 10px; padding: 3px 8px }

  /* SIoS button */
  .sios-btn { font-size: 11.5px; padding: 10px 0 }

  /* Card actions */
  .cacts { gap: 4px }
  .ca { padding: 8px 0; font-size: 10.5px }

  /* LPR block */
  .lpr { padding: 12px 14px; gap: 10px; flex-direction: column; align-items: flex-start }
  .lpr-l { flex-wrap: wrap; gap: 8px }
  .lpr-n { font-size: 18px }
  .lpr-s { font-size: 11px }
  .lpr-r { width: 100% }
  .lpr-r a { flex: 1; text-align: center; padding: 10px 12px; font-size: 12px }

  /* Footer */
  .foot { font-size: 10px; padding: 14px 0 4px }

  /* Bed display */
  .bed-row { font-size: 11.5px }
  .bed-ward strong { font-size: 12px }
  .bed-time { font-size: 10.5px }

  /* Filter chips */
  .flt { gap: 4px; flex-wrap: wrap }
  .chip { font-size: 11px; padding: 6px 10px }

  /* Alert banner */
  .alert-banner { padding: 10px 12px; font-size: 11.5px }

  /* PIN screen */
  .pin-card { padding: 2rem 1.5rem 1.5rem; width: min(340px, 92vw) }
}

/* ═══════════════════════════════════════════════
   MOBILE — Small phones (≤360px)
   ═══════════════════════════════════════════════ */
@media (max-width: 360px) {
  .app { padding: 60px 8px 68px }
  .cin { padding: 12px 12px 10px }
  .ccy { font-size: 15px }
  .phn { font-size: 17px }
  .ph.hero .phn { font-size: 19px }
  .lpr-n { font-size: 16px }
  .tb-info { display: none }
}

/* ═══════════════════════════════════════════════
   TOUCH: larger tap targets for mobile devices
   ═══════════════════════════════════════════════ */
@media (pointer: coarse) {
  .ph { min-height: 48px }
  .mb { min-height: 44px }
  .ca { min-height: 44px }
  .tb-btn { min-height: 36px }
  .tsw { width: 48px; height: 28px }
  .tsw::after { width: 20px; height: 20px }
  [data-theme="dark"] .tsw::after { left: 24px }
  .lpr-r a { min-height: 44px; display: flex; align-items: center; justify-content: center }
}