/* Yo'lchi AI — kiosk ekrani. Dizayn: «Toza shahar» (kunduzgi va tungi rejim).
   Ekran: 1080 x 1920 (vertikal). Barcha o'lchamlar "em"da: 1em = chizmadagi 16px.
   A−/A+ tugmalari #screen shrift o'lchamini o'zgartiradi, butun ekran mutanosib kattalashadi. */

#screen {
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-2: #F3F5F8;
  --line: #E2E8EF;
  --line-strong: #D5DDE6;
  --ink: #0F1E2E;
  --muted: #5B6B7C;
  --accent: #0C5D8A;
  --accent-ink: #0C5D8A;
  --accent-sub: #DCEBF3;
  --invert-bg: #0F1E2E;
  --invert-ink: #FFFFFF;
  --sun: #C27803;
  --qr-bg: #0F1E2E;
  --qr-ink: #FFFFFF;
  --qr-muted: #B8C6D4;
  --ok-bg: #E5F3EC;
  --ok-fg: #0E6B4C;
  --warn-bg: #FBF0E0;
  --warn-fg: #8A5200;
  --sos-bg: #FDECEA;
  --sos-fg: #B42318;
  --danger-fill: #B42318;
  --blue-bg: #E6F0F6;   --blue-fg: #0C5D8A;
  --green-bg: #E5F3EC;  --green-fg: #12805C;
  --amber-bg: #FBF0E0;  --amber-fg: #B26A00;
  --red-bg: #FDECEA;    --red-fg: #B42318;
  --purple-bg: #EEE8FB; --purple-fg: #5B3CC4;
  --voice-bg: #0F1E2E;
  --voice-ring-1: #13314A;
  --voice-ring-2: #17476A;
  --voice-core: #12805C;
  --voice-wave: #3FA7D6;
  --voice-chip: #1A2D42;
  --map-filter: none;
  --shadow: 0 0.5em 1.5em rgba(15, 30, 46, 0.08);
}

/* Tungi rejim: qop-qora emas, yumshoq to'q ko'k-kulrang. */
#screen[data-theme="dark"] {
  --bg: #141B24;
  --surface: #1C2531;
  --surface-2: #232E3B;
  --line: #2D3A49;
  --line-strong: #3A4859;
  --ink: #E6EDF4;
  --muted: #9AA9B8;
  --accent: #2B7FB2;
  --accent-ink: #6FB6E0;
  --invert-bg: #E6EDF4;
  --invert-ink: #141B24;
  --sun: #E5A84E;
  --qr-bg: #232E3B;
  --qr-ink: #E6EDF4;
  --qr-muted: #9AA9B8;
  --ok-bg: #173A2E;
  --ok-fg: #7FDDB2;
  --warn-bg: #3A2E17;
  --warn-fg: #F0BE6E;
  --sos-bg: #3D2222;
  --sos-fg: #F2958B;
  --danger-fill: #A8352A;
  --blue-bg: #1B3346;   --blue-fg: #6FB6E0;
  --green-bg: #173A2E;  --green-fg: #4CC795;
  --amber-bg: #3A2E17;  --amber-fg: #E5A84E;
  --red-bg: #3D2222;    --red-fg: #F2958B;
  --purple-bg: #2B2547; --purple-fg: #AE9BF2;
  --voice-bg: #141B24;
  --voice-ring-1: #18292A;
  --voice-ring-2: #1C3A31;
  --voice-core: #2E9E70;
  --voice-wave: #4CC795;
  --voice-chip: #1C2531;
  --map-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.6);
  --shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: #0B1118;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }

#screen {
  position: relative;
  width: 1080px;
  height: 1920px;
  flex: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Onest', system-ui, sans-serif;
  transform-origin: center center;
  border-radius: 48px;
  box-shadow: 0 0 0 14px #05080c, 0 30px 80px rgba(0, 0, 0, 0.6);
  transition: background-color 0.4s, color 0.4s;
}
body.fullscreen #screen { border-radius: 0; box-shadow: none; }

/* Shrift o'lchamlari (A− / A+). 32px = chizmaning 2 baravari. */
#screen.fs-1 { font-size: 28px; }
#screen.fs-2 { font-size: 32px; }
#screen.fs-3 { font-size: 36px; }
#screen.fs-4 { font-size: 40px; }
#screen.fs-5 { font-size: 46px; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; padding: 0; text-align: center; }
button:active { transform: scale(0.985); }
h1, h2, h3, p { margin: 0; }

.ic { width: 1.375em; height: 1.375em; flex: none; }

/* Rang tuslari (bo'lim ikonkalari va plitkalar) */
.tint { display: flex; align-items: center; justify-content: center; flex: none; width: 2.75em; height: 2.75em; border-radius: 0.8125em; }
.tint.sm { width: 2.625em; height: 2.625em; border-radius: 0.75em; }
.tint.lg { width: 5.25em; height: 5.25em; border-radius: 1.125em; }
.tint.lg .ic { width: 2.375em; height: 2.375em; stroke-width: 1.6; }
.tone-blue { background: var(--blue-bg); color: var(--blue-fg); }
.tone-green { background: var(--green-bg); color: var(--green-fg); }
.tone-amber { background: var(--amber-bg); color: var(--amber-fg); }
.tone-red { background: var(--red-bg); color: var(--red-fg); }
.tone-purple { background: var(--purple-bg); color: var(--purple-fg); }

/* ---------- Yuqori panel ---------- */
.topbar {
  flex: none;
  height: 4em;
  padding: 0 1.25em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.625em; }
.brand-mark {
  width: 2.25em; height: 2.25em; border-radius: 0.6875em;
  background: var(--accent); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.125em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.brand-text strong { font-weight: 700; font-size: 1.0625em; }
.brand-text small { font-size: 0.75em; color: var(--muted); }
.topbar-right { display: flex; align-items: center; gap: 0.875em; }
.wx-chip {
  display: flex; align-items: center; gap: 0.375em;
  padding: 0.375em 0.625em; border-radius: 999px;
  background: var(--surface-2); font-size: 0.875em; font-weight: 600;
}
.wx-chip .ic { width: 1.25em; height: 1.25em; color: var(--sun); }
.theme-toggle {
  width: 2.75em; height: 2.75em; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  transition: background-color 0.3s, color 0.3s;
}
.theme-toggle .ic { width: 1.375em; height: 1.375em; }
#screen[data-theme="dark"] .theme-toggle .ic { color: var(--sun); }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.clock strong { font-weight: 700; font-size: 1.25em; font-variant-numeric: tabular-nums; }
.clock small { font-size: 0.6875em; color: var(--muted); }

/* ---------- Asosiy maydon ---------- */
#view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; position: relative; }
#view::-webkit-scrollbar { display: none; }

/* ---------- Bosh sahifa ---------- */
.home { min-height: 100%; padding: 1.75em 1.25em 1em; display: flex; flex-direction: column; gap: 1em; }
.greet { display: flex; flex-direction: column; gap: 0.375em; }
.greet span { font-size: 0.9375em; color: var(--muted); font-weight: 500; }
.greet h1 { font-size: 2.125em; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }

.search-wrap { position: relative; }
.search {
  display: flex; align-items: center; gap: 0.625em;
  height: 3.75em; padding: 0 0.5em 0 1.125em;
  background: var(--surface); border: 3px solid var(--line-strong); border-radius: 1.125em;
}
.search:focus-within { border-color: var(--accent-ink); }
.search > .ic { color: var(--muted); }
.search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1.0625em; color: var(--ink);
}
.search input::placeholder { color: var(--muted); }
.search .btn-clear { width: 2.5em; height: 2.5em; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.search .btn-go {
  height: 2.75em; padding: 0 1em; border-radius: 0.8125em;
  background: var(--invert-bg); color: var(--invert-ink); font-weight: 600; font-size: 0.9375em;
}

.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.5em); z-index: 20;
  background: var(--surface); border: 1px solid var(--line); border-radius: 1.125em;
  box-shadow: var(--shadow); overflow: hidden;
}
.suggestions button {
  display: flex; align-items: center; gap: 0.75em; width: 100%;
  padding: 0.75em 1em; border-bottom: 1px solid var(--line); text-align: left;
}
.suggestions button:last-child { border-bottom: 0; }
.sg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-main strong { font-weight: 600; font-size: 0.9375em; }
.sg-main small { font-size: 0.75em; color: var(--muted); }
.sg-tag { font-size: 0.6875em; font-weight: 700; color: var(--accent-ink); background: var(--blue-bg); padding: 0.25em 0.625em; border-radius: 999px; }

.voice-cta {
  display: flex; align-items: center; gap: 1em;
  padding: 1.125em 1.25em; border-radius: 1.375em;
  background: var(--accent); color: #FFFFFF; text-align: left;
}
.voice-cta .mic-disc {
  width: 4em; height: 4em; border-radius: 50%; background: #FFFFFF; color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.voice-cta .mic-disc .ic { width: 1.875em; height: 1.875em; }
.voice-cta .vc-text { display: flex; flex-direction: column; gap: 0.25em; }
.voice-cta strong { font-size: 1.3125em; font-weight: 700; }
.voice-cta small { font-size: 0.875em; color: var(--accent-sub); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; }
.tile {
  display: flex; align-items: center; gap: 0.75em;
  padding: 0.875em; min-height: 4.75em;
  background: var(--surface); border: 1px solid var(--line); border-radius: 1.125em; text-align: left;
}
.tile-text { display: flex; flex-direction: column; gap: 0.125em; min-width: 0; }
.tile-text strong { font-weight: 700; font-size: 1em; }
.tile-text small { font-size: 0.75em; color: var(--muted); }

.section-label { font-size: 0.8125em; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.today { display: flex; flex-direction: column; gap: 0.625em; margin-top: auto; }
.today-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; }
.today-card {
  display: flex; align-items: center; gap: 0.75em; padding: 0.875em;
  background: var(--surface); border: 1px solid var(--line); border-radius: 1.125em; text-align: left; min-width: 0;
}
.today-card .ic.big { width: 2.125em; height: 2.125em; color: var(--sun); stroke-width: 1.8; }
.today-card .tc-text { display: flex; flex-direction: column; min-width: 0; }
.today-card .tc-text strong { font-weight: 700; font-size: 1.25em; }
.today-card .tc-text strong.sm { font-size: 0.875em; line-height: 1.2; }
.today-card .tc-text small { font-size: 0.75em; color: var(--muted); }
.date-badge {
  width: 2.5em; height: 2.75em; border-radius: 0.625em; flex: none;
  background: var(--warn-bg); color: var(--warn-fg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.date-badge b { font-weight: 800; font-size: 1.0625em; }
.date-badge span { font-size: 0.625em; font-weight: 600; text-transform: uppercase; }

/* ---------- Pastki panel ---------- */
.bottombar {
  flex: none; padding: 0.75em 1.25em 1em;
  background: var(--surface); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.625em;
}
.sos {
  display: flex; align-items: center; justify-content: space-between;
  height: 3em; padding: 0 1em; border-radius: 0.875em;
  background: var(--sos-bg); color: var(--sos-fg);
}
.sos-label { display: flex; align-items: center; gap: 0.5em; font-weight: 700; font-size: 0.9375em; }
.sos-label .ic { width: 1.25em; height: 1.25em; }
.sos-numbers { font-weight: 700; font-size: 0.9375em; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.bottombar-row { display: flex; align-items: center; justify-content: space-between; }
.you-are-here { display: flex; align-items: center; gap: 0.375em; font-size: 0.8125em; color: var(--muted); }
.you-are-here .ic { width: 1em; height: 1em; color: var(--green-fg); stroke-width: 2.2; }
.you-are-here strong { color: var(--ink); }
.font-controls { display: flex; border: 1px solid var(--line-strong); border-radius: 0.75em; overflow: hidden; }
.font-controls button { width: 3em; height: 2.75em; background: var(--surface); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.font-controls button span { font-size: 0.875em; }
.font-controls button + button { border-left: 1px solid var(--line-strong); }
.font-controls button + button span { font-size: 1.1875em; }

/* ---------- Ichki sahifalar ---------- */
.subhead {
  position: sticky; top: 0; z-index: 10;
  height: 4.5em; padding: 0 1em; display: flex; align-items: center; gap: 0.75em;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.subhead h1 { flex: 1; min-width: 0; font-size: 1.375em; font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-btn {
  width: 3em; height: 3em; border-radius: 0.875em; flex: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.page { padding: 1em; display: flex; flex-direction: column; gap: 0.875em; }
.page .lead { font-size: 0.9375em; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.25em; padding: 1em; display: flex; flex-direction: column; gap: 0.75em; }
.card h2 { font-size: 1.0625em; font-weight: 700; }

.row-item {
  display: flex; align-items: center; gap: 0.75em; width: 100%;
  padding: 0.75em 0.875em; border: 1px solid var(--line); border-radius: 1.125em;
  background: var(--surface); text-align: left;
}
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main strong { font-weight: 700; font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main small { font-size: 0.8125em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.row-end b { font-weight: 700; color: var(--accent-ink); font-size: 0.9375em; }
.row-end small { font-size: 0.75em; color: var(--muted); }
.row-item > .ic { color: var(--muted); width: 1.25em; height: 1.25em; }

.list-map { height: 18em; border-radius: 1.25em; overflow: hidden; border: 1px solid var(--line); flex: none; }

.banner { display: flex; align-items: center; gap: 0.75em; padding: 0.875em 1em; border-radius: 1em; font-size: 0.9375em; line-height: 1.35; }
.banner .ic { width: 1.375em; height: 1.375em; }
.banner.ok { background: var(--ok-bg); color: var(--ok-fg); }
.banner.warn { background: var(--warn-bg); color: var(--warn-fg); }
.banner.red { background: var(--sos-bg); color: var(--sos-fg); }

.empty { text-align: center; color: var(--muted); padding: 3em 1.5em; font-size: 1em; line-height: 1.5; display: flex; flex-direction: column; align-items: center; gap: 0.75em; }
.empty .ic { width: 3em; height: 3em; stroke-width: 1.5; }

/* ---------- Bo'limlar ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625em; }
.cat-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.625em;
  padding: 0.875em 0.75em; min-height: 7.375em;
  border: 1px solid var(--line); border-radius: 1.125em; background: var(--surface); text-align: left;
}
.cat-tile .tile-text strong { font-size: 0.9375em; line-height: 1.2; }
.hint-row {
  display: flex; align-items: center; gap: 0.875em; padding: 1em; margin-top: auto;
  border-radius: 1.125em; background: var(--surface); border: 2px dashed var(--line-strong); text-align: left;
}
.hint-row > span { flex: 1; font-size: 0.9375em; }
.hint-row .ic { color: var(--muted); }

/* ---------- Joy sahifasi ---------- */
.place { min-height: 100%; display: flex; flex-direction: column; }
.place-map { position: relative; height: 25em; flex: none; }
.place-map .map-inner { position: absolute; inset: 0; }
.map-actions { position: absolute; left: 1em; right: 1em; top: 1em; display: flex; justify-content: space-between; z-index: 500; pointer-events: none; }
.map-actions > * { pointer-events: auto; }
.pill-btn {
  height: 3em; padding: 0 1em 0 0.75em; border-radius: 0.875em;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font-weight: 600; font-size: 0.9375em; display: flex; align-items: center; gap: 0.375em;
  box-shadow: var(--shadow);
}
.map-actions .sq-btn { box-shadow: var(--shadow); }
.sheet {
  flex: 1; margin-top: -1.75em; position: relative; z-index: 600;
  background: var(--surface); border-radius: 1.75em 1.75em 0 0;
  padding: 0.75em 1.25em 1.25em; display: flex; flex-direction: column; gap: 1em;
}
.handle { width: 2.75em; height: 0.3125em; border-radius: 0.1875em; background: var(--line-strong); align-self: center; }
.place-head { display: flex; gap: 0.875em; align-items: center; }
.place-photo { position: relative; width: 5.25em; height: 5.25em; border-radius: 1.125em; overflow: hidden; flex: none; padding: 0; border: 0; }
.place-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-count {
  position: absolute; right: 0.3125em; bottom: 0.3125em; display: flex; align-items: center; gap: 0.1875em;
  background: rgba(15, 23, 32, 0.72); color: #FFFFFF; border-radius: 999px;
  padding: 0.125em 0.4375em; font-size: 0.75em; font-weight: 700;
}
.photo-count .ic { width: 1em; height: 1em; }
.gallery { display: flex; gap: 0.5em; overflow-x: auto; scrollbar-width: none; margin: 0 -1.25em; padding: 0 1.25em; }
.gallery::-webkit-scrollbar { display: none; }
.gallery-item { flex: none; width: 7.5em; height: 5.25em; border-radius: 0.875em; overflow: hidden; padding: 0; border: 1px solid var(--line); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Rasmni katta ko'rish ---------- */
.lightbox { position: absolute; inset: 0; z-index: 2000; background: rgba(8, 12, 18, 0.94); color: #FFFFFF; display: flex; flex-direction: column; }
.lightbox[hidden] { display: none; }
.lb-head { height: 4em; padding: 0 1.25em; display: flex; align-items: center; justify-content: space-between; flex: none; }
.lb-head span { font-size: 1em; font-weight: 600; color: #C9D4DF; font-variant-numeric: tabular-nums; }
.lightbox .ov-close { color: #FFFFFF; }
.lb-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 1em; min-height: 0; }
.lb-stage img { max-width: 100%; max-height: 100%; border-radius: 1em; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lb-nav {
  position: absolute; top: 50%; width: 3.5em; height: 3.5em; margin-top: -1.75em; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #FFFFFF; border: 0; display: flex; align-items: center; justify-content: center;
}
.lb-nav .ic { width: 1.75em; height: 1.75em; }
.lb-nav.prev { left: 1em; }
.lb-nav.prev .ic { transform: scaleX(-1); }
.lb-nav.next { right: 1em; }
.lb-dots { display: flex; justify-content: center; gap: 0.5em; padding: 1.5em 0 2.5em; flex: none; }
.lb-dots span { width: 0.5em; height: 0.5em; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.lb-dots span.on { background: #FFFFFF; width: 1.5em; border-radius: 0.25em; }
.place-title { display: flex; flex-direction: column; gap: 0.375em; min-width: 0; }
.place-title h1 { font-size: 1.4375em; line-height: 1.2; font-weight: 800; }
.place-sub { display: flex; gap: 0.5em; align-items: center; flex-wrap: wrap; }
.place-sub > span:first-child { font-size: 0.875em; color: var(--muted); }
.status { padding: 0.1875em 0.5625em; border-radius: 999px; font-size: 0.75em; font-weight: 700; }
.status.open { background: var(--ok-bg); color: var(--ok-fg); }
.status.closed { background: var(--warn-bg); color: var(--warn-fg); }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 1em; }
.metrics > div { padding: 0.75em 0.875em; display: flex; flex-direction: column; gap: 0.125em; min-width: 0; }
.metrics > div + div { border-left: 1px solid var(--line); }
.metrics small { font-size: 0.75em; color: var(--muted); }
.metrics b { font-size: 1.1875em; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metrics b.dir { font-size: 1em; line-height: 1.45; }
.facts { display: flex; flex-direction: column; gap: 0.75em; }
.fact { display: flex; gap: 0.75em; align-items: center; font-size: 1em; }
.fact .ic { color: var(--muted); width: 1.25em; height: 1.25em; }
.fact span { min-width: 0; }
.unverified { font-size: 0.8125em; color: var(--muted); }
.qr-card { display: flex; gap: 1em; align-items: center; padding: 0.875em; border-radius: 1.25em; background: var(--qr-bg); color: var(--qr-ink); border: 1px solid var(--line); }
.qr-card img { width: 6.5em; height: 6.5em; border-radius: 0.75em; background: #FFFFFF; padding: 0.375em; flex: none; }
.qr-card .qr-text { display: flex; flex-direction: column; gap: 0.375em; }
.qr-card strong { font-size: 1.125em; font-weight: 700; }
.qr-card small { font-size: 0.875em; color: var(--qr-muted); line-height: 1.4; }
.chips { display: flex; gap: 0.5em; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: flex; align-items: center; gap: 0.5em; height: 2.875em; padding: 0 0.875em;
  border: 1px solid var(--line); border-radius: 0.875em; background: var(--surface-2);
  font-size: 0.875em; font-weight: 600; white-space: nowrap;
}
.chip span { color: var(--muted); font-weight: 500; }

/* ---------- Transport ---------- */
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.25em; border-radius: 0.875em; background: var(--surface-2); border: 1px solid var(--line); }
.segmented button { height: 2.75em; border-radius: 0.6875em; font-weight: 600; font-size: 0.9375em; color: var(--muted); }
.segmented button.on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
#screen[data-theme="dark"] .segmented button.on { background: var(--line-strong); }
.route { background: var(--surface); border: 1px solid var(--line); border-radius: 1.25em; padding: 0.875em 1em; display: flex; flex-direction: column; gap: 0.875em; }
.route.open { border: 3px solid var(--accent-ink); }
.route-head { display: flex; align-items: center; gap: 0.75em; text-align: left; width: 100%; }
.route-num { min-width: 2.75em; height: 2.75em; padding: 0 0.375em; border-radius: 0.75em; background: var(--blue-bg); color: var(--blue-fg); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25em; }
.route.open .route-num { min-width: 2.6em; height: 2.6em; background: var(--accent); color: #FFFFFF; font-size: 1.5em; }
.route-head .row-main strong { white-space: normal; }
.route-head > .ic { color: var(--muted); width: 1.25em; height: 1.25em; transition: transform 0.2s; }
.route.open .route-head > .ic { transform: rotate(90deg); }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { display: flex; gap: 0.875em; align-items: stretch; }
.tl-rail { width: 1.25em; display: flex; flex-direction: column; align-items: center; flex: none; }
.tl-dot { width: 0.625em; height: 0.625em; border-radius: 50%; background: var(--accent-ink); margin-top: 0.375em; flex: none; }
.tl-dot.end { width: 0.875em; height: 0.875em; border: 3px solid var(--accent-ink); background: var(--surface); margin-top: 0.25em; }
.tl-dot.here { width: 1.125em; height: 1.125em; background: var(--green-fg); border: 0.25em solid var(--ok-bg); margin-top: 0.125em; box-sizing: border-box; }
.tl-line { flex: 1; width: 3px; background: var(--accent-ink); }
.timeline li:last-child .tl-line { display: none; }
.tl-name { padding-bottom: 0.875em; font-size: 0.9375em; display: flex; gap: 0.5em; align-items: center; flex-wrap: wrap; }
.here-tag { padding: 0.125em 0.5em; border-radius: 999px; background: var(--ok-bg); color: var(--ok-fg); font-size: 0.75em; font-weight: 700; }
.route-actions { display: flex; gap: 0.5em; }
.route-meta { display: flex; flex-wrap: wrap; gap: 0.5em; }
.route-meta span { font-size: 0.8125em; padding: 0.25em 0.625em; border-radius: 999px; background: var(--surface-2); color: var(--muted); }

/* ---------- Favqulodda ---------- */
.sos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; }
.sos-main { grid-column: 1 / -1; display: flex; align-items: center; gap: 1em; padding: 1.125em; border-radius: 1.25em; background: var(--danger-fill); color: #FFFFFF; }
.sos-main b { font-size: 3.25em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sos-main .sm-text { display: flex; flex-direction: column; gap: 0.125em; }
.sos-main strong { font-size: 1.1875em; font-weight: 700; }
.sos-main small { font-size: 0.875em; color: #FBD5D1; }
.sos-cell { display: flex; flex-direction: column; gap: 0.5em; padding: 1em; border-radius: 1.25em; background: var(--surface); border: 1px solid var(--line); }
.sos-cell b { font-size: 2.5em; font-weight: 800; line-height: 1; color: var(--sos-fg); font-variant-numeric: tabular-nums; }
.sos-cell strong { font-size: 1em; font-weight: 700; }

/* ---------- Shahar hayoti ---------- */
.weather-now { display: flex; align-items: center; gap: 0.875em; }
.weather-now .ic { width: 3.25em; height: 3.25em; color: var(--sun); stroke-width: 1.6; }
.weather-now b { font-size: 2.5em; font-weight: 800; }
.weather-now span { display: flex; flex-direction: column; font-size: 1em; }
.weather-now small { color: var(--muted); font-size: 0.8125em; }
.weather-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; }
.weather-days > div { background: var(--surface-2); border-radius: 0.875em; padding: 0.625em; display: flex; flex-direction: column; align-items: center; gap: 0.25em; font-size: 0.8125em; }
.weather-days .ic { width: 1.75em; height: 1.75em; color: var(--sun); }
.weather-days small { color: var(--muted); }
.ev { display: flex; gap: 0.75em; align-items: flex-start; }
.ev .date-badge { width: 2.75em; height: 3em; }
.ev-text { display: flex; flex-direction: column; gap: 0.125em; min-width: 0; }
.ev-text strong { font-weight: 700; font-size: 0.9375em; }
.ev-text small { font-size: 0.8125em; color: var(--muted); }
.ev-text p { font-size: 0.875em; margin-top: 0.25em; }

/* ---------- Telegram ---------- */
.tg-card { align-items: center; text-align: center; padding: 1.5em; }
.tg-card img { width: 13em; height: 13em; border-radius: 1em; background: #FFFFFF; padding: 0.625em; }
.tg-card h2 { font-size: 1.375em; }
.tg-card p { font-size: 0.9375em; color: var(--muted); line-height: 1.5; }
.steps { display: flex; flex-direction: column; gap: 0.625em; }
.step { display: flex; gap: 0.75em; align-items: center; font-size: 0.9375em; }
.step b { width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--blue-bg); color: var(--blue-fg); display: flex; align-items: center; justify-content: center; font-size: 0.875em; flex: none; }

/* ---------- Xarita ---------- */
.leaflet-container { font-family: inherit; background: var(--surface-2); }
.leaflet-tile-pane { filter: var(--map-filter); }
/* Ekran masshtablanganda xarita bo'laklari orasida ingichka chiziq qolmasligi uchun. */
.leaflet-bar a { width: 64px !important; height: 64px !important; line-height: 64px !important; font-size: 34px !important; }
.leaflet-touch .leaflet-bar { border-radius: 16px; overflow: hidden; }
.leaflet-tooltip, .leaflet-control-attribution { font-size: 16px; }
#screen[data-theme="dark"] .leaflet-control-attribution { background: rgba(28, 37, 49, 0.8); color: #9AA9B8; }
#screen[data-theme="dark"] .leaflet-control-attribution a { color: #6FB6E0; }
#screen[data-theme="dark"] .leaflet-bar a { background: #1C2531; color: #E6EDF4; border-color: #2D3A49; }
.here-tip { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; font-weight: 600; box-shadow: var(--shadow); padding: 6px 12px; }
.here-tip::before { display: none; }
.you-marker { background: var(--green-fg); border: 6px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 8px rgba(18, 128, 92, 0.25); }
.pin-marker {
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #FFFFFF; border: 4px solid var(--surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.pin-marker.main { background: var(--sos-fg); }
#screen:not([data-theme="dark"]) .pin-marker.main { background: #B42318; }
.pin-marker .ic { transform: rotate(45deg); width: 50%; height: 50%; }

/* ---------- Ekran klaviaturasi ---------- */
.keyboard {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: 14px 10px 18px; font-size: 30px;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.15);
}
.kb-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.kb-key {
  flex: 1; max-width: 94px; height: 92px; border-radius: 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  font-size: 34px; font-weight: 600; text-align: center;
}
.kb-key.wide { max-width: 190px; font-size: 26px; }
.kb-key.space { max-width: 420px; font-size: 26px; }
.kb-key.action { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.kb-key.muted { background: var(--line); }

/* ---------- Ovozli so'rov ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 50;
  background: var(--voice-bg); color: #FFFFFF;
  display: flex; flex-direction: column;
}
#screen[data-theme="dark"] .overlay { color: #E6EDF4; }
.overlay[hidden] { display: none; }
.ov-head { height: 4em; padding: 0 1.25em; display: flex; align-items: center; justify-content: space-between; flex: none; }
.ov-head span { font-size: 0.9375em; color: #A9B8C7; font-weight: 500; }
.ov-close { width: 2.75em; height: 2.75em; border-radius: 50%; border: 1px solid #2C3E52; display: flex; align-items: center; justify-content: center; }
.ov-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.25em; padding: 0 2em; text-align: center; }
.rings { width: 13.75em; height: 13.75em; border-radius: 50%; background: var(--voice-ring-1); display: flex; align-items: center; justify-content: center; }
.rings > div { width: 10.25em; height: 10.25em; border-radius: 50%; background: var(--voice-ring-2); display: flex; align-items: center; justify-content: center; }
.rings > div > div { width: 7em; height: 7em; border-radius: 50%; background: var(--voice-core); display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.rings .ic { width: 3em; height: 3em; }
.overlay.listening .rings { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.wave { display: flex; align-items: center; gap: 0.3125em; height: 2.5em; }
.wave span { width: 0.3125em; border-radius: 0.1875em; background: var(--voice-wave); height: 0.75em; }
.overlay.listening .wave span { animation: wave 1s ease-in-out infinite; }
.wave span:nth-child(2n) { animation-delay: -0.2s; }
.wave span:nth-child(3n) { animation-delay: -0.45s; }
.wave span:nth-child(5n) { animation-delay: -0.7s; }
@keyframes wave { 0%, 100% { height: 0.75em; } 50% { height: 2.5em; } }
.ov-status { font-size: 0.875em; font-weight: 600; color: #7FD1A8; letter-spacing: 0.08em; text-transform: uppercase; }
.ov-status.err { color: #F2958B; }
.ov-text { font-size: 1.75em; line-height: 1.3; font-weight: 600; min-height: 2.6em; }
.ov-examples { padding: 0 1.5em 1em; display: flex; flex-direction: column; gap: 0.625em; align-items: center; }
.ov-examples > span { font-size: 0.8125em; color: #A9B8C7; }
.ov-examples div { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; }
.ov-examples div span { padding: 0.5em 0.875em; border-radius: 999px; background: var(--voice-chip); font-size: 0.875em; color: #DCE5EE; border: 1px solid #2D3A49; }
.ov-actions { padding: 1em 1.25em 1.75em; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; flex: none; }
.ov-actions button { height: 3.75em; border-radius: 1.125em; font-weight: 600; font-size: 1.0625em; }
.ov-actions .ghost { border: 1px solid #3A4859; color: inherit; }
.ov-actions .solid { background: #FFFFFF; color: #0F1E2E; font-weight: 700; }
#screen[data-theme="dark"] .ov-actions .solid { background: #E6EDF4; color: #141B24; }

.spinner { width: 2.5em; height: 2.5em; border: 0.25em solid var(--line); border-top-color: var(--accent-ink); border-radius: 50%; margin: 4em auto; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.attribution { font-size: 0.625em; color: var(--muted); text-align: center; }

/* ---------- Bo'sh turganda: e'lonlar ---------- */
.attract {
  /* Kunduzgi rejim: yorug' fon. Tungi rejim pastda. */
  --at-bg: #EEF3F8;
  --at-glow-1: rgba(12, 93, 138, 0.12);
  --at-glow-2: rgba(18, 128, 92, 0.10);
  --at-ink: var(--ink);
  --at-muted: var(--muted);
  --at-chip-bg: #FFFFFF;
  --at-chip-line: var(--line);
  --at-bar: rgba(15, 30, 46, 0.12);
  --at-bar-fill: var(--accent);
  --at-card-shadow: 0 1.25em 2.5em rgba(15, 30, 46, 0.12);
  position: absolute; inset: 0; z-index: 3000; overflow: hidden;
  background:
    radial-gradient(60em 40em at 85% -10%, var(--at-glow-1), transparent 60%),
    radial-gradient(50em 40em at -10% 110%, var(--at-glow-2), transparent 60%),
    var(--at-bg);
  color: var(--at-ink); display: flex; flex-direction: column; cursor: pointer;
}
#screen[data-theme="dark"] .attract {
  --at-bg: var(--voice-bg);
  --at-glow-1: rgba(63, 167, 214, 0.22);
  --at-glow-2: rgba(18, 128, 92, 0.22);
  --at-ink: #E6EDF4;
  --at-muted: #A9B8C7;
  --at-chip-bg: rgba(255, 255, 255, 0.08);
  --at-chip-line: rgba(255, 255, 255, 0.14);
  --at-bar: rgba(255, 255, 255, 0.18);
  --at-bar-fill: #FFFFFF;
  --at-card-shadow: 0 1.5em 3em rgba(0, 0, 0, 0.35);
}
.at-top { display: flex; align-items: center; justify-content: space-between; padding: 1.5em 1.5em 0; flex: none; }
.at-brand { display: flex; align-items: center; gap: 0.625em; }
.at-brand > span:last-child { display: flex; flex-direction: column; }
.at-brand strong { font-size: 1.25em; font-weight: 800; }
.at-brand small, .at-clock small { color: var(--at-muted); font-size: 0.8125em; }
.at-clock { display: flex; flex-direction: column; align-items: flex-end; }
.at-time { font-size: 2.5em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

.at-stage { flex: 1; position: relative; margin: 1.5em 1.5em 0; min-height: 0; }
.at-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateX(2em); transition: opacity 0.6s ease, transform 0.6s ease;
}
.at-slide.in { opacity: 1; transform: none; }
.at-slide.out { opacity: 0; transform: translateX(-2em); }

.at-welcome { display: flex; flex-direction: column; gap: 1.25em; padding: 0 0.25em; }
.at-mic {
  width: 4.5em; height: 4.5em; border-radius: 50%; background: var(--voice-core); color: #FFFFFF; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0.75em rgba(63, 167, 214, 0.12), 0 0 0 1.5em rgba(63, 167, 214, 0.06);
}
.at-mic .ic { width: 2.25em; height: 2.25em; }
.at-welcome h1 { font-size: 2.5em; line-height: 1.12; font-weight: 800; margin: 0.25em 0 0; letter-spacing: -0.01em; }
.at-welcome p { font-size: 1.125em; line-height: 1.45; color: var(--at-muted); margin: 0; }
.at-chips { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.5em; }
.at-chips span { background: var(--at-chip-bg); border: 1px solid var(--at-chip-line); border-radius: 999px; padding: 0.5em 1em; font-size: 0.9375em; font-weight: 600; }

.at-card {
  background: var(--surface); color: var(--ink); border-radius: 1.75em; overflow: hidden;
  box-shadow: var(--at-card-shadow); display: flex; flex-direction: column; max-height: 100%;
}
.at-image { aspect-ratio: 16 / 10; flex: 0 1 auto; min-height: 0; overflow: hidden; background: var(--surface-2); }
.at-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-body { padding: 1.75em; display: flex; flex-direction: column; gap: 0.75em; }
.at-body.at-center { align-items: center; text-align: center; padding: 2.25em 1.75em; }
.at-body h2 { font-size: 1.75em; line-height: 1.2; font-weight: 800; margin: 0; }
.at-body p { font-size: 1.0625em; line-height: 1.5; color: var(--muted); margin: 0; white-space: pre-line; }
.at-body p.clamp { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.at-body small { font-size: 0.875em; color: var(--muted); font-weight: 600; }
.at-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.375em; padding: 0.375em 0.875em; border-radius: 999px; font-size: 0.8125em; font-weight: 700; background: var(--blue-bg); color: var(--blue-fg); }
.at-center .at-tag { align-self: center; }
.at-tag .ic { width: 1.125em; height: 1.125em; }
.at-tag.amber { background: var(--amber-bg); color: var(--amber-fg); }
.at-tag.green { background: var(--green-bg); color: var(--green-fg); }
.at-tag.purple { background: var(--purple-bg); color: var(--purple-fg); }

.at-list { display: flex; flex-direction: column; margin-top: 0.25em; }
.at-row { display: flex; gap: 1em; align-items: center; padding: 0.875em 0; }
.at-row + .at-row { border-top: 1px solid var(--line); }
.at-row > span:last-child { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.at-row strong { font-size: 1.125em; line-height: 1.25; }
.at-date { width: 3.5em; height: 3.5em; flex: none; border-radius: 1em; background: var(--green-bg); color: var(--green-fg); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.at-date b { font-size: 1.375em; font-weight: 800; }
.at-date span { font-size: 0.6875em; font-weight: 700; text-transform: uppercase; margin-top: 0.25em; }

.at-big { font-size: 5em; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.at-big-sub { font-size: 1.125em; font-weight: 700; color: var(--muted); margin-top: -0.25em; }
.at-weather { display: flex; align-items: center; gap: 0.5em; color: var(--sun); }
.at-weather > .ic { width: 4em; height: 4em; stroke-width: 1.5; }
.at-days { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border: 1px solid var(--line); border-radius: 1.25em; margin-top: 0.5em; }
.at-days > div { display: flex; flex-direction: column; align-items: center; gap: 0.25em; padding: 1em 0.5em; }
.at-days > div + div { border-left: 1px solid var(--line); }
.at-days .ic { width: 1.75em; height: 1.75em; color: var(--muted); }
.at-days b { font-size: 1em; }
.at-qr { background: #FFFFFF; padding: 1em; border-radius: 1.5em; border: 1px solid var(--line); }
.at-qr img { width: 11em; height: 11em; display: block; }

.at-progress { display: flex; gap: 0.375em; padding: 1.25em 1.5em 0; flex: none; }
.at-progress span { flex: 1; height: 0.25em; border-radius: 0.125em; background: var(--at-bar); overflow: hidden; }
.at-progress span.done i { width: 100%; }
.at-progress i { display: block; height: 100%; width: 0; background: var(--at-bar-fill); border-radius: inherit; }
.at-progress span.now i { animation: at-fill var(--slide-ms, 8s) linear forwards; }
@keyframes at-fill { to { width: 100%; } }

.at-cta {
  margin: 1.25em 1.5em 1.75em; flex: none; display: flex; align-items: center; gap: 1em;
  background: var(--accent); border-radius: 1.5em; padding: 1.125em 1.5em; color: #FFFFFF;
}
.at-cta > span:last-child { display: flex; flex-direction: column; gap: 0.125em; }
.at-cta strong { font-size: 1.375em; font-weight: 800; }
.at-cta small { font-size: 0.875em; color: var(--accent-sub); }
#screen[data-theme="dark"] .at-cta small { color: #CFE3F0; }
.at-hand { width: 3.5em; height: 3.5em; border-radius: 50%; background: #FFFFFF; color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; animation: at-pulse 2s ease-in-out infinite; }
.at-hand .ic { width: 1.75em; height: 1.75em; }
@keyframes at-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); } 50% { box-shadow: 0 0 0 0.75em rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) {
  .at-slide { transition: none; }
  .at-hand { animation: none; }
}
.at-preview {
  align-self: stretch; display: flex; align-items: center; gap: 0.5em; padding: 0.625em 0.875em;
  border-radius: 0.875em; background: var(--warn-bg); color: var(--warn-fg); font-size: 0.875em; font-weight: 700;
}
.at-preview .ic { width: 1.25em; height: 1.25em; flex: none; }