/* ==========================================================================
   Athény 2026 — iOS-native design system
   ========================================================================== */

:root {
  --blue:        #007AFF;
  --blue-press:  #0062CC;
  --gold:        #A9691B;
  --green:       #128A3E;
  --red:         #D70015;
  --purple:      #7B3FE4;

  --bg:          #F2F2F7;
  --bg-elev:     #FFFFFF;
  --bg-elev-2:   #F7F7FA;
  --bg-press:    #D1D1D6;
  --nav-bg:      rgba(249,249,251,0.82);
  --tab-bg:      rgba(249,249,251,0.80);

  --label:       #000000;
  --label-2:     rgba(60,60,67,0.62);
  --label-3:     rgba(60,60,67,0.34);
  --label-4:     rgba(60,60,67,0.20);
  --sep:         rgba(60,60,67,0.20);
  --sep-opaque:  #C6C6C8;
  --fill:        rgba(120,120,128,0.12);
  --fill-2:      rgba(120,120,128,0.16);

  --nav-h:       44px;
  --tab-h:       50px;
  --r:           11px;
  --r-lg:        16px;
  --gutter:      16px;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-sheet: 0 -1px 40px rgba(0,0,0,0.16);
}

:root:not([data-theme="light"]) { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue:       #0A84FF;
    --blue-press: #409CFF;
    --gold:       #FFB340;
    --green:      #30D158;
    --red:        #FF453A;
    --purple:     #BF5AF2;

    --bg:         #000000;
    --bg-elev:    #1C1C1E;
    --bg-elev-2:  #2C2C2E;
    --bg-press:   #3A3A3C;
    --nav-bg:     rgba(22,22,24,0.80);
    --tab-bg:     rgba(22,22,24,0.80);

    --label:      #FFFFFF;
    --label-2:    rgba(235,235,245,0.62);
    --label-3:    rgba(235,235,245,0.32);
    --label-4:    rgba(235,235,245,0.18);
    --sep:        rgba(84,84,88,0.65);
    --sep-opaque: #38383A;
    --fill:       rgba(118,118,128,0.24);
    --fill-2:     rgba(118,118,128,0.32);
    --shadow-sheet: 0 -1px 40px rgba(0,0,0,0.6);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --blue:#0A84FF; --blue-press:#409CFF; --gold:#FFB340; --green:#30D158; --red:#FF453A; --purple:#BF5AF2;
  --bg:#000000; --bg-elev:#1C1C1E; --bg-elev-2:#2C2C2E; --bg-press:#3A3A3C;
  --nav-bg:rgba(22,22,24,0.80); --tab-bg:rgba(22,22,24,0.80);
  --label:#FFFFFF; --label-2:rgba(235,235,245,0.62); --label-3:rgba(235,235,245,0.32); --label-4:rgba(235,235,245,0.18);
  --sep:rgba(84,84,88,0.65); --sep-opaque:#38383A; --fill:rgba(118,118,128,0.24); --fill-2:rgba(118,118,128,0.32);
  --shadow-sheet: 0 -1px 40px rgba(0,0,0,0.6);
}

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

html, body {
  margin: 0; padding: 0; height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  font-size: 17px; line-height: 1.4;
  letter-spacing: -0.022em;
  background: var(--bg);
  color: var(--label);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
h1,h2,h3,h4,p,ul,ol { margin: 0; padding: 0; }
ul,ol { list-style: none; }
input { font: inherit; }

/* --- app shell ----------------------------------------------------------- */
#app { position: fixed; inset: 0; }

.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
}
.screen.active { display: flex; }

.scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--tab-h) + var(--sab) + 28px);
  padding-left: var(--sal); padding-right: var(--sar);
}

/* --- nav bar ------------------------------------------------------------- */
.nav {
  position: relative; z-index: 20;
  padding-top: var(--sat);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow .2s;
}
.nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 0.5px; background: var(--sep);
  opacity: 0; transition: opacity .22s;
}
.nav.scrolled::after { opacity: 1; }

.nav-bar {
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 calc(var(--gutter) - 6px);
  position: relative;
}
.nav-title {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(6px);
  font-size: 17px; font-weight: 600; letter-spacing: -0.4px;
  opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
  white-space: nowrap; max-width: 62%; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.nav.scrolled .nav-title { opacity: 1; transform: translateX(-50%) translateY(0); }

.nav-btn {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--blue); font-size: 17px;
  padding: 6px; margin: -6px 0; border-radius: 8px;
  transition: opacity .12s;
}
.nav-btn:active { opacity: .35; }
.nav-btn.right { margin-left: auto; }
.nav-btn svg { width: 22px; height: 22px; }

.large-title {
  padding: 2px var(--gutter) 8px;
  font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.9px;
}
.large-title .lt-sub {
  display: block; font-size: 15px; line-height: 20px; font-weight: 400;
  letter-spacing: -0.24px; color: var(--label-2); margin-top: 1px;
}

/* --- lists (inset grouped) ----------------------------------------------- */
.group { margin: 0 var(--gutter) 30px; }
.group-hd {
  font-size: 13px; font-weight: 400; letter-spacing: -0.08px;
  color: var(--label-2); text-transform: uppercase;
  padding: 0 16px 7px; letter-spacing: 0.4px;
}
.group-ft {
  font-size: 13px; line-height: 18px; color: var(--label-2);
  padding: 7px 16px 0; letter-spacing: -0.08px;
}

.list {
  background: var(--bg-elev);
  border-radius: var(--r);
  overflow: hidden;
}

.row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  min-height: 44px;
  padding: 11px 16px;
  background: var(--bg-elev);
  transition: background .08s;
}
.row + .row::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 0;
  height: 0.5px; background: var(--sep);
}
.row.has-icon + .row.has-icon::before { left: 60px; }
.row:active   { background: var(--bg-press); }
.row.static:active { background: var(--bg-elev); }

.row-icon {
  flex: 0 0 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
}
.row-icon svg { width: 18px; height: 18px; }

.row-body { flex: 1; min-width: 0; display: block; }
.row-title { display: block; font-size: 17px; line-height: 22px; letter-spacing: -0.41px; }
.row-sub {
  display: block;
  font-size: 13px; line-height: 17px; color: var(--label-2);
  margin-top: 1px; letter-spacing: -0.08px;
}
.row-val { font-size: 17px; color: var(--label-2); letter-spacing: -0.41px; flex: 0 0 auto; }
.chev { flex: 0 0 auto; width: 8px; height: 13px; color: var(--label-3); }

/* --- badges -------------------------------------------------------------- */
.row-title .badge { vertical-align: 1px; margin-left: 5px; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 7px; border-radius: 6px;
  background: var(--fill); color: var(--label-2);
  white-space: nowrap;
}
.badge svg { width: 10px; height: 10px; }
.badge.gold  { background: color-mix(in srgb, var(--gold) 16%, transparent);  color: var(--gold); }
.badge.green { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.badge.red   { background: color-mix(in srgb, var(--red) 16%, transparent);   color: var(--red); }
.badge.blue  { background: color-mix(in srgb, var(--blue) 16%, transparent);  color: var(--blue); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 50px; padding: 0 18px;
  background: var(--blue); color: #fff;
  font-size: 17px; font-weight: 600; letter-spacing: -0.41px;
  border-radius: 12px;
  transition: transform .12s var(--ease), opacity .12s;
}
.btn:active { transform: scale(0.975); opacity: .88; }
.btn svg { width: 19px; height: 19px; }
.btn.secondary { background: var(--fill); color: var(--blue); }
.btn.small { min-height: 38px; font-size: 15px; border-radius: 10px; }

.btn-row { display: flex; gap: 10px; margin: 0 var(--gutter) 30px; }

/* --- tab bar ------------------------------------------------------------- */
.tabbar {
  position: absolute; z-index: 30;
  left: 0; right: 0; bottom: 0;
  display: flex;
  padding-bottom: var(--sab);
  padding-left: var(--sal); padding-right: var(--sar);
  background: var(--tab-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.tabbar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 0.5px; background: var(--sep);
}
.tab {
  flex: 1; height: var(--tab-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--label-3);
  transition: color .15s;
}
.tab svg { width: 26px; height: 26px; }
.tab span {
  font-size: 10px; font-weight: 500; letter-spacing: 0;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 380px) { .tab span { font-size: 9px; } .tab svg { width: 24px; height: 24px; } }
.tab.active { color: var(--blue); }
.tab:active svg { transform: scale(0.9); }
.tab svg { transition: transform .12s var(--ease); }

/* --- hero / today card --------------------------------------------------- */
.hero {
  margin: 4px var(--gutter) 24px;
  border-radius: var(--r-lg);
  padding: 18px 18px 20px;
  background: linear-gradient(150deg, #0E64B7 0%, #0A3E77 55%, #072F5F 100%);
  color: #fff; position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; right: -40px; top: -50px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
}
.hero-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hero-title { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; margin-top: 4px; }
.hero-sub { font-size: 15px; color: rgba(255,255,255,.80); margin-top: 3px; letter-spacing: -0.24px; }
.hero-stats { display: flex; gap: 22px; margin-top: 16px; position: relative; }
.hero-stat-n { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.hero-stat-l { font-size: 11px; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1px; }

/* --- timeline ------------------------------------------------------------ */
.day-hd {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 4px 10px;
}
.day-hd-n {
  font-size: 22px; font-weight: 700; letter-spacing: -0.5px;
}
.day-hd-d { font-size: 15px; color: var(--label-2); letter-spacing: -0.24px; white-space: nowrap; }
.day-hd-n { min-width: 0; }
.day-hd .badge { margin-left: auto; }

.day-sum {
  font-size: 14px; line-height: 19px; color: var(--label-2);
  padding: 0 4px 14px; letter-spacing: -0.15px;
}

.tl { position: relative; padding-left: 74px; }
.tl::before {
  content: ''; position: absolute; left: 54px; top: 10px; bottom: 12px;
  width: 2px; background: var(--sep); border-radius: 1px;
}
.tl-item { position: relative; padding-bottom: 16px; }
.tl-time {
  position: absolute; left: -74px; top: 12px; width: 44px;
  font-size: 13px; font-weight: 600; color: var(--label-2);
  font-variant-numeric: tabular-nums; letter-spacing: -0.1px;
  text-align: right;
}
.tl-dot {
  position: absolute; left: -25px; top: 15px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3.5px var(--bg);
}
.tl-card {
  display: block; width: 100%; text-align: left;
  background: var(--bg-elev); border-radius: var(--r);
  padding: 12px 14px;
  transition: background .08s, transform .12s var(--ease);
}
.tl-card.tappable:active { background: var(--bg-press); transform: scale(0.985); }
.tl-title {
  font-size: 16px; font-weight: 600; letter-spacing: -0.35px;
  display: flex; align-items: center; gap: 7px;
}
.tl-title .chev { margin-left: auto; }
.tl-title .ti { width: 17px; height: 17px; flex: 0 0 17px; color: var(--label-2); }
.ext-icon { width: 13px; height: 13px; flex: 0 0 13px; color: var(--label-3); }
.tl-note {
  font-size: 14px; line-height: 19px; color: var(--label-2);
  margin-top: 4px; letter-spacing: -0.15px;
}
.tl-warn {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 13px; line-height: 18px; color: var(--red);
  margin-top: 8px; letter-spacing: -0.08px;
}
.tl-warn svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; }
.tl-dur {
  font-size: 12px; color: var(--label-3); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* --- segmented control --------------------------------------------------- */
.seg {
  display: flex; gap: 2px;
  background: var(--fill); border-radius: 9px; padding: 2px;
  margin: 0 var(--gutter) 18px;
}
.seg button {
  flex: 1; height: 32px; border-radius: 7px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.08px;
  color: var(--label); transition: background .18s var(--ease), font-weight .1s;
}
.seg button.on {
  background: var(--bg-elev); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0,0,0,.10), 0 3px 1px rgba(0,0,0,.04);
}

/* --- chips (map filter) -------------------------------------------------- */
.chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--gutter);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; height: 32px; padding: 0 13px; border-radius: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.15px;
  background: var(--bg-elev); color: var(--label);
  border: 0.5px solid var(--sep);
  transition: transform .12s var(--ease);
}
.chip:active { transform: scale(0.94); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.chip.on { background: var(--label); color: var(--bg-elev); border-color: transparent; }
.chip.on .dot { box-shadow: 0 0 0 1.5px var(--bg-elev); }

/* --- search -------------------------------------------------------------- */
.search-wrap { padding: 0 var(--gutter) 12px; }
.search {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 8px; border-radius: 10px;
  background: var(--fill); color: var(--label-2);
}
.search svg { width: 16px; height: 16px; flex: 0 0 16px; }
.search input {
  flex: 1; border: 0; background: none; outline: none;
  font-size: 17px; letter-spacing: -0.41px; color: var(--label);
  user-select: text; -webkit-user-select: text;
}
.search input::placeholder { color: var(--label-2); }
.search .clear { width: 18px; height: 18px; display: none; }
.search.filled .clear { display: block; }

/* --- map ----------------------------------------------------------------- */
.map-screen .scroll { padding-bottom: 0; }
#map {
  position: absolute; inset: 0;
  background: var(--bg-elev-2);
}
.map-body { position: relative; flex: 1; z-index: 0; }
.map-chips {
  position: absolute; z-index: 500; top: 0; left: 0; right: 0;
  padding-left: var(--sal); padding-right: var(--sar);
  background: linear-gradient(to bottom, var(--nav-bg), transparent);
  -webkit-backdrop-filter: none;
}
.map-fab {
  position: absolute; z-index: 500; right: calc(14px + var(--sar));
  bottom: calc(var(--tab-h) + var(--sab) + 18px);
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--nav-bg); color: var(--blue);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: transform .12s var(--ease);
}
.map-fab + .map-fab { bottom: calc(var(--tab-h) + var(--sab) + 70px); }
.map-fab:active { transform: scale(0.9); }
.map-fab svg { width: 21px; height: 21px; }

.pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 8px;
  transform: rotate(-45deg);
  display: grid; place-items: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.pin svg { width: 15px; height: 15px; transform: rotate(45deg); color: #fff; }
.pin.sm { width: 18px; height: 18px; border-width: 1.5px; }
.pin.sm svg { display: none; }
.leaflet-marker-icon.sel .pin { animation: pinpop .34s var(--ease); z-index: 900; }
@keyframes pinpop { 0%{transform:rotate(-45deg) scale(1)} 45%{transform:rotate(-45deg) scale(1.35)} 100%{transform:rotate(-45deg) scale(1.14)} }

.leaflet-container { font: inherit; background: var(--bg-elev-2); }
.leaflet-control-attribution {
  font-size: 10px !important; background: rgba(255,255,255,.75) !important;
  color: #333 !important;
}
[data-theme="dark"] .leaflet-control-attribution,
:root:not([data-theme="light"]) .leaflet-control-attribution { }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(0.94) contrast(0.92) saturate(0.75); }
  :root:not([data-theme="light"]) .leaflet-control-attribution { background: rgba(20,20,22,.72) !important; color: #bbb !important; }
  :root:not([data-theme="light"]) .leaflet-control-attribution a { color: #7ab6ff !important; }
}
[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(0.94) contrast(0.92) saturate(0.75); }
[data-theme="dark"] .leaflet-control-attribution { background: rgba(20,20,22,.72) !important; color: #bbb !important; }
[data-theme="dark"] .leaflet-control-attribution a { color: #7ab6ff !important; }
[data-theme="light"] .leaflet-tile-pane { filter: none; }
.leaflet-control-zoom { display: none; }

/* --- detail view (pushed) ------------------------------------------------ */
.detail {
  position: absolute; inset: 0; z-index: 25;
  display: flex; flex-direction: column;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .34s var(--ease);
  will-change: transform;
}
.detail.in { transform: translateX(0); }
.detail-hero {
  height: 132px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 0 var(--gutter) 14px;
  margin-bottom: 18px;
}
.detail-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(155deg, var(--h1) 0%, var(--h2) 100%);
}
.detail-hero-txt { position: relative; color: #fff; }
.detail-hero-greek {
  font-size: 13px; color: rgba(255,255,255,.75); letter-spacing: 0.01em;
}
.detail-hero-name { font-size: 28px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.15; }

.prose {
  font-size: 16px; line-height: 23px; letter-spacing: -0.3px;
  color: var(--label); padding: 0 var(--gutter) 24px;
  user-select: text; -webkit-user-select: text;
}
.prose.sub { color: var(--label-2); font-size: 15px; line-height: 21px; }

/* --- info cards ---------------------------------------------------------- */
.card {
  background: var(--bg-elev); border-radius: var(--r);
  padding: 14px 16px; margin: 0 var(--gutter) 14px;
}
.card-title {
  font-size: 15px; font-weight: 600; letter-spacing: -0.24px;
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.card-title svg { width: 17px; height: 17px; flex: 0 0 17px; }
.card-text { font-size: 14px; line-height: 20px; color: var(--label-2); letter-spacing: -0.15px; user-select: text; -webkit-user-select: text; }

.callout {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 0 var(--gutter) 22px; padding: 13px 15px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--red) 11%, var(--bg-elev));
  border: 0.5px solid color-mix(in srgb, var(--red) 26%, transparent);
}
.callout svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--red); margin-top: 1px; }
.callout-t { font-size: 15px; font-weight: 600; letter-spacing: -0.24px; }
.callout-x { font-size: 14px; line-height: 19px; color: var(--label-2); margin-top: 2px; letter-spacing: -0.15px; }
.callout.gold { background: color-mix(in srgb, var(--gold) 12%, var(--bg-elev)); border-color: color-mix(in srgb, var(--gold) 28%, transparent); }
.callout.gold svg { color: var(--gold); }
.callout.blue { background: color-mix(in srgb, var(--blue) 10%, var(--bg-elev)); border-color: color-mix(in srgb, var(--blue) 24%, transparent); }
.callout.blue svg { color: var(--blue); }

/* --- tips list ----------------------------------------------------------- */
.tips { padding: 0; }
.tip {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 16px; position: relative;
  font-size: 15px; line-height: 21px; letter-spacing: -0.24px;
  user-select: text; -webkit-user-select: text;
}
.tip + .tip::before {
  content: ''; position: absolute; top: 0; left: 43px; right: 0;
  height: 0.5px; background: var(--sep);
}
.tip-bullet {
  flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px;
  color: var(--blue);
}

/* --- comparison ---------------------------------------------------------- */
.opt {
  background: var(--bg-elev); border-radius: var(--r-lg);
  margin: 0 var(--gutter) 16px; overflow: hidden;
  border: 0.5px solid transparent;
}
.opt.best { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.opt-hd { padding: 16px 16px 12px; }
.opt-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green); margin-bottom: 7px;
}
.opt-flag svg { width: 12px; height: 12px; }
.opt-name { font-size: 18px; font-weight: 600; letter-spacing: -0.44px; }
.opt-price { font-size: 30px; font-weight: 700; letter-spacing: -0.9px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.opt.best .opt-price { color: var(--green); }
.opt-pricenote { font-size: 13px; color: var(--label-2); margin-top: 2px; letter-spacing: -0.08px; }
.opt-valid {
  font-size: 13px; color: var(--label-2); margin-top: 10px;
  display: flex; align-items: center; gap: 6px;
}
.opt-valid svg { width: 14px; height: 14px; }

.opt-rows { border-top: 0.5px solid var(--sep); }
.opt-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 16px; font-size: 14px; letter-spacing: -0.15px;
  position: relative;
}
.opt-row + .opt-row::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px;
  height: 0.5px; background: var(--sep);
}
.opt-row span:last-child { color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pcs { padding: 12px 16px 14px; border-top: 0.5px solid var(--sep); }
.pc { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 20px; letter-spacing: -0.15px; padding: 3px 0; }
.pc svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2.5px; }
.pc.pro svg { color: var(--green); }
.pc.con svg { color: var(--red); }
.pc.con { color: var(--label-2); }

/* --- line rows ----------------------------------------------------------- */
.line-badge {
  flex: 0 0 auto; min-width: 44px; height: 26px; padding: 0 8px;
  border-radius: 7px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.1px;
}

/* --- steps --------------------------------------------------------------- */
.step {
  display: flex; gap: 13px; padding: 13px 16px; position: relative;
  align-items: flex-start;
}
.step + .step::before {
  content: ''; position: absolute; top: 0; left: 45px; right: 0;
  height: 0.5px; background: var(--sep);
}
.step-n {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.step-t { display: block; font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -0.32px; }
.step-x { display: block; font-size: 14px; line-height: 19px; color: var(--label-2); margin-top: 2px; letter-spacing: -0.15px; user-select:text; -webkit-user-select:text; }
.step-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; color: var(--blue); margin-top: 6px;
}
.step-link svg { width: 12px; height: 12px; }

/* --- checkbox rows ------------------------------------------------------- */
.check-box {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  border: 1.6px solid var(--label-3);
  display: grid; place-items: center;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  color: transparent;
}
.check-box svg { width: 13px; height: 13px; transform: scale(0.4); transition: transform .2s var(--ease); }
.row.checked .check-box {
  background: var(--green); border-color: var(--green); color: #fff;
}
.row.checked .check-box svg { transform: scale(1); }
.row.checked .row-title { color: var(--label-3); text-decoration: line-through; }
.row.checked .row-sub { color: var(--label-4); }

.progress-track {
  height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden;
  margin: 0 var(--gutter) 8px;
}
.progress-fill {
  height: 100%; border-radius: 3px; background: var(--green);
  transition: width .4s var(--ease);
}
.progress-label {
  font-size: 13px; color: var(--label-2); margin: 0 var(--gutter) 20px;
  display: flex; justify-content: space-between; letter-spacing: -0.08px;
}

/* --- caveats ------------------------------------------------------------- */
.cav { margin: 0 var(--gutter) 12px; background: var(--bg-elev); border-radius: var(--r); overflow: hidden; }
.cav-hd {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 16px; text-align: left;
  transition: background .08s;
}
.cav-hd:active { background: var(--bg-press); }
.cav-sev { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.cav-sev.high { background: var(--red); }
.cav-sev.med  { background: var(--gold); }
.cav-sev.low  { background: var(--label-3); }
.cav-t { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: -0.32px; }
.cav-chev { width: 13px; height: 8px; color: var(--label-3); transition: transform .28s var(--ease); }
.cav.open .cav-chev { transform: rotate(180deg); }
.cav-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
}
.cav.open .cav-body { grid-template-rows: 1fr; }
.cav-body > div { overflow: hidden; }
.cav-inner { padding: 0 16px 14px; border-top: 0.5px solid var(--sep); margin-top: 0; }
.cav-line { display: flex; gap: 9px; padding-top: 11px; font-size: 14px; line-height: 20px; letter-spacing: -0.15px; user-select:text; -webkit-user-select:text; }
.cav-k {
  flex: 0 0 62px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--label-3); padding-top: 3px;
}
.cav-line.was .cav-k { color: var(--red); }
.cav-line.is  .cav-k { color: var(--green); }
.cav-line.note { color: var(--label-2); }

/* --- sheet --------------------------------------------------------------- */
.scrim {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.32);
  opacity: 0; pointer-events: none;
  transition: opacity .32s var(--ease);
}
.scrim.in { opacity: 1; pointer-events: auto; }

.sheet {
  position: absolute; z-index: 60; left: 0; right: 0; bottom: 0;
  background: var(--bg-elev);
  border-radius: 14px 14px 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(101%);
  transition: transform .38s var(--ease);
  max-height: 82%;
  display: flex; flex-direction: column;
  padding-bottom: var(--sab);
  will-change: transform;
}
.sheet.in { transform: translateY(0); }
.sheet-grab {
  flex: 0 0 auto; padding: 6px 0 2px; display: grid; place-items: center;
  touch-action: none;
}
.sheet-grab::before {
  content: ''; width: 36px; height: 5px; border-radius: 3px; background: var(--label-4);
}
.sheet-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 18px; }
.sheet-hd { padding: 6px var(--gutter) 12px; }
.sheet-greek { font-size: 13px; color: var(--label-2); }
.sheet-name { font-size: 24px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.2; }
.sheet-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* --- install banner ------------------------------------------------------ */
.install {
  position: absolute; z-index: 24; left: 12px; right: 12px;
  bottom: calc(var(--tab-h) + var(--sab) + 12px);
  background: var(--bg-elev); border-radius: var(--r-lg);
  padding: 13px 14px; display: flex; gap: 12px; align-items: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
  transform: translateY(calc(100% + 90px));
  transition: transform .42s var(--ease);
}
.install.in { transform: translateY(0); }
.install img { width: 42px; height: 42px; border-radius: 10px; flex: 0 0 42px; }
.install-b { flex: 1; min-width: 0; }
.install-t { font-size: 15px; font-weight: 600; letter-spacing: -0.24px; }
.install-x { font-size: 12.5px; line-height: 17px; color: var(--label-2); margin-top: 1px; }
.install-x b { color: var(--label); font-weight: 600; }
.install-close { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; color: var(--label-2); }
.install-close svg { width: 12px; height: 12px; }

/* --- misc ---------------------------------------------------------------- */
.empty {
  padding: 60px 40px; text-align: center; color: var(--label-3);
  font-size: 15px; line-height: 21px;
}
.tabular { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   LIQUID GLASS — překryvná vrstva (iOS 26)
   Skleněné materiály potřebují za sebou barvu, jinak nejsou vidět.
   Proto ambientní podklad + průsvitné povrchy s refrakcí a světelnou hranou.
   ========================================================================== */

:root {
  --glass:        rgba(255,255,255,0.58);
  --glass-strong: rgba(255,255,255,0.74);
  --glass-thin:   rgba(255,255,255,0.42);
  --glass-edge:   rgba(255,255,255,0.70);
  --glass-spec:   rgba(255,255,255,0.85);
  --glass-shade:  0 10px 34px rgba(12,38,74,0.13), 0 2px 8px rgba(12,38,74,0.07);
  --glass-blur:   saturate(190%) blur(26px);
  --veil:         rgba(240,242,248,0.90);
  --press:        rgba(10,60,120,0.09);

  --tab-h:   58px;
  --tab-gap: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass:        rgba(30,30,34,0.56);
    --glass-strong: rgba(34,34,38,0.74);
    --glass-thin:   rgba(40,40,46,0.38);
    --glass-edge:   rgba(255,255,255,0.13);
    --glass-spec:   rgba(255,255,255,0.22);
    --glass-shade:  0 10px 34px rgba(0,0,0,0.48), 0 2px 8px rgba(0,0,0,0.32);
    --veil:         rgba(10,10,13,0.88);
    --press:        rgba(255,255,255,0.10);
  }
}
[data-theme="dark"] {
  --glass:        rgba(30,30,34,0.56);
  --glass-strong: rgba(34,34,38,0.74);
  --glass-thin:   rgba(40,40,46,0.38);
  --glass-edge:   rgba(255,255,255,0.13);
  --glass-spec:   rgba(255,255,255,0.22);
  --glass-shade:  0 10px 34px rgba(0,0,0,0.48), 0 2px 8px rgba(0,0,0,0.32);
  --veil:         rgba(10,10,13,0.88);
  --press:        rgba(255,255,255,0.10);
}

/* --- ambientní podklad --------------------------------------------------- */
body {
  background:
    radial-gradient(58% 42% at 10% 2%,  color-mix(in srgb, var(--blue) 20%, transparent), transparent 70%),
    radial-gradient(52% 38% at 96% 14%, color-mix(in srgb, #F5820B 14%, transparent), transparent 72%),
    radial-gradient(64% 44% at 78% 96%, color-mix(in srgb, var(--green) 13%, transparent), transparent 72%),
    radial-gradient(60% 40% at 4% 88%,  color-mix(in srgb, var(--purple) 12%, transparent), transparent 74%),
    var(--bg);
  background-attachment: fixed;
}

/* --- obecný skleněný povrch ---------------------------------------------- */
.list, .card, .opt, .cav, .callout, .seg, .search, .chip, .install,
.map-fab, .btn.secondary, .sheet, .nav, .tabbar {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.list, .card, .opt, .cav {
  background: var(--glass);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--glass-shade), inset 0 1px 0 var(--glass-spec);
  border-radius: 18px;
}
.opt { border-radius: 22px; }
.opt.best { border-color: color-mix(in srgb, var(--green) 50%, var(--glass-edge)); }

/* Řádky uvnitř skla musí být průhledné, jinak sklo zmizí. */
.row, .row:active, .row.static:active { background: transparent; }
.row:active { background: var(--press); }
.row.static:active { background: transparent; }
.row + .row::before,
.opt-row + .opt-row::before,
.tip + .tip::before,
.step + .step::before { background: color-mix(in srgb, var(--label) 12%, transparent); }

/* --- navigační lišta ------------------------------------------------------ */
.nav {
  background: var(--glass-thin);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.nav.scrolled {
  background: var(--glass);
  box-shadow: 0 1px 0 var(--glass-edge);
}
.nav::after { background: color-mix(in srgb, var(--label) 10%, transparent); }

.nav-btn {
  padding: 7px 12px; margin: 0;
  border-radius: 999px;
  background: var(--glass-thin);
  border: 0.5px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-spec);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform .14s var(--ease), opacity .12s;
}
.nav-btn:active { transform: scale(0.93); opacity: .7; }

/* --- plovoucí skleněný tab bar -------------------------------------------- */
.tabbar {
  left: 12px; right: 12px;
  bottom: calc(var(--sab) + var(--tab-gap));
  height: var(--tab-h);
  padding: 0 4px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--glass-shade), inset 0 1px 0 var(--glass-spec);
  overflow: hidden;
}
.tabbar::before {
  /* horní světelný odlesk místo dělící linky */
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-spec), transparent);
}
.tab {
  height: var(--tab-h);
  border-radius: 999px;
  position: relative;
  transition: color .2s var(--ease);
}
.tab::before {
  /* pilulka, která se rozsvítí pod aktivním panelem */
  content: ''; position: absolute; inset: 6px 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 15%, transparent);
  opacity: 0; transform: scale(0.82);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.tab.active::before { opacity: 1; transform: scale(1); }
.tab > * { position: relative; }

.scroll {
  padding-bottom: calc(var(--tab-h) + var(--sab) + var(--tab-gap) + 26px);
}

/* --- mapové ovládání ------------------------------------------------------ */
.map-fab {
  background: var(--glass-strong);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--glass-shade), inset 0 1px 0 var(--glass-spec);
  border-radius: 999px;
  bottom: calc(var(--tab-h) + var(--sab) + var(--tab-gap) + 16px);
}
.map-fab + .map-fab { bottom: calc(var(--tab-h) + var(--sab) + var(--tab-gap) + 68px); }
.map-chips { background: none; }

.chip {
  background: var(--glass-strong);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--glass-shade), inset 0 1px 0 var(--glass-spec);
}
.chip.on {
  background: color-mix(in srgb, var(--blue) 88%, transparent);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
}
.chip.on .dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,.75); }

/* --- tlačítka ------------------------------------------------------------- */
.btn {
  border-radius: 999px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--blue) 34%, transparent),
              inset 0 1px 0 rgba(255,255,255,.32);
}
.btn.secondary {
  background: var(--glass-strong); color: var(--blue);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--glass-shade), inset 0 1px 0 var(--glass-spec);
}

.seg, .search {
  background: var(--glass);
  border: 0.5px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-spec);
  border-radius: 999px;
}
.seg button { border-radius: 999px; }
.seg button.on {
  background: var(--glass-strong);
  box-shadow: 0 3px 10px rgba(10,40,80,.12), inset 0 1px 0 var(--glass-spec);
}
.search { height: 38px; padding: 0 12px; }

/* --- hero a detailní záhlaví ---------------------------------------------- */
.hero {
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(8,44,92,.30), inset 0 1px 0 rgba(255,255,255,.28);
  border: 0.5px solid rgba(255,255,255,.18);
}
.hero::before {
  /* skleněný odlesk přes horní hranu */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(168deg, rgba(255,255,255,.20) 0%, transparent 46%);
  pointer-events: none;
}
.detail-hero { border-radius: 0 0 26px 26px; margin-bottom: 20px; }
.detail-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(255,255,255,.22) 0%, transparent 52%);
  pointer-events: none;
}

/* --- karty časové osy ----------------------------------------------------- */
.tl-card {
  background: var(--glass);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--glass-shade), inset 0 1px 0 var(--glass-spec);
  border-radius: 16px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.tl-card.tappable:active { background: var(--glass-strong); transform: scale(0.985); }
.tl-dot { box-shadow: 0 0 0 3.5px var(--veil), 0 2px 6px rgba(0,0,0,.18); }
.tl::before { background: color-mix(in srgb, var(--label) 14%, transparent); }

/* --- vysunutý detail ------------------------------------------------------ */
.detail {
  background: var(--veil);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
}

/* --- sheet ---------------------------------------------------------------- */
.sheet {
  background: var(--glass-strong);
  border: 0.5px solid var(--glass-edge);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -12px 44px rgba(8,32,70,.22), inset 0 1px 0 var(--glass-spec);
}
.scrim { background: rgba(6,16,34,0.30); }

/* --- install banner ------------------------------------------------------- */
.install {
  background: var(--glass-strong);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--glass-shade), inset 0 1px 0 var(--glass-spec);
  border-radius: 22px;
  bottom: calc(var(--tab-h) + var(--sab) + var(--tab-gap) + 12px);
}
.install-close { background: var(--press); }

/* --- štítky --------------------------------------------------------------- */
.badge {
  background: color-mix(in srgb, var(--label) 8%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--label) 8%, transparent);
  border-radius: 999px; padding: 3px 9px;
}
.badge.gold  { border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.badge.green { border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.badge.red   { border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.badge.blue  { border-color: color-mix(in srgb, var(--blue) 30%, transparent); }

.callout { border-radius: 18px; }
.line-badge { border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.row-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 2px 6px rgba(0,0,0,.12); border-radius: 9px; }
.progress-track { background: var(--press); }

/* Průhlednost je drahá — na slabších zařízeních ji systém vypne sám. */
@media (prefers-reduced-transparency: reduce) {
  .list, .card, .opt, .cav, .tl-card, .sheet, .tabbar, .nav, .chip,
  .btn.secondary, .map-fab, .install, .seg, .search {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--bg-elev);
  }
  body { background: var(--bg); }
}

/* --- přepínač cesty v navigační liště -------------------------------------- */
.trip-seg {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 2px;
  border-radius: 999px;
  background: var(--glass);
  border: 0.5px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-spec);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  max-width: calc(100% - 24px);
}
.trip-seg button {
  min-width: 78px; height: 30px; padding: 0 14px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.15px;
  color: var(--label-2);
  white-space: nowrap;
  transition: background .24s var(--ease), color .2s, transform .14s var(--ease);
}
.trip-seg button:active { transform: scale(0.94); }
.trip-seg button.on {
  background: var(--blue); color: #fff; font-weight: 600;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--blue) 42%, transparent),
              inset 0 1px 0 rgba(255,255,255,.35);
}