/* Masar MVP. Values from masar-handoff/design/tokens.json. Logical properties (start/end) so he/ar mirror. */
@font-face { font-family: 'OE Alchemist Pro'; src: url(fonts/Alchemist-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'OE Alchemist Pro'; src: url(fonts/Alchemist-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'OE Alchemist Pro'; src: url(fonts/Alchemist-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url(fonts/Thmanyah-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url(fonts/Thmanyah-Medium.woff2) format('woff2'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url(fonts/Thmanyah-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --accent: #E4F53A; --on-accent: #111418; --accent-soft: #F4F9C4;
  --ink: #111418; --ink2: #56616C; --ink3: #8A949E;
  --sheet: #F3F4F1; --screen-light: #ECEEEC; --card: #fff; --chip: #ECEEED; --control: #E3E6E8; --divider: #E0E3E1; --handle: #C3C9CD;
  --home-bg: #5F7589; --map-bg: #52677A; --wallet-bg: #1F2A35; --canvas: #1B2530;
  --warning: #F5A524; --warning-bg: #FFF0D1; --warning-ink: #4A3200; --success: #2F9E44; --success-bg: #DFF3E4; --live: #7CF0A0; --danger: #FF5A4E;
  --glass-dark: rgba(27,40,56,.6); --glass-strong: rgba(27,40,56,.72); --glass-light: rgba(255,255,255,.72); --glass-toast: rgba(17,20,24,.82);
  --scrim: rgba(15,22,30,.34);
  --ease: cubic-bezier(.2,.8,.2,1);
  --font: 'OE Alchemist Pro', 'Noto Sans', 'Noto Sans Hebrew', system-ui, sans-serif;
}
html[lang=he] { --font: 'OE Alchemist Pro', 'Noto Sans Hebrew', system-ui, sans-serif; }
html[lang=ar] { --font: 'Thmanyah Sans', 'Noto Sans Arabic', system-ui, sans-serif; }
html[lang=pt] { --font: 'Noto Sans', 'OE Alchemist Pro', system-ui, sans-serif; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--canvas); font-family: var(--font); color: var(--ink); overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
button:active:not(:disabled) { transform: scale(.96); }
/* No iOS callout/text selection on long-pressable buttons; no double-tap zoom delay. */
button { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
button:disabled { opacity: .45; cursor: default; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.big { width: 30px; height: 30px; }
[dir=rtl] .ic.dir { transform: scaleX(-1); }
[hidden] { display: none !important; }
bdi { unicode-bidi: isolate; }

/* Phone frame on desktop, full-bleed on phones */
.phone { position: relative; width: 100%; height: 100dvh; overflow: hidden; background: var(--map-bg); margin: 0 auto; isolation: isolate; }
@media (min-width: 520px) {
  body { display: grid; place-items: center; }
  .phone { width: 390px; height: min(844px, 96dvh); border-radius: 44px; box-shadow: 0 0 0 10px #0B1016, 0 30px 80px rgba(0,0,0,.5); }
}
.map { position: absolute; inset: 0; }
.map.off { visibility: hidden; }
.map.static { background-size: cover; background-position: center; background-color: var(--map-bg); }
.map-msg { position: absolute; inset: 40% 24px auto; text-align: center; color: #fff; font-weight: 600; background: var(--glass-toast); padding: 16px; border-radius: 18px; z-index: 2; }
.mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib { opacity: .55; }
.mapboxgl-ctrl-bottom-left { bottom: 100px; }

/* Screens */
.screen { position: absolute; inset: 0; z-index: 3; }
.over-map { pointer-events: none; }
.over-map > * { pointer-events: auto; }
.page { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.page::-webkit-scrollbar { display: none; }
.card-in { animation: fadeUp .45s var(--ease) both; }
.card-in:nth-child(2) { animation-delay: 40ms; } .card-in:nth-child(3) { animation-delay: 80ms; } .card-in:nth-child(4) { animation-delay: 120ms; }
.card-in:nth-child(5) { animation-delay: 160ms; } .card-in:nth-child(6) { animation-delay: 200ms; }

/* Buttons */
.glass { background: var(--glass-dark); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255,255,255,.08); color: #fff; }
.ib { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; }
.ib.soft { background: var(--glass-light); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); color: var(--ink); }
.plan-page .ib.soft { background: rgba(255,255,255,.18); color: #fff; }
.ib.soft.dark { background: rgba(255,255,255,.08); color: #fff; }
.ib.white { background: #fff; color: var(--ink); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.ib.slate { background: #6B7680; color: #fff; }
.ib-s { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ib-s.light { background: var(--chip); }
.ib-s.white { background: #fff; }
.ib-s.dark { background: rgba(255,255,255,.1); color: #fff; }
.ib-s.accent { background: var(--accent); color: var(--ink); }
.ib-s.plain { color: currentColor; }
.btn-go { width: 100%; height: 56px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; flex: none; }
.btn-go .ic { color: var(--accent); }
.btn-dark { height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; flex: none; }
.btn-dark.wide { width: 100%; height: 52px; margin-top: 10px; }
.btn-light { height: 44px; padding: 0 16px; border-radius: 999px; background: var(--chip); font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.row2 { display: flex; gap: 8px; margin-top: 12px; }
.row2 .btn-dark { flex: 1; }
.btn-lime { height: 44px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 600; flex: 1; }
.station-go button { height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.station-go .ic { width: 20px; height: 20px; }
.pill3d.on { background: var(--accent); color: var(--ink); }

/* Header */
.hdr { position: absolute; inset-inline: 16px; top: max(26px, env(safe-area-inset-top)); display: flex; gap: 10px; align-items: center; z-index: 5; }
.page .hdr { position: relative; inset-inline: auto; top: auto; padding: max(26px, env(safe-area-inset-top)) 16px 12px; }
.hdr-title { flex: 1; text-align: center; font-size: 18px; font-weight: 600; color: inherit; }
.hdr-title.start { text-align: start; font-size: 30px; font-weight: 700; }
.place { flex: 1; min-width: 0; height: 64px; border-radius: 999px; display: flex; align-items: center; gap: 12px; padding: 6px; }
.place.glass { background: var(--glass-strong); }
.place.white { background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.place.soft { background: var(--glass-light); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.place-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; flex: none; }
.place-ic.ink { background: var(--ink); color: var(--accent); }
.place-tx { display: flex; flex-direction: column; min-width: 0; }
.place-tx b { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-tx small { font-size: 13px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
button.place { text-align: start; }
.from-lbl { font-size: 11px !important; text-transform: uppercase; letter-spacing: .08em; line-height: 1.1; opacity: .7; }
html[lang=he] .from-lbl, html[lang=ar] .from-lbl { letter-spacing: 0; }
.from-btn { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.from-btn small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; font-weight: 500; }
.from-btn b { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 600; }
.from-btn b .ic { width: 16px; height: 16px; opacity: .8; }
.mk-pin { color: var(--ink); filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.mk-pin .ic { width: 40px; height: 40px; fill: var(--accent); stroke: var(--ink); stroke-width: 1.6; }
.mic-dot { position: absolute; inset-inline-end: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; border: 2px solid #1B2836; }
.mic-dot .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.tip { position: absolute; top: 66px; inset-inline-end: 0; background: var(--glass-toast); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 12px; animation: fadeUp .45s var(--ease); z-index: 6; }
.tip::before { content: ''; position: absolute; top: -6px; inset-inline-end: 22px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--glass-toast); }

/* Main */
.fabs { position: absolute; top: max(96px, calc(env(safe-area-inset-top) + 70px)); inset-inline-end: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 4; }
.pill3d b { font-size: 15px; }
.near { position: absolute; inset-inline: 16px; bottom: 112px; z-index: 4; background: var(--sheet); border-radius: 30px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.near-body { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: start; padding: 20px 22px; }
.near-body small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); font-weight: 500; }
html[lang=he] .near-body small, html[lang=ar] .near-body small { letter-spacing: 0; }
.near-body > b { font-size: 22px; font-weight: 700; padding-inline-end: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.near-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 15px; min-width: 0; }
.near-row .dest { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.near-go { position: absolute; top: 16px; inset-inline-end: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; pointer-events: none; }

/* Line badge, minutes, clock */
.lb { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; padding: 0 9px; border-radius: 9px; font-weight: 700; font-size: 15px; direction: ltr; flex: none; }
.lb.s { min-width: 32px; height: 24px; font-size: 12px; border-radius: 7px; padding: 0 6px; }
.lb.l { min-width: 70px; height: 70px; font-size: 26px; border-radius: 18px; }
.mins { background: var(--accent); color: var(--ink); font-weight: 700; border-radius: 999px; padding: 6px 12px; white-space: nowrap; flex: none; unicode-bidi: isolate; }
.clock { color: var(--ink2); font-size: 13px; direction: ltr; unicode-bidi: isolate; }

/* Nav */
.nav { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: 176px; height: 64px; border-radius: 999px; display: flex; align-items: center; justify-content: space-around; padding: 0 6px; z-index: 8;
  background: var(--glass-light); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.nav button { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.nav button.on { background: var(--ink); color: #fff; }
body[data-screen=ticket] .nav { background: #fff; }

/* Coming soon (ticketing) */
.screen.locked { overflow: hidden; }
.soon-overlay { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 24px;
  background: rgba(17,20,24,.35); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.soon-card { background: var(--sheet); color: var(--ink); border-radius: 34px; padding: 28px 24px; text-align: center; max-width: 300px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.soon-card h2 { font-size: 26px; font-weight: 700; }
.soon-card p { color: var(--ink2); font-size: 15px; line-height: 1.4; }
.soon-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.soon-ic .ic { width: 30px; height: 30px; }

/* Line view: From/To card */
.line-card { position: absolute; inset-inline: 0; bottom: 0; z-index: 6; background: var(--sheet); border-radius: 36px 36px 0 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: up .45s var(--ease); }
.lc-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lc-end { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 20px; padding: 12px; text-align: start; min-width: 0; }
.lc-end span { display: flex; flex-direction: column; min-width: 0; }
.lc-end small { color: var(--ink2); font-size: 12px; }
.lc-end b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-end.empty b { color: var(--ink3); font-weight: 500; }
.line-card .btn-go:disabled { opacity: .35; }
.lc-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; padding-bottom: 6px; scrollbar-width: none; }
.lc-list::-webkit-scrollbar { display: none; }
.search-in.lc-search { margin-bottom: 10px; height: 48px; flex: none; }
/* Fixed-height picker: the sheet keeps its size while the list inside filters and scrolls. */
.msheet.tall { height: 88%; max-height: 88%; display: flex; flex-direction: column; overflow: hidden; }
.msheet.tall .lc-list { flex: 1; max-height: none; min-height: 0; }
.lc-h { margin: 8px 6px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); font-weight: 600; }
html[lang=he] .lc-h, html[lang=ar] .lc-h { letter-spacing: 0; }
.lc-global .res { margin-bottom: 6px; }
.lc-dot { width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--ink); flex: none; }

/* Home, as the prototype's Plan board (masar-prototype/project/Plan.dc.html) */
.page .hdr.ph-glass { position: sticky; top: 0; z-index: 5; background: rgba(95,117,137,.55);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
.pcard2 { display: block; width: calc(100% - 32px); margin: 14px 16px 0; background: #cfd8e0; color: #2a333c; border-radius: 40px; padding: 14px; text-align: start; }
.pcard2 .pcard-hd h3 { font-size: 20px; font-weight: 600; }
.pcard2 .pcard-hd p { color: #3f4a55; font-size: 14px; }
.pcard-ic.muted { background: #b9c5d0; color: #2a333c; }
.p2-box { position: relative; min-height: 158px; border-radius: 30px; background: #e4e9ee; padding: 20px 22px; display: flex; justify-content: space-between; gap: 12px; }
.p2-box .bignum b { font-size: 72px; font-weight: 600; line-height: 74px; color: #2a333c; }
.p2-box .bignum sup { font-size: 18px; font-weight: 600; color: #2a333c; margin-top: 6px; }
.p2-box > p { width: 130px; font-size: 17px; font-weight: 500; line-height: 22px; color: #3f4a55; margin-top: 8px; }
.p2-box .skel { width: 100%; height: 110px; margin: 0; }
.p2-empty { font-size: 17px; font-weight: 600; }
.sec-hd { display: flex; justify-content: space-between; align-items: center; margin: 26px 20px 10px; }
.sec-hd h3 { font-size: 20px; font-weight: 600; color: #fff; }
.sec-hd .link { color: #fff; font-size: 14px; }
.my-lines { display: flex; gap: 12px; padding: 4px 16px 6px; overflow-x: auto; scrollbar-width: none; }
.my-lines::-webkit-scrollbar { display: none; }
.ml { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ml-circle { position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; letter-spacing: -.02em; box-shadow: 0 8px 18px rgba(20,30,40,.22); }
.ml-circle .ic { width: 28px; height: 28px; }
.ml.add .ml-circle { border: 2px dashed rgba(255,255,255,.55); color: #fff; box-shadow: none; }
.ml-cap { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
.ml .x { position: absolute; top: -2px; inset-inline-end: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--danger); color: #fff; display: grid; place-items: center; }
.ml .x .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.recent-card { margin: 0 16px; background: #fff; border-radius: 32px; padding: 8px 4px; }
.recent-card .rrow { height: 64px; padding: 0 10px; margin: 0; background: none; border-radius: 20px; gap: 12px; }
.recent-card .rrow-ic { width: 44px; height: 44px; background: #eceeed; }
.recent-card .rrow-ic .ic { width: 18px; height: 18px; }
.dur-pill { height: 30px; padding: 0 12px; border-radius: 15px; background: #eceeed; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; white-space: nowrap; flex: none; }
/* Live signal: only rendered for real-time departures */
.live-sig { display: inline-flex; width: 14px; height: 14px; flex: none; }
.live-sig svg { width: 14px; height: 14px; fill: none; stroke: #2F9E44; stroke-width: 2; stroke-linecap: round; }
.live-sig circle { fill: #2F9E44; stroke: none; }
.plan-page .live-sig svg { stroke: #7CF0A0; } .plan-page .live-sig circle { fill: #7CF0A0; }
.live-sig .a1 { animation: sig 1.4s ease-in-out infinite; }
.live-sig .a2 { animation: sig 1.4s ease-in-out .35s infinite; }
@keyframes sig { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }

/* Location re-ask */
.loc-ask { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 4px 4px 8px; }
.loc-ask .row2 { width: 100%; }
.loc-help { background: #fff; border-radius: 18px; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: var(--ink2); text-align: start; }

/* Loading screen */
.splash { position: absolute; inset: 0; z-index: 60; background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .4s var(--ease), visibility .4s; }
.splash.done { opacity: 0; visibility: hidden; }
.splash img { border-radius: 24px; animation: fadeUp .5s var(--ease) both; }
.splash-name { font-size: 30px; font-weight: 600; letter-spacing: -.01em; animation: fadeUp .5s var(--ease) .06s both; }
.splash-bar { width: 140px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 18px; }
.splash-bar i { display: block; width: 40%; height: 100%; border-radius: 99px; background: var(--accent); animation: slide 1.2s var(--ease) infinite; }
.splash small { color: #9AA6B2; font-size: 14px; min-height: 1.2em; }
@keyframes slide { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
[dir=rtl] .splash-bar i { animation-direction: reverse; }

/* Toast */
.toast { position: absolute; top: max(24px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 50; background: var(--glass-toast); backdrop-filter: blur(16px); color: #fff; font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: 999px; max-width: calc(100% - 32px); text-align: center; animation: pop .35s var(--ease); }

/* Map markers */
.me { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--ink); animation: ping 2s infinite; }
.mk-origin { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--ink); }
.mk-dest { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); border: 4px solid var(--ink); display: grid; place-items: center; }
.mk-dest i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.mk-label span { display: block; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-family: var(--font); }
.mk-label.lime span { background: var(--accent); color: var(--ink); }
.mk-label.line span { background: #fff; color: var(--ink); font-size: 12px; padding: 5px 10px; direction: ltr; }
.mk-transfer { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 5px 14px 5px 5px; font-weight: 600; font-size: 13px; font-family: var(--font); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.mk-transfer.compact { padding: 3px; gap: 0; }
.mk-transfer.compact span { display: none; }
.mk-transfer span { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-transfer.open-left { flex-direction: row-reverse; padding: 5px 5px 5px 14px; }
.mk-transfer .ic { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--ink); color: var(--accent); }
.mk-bus { background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 3px 9px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.mk-bus .ic { width: 20px; height: 20px; }

/* Modal sheets */
.modal { position: absolute; inset: 0; z-index: 30; }
.scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .3s; }
.msheet { position: absolute; inset-inline: 0; bottom: 0; max-height: 86%; overflow-y: auto; background: var(--sheet); border-radius: 40px 40px 0 0; padding: 0 20px max(24px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: up .45s var(--ease); }
.msheet.float { inset-inline: 16px; bottom: auto; top: 34%; border-radius: 34px; padding-bottom: 20px; animation: fadeUp .45s var(--ease); }
.handle { width: 100%; height: 30px; display: grid; place-items: center; flex: none; }
.handle i { width: 44px; height: 5px; border-radius: 3px; background: var(--handle); }
.sheet-title { font-size: 22px; font-weight: 700; margin: 4px 0 14px; }
.kicker { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); font-weight: 600; margin: 14px 0 8px; }
.muted-p { color: var(--ink2); font-size: 15px; margin-bottom: 12px; }
.voice .muted-p { color: #9AA6B2; }
.menu-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.menu-list > button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: #fff; border-radius: 20px; text-align: start; font-weight: 600; font-size: 16px; }
.menu-list > button span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.menu-list > button small { color: var(--ink2); font-weight: 400; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-list > button.on { box-shadow: inset 0 0 0 2px var(--ink); }
.menu-list > button.danger { color: #A1260F; }
.menu-list .edit { color: var(--ink3); }
.switch { width: 44px; height: 26px; border-radius: 999px; background: var(--control); position: relative; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch.on { background: var(--ink); }
.switch.on::after { inset-inline-start: 21px; background: var(--accent); }

/* Station popup + departure cards */
.station-hd { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.station-hd h2 { font-size: 22px; font-weight: 700; }
.station-hd p { color: var(--ink2); font-size: 14px; margin-top: 4px; }
.dep-cards { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 6px; margin-inline: -16px; }
.dep-cards::-webkit-scrollbar { display: none; }
.dcard { flex: none; width: 132px; min-height: 150px; background: #fff; border-radius: 26px; padding: 14px; display: flex; flex-direction: column; gap: 10px; text-align: start; }
.dcard-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.dcard-top small { color: var(--ink2); font-size: 11px; font-weight: 600; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard .go { width: 34px; height: 34px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; }
.dcard .go .ic { width: 18px; height: 18px; }
.dcard-dest { font-size: 14px; font-weight: 500; line-height: 1.25; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dcard-min { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
.dcard-min b { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dcard-min sup { font-size: 13px; }
.dcard-min small { width: 100%; color: var(--ink3); font-size: 12px; direction: ltr; text-align: start; }
.empty { color: var(--ink2); text-align: center; padding: 20px 12px; }
.fine { color: var(--ink3); font-size: 12px; text-align: center; margin: 14px 0 0; }
.skel { height: 64px; border-radius: 24px; margin: 8px 0; background: linear-gradient(90deg, #e8eae7, #f7f8f6, #e8eae7); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.skel.big { height: 300px; margin: 16px; } .skel.tall { height: 120px; }

/* Chips */
.chips { display: flex; gap: 8px; }
.chips.scroll-x, .scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; }
.chip { height: 40px; padding: 0 18px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; flex: none; display: inline-flex; align-items: center; }
.chip.on, .chip.ink { background: var(--ink); color: var(--accent); }
.chip.lime { background: var(--accent); color: var(--ink); }
.chip.soft { background: var(--glass-light); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.chip.light { background: var(--accent-soft); height: 34px; padding: 0 14px; font-size: 14px; }
.msheet .chip { background: #fff; box-shadow: inset 0 0 0 1px var(--divider); }
.msheet .chip.on { background: var(--ink); color: #fff; box-shadow: none; }

/* Rows (search results, recent, lists) */
.dep-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: start; }
.dep-tx b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep-tx small { color: var(--ink2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.res { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 12px 14px; background: var(--card); border-radius: 18px; margin-bottom: 6px; }
.res-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; flex: none; }
.res-ic.lime { background: var(--accent); color: var(--ink); }
/* Same look as the map's station icon; rail stations in the rail colour; places as a pin. */
.res-ic.station { background: var(--ink); color: var(--accent); border-radius: 12px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--divider); }
.res-ic.station.rail { background: #DCE7F3; color: #35618F; }
.res-ic.place { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.res-ic .ic { width: 20px; height: 20px; }
.dist { color: var(--ink3); font-size: 13px; flex: none; direction: ltr; }

/* Search overlay (js/screens/search.js) */
.search { position: absolute; inset: 0; z-index: 40; background: var(--sheet); display: flex; flex-direction: column; animation: fade .25s; padding-top: max(20px, env(safe-area-inset-top)); }
.search-bar { display: flex; gap: 8px; align-items: center; padding: 8px 16px 12px; }
.search-in { flex: 1; min-width: 0; height: 52px; border-radius: 16px; background: var(--card); display: flex; align-items: center; gap: 8px; padding: 0 14px; box-shadow: inset 0 0 0 1px var(--divider); }
.search-in:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.search-in .ic { color: var(--ink3); width: 20px; height: 20px; }
.search-in input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 16px; }
.search-bar > input { flex: 1; min-width: 0; height: 52px; border-radius: 16px; border: 0; background: var(--card); padding: 0 16px; font-size: 16px; outline: none; box-shadow: inset 0 0 0 1px var(--divider); }
.search-title { font-size: 22px; font-weight: 700; padding: 0 22px 6px; }
.results { overflow-y: auto; padding: 0 16px 24px; }
.results h4 { margin: 14px 6px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); font-weight: 600; }

/* Voice */
.voice { position: absolute; inset: 0; z-index: 45; background: #07090C; color: #fff; display: flex; flex-direction: column; padding: max(28px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); animation: fade .3s; overflow: hidden; }
.ring { position: absolute; inset: 0; pointer-events: none; }
.ring::before { content: ''; position: absolute; inset: -50%; background: conic-gradient(from 0deg, #E4F53A, #7CF0C6, #8FB8F2, #9B6BEA, #FF8A5B, #E4F53A); animation: spin 3s linear infinite; }
.ring::after { content: ''; position: absolute; inset: 4px; background: #07090C; border-radius: 42px; }
@media (max-width: 519px) { .ring::after { border-radius: 0; } }
.voice.idle .ring { opacity: .35; }
.voice > *:not(.ring) { position: relative; z-index: 1; }
.voice-top { display: flex; justify-content: space-between; align-items: center; }
.voice-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border-radius: 999px; padding-block: 6px; padding-inline: 6px 16px; font-weight: 600; }
.voice-pill i { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; }
.voice-pill .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.voice-tx { font-size: 34px; font-weight: 600; line-height: 1.2; margin: 18% 12px 24px; min-height: 2.4em; }
.voice-tx.muted { color: #9AA6B2; font-size: 26px; }
.voice-res { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; overflow-y: auto; }
.vcard { background: #fff; color: var(--ink); border-radius: 30px; padding: 16px; animation: fadeUp .45s var(--ease); }
.vcard-hd, .vcard-row { display: flex; align-items: center; gap: 12px; }
.vcard .res-ic { width: 52px; height: 52px; background: var(--accent); }
.vbtn { width: 100%; height: 52px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 16px; margin-top: 12px; }
.vchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; }
.vchips button { flex: none; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 600; white-space: nowrap; }
.voice-bot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 18px; }
.mic { width: 80px; height: 80px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(228,245,58,.18); }
.mic .ic { width: 30px; height: 30px; stroke-width: 2.2; }
.voice.rec .mic { animation: pulse 1.2s infinite; }
.voice-bot small { color: #9AA6B2; font-size: 14px; text-align: center; }

/* Stop page */
.stop-page { min-height: 100%; background: #E6E7E6; padding-bottom: 120px; }
.hero { display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; width: 100%; text-align: start; }
.kicker.pick { margin: 10px 20px 8px; }
.train-no { font-size: 13px; font-weight: 600; color: #2F3A00; }
.dcard-op { display: flex; align-items: center; gap: 5px; color: var(--ink2); font-size: 11px; font-weight: 600; min-width: 0; }
.dcard-op .op-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Operator marks: neutral monogram (or an authorised logo from img/operators) */
.op-mark { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; flex: none; font-size: 9.5px; font-weight: 700; color: var(--ink); letter-spacing: .02em; font-family: 'Noto Sans', system-ui, sans-serif; }
.op-mark.img { object-fit: contain; background: #fff; }
.hero-line .op-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb .lb-ic { width: 70%; height: 70%; max-width: 20px; max-height: 20px; stroke-width: 2; }
.lb.s .lb-ic { max-width: 16px; max-height: 16px; }
.hero-blob { background: var(--accent); border-start-end-radius: 200px; border-end-end-radius: 200px; padding: 28px 40px 28px 32px; padding-inline: 32px 48px; min-width: 58%; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 200px; }
.hero-min { display: flex; align-items: flex-start; gap: 4px; direction: ltr; justify-content: flex-start; }
[dir=rtl] .hero-min { justify-content: flex-end; }
.hero-min b { font-size: 96px; font-weight: 700; line-height: .85; letter-spacing: -.03em; }
.hero-min sup { font-size: 24px; font-weight: 500; margin-top: -4px; }
.hero-line { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.hero-line b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-side { flex: 1; min-width: 0; padding-inline-end: 16px; display: flex; flex-direction: column; gap: 8px; }
.hero-dest { font-size: 24px; line-height: 1.2; font-weight: 500; }
.hero-side small { color: var(--ink2); font-size: 14px; }
.stop-page .dep-cards { padding-inline: 16px; margin-inline: 0; }
.chart { margin: 18px 16px 0; background: #5F7688; color: #fff; border-radius: 36px; padding: 22px 20px 16px; }
.chart-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.chart-hd h3 { font-size: 19px; font-weight: 600; }
.chip-note { background: #F2F4F5; color: var(--ink); font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 14px; white-space: nowrap; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; direction: ltr; }
.bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.bar { width: 100%; max-width: 22px; border-radius: 999px; position: relative; min-height: 8px; transition: height .5s var(--ease); }
.bar span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; opacity: 0; }
.bar-col.now .bar { box-shadow: 0 0 0 3px #F08A00; }
.bar-col.now .bar span { opacity: 1; font-weight: 700; }
.bar-col small { font-size: 11px; color: #DCE3EA; height: 14px; white-space: nowrap; }
.bar-col.now small { font-weight: 700; color: #fff; }
.fb-btn { position: absolute; bottom: max(28px, calc(env(safe-area-inset-bottom) + 4px)); inset-inline-end: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(228,245,58,.35), 0 8px 20px rgba(0,0,0,.2); z-index: 9; }
.fb-btn.trip { z-index: 7; }

/* Plan page */
.plan-page { min-height: 100%; background: var(--home-bg); color: #fff; padding-bottom: 120px; }
.plan-page .hdr-title { color: #fff; }
.hello { padding: 18px 20px 8px; }
.hello h2 { font-size: 46px; line-height: 1.12; font-weight: 500; letter-spacing: -.015em; }
html[lang=pt] .hello h2 { font-size: 38px; }
.live-pill { display: inline-flex; vertical-align: middle; align-items: center; gap: 8px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 600; border-radius: 999px; padding: 10px 18px; transform: translateY(-6px); letter-spacing: 0; }
.live-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--success); }
.saved-btn { display: flex; align-items: center; gap: 10px; margin: 18px 0 0 auto; margin-inline-start: auto; margin-inline-end: 0; height: 52px; padding: 0 22px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: 17px; }
.pcard { margin: 18px 16px 0; background: #fff; color: var(--ink); border-radius: 36px; padding: 16px; }
.pcard-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pcard-hd h3 { font-size: 22px; font-weight: 700; }
.pcard-hd p { color: var(--ink2); font-size: 15px; display: flex; align-items: center; gap: 4px; }
.pcard-hd p .ic { width: 16px; height: 16px; }
.pcard-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; flex: none; }
.rcard { display: block; width: 100%; text-align: start; border-radius: 30px; padding: 20px 16px 16px; }
.rcard.lime { background: var(--accent); }
.rcard-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.rcard-top p { font-size: 17px; line-height: 1.35; color: #2F3A00; text-align: end; }
.bignum { display: flex; align-items: flex-start; gap: 2px; direction: ltr; }
.bignum b { font-size: 64px; font-weight: 700; line-height: .9; letter-spacing: -.03em; }
.bignum sup { font-size: 17px; font-weight: 500; }
.rcard-strip { display: flex; align-items: center; gap: 8px; background: var(--accent-soft); border-radius: 999px; padding: 8px 8px 8px 14px; padding-inline: 14px 8px; }
.rcard-strip .legstrip { flex: 1; }
.go-dark { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.rcard-empty { font-size: 17px; font-weight: 600; padding: 12px 4px; }
.legstrip { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.legstrip::-webkit-scrollbar { display: none; }
.legstrip > * { flex: none; }
/* One line that scrolls sideways; the edge with more legs fades out (reading direction aware). */
.legstrip.fade-end { -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }
.legstrip.fade-start { -webkit-mask-image: linear-gradient(to left, #000 78%, transparent); mask-image: linear-gradient(to left, #000 78%, transparent); }
.legstrip.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
[dir=rtl] .legstrip.fade-end { -webkit-mask-image: linear-gradient(to left, #000 78%, transparent); mask-image: linear-gradient(to left, #000 78%, transparent); }
[dir=rtl] .legstrip.fade-start { -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }
.ls-walk, .ls-line { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ls-walk .ic { width: 18px; height: 18px; }
.ls-sep { display: inline-flex; opacity: .45; }
.ls-sep .ic { width: 14px; height: 14px; }
.note { margin: 14px 16px 0; background: var(--warning-bg); color: var(--warning-ink); border-radius: 26px; padding: 16px; display: flex; gap: 12px; }
.note b { font-size: 15px; }
.note p { font-size: 14px; line-height: 1.4; margin-top: 2px; color: #6B4A00; }
.note-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--warning); color: #fff; display: grid; place-items: center; flex: none; }
.note-ic .ic { width: 20px; height: 20px; }
.block { margin: 14px 16px 0; background: rgba(255,255,255,.12); border-radius: 30px; padding: 16px; }
.block-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.block-hd h3 { font-size: 18px; font-weight: 600; }
.line-chip { flex: none; height: 48px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 16px; background: rgba(255,255,255,.14); position: relative; }
.line-chip .lb { min-width: 48px; }
.line-chip.add { padding: 0 14px; color: #fff; font-weight: 600; white-space: nowrap; }
.line-chip .x { position: absolute; top: -6px; inset-inline-end: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: #fff; display: grid; place-items: center; }
.line-chip .x .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.rrow, .urow-main { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 12px; border-radius: 20px; background: #fff; color: var(--ink); margin-bottom: 6px; }
.rrow-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; flex: none; }
.rrow-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.rrow-end small { color: var(--ink2); font-size: 12px; }
.muted-row { color: #DCE3EA; font-size: 14px; }
.urow { display: flex; align-items: center; gap: 8px; }
.urow .ib-s { background: rgba(255,255,255,.18); color: #fff; margin-bottom: 6px; }
.urow-main { flex: 1; min-width: 0; }
.urow-when { display: flex; flex-direction: column; align-items: center; background: var(--accent); border-radius: 14px; padding: 6px 10px; flex: none; min-width: 64px; }
.urow-when b { font-size: 18px; direction: ltr; }
.urow-when small { font-size: 11px; font-weight: 600; }
.lsheet-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.lsheet-hd h2 { font-size: 24px; font-weight: 700; }
.lsheet-hd p { color: var(--ink2); }
.lrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: #fff; border-radius: 18px; margin-bottom: 6px; text-align: start; }

/* Routes */
.routes-hdr { align-items: flex-start; }
.fromto { flex: 1; min-width: 0; background: #fff; border-radius: 30px; padding: 12px 64px 12px 18px; padding-inline: 18px 64px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.fromto hr { border: 0; border-top: 1px solid var(--divider); margin: 4px 0; }
.ft-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; padding: 4px 0; }
.ft-row span { display: flex; flex-direction: column; min-width: 0; }
.ft-row small { color: var(--ink2); font-size: 13px; }
.ft-row b { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.dot.hollow { border: 4px solid var(--ink); }
.dot.lime { background: var(--accent); box-shadow: 0 0 0 3px var(--ink); width: 13px; height: 13px; margin-inline: 1.5px; }
/* Centred with a margin, not a transform: the press effect (scale) would replace the transform and
   move the button out from under the finger, so the tap never became a click. */
.swap { position: absolute; inset-inline-end: 10px; top: 50%; margin-top: -22px; }
.rsheet, .exsheet, .tsheet { position: absolute; inset-inline: 0; bottom: 0; max-height: 64%; background: var(--sheet); border-radius: 40px 40px 0 0; padding: 0 16px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,.25); transition: transform .35s var(--ease); animation: up .45s var(--ease); z-index: 6; }
/* Collapsed: only the chosen route and Start trip, so the map shows the whole route. */
.rsheet.collapsed .rsheet-hd, .rsheet.collapsed .rcard2:not(.sel) { display: none; }
.rsheet.collapsed .rlist { overflow: visible; }
.rsheet.still, .tsheet.still, .exsheet.still { animation: none; }
.no-anim .card-in { animation: none; }
.exsheet.collapsed { transform: translateY(calc(100% - 150px)); }
.rsheet-hd, .exsheet-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 12px; }
.rsheet-hd h2, .exsheet-hd h2 { font-size: 22px; font-weight: 700; }
.exsheet-hd small { color: var(--ink2); font-size: 14px; }
.time-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; background: #fff; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.rlist, .ex-list { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; scrollbar-width: none; }
.rcard2 { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: start; background: #fff; border-radius: 30px; padding: 18px; flex: none; }
.rcard2.sel { background: var(--accent); }
.rc-top { display: flex; align-items: center; gap: 10px; }
.rc-dur b { font-size: 34px; font-weight: 700; line-height: 1; }
.rc-dur { font-size: 18px; }
.tag-dark { background: var(--ink); color: var(--accent); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.rc-time { margin-inline-start: auto; color: var(--ink2); font-size: 15px; font-weight: 500; }
.rcard2.sel .rc-time { color: #2F3A00; }
.rc-bot { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-bot .legstrip { flex: 1; }
.rc-note { color: var(--ink2); font-size: 14px; white-space: nowrap; flex: none; }
/* Chosen route (collapsed sheet): compact, so the map gets the room. */
.rsheet.collapsed .handle { height: 22px; }
.rsheet.collapsed .rcard2 { padding: 10px 16px; gap: 6px; border-radius: 24px; }
.rsheet.collapsed .rc-dur { font-size: 15px; }
.rsheet.collapsed .rc-dur b { font-size: 24px; }
.rsheet.collapsed .tag-dark { display: none; }
.rsheet.collapsed .rc-time { font-size: 14px; }
.rsheet.collapsed .lb { min-width: 38px; height: 28px; font-size: 14px; }
.rsheet.collapsed .btn-go { height: 48px; margin-top: 8px; font-size: 16px; }
.rcard2.sel .rc-note { color: #2F3A00; }
.rcard2.sel .lb[style*="#E4F53A"] { box-shadow: inset 0 0 0 2px var(--ink); }
.seg { display: flex; background: var(--control); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { flex: 1; height: 42px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.seg button.on { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ts-when { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.time-input { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 20px; padding: 10px 16px; font-size: 22px; font-weight: 600; }
.time-input input { border: 0; outline: none; background: none; font-size: 26px; font-weight: 700; flex: 1; direction: ltr; }

/* Trip */
.tsheet { max-height: 62%; overflow-y: auto; padding-top: 0; }
.thero { display: flex; align-items: center; gap: 14px; margin: 0 -16px 14px; }
.thero .hero-blob { min-height: 170px; border-start-start-radius: 40px; min-width: 50%; }
.thero .hero-blob small { font-size: 16px; font-weight: 500; }
.thero .hero-min b { font-size: 84px; }
.thero .hero-dest { font-size: 20px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-side { overflow: hidden; }
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tcard { background: #fff; border-radius: 24px; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tcard small { color: var(--ink2); font-size: 13px; display: flex; align-items: center; gap: 4px; }
.tcard small .ic { width: 16px; height: 16px; }
.tcard b { font-size: 15px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard > span { font-size: 14px; }
.tcard.dark { background: var(--ink); color: #fff; }
.tcard.dark small { color: #C9D4DE; }
.lime-tx { color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big-time { font-size: 24px !important; font-weight: 700; direction: ltr; text-align: start; }
.tprog { background: #fff; border-radius: 28px; padding: 14px 16px; margin-top: 10px; }
.tprog-hd { display: flex; align-items: center; gap: 12px; }
.tprog-hd > b { font-size: 16px; white-space: nowrap; }
.prog { flex: 1; height: 8px; border-radius: 99px; background: var(--ink); position: relative; margin: 0 14px; }
.prog-done { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--control); border-radius: 99px; }
.prog-bus { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; border: 2px solid #fff; }
[dir=rtl] .prog-bus { transform: translate(50%, -50%); }
.prog-bus .ic { width: 16px; height: 16px; }
.prog-end { position: absolute; inset-inline-end: -8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--ink); }
.arr-q { color: var(--ink2); margin: 12px 0 10px; font-size: 15px; }
.arr-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.arr-opts button { display: flex; align-items: center; gap: 8px; background: var(--chip); border-radius: 18px; padding: 8px; font-weight: 600; font-size: 14px; text-align: start; line-height: 1.15; }
.arr-opts i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.arr-opts i.g { background: var(--success-bg); } .arr-opts i.l { background: var(--accent); } .arr-opts i.r { background: #FFE1DC; }
.arr-opts .ic { width: 18px; height: 18px; }
.arr-thanks { margin-top: 12px; color: var(--success); font-weight: 600; font-size: 15px; animation: fadeUp .45s var(--ease); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; }
.share-hd { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 6px; }
.share-hd h3 { font-size: 22px; font-weight: 700; }
.share-card { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 24px; padding: 12px; margin-bottom: 16px; }
.share-card div { min-width: 0; display: flex; flex-direction: column; }
.share-card small { color: var(--ink2); font-size: 12px; }
.share-apps { display: flex; gap: 10px; justify-content: space-between; }
.share-apps > * { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; flex: 1; min-width: 0; text-align: center; }
.share-apps i { width: 54px; height: 54px; border-radius: 18px; background: #fff; display: grid; place-items: center; }

/* Rate */
#scr-rate { background: var(--rbg, var(--accent)); color: var(--rink, #26380A); transition: background .35s var(--ease); }
.rate-page { min-height: 100%; display: flex; flex-direction: column; padding: max(26px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.rate-hd { display: flex; justify-content: space-between; }
.rate-info { background: rgba(255,255,255,.4); border-radius: 18px; padding: 12px 14px; font-size: 14px; margin-top: 6px; animation: fadeUp .3s var(--ease); }
.rate-q { font-size: 24px; font-weight: 600; text-align: center; margin: 22px 10px 0; line-height: 1.25; }
.face { width: 230px; margin: 34px auto 0; }
.face svg { width: 100%; display: block; }
.face svg path { transition: d .35s var(--ease); }
.face.small { width: 150px; margin-top: 18%; }
.rate-word { text-align: center; font-size: 76px; font-weight: 700; color: var(--rword); text-transform: uppercase; line-height: 1; margin-top: 30px; letter-spacing: -.02em; }
html[lang=pt] .rate-word, html[lang=he] .rate-word, html[lang=ar] .rate-word { font-size: 60px; }
.rate-slider { position: relative; display: flex; justify-content: space-between; margin: 34px 12px 0; }
.rs-track { position: absolute; top: 18px; inset-inline: 30px; height: 3px; background: rgba(0,0,0,.18); }
.rs-pt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 80px; font-size: 16px; }
.rs-pt i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.rs-pt i::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.25); }
.rs-pt.on i { background: var(--rink); }
.rs-pt.on i::after { background: #fff; width: 16px; height: 16px; }
.rs-pt.on span { font-weight: 700; }
.rate-sum { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.35); border-radius: 30px; padding: 12px 16px; margin-top: auto; }
.rate-sum .dep-tx small { color: inherit; opacity: .75; }
.rate-dur { flex: none; font-size: 16px; }
.rate-actions { display: flex; gap: 10px; margin-top: 12px; }
.btn-soft { flex: 1; height: 60px; border-radius: 999px; background: rgba(255,255,255,.45); font-size: 17px; font-weight: 500; text-align: start; padding: 0 24px; }
.btn-rate { flex: 1; height: 60px; border-radius: 999px; background: var(--rink); color: var(--rbg); font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; }
.rate-page.sent { align-items: center; text-align: center; justify-content: flex-start; gap: 14px; }
.rate-page.sent h2 { font-size: 34px; font-weight: 700; margin-top: 24px; }
.rate-page.sent p { font-size: 17px; opacity: .8; }
.rate-page.sent .btn-rate { flex: none; width: 100%; margin-top: auto; }
.note-in { width: 100%; margin-top: 14px; border: 0; border-radius: 18px; padding: 14px; background: #fff; resize: none; outline: none; font-size: 16px; }

/* Wallet + History */
.wallet-page { min-height: 100%; background: var(--wallet-bg); color: #fff; padding-bottom: 120px; }
.demo-chip { font-size: 12px; font-weight: 600; background: rgba(255,255,255,.12); padding: 4px 10px; border-radius: 999px; vertical-align: middle; letter-spacing: .04em; }
.balance { margin: 8px 16px 0; background: var(--accent); color: var(--ink); border-radius: 36px; padding: 22px 16px 16px; }
.balance > small { font-size: 16px; font-weight: 500; padding-inline-start: 8px; }
.bal-num { display: flex; align-items: flex-start; gap: 6px; padding: 8px 8px 16px; direction: ltr; }
[dir=rtl] .bal-num { justify-content: flex-end; }
.bal-num b { font-size: 60px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.shekel { font-size: 26px; font-weight: 700; }
.bal-card { display: flex; align-items: center; gap: 12px; background: var(--accent-soft); border-radius: 999px; padding: 8px 8px 8px 18px; padding-inline: 18px 8px; font-weight: 600; }
.bal-card span { flex: 1; }
.tk { margin: 16px 16px 0; background: var(--sheet); color: var(--ink); border-radius: 36px; padding: 20px; }
.tk-hd { display: flex; justify-content: space-between; align-items: center; }
.tk-hd small { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); font-weight: 600; }
.valid-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--success-bg); color: #1D6B31; font-weight: 600; padding: 8px 14px; border-radius: 999px; }
.valid-pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.valid-pill.expired { background: #FFE1DC; color: #A1260F; }
.valid-pill.expired i { background: var(--danger); }
.tk h2 { font-size: 26px; font-weight: 700; margin-top: 14px; }
.tk-lines { display: flex; align-items: center; gap: 6px; color: var(--ink2); margin-top: 6px; }
.qr { background: #fff; border-radius: 26px; display: grid; place-items: center; padding: 18px; margin-top: 14px; }
.tk-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 14px; color: var(--ink2); font-size: 15px; }
.tk-foot b { color: var(--ink); font-size: 24px; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.amounts button { height: 56px; border-radius: 18px; background: #fff; font-size: 18px; font-weight: 700; direction: ltr; }
.amounts button.on { background: var(--ink); color: var(--accent); }
.pay-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 14px 16px; margin-top: 12px; font-weight: 600; }
.pay-row .after { margin-inline-start: auto; color: var(--ink2); font-weight: 400; font-size: 14px; }
.pay-row .after b { color: var(--ink); }
.hist-page { min-height: 100%; background: var(--screen-light); padding-bottom: 40px; }
.sticky-glass { position: sticky !important; top: 0; z-index: 4; background: rgba(236,238,236,.72); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--divider); }
.hist-page .balance > small { font-size: 15px; }
.hist-page .bal-num { padding-bottom: 12px; }
.filters { padding: 18px 16px 4px; }
.day-hd { margin: 18px 22px 8px; color: var(--ink2); font-weight: 500; font-size: 15px; }
.tx-card { margin: 0 16px; background: #fff; border-radius: 30px; padding: 6px 14px; }
.tx { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.tx + .tx { border-top: 1px solid var(--divider); }
.tx-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; flex: none; }
.tx-ic.lime { background: var(--accent); }
.tx-amt { font-size: 16px; flex: none; }
.tx-amt.plus { color: var(--success); }
.empty-state { margin: 40px 24px; text-align: center; color: var(--ink2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-state .ic { width: 42px; height: 42px; }
.empty-state b { color: var(--ink); font-size: 18px; }

/* Explore */
.ex-search { flex: 1; min-width: 0; height: 56px; border-radius: 999px; background: var(--glass-light); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; align-items: center; gap: 12px; padding: 0 20px; color: var(--ink2); font-size: 16px; }
.ex-search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-cats { position: absolute; top: max(96px, calc(env(safe-area-inset-top) + 70px)); inset-inline: 0; padding: 0 16px; z-index: 5; }
.here { position: absolute; top: max(154px, calc(env(safe-area-inset-top) + 128px)); inset-inline-start: 16px; max-width: 60%; border-radius: 24px; padding: 12px 18px; display: flex; flex-direction: column; z-index: 4; }
.here small { color: #C9D4DE; font-size: 14px; }
.here b { font-size: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-ctrls { position: absolute; top: max(234px, calc(env(safe-area-inset-top) + 208px)); inset-inline-end: 16px; display: flex; flex-direction: column; gap: 4px; background: var(--glass-light); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 999px; padding: 6px; z-index: 4; }
.ex-ctrls button { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }
.ex-ctrls button.on { background: var(--accent); }
.exrow { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border-radius: 26px; padding: 12px 14px; text-align: start; flex: none; }
.exrow .dep-tx small { gap: 4px; }

/* Menu drawer */
.drawer-wrap { position: absolute; inset: 0; z-index: 35; }
.drawer { position: absolute; inset-block: 0; inset-inline-start: 0; width: 82%; max-width: 330px; background: var(--screen-light); border-start-end-radius: 44px; border-end-end-radius: 44px; overflow-y: auto; padding: max(30px, env(safe-area-inset-top)) 16px 24px; animation: slideIn .4s var(--ease); scrollbar-width: none; }
[dir=rtl] .drawer { animation-name: slideInR; }
.drawer-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-inline-start: 4px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 600; }
.logo-mark { width: 26px; height: 26px; border-radius: 50%; border: 3px dotted var(--ink); }
.profile { background: var(--accent); border-radius: 32px; padding: 16px; }
.profile-top { display: flex; align-items: center; gap: 12px; }
.profile-top div { display: flex; flex-direction: column; }
.profile-top b { font-size: 24px; font-weight: 700; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 22px; font-weight: 700; }
.profile-bot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.bal-chip { background: var(--accent-soft); border-radius: 999px; padding: 10px 14px; font-weight: 700; }
.mgroup { background: #fff; border-radius: 28px; padding: 6px; margin-top: 12px; display: flex; flex-direction: column; }
.mgroup button { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 20px; text-align: start; font-size: 16px; }
.mgroup button > .ic:first-child { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--chip); box-sizing: border-box; }
.mgroup button span { flex: 1; }
.mgroup .chev { width: 18px; height: 18px; color: var(--ink3); }
.mlabel { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-weight: 500; font-size: 15px; margin: 18px 8px 8px; }
.mlabel .ic { width: 20px; height: 20px; }
.langs { display: flex; background: #fff; border-radius: 999px; padding: 4px; }
.langs button { flex: 1; height: 44px; border-radius: 999px; font-weight: 700; }
.langs button.on { background: var(--ink); color: var(--accent); }
.feed { font-size: 12px; color: var(--ink2); margin: 12px 8px 0; line-height: 1.5; }
.feed span { color: var(--ink3); }
.drawer-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding: 0 8px; }
.logout { display: flex; align-items: center; gap: 8px; color: #C0392B; font-weight: 600; font-size: 16px; }
.drawer-foot small { color: var(--ink3); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -10px) scale(.94); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 18px rgba(228,245,58,.08); } }
@keyframes ping { 70% { box-shadow: 0 0 0 16px rgba(228,245,58,0); } 100% { box-shadow: 0 0 0 0 rgba(228,245,58,0); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes slideIn { from { transform: translateX(-100%); } }
@keyframes slideInR { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }