/* ==========================================================================
   FROMONTO — дизайн систем
   Гадаад фонт/CDN татдаггүй: офлайн ажиллах, хурдан ачаалах шаардлагатай.
   Системийн фонт (iOS дээр SF Pro, Android дээр Roboto) нь аль хэдийн
   өндөр чанартай тул жин, зай, хэмнэлээр нь ялгааг гаргана.
   ========================================================================== */

:root {
  /* --- Өнгө: цайвар --------------------------------------------------- */
  /* Дулаан саарал суурь, цагаан карт, бараг хар бэх.
     Өнгө нь ГЭРЭЛ ЗУРГААС ирнэ, интерфэйсээс биш: аяллын аппад хамгийн
     тод зүйл нь тухайн газрын зураг байх ёстой бөгөөд түүний хажууд
     өнгөт товч, өнгөт тууз тавибал хоёул зэрэг хашгирна. */
  --bg: #ede8e4;              /* дулаан саарал — цагаан картыг тодруулна */
  --surface: #ffffff;
  --surface-2: #f5f2ef;
  --surface-3: #e3ddd7;
  --ink: #101010;
  --ink-2: #56514c;
  --ink-3: #6b6560;
  --line: #e2dcd5;
  --line-strong: #c7bfb6;

  /* ҮЙЛДЛИЙН өнгө нь бараг хар. Цайвар горимд «Book tour» товч хар,
     харанхуйд цагаан — хоёуланд нь хамгийн тод зүйл болно. */
  --accent: #141414;
  --accent-soft: #eae5e0;
  --accent-ink: #2a2a2a;
  --accent-bright: #141414;
  --indigo: #1a1a1a;          /* hero — гүн саарал */
  --indigo-soft: #eae5e0;
  --cream: #ffebaf;           /* эзэмшигчийн сонгосон цөцгийн шар */
  --cream-soft: #fff7e0;
  /* Цөцгийн шар ДЭЭР суух бичвэр. Дүүргэлт нь хоёр горимд ч ЦАЙВАР
     хэвээр байдаг тул энэ нь хоёуланд нь БАРААН байх ёстой — «харанхуй
     горимд бүх зүйл цайрдаг» гэсэн дүрэм энд ажиллахгүй. */
  --on-cream: #6b4e07;
  --coral: #c4553a;           /* анхааруулга, устгах */
  --coral-soft: #f8e7e1;
  --coral-ink: #9c4423;
  --success: #14684e;
  --success-soft: #e2f2ec;
  --warn: #8a5a1c;
  --warn-soft: #fbeed6;

  /* Өнгөт дэвсгэр дээрх бичвэр. Горим солигдоход дэвсгэр нь эсрэгээрээ
     эргэдэг тул эдгээр нь ЗААВАЛ токен байх ёстой — `#fff` гэж шууд
     бичвэл нэг горимд уншигдахаа болино. */
  --on-accent: #ffffff;
  --on-indigo: #ffffff;
  --on-success: #ffffff;
  --on-danger: #ffffff;

  /* Брэндийн санал гаргах гадаргуу. Энэ нь сэдвийг ДАГАХГҮЙ: өөрийн
     гэсэн бараан дэвсгэртэй тул хоёр горимд ижил байж, дээрх цагаан
     бичвэр нь хаана ч уншигдана. */
  --brand-a: #2e2e2e;
  --brand-b: #0b0b0b;
  /* Эзэмшигчийн сонгосон тэнгисийн цэнхэр. Интерфэйс саарал болсон ч
     брэнд нь АЛГА БОЛОХГҮЙ — тэмдэг, чимэглэлийн гэрэлтүүлэг дээр
     үлдэнэ. Гэхдээ БИЧВЭРИЙН дэвсгэр болгож хэзээ ч болохгүй:
     цагаантай ердөө 3.11:1. */
  --brand-glow: #4c9db0;
  --brand-grad:
    radial-gradient(120% 90% at 88% -10%, rgba(76, 157, 176, .32) 0%, transparent 62%),
    linear-gradient(150deg, var(--brand-a) 0%, var(--brand-b) 100%);
  --brand-chip: #ffebaf;
  --brand-ink: #4a3a08;
  --on-brand: #ffffff;

  /* --- Хэлбэр --------------------------------------------------------- */
  /* Лавлагаан дээрх карт нь ТОМ радиустай — 24-32px. Жижиг радиус нь
     «маягт» шиг, том нь «зураг» шиг мэдрэгдэнэ. */
  --r-xs: 12px;
  --r-sm: 16px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* --- Зай ------------------------------------------------------------ */
  /* НЭГ шатлал. Урьд нь 8, 9, 10, 12, 14, 16, 18, 26 гэсэн 20 гаруй
     өөр утга кодын дотор тарсан байсан тул хэсэг бүрийн хоорондох зай
     өөр өөр байв — эзэмшигчийн хэлсэн зүйл яг энэ. Шинэ зай хэрэгтэй
     бол ЭНД нэмнэ, мөрөндөө биш. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* --- Гүн ------------------------------------------------------------ */
  --e1: 0 1px 2px rgba(20, 16, 12, .04), 0 2px 8px rgba(20, 16, 12, .05);
  --e2: 0 4px 14px rgba(20, 16, 12, .07), 0 14px 34px rgba(20, 16, 12, .09);
  --e3: 0 12px 30px rgba(20, 16, 12, .12), 0 30px 70px rgba(20, 16, 12, .16);

  /* --- Хөдөлгөөн ------------------------------------------------------ */
  /* Дэлгэц дээр гарч ирэх юм бүхэн ЭНЭ муруйгаар хөдөлнө: хурдан эхэлж,
     зөөлөн зогсоно. Хөтчийн бэлэн `ease` нь дунджаараа хөдөлдөг тул
     хиймэл, «слайд шоу» мэдрэмж төрүүлдэг. */
  --ease-in-view: cubic-bezier(.22, 1, .36, 1);
  --fast: 140ms cubic-bezier(.4, 0, .2, 1);
  --base: 220ms cubic-bezier(.4, 0, .2, 1);
  --spring: 420ms var(--ease-in-view);

  /* --- Хэмжээ --------------------------------------------------------- */
  --appbar-h: 60px;
  /* Хөвөгч самбарын ЭЗЛЭХ өндөр: самбар өөрөө + доод зай.
     Агуулгын доод зай, toast, «дээш» товч бүгд үүнээс тооцогдоно —
     нэг тоог хоёр газар бичвэл нэг өдөр зөрнө. */
  --tabbar-h: 76px;
  --page: 760px;
}

/* ХАРАНХУЙ ГОРИМ — гурван газарт.
 *
 * Утас нь өөрөө горимоо хэлдэг (`prefers-color-scheme`), гэхдээ хүн
 * дэлгэц дээрх товчоор ДАРЖ бичиж чадна. Тиймээс гурван дүрэм хэрэгтэй:
 *
 *   1. Утас харанхуй гэж хэлсэн БА хүн гэрлийг сонгоогүй бол — харанхуй
 *   2. Хүн харанхуйг сонгосон бол — утас юу ч хэлсэн, харанхуй
 *   3. Хүн гэрлийг сонгосон бол — юу ч хийхгүй, `:root` нь гэрэл
 *
 * Хоёр блок нь ЯГ ижил утгатай байх ёстой. Тэдгээрийг гар аргаар
 * давхардуулж бичсэн тул `test_web.py` дотор зөрөхөөс сэргийлсэн
 * шалгалт бий.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Лавлагаа болгосон дизайны хар: #070707 · #393939 · #FFFFFF.
       Гэрэл зураг нь өнгийг нь өөрөө авчирдаг тул интерфэйс нь
       саарал байх ёстой — тэгвэл зураг дээр нь тодорно. */
    --bg: #070707;
    --surface: #141414;
    --surface-2: #1e1e1e;
    --surface-3: #2b2b2b;
    --ink: #ffffff;
    --ink-2: #a6a6a6;
    --ink-3: #8c8c8c;
    --line: #242424;
    --line-strong: #393939;

    /* Харанхуйд ҮЙЛДЛИЙН өнгө нь ЦАГААН. Лавлагаан дээрх идэвхтэй
       таб, «Book tour» товч, доогуур зураас бүгд цагаан — өнгөт товч
       биш. Тиймээс `--accent` нь энд цагаан болж, дээр нь суух бичвэр
       (`--on-accent`) хар болно. */
    --accent: #ffffff;
    --accent-soft: #1c1c1c;
    --accent-ink: #ffffff;
    --accent-bright: #ffffff;
    --indigo: #121212;
    --indigo-soft: #1a1a1a;
    --cream: #ffe6a0;
    --cream-soft: #2c2611;
    --coral: #f0956d;
    --coral-soft: #33201a;
    --coral-ink: #ffb08b;
    --on-accent: #070707;
    --on-success: #070707;
    --on-danger: #070707;

    --success: #4fc79b;
    --success-soft: #0f2620;
    --warn: #e0b061;
    --warn-soft: #2a2213;

    /* Харанхуй интерфэйс сүүдэр хэрэглэдэггүй: хар дээр хар сүүдэр
       харагдахгүй. Давхаргыг ӨНГӨНИЙ ЯЛГААГААР салгана. */
    --e1: none;
    --e2: 0 8px 24px rgba(0, 0, 0, .5);
    --e3: 0 16px 48px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
    /* Лавлагаа болгосон дизайны хар: #070707 · #393939 · #FFFFFF.
       Гэрэл зураг нь өнгийг нь өөрөө авчирдаг тул интерфэйс нь
       саарал байх ёстой — тэгвэл зураг дээр нь тодорно. */
    --bg: #070707;
    --surface: #141414;
    --surface-2: #1e1e1e;
    --surface-3: #2b2b2b;
    --ink: #ffffff;
    --ink-2: #a6a6a6;
    --ink-3: #8c8c8c;
    --line: #242424;
    --line-strong: #393939;

    /* Харанхуйд ҮЙЛДЛИЙН өнгө нь ЦАГААН. Лавлагаан дээрх идэвхтэй
       таб, «Book tour» товч, доогуур зураас бүгд цагаан — өнгөт товч
       биш. Тиймээс `--accent` нь энд цагаан болж, дээр нь суух бичвэр
       (`--on-accent`) хар болно. */
    --accent: #ffffff;
    --accent-soft: #1c1c1c;
    --accent-ink: #ffffff;
    --accent-bright: #ffffff;
    --indigo: #121212;
    --indigo-soft: #1a1a1a;
    --cream: #ffe6a0;
    --cream-soft: #2c2611;
    --coral: #f0956d;
    --coral-soft: #33201a;
    --coral-ink: #ffb08b;
    --on-accent: #070707;
    --on-success: #070707;
    --on-danger: #070707;

    --success: #4fc79b;
    --success-soft: #0f2620;
    --warn: #e0b061;
    --warn-soft: #2a2213;

    /* Харанхуй интерфэйс сүүдэр хэрэглэдэггүй: хар дээр хар сүүдэр
       харагдахгүй. Давхаргыг ӨНГӨНИЙ ЯЛГААГААР салгана. */
    --e1: none;
    --e2: 0 8px 24px rgba(0, 0, 0, .5);
    --e3: 0 16px 48px rgba(0, 0, 0, .6);
}

*,
*::before,
*::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Хуруугаар ажиллах апп: дарах бүх зүйл дор хаяж 44px байх ёстой
   (Apple HIG 44pt / Material 48dp). `touch-action` нь хуучин Android дээрх
   300мс-ийн саатлыг арилгана. */
button, a, [role="button"], input, select, textarea, summary {
  touch-action: manipulation;
}

/* `hidden` нь `display` тодорхойлсон элемент дээр өөрөө ажилладаггүй —
   буцах товч нүүр дэлгэц дээр гарч ирдэг алдаа үүнээс болдог. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Дэлгэц хооронд шилжих хөдөлгөөн нь агуулгыг хэдэн пиксель хажуу
     тийш зөөнө. Үүнийг таслахгүй бол тэр хэдэн пиксель нь хэвтээ
     гүйлгэлт үүсгэж, хуудас нь чичирнэ. */
  overflow-x: clip;
  /* Гүйлгэлт төгсгөлд хүрэхэд браузерын "татаж шинэчлэх" ажиллуулахгүй */
  overscroll-behavior-y: contain;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif,
    system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Доод хуудас нээлттэй үед ард нь байгаа жагсаалт гүйлгэгдэж болохгүй */
body.sheet-open { overflow: hidden; }

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

/* --------------------------------------------------------------------------
   Бичвэрийн хэмнэл
   -------------------------------------------------------------------------- */

/* `balance` — гарчгийн сүүлийн мөрөнд ганц үг үлдэхгүй. Монгол үг урт
   тул энэ нь англиас ч илүү ажиглагдана. Мэдэхгүй хөтөч үүнийг алгасна. */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
h1 { font-size: 25px; line-height: 1.2; letter-spacing: -.026em; }
h2 { font-size: 18px; line-height: 1.3; }
h3 { font-size: 14px; line-height: 1.4; letter-spacing: -.008em; }
p { margin: 0; }

.display {
  font-size: 32px; line-height: 1.12; font-weight: 800; letter-spacing: -.032em;
}
.lede { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.muted { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.tiny { color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.overline {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
}
.num { font-variant-numeric: tabular-nums; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Icon
   -------------------------------------------------------------------------- */

.ico {
  width: 20px; height: 20px; flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico.sm { width: 16px; height: 16px; stroke-width: 2; }
.ico.lg { width: 26px; height: 26px; stroke-width: 1.6; }

/* Газрын дүрс. `.ico`-оос ТОМ бөгөөд НАРИЙН зураастай: эдгээр нь
   заагч биш, зургийн оронд явж байгаа дүрслэл. Хэмжээг эзэн нь тогтооно
   (`--glyph`) — картан дээр том, жагсаалтад жижиг. */
.glyph {
  width: var(--glyph, 40px); height: var(--glyph, 40px);
  flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Бүтэц: app bar, view, tab bar
   -------------------------------------------------------------------------- */

.appbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  height: calc(var(--appbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  /* ★ ГҮЙЛГЭЛТИЙН ЧИЧИРГЭЭ ЭНДЭЭС ГАРДАГ.
     `backdrop-filter` нь ард нь байгаа зургийг кадр БҮРТ дахин бүдгэрүүлнэ
     — бэхэлсэн мөр дээр тэр нь гүйлгэх бүрт давтагдана. Өртөг нь радиусын
     квадратаар өснө.
       * `saturate(180%)` нь ХОЁР ДАХЬ шүүлтүүр байсан. 88% бүрхэг давхаргын
         ард өнгө нь бараг харагдахгүй тул зөвхөн ажил нэмж байв — авлаа.
       * Радиусыг хоёр дахин багасгав. Дэвсгэр нь илүү бүрхэг болсон тул
         нүдэнд ижилхэн, GPU-д дөрөв дахин хөнгөн.
     `translateZ(0)` нь мөрийг ӨӨРИЙН давхаргад гаргана: гүйлгэх үед
     дахин ЗУРАХГҮЙ, зөвхөн шилжинэ. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
  border-bottom: 1px solid transparent;
  transition: border-color var(--base), background var(--base);
}
.appbar.scrolled { border-bottom-color: var(--line); }

.appbar-back {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-left: -12px; flex: none;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ink); border-radius: var(--r-pill);
  transition: background var(--fast);
}
.appbar-back:hover { background: var(--surface-2); }
.appbar-back:active { transform: scale(.94); }

.appbar-title { flex: 1; min-width: 0; }
.appbar-title strong {
  display: block; font-size: 16px; font-weight: 650; letter-spacing: -.015em;
  line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar-title small {
  display: block; color: var(--ink-2); font-size: 12px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar-actions { display: flex; gap: 8px; flex: none; }

.view {
  max-width: var(--page); margin: 0 auto;
  padding: calc(var(--appbar-h) + env(safe-area-inset-top) + var(--s4)) var(--s4)
           calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s6));
}

/* Дэлгэц хооронд шилжих хөдөлгөөн.
   Урагшлахад БАРУУНААС, ухрахад ЗҮҮНЭЭС орж ирнэ — утасны аппуудын
   хэл. Урьд нь дэлгэц гэнэт солигддог байсан нь «хуудас дахин
   ачаалагдлаа» гэсэн мэдрэмж төрүүлж байв.

   Хөдөлгөөн нь ойлголт өгөх ёстой, урт байх ёсгүй: 200мс. */
.view.nav-fwd { animation: nav-in-right 200ms var(--ease-in-view) both; }
.view.nav-back { animation: nav-in-left 200ms var(--ease-in-view) both; }

@keyframes nav-in-right {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes nav-in-left {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to { opacity: 1; transform: none; }
}

/* Хөдөлгөөнөөс эвгүйрдэг хүнд эдгээр нь ажиллахгүй: файлын дээд талд
   бүх хөдөлгөөнийг `!important`-оор зогсоодог ерөнхий дүрэм бий. */

/* ХӨВӨГЧ таб самбар.
 *
 * Урьд нь дэлгэцийн доод ирмэгт наалдсан, дээрээ зураастай бүтэн
 * өргөнтэй тавиур байв — вэб хуудасны мэдрэмж. Лавлагаа болгосон
 * аппуудад самбар нь ирмэгээсээ ТАСАРЧ, дугуй капсул болж, агуулгын
 * дээгүүр хөвдөг. Идэвхтэй таб нь дүүргэсэн капсул — өнгөөр биш,
 * ХЭЛБЭРЭЭР ялгарна.
 *
 * Нэр нь зөвхөн ИДЭВХТЭЙ табад гарна. Тав дахин давтагдсан жижиг
 * бичвэр нь самбарыг дүүргэж, дүрсийг нь дардаг.
 */
.tabbar {
  position: fixed; z-index: 40;
  inset: auto var(--s4) calc(env(safe-area-inset-bottom) + var(--s3)) var(--s4);
  max-width: calc(var(--page) - var(--s5)); margin: 0 auto;
  /* Таб нэмэхэд CSS засах шаардлагагүй байх ёстой. Тоог нь тогтоовол
     шинэ таб нь мөр давж, самбар эвдэрнэ. */
  display: flex; align-items: center; gap: var(--s1);
  height: 60px; padding: 0 6px;
  /* Идэвхтэй табын өргөн (бусад нь 1). JS нь капсулын очих газрыг
     ЭНЭ тооноос бодно — хоёр газар бичвэл зөрнө. */
  --tab-grow: 1.9;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  /* Appbar-тай ижил шалтгаан. Энэ нь бүр ДООД талд хөвдөг тул гүйлгэх
     үед ард нь агуулга тасралтгүй урсдаг — хамгийн үнэтэй байрлал. */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateZ(0);
  border: 1px solid var(--line);
  box-shadow: var(--e2);
  /* ★ Идэвхтэй табын нэр нээгдэх ХООРОНД самбарын агуулга нь өөрөөсөө
     хэдэн пиксель өргөн болдог. Тэр агшинд хуудас хажуу тийш гүйж,
     утсан дээр чичирнэ — хэмжилтээр 390px нь 408px болж байсан.
     Капсул нь хэлбэрээрээ ХЯЗГААРЛАГДСАН тул тайруулах нь зөв. */
  overflow: hidden;
}
.tabbar a {
  flex: 1 1 0; min-width: 0; height: 48px;
  display: flex; align-items: center; justify-content: center;
  gap: 7px; text-decoration: none; color: var(--ink-3);
  font-size: 13px; font-weight: 600; letter-spacing: -.012em;
  border-radius: var(--r-pill);
  transition: color var(--fast), background var(--base), flex-grow var(--base);
}
.tabbar a:hover { text-decoration: none; color: var(--ink-2); }
.tabbar a .ico { flex: none; transition: transform var(--spring); }
/* Нэр нь анхдагчаар нуугдана — идэвхтэй болоход л нээгдэнэ. */
.tabbar a span {
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0; transition: max-width var(--base), opacity var(--fast);
}
.tabbar a[aria-current="page"] {
  flex-grow: var(--tab-grow);
  background: var(--accent); color: var(--on-accent);
}
.tabbar a[aria-current="page"] span { max-width: 120px; opacity: 1; }
.tabbar a[aria-current="page"] .ico { transform: none; }

/* ★ ГУЛСДАГ КАПСУЛ.
 *
 * Урьд нь идэвхтэй табын капсул хуучин табаас АЛГА болж, шинэ дээр
 * ГЭНЭТ гарч ирдэг байв. Одоо НЭГ капсул нэг табаас нөгөө рүү гулсаж,
 * бага зэрэг давж очоод буцаж тогтоно (пүршний хөдөлгөөн) — эзэмшигчийн
 * үзүүлсэн бичлэгт байсан мэдрэмж.
 *
 * `has-glide` нь JS капсулыг ҮҮСГЭСНИЙ ДАРАА л тавигдана. JS ажиллаагүй
 * бол табын өөрийн дэвсгэр хэвээр — самбар хэзээ ч «идэвхгүй» харагдахгүй.
 *
 * Хөдөлгөөн багасгахыг хүссэн хүнд (дээрх `prefers-reduced-motion`)
 * капсул нь гулсахгүй, шууд шилжинэ. */
.tabbar-glide {
  position: absolute; left: 0; top: 50%; z-index: 0;
  height: 48px; margin-top: -24px; width: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  pointer-events: none;
  transition: transform 460ms cubic-bezier(.34, 1.35, .64, 1),
              width 460ms cubic-bezier(.34, 1.35, .64, 1),
              opacity var(--fast);
}
.tabbar-glide.is-placing { transition: none; }
.tabbar.has-glide a { position: relative; z-index: 1; }
.tabbar.has-glide a[aria-current="page"] { background: transparent; }
/* Шинэ табын дүрс бага зэрэг «үсэрнэ» — дарсныг мэдрүүлнэ. */
.tabbar.has-glide a[aria-current="page"] .ico { animation: tab-pop 420ms var(--ease-in-view); }
@keyframes tab-pop {
  0% { transform: scale(.82); }
  55% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Зайн хэрэгслүүд. Мөрөндөө `style="margin-top:14px"` гэж бичихийн оронд
   ЭДГЭЭРИЙГ хэрэглэнэ — тэгвэл бүх хэсгийн хоорондох зай ижил болно.
   -------------------------------------------------------------------------- */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--s1); }
.mb-2 { margin-bottom: var(--s2); }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }
.mb-5 { margin-bottom: var(--s5); }
.center { text-align: center; }
/* Гарчгийн ЯГ доор наалдсан тайлбар. Гарчиг өөрийн доод зайтай тул
   түүнийг нь эсрэгээр нь татна — үүнийг мөр болгон дээр гараар
   бичихээ болих гэсэн үг. */
.hint { margin-top: calc(var(--s2) * -1); }
/* Хоёр тайлбар дараалбал сөрөг зай нь хоёр дахийг эхнийх рүү нь
   ЧИРНЭ — мөрүүд давхарлаж, хоёулаа уншигдахгүй болно. Сөрөг зай нь
   ЗӨВХӨН гарчгийн доор утгатай, өөр тайлбарын доор биш. */
.hint + .hint { margin-top: 0; }
/* ТОВЧНЫ доор ч мөн адил. Товч нь өөрийн хүрээ, дэвсгэртэй тул сөрөг
   зай нь тайлбарыг товчны ирмэг рүү ЧИРЖ, бичвэр нь товчин дээр
   гарсан мэт харагдана. Хэмжсэн зай нь −8px байв. */
.btn + .hint { margin-top: var(--s2); }

/* Карт нь ХҮРЭЭГҮЙ. Хүрээ, сүүдэр, дэвсгэр гурвуулаа нэг ажлыг
   давхардуулж хийдэг — картыг ялгах. Гурвуулаа зэрэг байвал дэлгэц
   нь торлог, хүнд харагдана. Дэвсгэрийн ялгаа дангаараа хангалттай. */
.card {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-bottom: var(--s3);
  box-shadow: var(--e1);
}
.card.flush { padding: 0; overflow: hidden; }
.card > h2 { margin-bottom: var(--s3); }
.card > h2 + .muted { margin-top: calc(var(--s2) * -1); margin-bottom: var(--s3); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin: var(--s6) var(--s1) var(--s3);
}
/* Хэсгийн нэр нь ТОМ үсгээр, сийрэг. Лавлагаан дээрх «PRICE PER
   PERSON», «PROGRAM» шиг — гарчиг нь агуулгаас ялгарах ёстой ч
   түүнээс чанга байх шаардлагагүй. */
.section-head h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}
.section-head:first-child { margin-top: var(--s1); }

/* --------------------------------------------------------------------------
   Hero — очих газрын дүрслэл. Гэрэл зураг ашиглахгүй (эх сурвалж, эрхийн
   асуудалтай) тул тухайн газрын нэрээс тогтмол градиент үүсгэнэ.
   -------------------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--s6) var(--s5) var(--s5);
  margin-bottom: var(--s3);
  color: var(--on-indigo);
  background: var(--indigo);
  box-shadow: var(--e2);
  isolation: isolate;
}
/* Тод цэнхэр — бараан бэх өнгө нь баримт бичгийн аппын мэдрэмж өгдөг
   байсан. Аяллын апп нь урам төрүүлэх ёстой. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  /* Анхдагч нь брэндийн градиент — токен, хатуу бичсэн өнгө БИШ.
     Урьд нь энд #2b8ef0 гэсэн тод цэнхэр байсан бөгөөд палитр саарал
     болоход тэр нь дэлгэц дээрх цорын ганц хашгирсан өнгө болж үлдсэн. */
  background: var(--art, var(--brand-grad));
}
/* Чөлөөт хэлбэрүүд — шүрэн дугуй, цайвар долгион. Хатуу тэгш өнцөгтөөс
   илүү найрсаг харагдана. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Чөлөөт хэлбэрүүд — зөвхөн ГЭРЛЭЭР, өнгөөр биш. Өнгөт дугуй нь
     градиенттэйгээ өрсөлдөж, гарчгаас анхаарлыг сарниулна. */
  background-image:
    radial-gradient(circle at 101% 4%, rgba(255,255,255,.13) 0 58px, transparent 59px),
    radial-gradient(circle at 6% 96%, rgba(255,255,255,.09) 0 80px, transparent 81px),
    radial-gradient(circle at 92% 68%, rgba(255,255,255,.06) 0 46px, transparent 47px);
}
.hero h1 { color: #fff; margin-bottom: var(--s2); }
.hero .lede { color: rgba(255, 255, 255, .82); margin-bottom: var(--s5); }
.hero .kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  margin-bottom: var(--s3);
}

/* --------------------------------------------------------------------------
   Товч
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  padding: 15px 24px; min-height: 52px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--fast), background var(--fast),
              border-color var(--fast), box-shadow var(--fast), opacity var(--fast);
  white-space: nowrap;
}
/* Дүүрэн өргөнтэй товч нь ГОРИЙЖ гарах ёсгүй. `nowrap` нь богино
   товчинд зөв (хоёр мөр болж унжихаас сэргийлнэ) ч, элчин сайдын яамны
   нэр шиг урт бичвэр бүхий блок товчинд буруу: бичвэр нь дугуй хүрээнээсээ
   давж гардаг байсан. */
.btn.block { white-space: normal; text-wrap: balance; }
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.975); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Үндсэн товч нь ДҮҮРЭН, эсрэг өнгөтэй: цайвар горимд хар, харанхуйд
   цагаан. Лавлагаан дээрх «Book tour», «Let\u2019s start» хоёул ийм —
   дэлгэц дээрх хамгийн тод зүйл нь дараагийн алхам байх ёстой. */
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.btn.primary:hover { background: var(--accent); opacity: .88; }
.btn.dark { background: var(--ink); color: var(--bg); }
.btn.dark:hover { opacity: .88; }
/* Хоёрдогч нь ЗӨВХӨН хүрээтэй — дүүргэлтгүй. Хоёр дүүрэн товч зэрэг
   байвал аль нь гол болохыг хүн шийдэх хэрэгтэй болно. */
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn.quiet { background: transparent; color: var(--ink-2); padding: 9px 12px; }
.btn.quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn.block { display: flex; width: 100%; }
.btn.small { padding: 11px 16px; font-size: 13.5px; min-height: 44px; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

.appbar-actions .btn { padding: 10px 15px; font-size: 13.5px; min-height: 44px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }

/* --------------------------------------------------------------------------
   Форм
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 6px; letter-spacing: -.005em;
}
input, select, textarea {
  width: 100%; padding: 12px 13px;
  font: inherit; font-size: 16px; /* iOS дээр автомат томрохоос сэргийлнэ */
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
  appearance: none; -webkit-appearance: none;
}
/* `textarea` нь орхигдсон байсан тул хаягийн нүд хөтчийн анхдагч
   өнгөөр — бөглөсөн бичвэртэй бараг ижил — харагддаг байв. Визний
   маягтан дээр «бөглөсөн юм шиг» харагдах жишээ нь аюултай. */
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 16%, transparent);
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
input[type="checkbox"] { width: auto; }
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }

/* --------------------------------------------------------------------------
   Chip
   -------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  padding: 11px 18px; min-height: 44px; border-radius: var(--r-pill);
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast),
              color var(--fast), transform var(--fast);
}
a.chip:hover { text-decoration: none; }
.chip:hover { border-color: var(--ink-3); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
/* Тоо нь дээд индекс болж жижгэрнэ — лавлагаан дээрх «Nature³⁴» шиг.
   Ижил хэмжээтэй байвал нэртэйгээ өрсөлдөж, чип нь хоёр үгтэй мэт
   уншигдана. */
.chip .n {
  align-self: flex-start; margin-top: 1px;
  opacity: .55; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Wizard
   -------------------------------------------------------------------------- */

.steps { display: flex; gap: 5px; margin-bottom: 20px; }
.steps div {
  flex: 1; height: 3px; border-radius: var(--r-pill); background: var(--line-strong);
  transition: background var(--base);
}
.steps div.on { background: var(--accent); }

/* --------------------------------------------------------------------------
   Жагсаалт / tile
   -------------------------------------------------------------------------- */

.list { display: grid; gap: var(--s3); }

.tile {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s4);
  font: inherit; color: inherit; cursor: pointer; text-decoration: none;
  box-shadow: var(--e1);
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.tile:hover {
  text-decoration: none; transform: translateY(-1px);
  box-shadow: var(--e2); border-color: var(--line-strong);
}
.tile:active { transform: scale(.99); }
.tile .grow { flex: 1; min-width: 0; }
.tile b {
  display: block; font-size: 15px; font-weight: 650; letter-spacing: -.012em;
  line-height: 1.35;
}
.tile small { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
.tile .chev { color: var(--ink-3); flex: none; }

/* Очих газрын жижиг дүрслэл */
.thumb {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-sm);
  background: var(--art, var(--surface-2));
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  position: relative; overflow: hidden;
}
.thumb::after {
  content: ""; position: absolute; inset: 0; opacity: .2;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 1px, transparent 1px 9px);
  mix-blend-mode: soft-light;
}
.thumb .ico { position: relative; z-index: 1; }
.thumb .glyph { position: relative; z-index: 1; --glyph: 30px; }

/* --------------------------------------------------------------------------
   Segmented control
   -------------------------------------------------------------------------- */

/* Ангиллын мөр — доогуур зураастай, дүүргэлтгүй.
 *
 * Урьд нь энэ нь саарал тавиур дотор суусан капсулууд байв. Лавлагаа
 * болгосон аппууд дээр ангилал нь ЗҮГЭЭР Л БИЧВЭР бөгөөд идэвхтэй нь
 * доогуураа нимгэн зураастай. Хайрцаг цөөрөх тусам бичвэр, гэрэл зураг
 * хоёр тодорно.
 */
.segmented {
  display: flex; gap: var(--s5); padding: 0 var(--s1);
  margin-bottom: var(--s5); overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented button {
  flex: none; white-space: nowrap; border: none; background: none; font: inherit;
  font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--ink-3);
  padding: 0 0 var(--s3); min-height: 44px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--fast), border-color var(--fast);
}
.segmented button:hover { color: var(--ink-2); }
.segmented button[aria-selected="true"] {
  color: var(--ink); border-bottom-color: var(--ink);
}

/* --------------------------------------------------------------------------
   ★ «Виз» таб руу анхаарал татах

   Эзэмшигчийн заавар: «visa section must be easy to detect so Виз can have
   a little animation to get attention».

   Хоёр давхарга:

     · ЦЭГ — үргэлж харагдана. Хөдөлгөөн дуусахад, эсвэл хөдөлгөөнийг
       унтраасан хүнд ч мэдээлэл нь үлдэнэ.
     · ХӨДӨЛГӨӨН — ГУРВАН удаа давтагдаад зогсоно. Байнга хөдөлдөг таб
       нь зар сурталчилгаа шиг болж, хүнийг залхаана.

   ⚠ ШОШГЫН ӨНГИЙГ ХӨНДӨХГҮЙ. Сонгогдсон таб нь `--ink` өнгө + доогуур
     зураасаар ялгардаг. «Виз»-ийг ч гэсэн тод өнгөтэй болговол хоёр
     таб зэрэг сонгогдсон мэт харагдана — анхаарал татахын оронд
     эргэлзээ төрүүлнэ. Тиймээс зөвхөн ЦЭГ нь дуудна.

   Цэг нь `--accent` (цайвар горимд бараг хар, харанхуйд цагаан) тул
   хоёр горимд ч хамгийн тод. Хөдөлгөөн нь `transform` ба `box-shadow`
   дээр — байрлал хөндөгдөхгүй тул хөрш табууд хөдлөхгүй.
   -------------------------------------------------------------------------- */

.segmented button .ping {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-left: 5px; vertical-align: 3px;
}

@keyframes tab-ping {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 transparent; }
  50%      { transform: scale(1.5); box-shadow: 0 0 0 5px var(--accent-soft); }
}

@media (prefers-reduced-motion: no-preference) {
  .segmented button .ping { animation: tab-ping 1.6s ease-in-out 3; }
}

/* --------------------------------------------------------------------------
   Өдрийн хуваарь — цагийн шугам
   -------------------------------------------------------------------------- */

.day {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  margin-bottom: 14px; overflow: hidden; background: var(--surface);
  box-shadow: var(--e1);
}
.day-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.day-num {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--art, var(--indigo)); color: #fff;
  font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.day-head .who { flex: 1; min-width: 0; }
.day-head .who b {
  display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -.012em;
}
.day-head .who small { display: block; color: var(--ink-2); font-size: 12px; }

.badge {
  font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--indigo-soft); color: var(--indigo);
}
@media (prefers-color-scheme: dark) {
  .badge { background: var(--surface-3); color: var(--ink-2); }
}
.badge.hot { background: var(--accent-soft); color: var(--accent-ink); }

/* Цагийн шугам: зүүн талд рельс, цэг бүр дээр товгор */
.timeline { padding: 6px 16px 14px; }
.stop {
  position: relative; display: grid;
  grid-template-columns: 46px 1fr; gap: 12px;
  padding: 11px 0;
}
.stop::before {   /* рельс */
  content: ""; position: absolute; left: 52px; top: 0; bottom: 0;
  width: 1.5px; background: var(--line);
}
.stop:first-child::before { top: 20px; }
.stop:last-child::before { bottom: calc(100% - 20px); }
.stop .when {
  font-size: 12.5px; font-weight: 650; color: var(--ink-2);
  font-variant-numeric: tabular-nums; padding-top: 1px; text-align: right;
}
.stop .what { position: relative; padding-left: 18px; min-width: 0; }
.stop .what::before {  /* товгор */
  content: ""; position: absolute; left: -5.5px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong);
}
.stop.is-poi .what::before { border-color: var(--accent); background: var(--accent); }
.stop.is-meal .what::before { border-color: var(--warn); background: var(--warn); }
.stop.is-flight .what::before { border-color: var(--indigo); background: var(--indigo); }
.stop .what b {
  display: block; font-size: 14.5px; font-weight: 620; letter-spacing: -.012em;
  line-height: 1.4;
}
.stop .what .ja { color: var(--ink-3); font-weight: 400; font-size: 12.5px; }
.stop .what .note { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 3px; }
.stop .meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 2px; font-size: 12px; color: var(--ink-3);
}
.stop .meta a {
  color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 4px 0;  /* хуруунд таарах өндөр */
}
.stop.is-quiet .what b { font-weight: 500; color: var(--ink-2); font-size: 13.5px; }

.sleep {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 16px 14px; padding: 12px 14px;
  background: var(--surface-2); border-radius: var(--r-sm);
  font-size: 13px;
}
.sleep b { font-weight: 620; }
.sleep small { display: block; color: var(--ink-2); font-size: 12px; }

/* --------------------------------------------------------------------------
   Тэмдэглэл
   -------------------------------------------------------------------------- */

.note {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: var(--r); padding: 13px 15px; font-size: 13.5px;
  margin-bottom: 14px; border: 1px solid transparent; line-height: 1.5;
}
.note .ico { margin-top: 1px; }
.note > div { min-width: 0; }
.note b { font-weight: 650; }
.note ul { margin: 5px 0 0; padding-left: 17px; }
.note li + li { margin-top: 3px; }
/* ★ Зураг олдоогүй газруудын жагсаалт нь АЖЛЫН ХУУДАС: мөр бүр нь тэр
   газрын дэлгэц рүү хүргэнэ. Утсан дээр дарахад хүрэлцэхүйц өндөр
   байх ёстой — 13px холбоос нь хуруунд жижиг. */
/* Зохиогчгүй зургийн шошго. Тэр нь алдаа гэсэн үг БИШ — өөрөө авсан
   зураг бол зөв. «Шалгах шаардлагатай» гэсэн утга. */
.warn-text { display: block; color: var(--coral-ink, var(--ink-2)); font-weight: 600; }
/* Шөнийн ажлын тэмдэглэл. Мөр нь урт байж болно (элчингийн хаяг
   орно) тул утсан дээр ТАСРАХ ёстой — эс тэгвээс карт хажуу тийш
   гүйж, бусад бүх зүйлийг чирнэ. */
.chore-lines {
  margin: 8px 0 0; padding-left: 17px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
  overflow-wrap: anywhere;
}
.chore-lines li + li { margin-top: 4px; }

.todo-list li { margin-top: 0; }
.todo-list a {
  display: inline-block; padding: 7px 0; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.todo-list small { display: block; margin-top: -4px; }
.note.info { background: var(--indigo-soft); border-color: color-mix(in srgb, var(--indigo) 14%, transparent); color: var(--ink); }
/* Анхааруулга нь ӨӨР харагдах ёстой. Урьд нь `warn` ба `info` хоёр яг
   нэг өнгөтэй (#e2eefc) байсан тул «апп мөнгө авч чадахгүй байна» гэсэн
   мессеж энгийн тайлбартай ялгагдахгүй байв. */
.note.warn { background: var(--coral-soft); border-color: color-mix(in srgb, var(--coral) 40%, transparent); color: var(--ink); }
/* Визний дэлгэцийн «төрийн байгууллага биш» мэдэгдэл — англи мөр нь шалгагчид. */
.gov-note small { display: block; margin-top: 8px; color: var(--ink-2); font-size: 12px; }
.note.good { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 26%, transparent); color: var(--ink); }
.note.tip  { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 26%, transparent); color: var(--ink); }
.note.info .ico { color: var(--indigo); }
.note.warn .ico { color: var(--coral-ink); }
.note.good .ico { color: var(--success); }
.note.tip .ico  { color: var(--warn); }
@media (prefers-color-scheme: dark) {
  .note.info .ico { color: var(--ink-2); }
}

/* --------------------------------------------------------------------------
   Хүснэгт
   -------------------------------------------------------------------------- */

table.b { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.b th, table.b td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); }
table.b th {
  color: var(--ink-3); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
table.b td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.b tr.total td {
  font-weight: 750; border-top: 1.5px solid var(--ink); border-bottom: none;
  padding-top: 12px;
}
.scroll-x {
  overflow-x: auto; margin: 0 -4px; padding: 0 4px;
  -webkit-overflow-scrolling: touch;
}

/* Том тоо — төсвийн толгой */
.figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.figure .big {
  font-size: 30px; font-weight: 750; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.figure .alt { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Явц
   -------------------------------------------------------------------------- */

.progress {
  height: 7px; background: var(--surface-3); border-radius: var(--r-pill);
  overflow: hidden; margin: 10px 0 8px;
}
.progress > div {
  height: 100%; background: var(--success); border-radius: var(--r-pill);
  transition: width var(--spring);
}

/* --------------------------------------------------------------------------
   Сонголт (POI, чеклист)
   -------------------------------------------------------------------------- */

.pick, .check {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px; font: inherit; color: inherit;
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}

/* ★ ЗААГЧ НЬ ДАРАГДДАГ МӨРӨН ДЭЭР Л ГАРНА.
   Чеклистийн зарим мөрийг АПП ӨӨРӨӨ шалгадаг тул хүн тэмдэглэж
   чадахгүй. Тэдгээр нь бусадтай яг адилхан заагчтай, даралтад
   хариулдаг байв — дарагдах мэт харагдаад дарагддаггүй. Эзэмшигчийн
   хэлсэн: «I cannot check the booking section i do not know why».
   `role="button"` нь дарагддаг эсэхийн ГАНЦ эх сурвалж. */
.pick, .check[role="button"] { cursor: pointer; }
.pick:active, .check[role="button"]:active { transform: scale(.99); }
.pick[aria-pressed="true"] { border-color: var(--ink); background: var(--surface-2); }

.box {
  width: 21px; height: 21px; flex: none; margin-top: 1px;
  border: 1.75px solid var(--line-strong); border-radius: 6px;
  display: grid; place-items: center; color: transparent;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.box .ico { width: 13px; height: 13px; stroke-width: 3; }
[aria-pressed="true"] > .box, .check.done > .box, .check.auto > .box {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
.check.auto > .box { background: var(--success); border-color: var(--success); color: var(--on-success); }

.pick b, .check b {
  display: block; font-size: 14.5px; font-weight: 620; letter-spacing: -.012em;
  line-height: 1.4;
}
.pick small { display: block; color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.pick .grow, .check > span:last-child { flex: 1; min-width: 0; }
.ja { color: var(--ink-3); font-weight: 400; font-size: 12.5px; }
.stars { color: #d69a2a; font-size: 12px; letter-spacing: -.5px; }

.check { margin-bottom: 8px; }
.check.auto { cursor: default; background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 24%, transparent); }
.check.missing { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
.check p { font-size: 12.5px; color: var(--ink-2); margin: 4px 0 0; }
.check .why {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 12.5px; margin-top: 7px; font-weight: 550;
}
.check.missing .why { color: var(--accent-ink); }

/* ★ ЗАСАХ ЗАМТАЙ МӨР.
   Аппаас өөрөө шалгагддаг зүйл дутуу байвал мөр нь ЗАСАХ дэлгэц рүү
   аваачна. Тэр мөр дарагддаг гэдгээ ХАРУУЛАХ ёстой — эс тэгвээс
   дарагдахгүй мөртэй ялгагдахгүй. */
.fix-go {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 8px;
  font-size: 12.5px; font-weight: 650; color: var(--accent-ink);
}
@media (prefers-color-scheme: dark) {
  .fix-go { color: var(--accent); }
}
.check.auto .why { color: var(--success); }
@media (prefers-color-scheme: dark) {
  .check.missing .why { color: var(--accent); }
}

.pill {
  display: inline-block; font-size: 12px; font-weight: 750; letter-spacing: .03em;
  padding: 3px 9px; border-radius: var(--r-pill); margin-left: 7px;
  vertical-align: 1.5px; white-space: nowrap;
}
.pill.req { background: var(--accent-soft); color: var(--accent-ink); }
.pill.app { background: var(--success-soft); color: var(--success); }
@media (prefers-color-scheme: dark) {
  .pill.req { color: var(--accent); }
}

/* --------------------------------------------------------------------------
   Санал (буудал, SIM)
   -------------------------------------------------------------------------- */

.offer {
  border: 1px solid var(--line); border-radius: var(--r); padding: 15px;
  background: var(--surface); margin-bottom: 10px; box-shadow: var(--e1);
}
.offer.featured { border-color: color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-soft); }
.offer .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.offer b { font-size: 15px; font-weight: 650; letter-spacing: -.012em; }
.offer .price {
  font-weight: 750; color: var(--ink); font-size: 14.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.offer small { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 4px; }
.offer .links { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; }
.offer .links a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 11px 14px; min-height: 44px;
  transition: background var(--fast), border-color var(--fast);
}
.offer .links a:hover { text-decoration: none; background: var(--surface-2); border-color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

details.g { border-bottom: 1px solid var(--line); }
details.g:last-child { border-bottom: none; }
details.g summary {
  cursor: pointer; font-weight: 620; font-size: 14.5px; padding: 15px 0;
  list-style: none; display: flex; align-items: center; gap: 10px;
  letter-spacing: -.012em;
}
details.g summary::-webkit-details-marker { display: none; }
details.g summary .ico { margin-left: auto; color: var(--ink-3); transition: transform var(--base); }
details.g[open] summary .ico { transform: rotate(90deg); }
details.g .body { padding-bottom: 16px; }
details.g .body p { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
details.g .body p b { color: var(--ink); font-weight: 620; }

/* --------------------------------------------------------------------------
   Хоосон / ачаалж буй төлөв
   -------------------------------------------------------------------------- */

.empty { text-align: center; padding: 44px 20px; }
.empty .art {
  width: 74px; height: 74px; margin: 0 auto 18px; border-radius: var(--r-lg);
  display: grid; place-items: center; color: #fff;
  background: var(--art, linear-gradient(135deg, var(--indigo), #3d6394));
  box-shadow: var(--e2);
}
.empty h2 { margin-bottom: 6px; }
.empty .muted { margin-bottom: 20px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-xs);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-card { height: 96px; border-radius: var(--r-lg); margin-bottom: 14px; }

/* Товчны дотор эргэлдэх дугуй. Саарал товч нь «эвдэрсэн» гэж хэлдэг,
   эргэлдэж байгаа товч нь «ажиллаж байна» гэж хэлнэ — ялгаа нь хүн
   хүлээх үү, хуудсаа хаах уу гэдгийг шийднэ. */
.btn-spin {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px;
  vertical-align: -2px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  opacity: .8; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; z-index: 60;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
  transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: 12px 20px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 550; box-shadow: var(--e3);
  max-width: calc(100vw - 40px);
  animation: toast-in var(--spring) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 14px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* --------------------------------------------------------------------------
   Том дэлгэц
   -------------------------------------------------------------------------- */

/* Утсаа хэвтүүлсэн үед дэлгэц намхан болдог — толгой/хөлийг нимгэлнэ */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --appbar-h: 48px; --tabbar-h: 52px; }
  .tabbar a { flex-direction: row; gap: 7px; font-size: 12px; }
  .hero { padding: 20px 18px; }
  .display { font-size: 25px; }
}

@media (min-width: 700px) {
  :root { --tabbar-h: 66px; }
  .view { padding-left: 24px; padding-right: 24px; }
  .tabbar { grid-template-columns: repeat(4, minmax(0, 150px)); justify-content: center; }
  .hero { padding: 40px 32px 34px; }
  .display { font-size: 38px; }
  .card { padding: 22px; }
}

/* --------------------------------------------------------------------------
   Хуруугаар дарах checkbox мөр — 21px талбай биш, бүтэн мөр дарагдана
   -------------------------------------------------------------------------- */

.switch-row {
  display: flex; align-items: center; gap: 11px;
  min-height: 48px; padding: 0 13px; margin: 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); cursor: pointer;
  font-size: 14px; font-weight: 550;
}
/* ★ ЖИНХЭНЭ унтраалга.
 *
 * Урьд нь энэ нь ердийн `checkbox` байсан. Гэвч файлын дээд талд
 * `input, select, textarea { appearance: none }` гэсэн ерөнхий дүрэм
 * байдаг — тэр нь хөтчийн зурдаг ХАЙРЦГИЙГ Ч, ТЭМДЭГЛЭГЭЭГ Ч авч
 * хаядаг. Үлдсэн нь хоосон дугуй хүрээ: асаалттай ба унтраалттай нь
 * ЯГ ИЖИЛ харагдана.
 *
 * Тиймээс дарахад нь ажилладаг мөртлөө «дарагдахгүй байна» гэж
 * мэдрэгддэг байв — эзэмшигч яг үүнийг мэдээлсэн. Хариу өгдөггүй
 * товч нь эвдэрсэн товчноос ялгагдахгүй.
 *
 * `appearance: none`-ыг эргүүлэхийн оронд түүнийг ХЭРЭГЛЭНЭ: зам ба
 * бөмбөлөг өөрсдөө зурна. Ингэснээр хоёр төлөв нь хэлбэрээрээ ч,
 * өнгөөрөө ч, БАЙРЛАЛААРАА ч ялгарна. */
.switch-row input[type="checkbox"] {
  position: relative; flex: none;
  width: 52px; height: 32px; padding: 0; margin: 0;
  background: var(--surface-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--base), border-color var(--base);
}
.switch-row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--e1);
  transition: transform var(--base), background var(--base);
}
.switch-row input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
.switch-row input[type="checkbox"]:checked::after {
  transform: translateX(20px); background: var(--on-accent);
}
.switch-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Мөр бүхэлдээ дарагдана — 52px унтраалга нь хуруунд жижиг. */
.switch-row { -webkit-tap-highlight-color: transparent; }
.switch-row span { margin: 0; }

/* Тайлбар бичвэр 12px-ээс жижиг байвал утсан дээр уншигдахгүй. */
.switch-row small,
.grow > small { font-size: 12px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Холбоос-товч — бичвэр доторх линк хуруунд жижиг байдаг тул тусад нь
   -------------------------------------------------------------------------- */

.link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.link-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 10px 14px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  transition: background var(--fast), border-color var(--fast);
}
.link-btn:hover {
  text-decoration: none; background: var(--surface-2); border-color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Доод хуудас (bottom sheet)

   Утсан дээр модал цонхыг дэлгэцийн голд гаргах нь буруу: эрхий хуруу
   доод талд байдаг тул дээд талын товч хүрэхгүй. Доороос гарч ирдэг
   хуудас нь iOS/Android-ын өөрийн зан төлөвтэй нийцнэ.
   -------------------------------------------------------------------------- */

.sheet-back {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(13, 16, 18, .42);
  animation: fade-in var(--fast) both;
  display: flex; align-items: flex-end; justify-content: center;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  width: 100%; max-width: var(--page);
  max-height: min(88vh, 760px);
  /* Утасны хөтөч дээр `vh` нь хаягийн мөр НУУГДСАН үеийн өндөр. Босоо
     утсанд 12%-ийн зай нь хүрэлцдэг ч хэвтээ утсанд хаягийн мөр нь
     өндрийн 12%-иас их эзэлдэг тул хуудасны гарчиг, хаах товч дэлгэцээс
     гарна. `dvh` нь ЯГ харагдаж буй өндөр. Хуучин WebView `dvh`-г
     мэдэхгүй тул дээрх мөрөө хэвээр авна. */
  max-height: min(88dvh, 760px);
  background: var(--bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--e3);
  display: flex; flex-direction: column;
  animation: sheet-up var(--spring) both;
  padding-bottom: env(safe-area-inset-bottom);
  /* Чирэлт нь `transform`-оор явна. Буцаж очих хөдөлгөөнийг ЭНД
     тодорхойлж, чирч байх үед нь унтраана (`.dragging`) — эс тэгвээс
     хуруу нь тасралтгүй хоцорч, наалдамхай мэдрэмж төрнө. */
  transition: transform 240ms var(--ease-in-view);
  touch-action: pan-y;
}
.sheet.dragging { transition: none; }

/* ★ ИРМЭГЭЭСЭЭ ГАРЧ ИРНЭ.
   Урьд нь 18px-ээс л дээшилдэг байсан нь «гарч ирэв» гэхээсээ
   «анивчив» гэсэн мэдрэмж төрүүлдэг байв. Утасны хуудас нь дэлгэцийн
   ирмэгээс бүтнээрээ гарч ирдэг. */
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* Бариул нь ЧИРЭГДДЭГ — `dragToDismiss` үзнэ үү. Хэмжээ нь жижиг ч
   хүрэх талбар нь эргэн тойрныхоо зайг хамардаг. */
.sheet-grip {
  width: 38px; height: 4px; border-radius: 2px; flex: none;
  background: var(--line-strong); margin: 9px auto 2px;
  cursor: grab;
}
.sheet.dragging .sheet-grip { cursor: grabbing; background: var(--ink-3); }
.sheet-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 12px; flex: none;
  border-bottom: 1px solid var(--line);
}
.sheet-head b { font-size: 16px; font-weight: 650; flex: 1; min-width: 0; }
.sheet-head small { display: block; color: var(--ink-2); font-size: 12.5px; font-weight: 450; }
/* Хуудсыг чирэхгүй: доод хуудас нь ард нь ГҮЙЛГЭЖ БОЛОХГҮЙ. Энэ
   шинжийг өмнө нь устсан `.pick-list` барьж явсан — жинхэнэ дотоод
   гүйлгэгч нь ЭНЭ учир зөв эзэн дээрээ ирэв. */
.sheet-body {
  padding: 16px 18px 20px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* --------------------------------------------------------------------------
   Жишээ бичиг баримт
   --------------------------------------------------------------------------

   Апп бүх бичгийг гаргаж чадахгүй — ажлын газрын тодорхойлолт, банкны
   хуулга нь бидний гараас гардаггүй. Гэхдээ ЯМАР харагдахыг нь харуулж
   чадна: эзэмшигчийн монголоор тайлбарласан жишээ зураг.

   Зураг нь БҮТНЭЭР харагдах ёстой (`contain`, `cover` биш): бичиг
   баримтын ирмэг тасарвал хүн юу дутуу байгааг мэдэхгүй.
   -------------------------------------------------------------------------- */

.sample-btn { margin-top: 8px; }

/* Операторын дэлгэц: жишээ баримт оруулах мөр */
.sample-row .sample-preview:empty { display: none; }
.sample-preview {
  border-radius: var(--r); overflow: hidden; background: var(--surface-2);
  margin-bottom: var(--s3); padding: 6px;
}
.sample-preview img {
  width: 100%; height: auto; max-height: 34vh;
  object-fit: contain; display: block;
}
.sample-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* Файл сонгох нь `<label>` дотор сууна — товч шиг харагдах ёстой */
.sample-actions .btn { cursor: pointer; }
.sample-state { color: var(--ink-2); }

.sample-shot {
  border-radius: var(--r); overflow: hidden;
  background: var(--surface-2); padding: 8px;
}
.sample-shot img {
  width: 100%; height: auto; display: block;
  max-height: 62vh; object-fit: contain;
}

.sheet-foot {
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); flex: none;
  display: flex; gap: 10px; background: var(--surface);
}
.sheet-foot .btn { flex: 1; }

@media (min-width: 700px) {
  .sheet-back { align-items: center; }
  .sheet { border-radius: var(--r-lg); max-width: 620px; }
}

/* --------------------------------------------------------------------------
   «Мэдээлэл буруу байна» товч

   Тухайн газрын үүдэнд зогсож байгаа хүн бол мэдээллийн хамгийн зөв эх
   сурвалж. Товч нь мэдээллийг харж байгаа газартаа байх ёстой — тусдаа
   "санал хүсэлт" хуудас руу явбал хэн ч бичихгүй.
   -------------------------------------------------------------------------- */

.report-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 8px 10px; margin-top: 2px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 550; color: var(--ink-3);
  border-radius: var(--r-pill); transition: color var(--fast), background var(--fast);
}
.report-btn:hover { color: var(--accent); background: var(--accent-soft); }
.report-btn:active { transform: scale(.96); }

/* --------------------------------------------------------------------------
   Операторын дэлгэц
   -------------------------------------------------------------------------- */

/* Мөрийн ул мөр. Хугарахгүй урт мөрүүд ХУУДСЫГ өргөсгөх ёсгүй —
   тиймээс өөрөө гүйдэг хайрцагт суулгана. */
.trace {
  margin: 8px 0 0;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
  background: var(--surface-2);
  border-radius: var(--r-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  white-space: pre;
}

/* Тоо нь ХОЁР байхаа больсон: операторын хураангуй гурав, сонирхлын
   дэлгэц нь өгөгдлөөс хамаарч N ширхэг харуулна. Тогтмол хоёр багана
   нь сүүлийн мөрөнд ганц бие «өнчин» нүд үлдээдэг. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px;
}
.stat b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.stat small { color: var(--ink-2); font-size: 12.5px; }
.stat.alert b { color: var(--accent); }

.rep {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; margin-bottom: 10px;
}
.rep .who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rep .who b { font-size: 14px; font-weight: 650; }
.rep .msg { font-size: 14px; line-height: 1.5; }
.rep .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.pill.edited { background: var(--warn-soft); color: var(--warn); }
.pill.hidden-pill { background: var(--surface-3); color: var(--ink-2); }

/* Засварын талбар: анхны утга нь ямагт харагдаж байх ёстой — оператор
   юуг нь өөрчилж байгаагаа мэдэхгүй бол буруу засвар хийнэ. */
.ed { border-bottom: 1px solid var(--line); padding: 14px 0; }
.ed:last-child { border-bottom: 0; }
.ed .name {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 7px;
}
.ed .name .t { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.ed textarea, .ed input {
  /* 16px-ээс жижиг байвал iOS дарахад хуудсыг автоматаар томруулна */
  width: 100%; min-height: 48px; padding: 12px 13px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); resize: vertical;
}
.ed textarea:focus, .ed input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.ed .was {
  margin-top: 7px; font-size: 12px; color: var(--ink-3);
  display: flex; align-items: flex-start; gap: 6px;
}
.ed .was code {
  font-size: 12px; background: var(--surface-2); padding: 2px 6px;
  border-radius: var(--r-xs); word-break: break-word;
}
.ed.changed .name { color: var(--accent); }

/* --------------------------------------------------------------------------
   Операторын өөрийн зураг
   -------------------------------------------------------------------------- */

.photo-pick {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 9px;
}
/* Файлын талбар нь `hidden` — `<label>` нь өөрөө товч болно. Утсан дээр
   энэ нь зураг авах, цомгоос сонгох хоёрыг нэг дор өгдөг. */
.photo-pick label { cursor: pointer; margin: 0; }
.photo-state { font-size: 12px; line-height: 1.4; flex: 1; min-width: 120px; }

.photo-preview:empty { display: none; }
.photo-preview {
  margin-top: 10px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-2); max-width: 220px;
}
.photo-preview img { display: block; width: 100%; height: auto; }

.photo-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.photo-cell {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px; background: var(--surface-2);
  border-radius: var(--r-sm); min-width: 0;
}
.photo-cell img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--r-xs);
}
.photo-cell small { font-size: 12px; line-height: 1.35; word-break: break-word; }
.photo-cell .btn { margin-top: auto; }

.ed select {
  width: 100%; min-height: 48px; padding: 12px 13px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.ed select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Заавал бөглөх талбарын тэмдэг */
.req-dot { color: var(--accent); font-size: 15px; line-height: 1; }

/* --------------------------------------------------------------------------
   Туслах — чат

   Асуулт бичих талбар нь дэлгэцийн доод хэсэгт наалдана: утсан дээр
   эрхий хуруу тэнд байдаг, чат бүрийн дараа дээшээ гүйлгэх шаардлагагүй.
   -------------------------------------------------------------------------- */

.chatlog { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }

.bubble {
  max-width: 90%; padding: 13px 15px; border-radius: var(--r-lg);
  font-size: 15px; line-height: 1.55;
}
.bubble.me {
  align-self: flex-end; background: var(--accent); color: var(--on-accent);
  border-bottom-right-radius: var(--r-xs);
}
.bubble.bot {
  align-self: flex-start; background: var(--surface);
  border: 1px solid var(--line); border-bottom-left-radius: var(--r-xs);
}
.bubble.bot p + .hit { margin-top: 12px; }
.bubble .pill { margin-bottom: 8px; }

.hit {
  margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--line);
}
.hit b { display: block; font-size: 14px; font-weight: 650; margin-bottom: 3px; }
.hit p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.hit-do { display: flex; flex-wrap: wrap; gap: 8px; }
.hit-do:not(:empty) { margin-top: 10px; }

/* "Бичиж байна" гурван цэг */
.dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  animation: blink 1.1s infinite both;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.askbar {
  position: sticky; z-index: 30;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);
  display: flex; gap: 9px; margin-top: 16px;
  padding: 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  /* `sticky` + `backdrop-filter` нь хамгийн муу хослол: наалдсан мөр нь
     гүйлгэлт бүрт байрлалаа ӨӨРЧИЛДӨГ тул бүдгэрүүлэлт нь дахин
     тооцоологдоно. Радиусыг хоёр дахин багасгаж, давхаргад гаргав. */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateZ(0);
  border: 1px solid var(--line-strong); box-shadow: var(--e2);
}
.askbar input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 15px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: transparent; border: 0; outline: none;
}
.askbar .btn { flex: none; width: 46px; min-height: 46px; padding: 0; }
.ask-tips { margin-top: 6px; }

/* --------------------------------------------------------------------------
   Чангаар унших товч
   -------------------------------------------------------------------------- */

.speak-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 15px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--indigo); background: var(--indigo-soft);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  transition: transform var(--fast), opacity var(--fast);
}
.speak-btn:active { transform: scale(.96); }
.speak-btn.speaking { animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.phrase {
  display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: 62px; padding: 13px 15px; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); transition: border-color var(--fast), transform var(--fast);
}
.phrase:hover { border-color: var(--line-strong); }
.phrase:active { transform: scale(.99); }
.phrase .grow { flex: 1; min-width: 0; }
.phrase b { display: block; font-size: 15px; font-weight: 600; }
.phrase small { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.phrase .ja { font-size: 14px; color: var(--ink); }
.phrase .ico { color: var(--indigo); flex: none; }
.phrase.speaking { border-color: var(--indigo); }

@media (prefers-color-scheme: dark) {
  .speak-btn { color: var(--ink); background: var(--surface-2); }
  .phrase .ico { color: var(--ink-2); }
}

/* --------------------------------------------------------------------------
   Блок хоорондын зай

   `.card` нь өөрөө доод зайтай ч `.list`, `.row`, `.offer` зэрэг нь үгүй.
   Тэднийг дараалуулан тавихад хоорондоо наалдаж, хоёр өөр зүйл нэг блок
   мэт харагддаг байсан. Утсан дээр дэлгэц нарийн тул энэ нь илүү мэдэгдэнэ.
   -------------------------------------------------------------------------- */

.list + .card,
.list + .list,
.list + .btn,
.offer + .card,
.note + .card,
.card + .note,
.note + .note,
.steps + .card,
.stat-row + .card { margin-top: 14px; }

/* Дараалсан хоёр хавтан. Урьд нь дэлгэц бүр өөрөө
   `<div style="height:10px">` тавьж зай гаргадаг байсан тул үүнийг
   тавьж мартсан газар хавтангууд НААЛДАЖ, гурван сонголт нэг урт
   блок мэт харагддаг байв (зорилго сонгох дэлгэц). Тэр зайг энд нэг
   удаа тодорхойлно; гараар тавьсан зайтай газарт хавтангууд зэрэгцээ
   БИШ тул давхардахгүй. */
.tile + .tile { margin-top: 10px; }

.list:not(:last-child) { margin-bottom: 14px; }

/* Нэг карт доторх хоёр эгнээ — «ирэх нислэг» ба «буцах нислэг» гэх мэт */
.row + .row { margin-top: 12px; }

/* Талбарын дараа шууд ирэх товч наалдаж болохгүй */
.field + .btn,
.chips + .btn { margin-top: 4px; }

/* Дараалсан хоёр бүтэн өргөнтэй товч. Профайл дээр «Нууц үг солих»,
   «Гарах» хоёр 0px зайтай наалдаж, нэг тасархай товч мэт харагдаж
   байв. `#view >` гэж хязгаарлах нь ЧУХАЛ: доод хуудасны хөлд товчнууд
   ХАЖУУГААР зэрэгцдэг тул тэнд дээд зай утгагүй. */
#view > .btn + .btn { margin-top: 10px; }

/* Ачаалж дүүргэдэг сав (захиалга, төхөөрөмж) нь дотроо жагсаалттай
   болмогц доорхи товчноос салах ёстой. Хоосон үедээ зай эзлэхгүй. */
#view > div:not(:empty) + .btn { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Нүүр дэлгэц — НЭГ дэлгэц, НЭГ үйлдэл

   Өмнө нь hero-гийн дор «Апп юу хийж өгөх вэ» гэсэн 4 дарагдахгүй хуудас
   байсан. Тэдгээр нь бүртгүүлэх товчийг дэлгэцээс доош түлхэж, хэрэглэгч
   ямар ч ашиггүй 4 хуудас гүйлгэдэг байв. Танилцуулга нь апп өөрөө.
   -------------------------------------------------------------------------- */

.hero-art { display: block; width: 100%; height: auto; margin-top: 20px; }

.cta-stack { display: grid; gap: 10px; margin-top: 20px; }
.btn.lg { min-height: 56px; font-size: 16px; font-weight: 650; }

/* --------------------------------------------------------------------------
   Хураангуй өдөр

   Өдөр бүрийг задалж харуулбал 7 хоногийн аялал 16 дэлгэц болдог байсан.
   Эхний өдөр нээлттэй, бусад нь нэг мөрийн хураангуйтай.
   -------------------------------------------------------------------------- */

.day > .day-head { cursor: pointer; list-style: none; }
.day > .day-head::-webkit-details-marker { display: none; }
.day-head .gist {
  display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.day-head .chev {
  color: var(--ink-3); flex: none; transition: transform var(--base);
}
.day[open] > .day-head .chev { transform: rotate(90deg); }
.day[open] > .day-head .gist { display: none; }
.day > .day-head:hover { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   Хайлтын мөр
   -------------------------------------------------------------------------- */

.search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; min-height: 52px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); box-shadow: var(--e1);
  color: var(--ink-3);
}
.search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-bar input {
  flex: 1; min-width: 0; min-height: 50px; padding: 0;
  font: inherit; font-size: 16px; color: var(--ink);
  background: transparent; border: 0; outline: none;
}
.search-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }

.tile.place { align-items: flex-start; cursor: default; }

/* Дарагддаг мөр. Хүн дарж болохыг нь дарахаасаа ӨМНӨ мэдэх ёстой —
   заагч, баруун талын сум, дарахад мэдрэгдэх хөдөлгөөн гурвуулаа
   «энэ мөр нээгдэнэ» гэж хэлнэ. */
.tile.place.tappable { cursor: pointer; }
.tile.place.tappable:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.tile.place .chev { align-self: center; }


/* Газрын дэлгэрэнгүй дэх бодит баримтууд */
.facts { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: 10px; }
.facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.facts .ico { flex: none; color: var(--accent); margin-top: 1px; }

/* --------------------------------------------------------------------------
   Хураангуй ангилал (визний чеклист)

   Бүх ангиллыг задалбал 6 дэлгэц болдог байсан. Дутуу зүйлтэй ангилал
   нээлттэй, бүрэн нь хураангуй — анхаарал дутуу зүйл дээр очно.
   -------------------------------------------------------------------------- */

.cat { border-bottom: 1px solid var(--line); }
.cat:last-of-type { border-bottom: 0; }
.cat-head {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 12px 2px; cursor: pointer; list-style: none;
}
.cat-head::-webkit-details-marker { display: none; }
.cat-head b { display: block; font-size: 15px; font-weight: 650; }
.cat-head small { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 1px; }
.cat-head .grow { flex: 1; min-width: 0; }
.cat-head .chev { color: var(--ink-3); flex: none; transition: transform var(--base); }
.cat[open] > .cat-head .chev { transform: rotate(90deg); }
.cat-body { padding-bottom: 8px; }

.cat-mark {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-pill);
}
.cat-mark.ok { background: var(--success-soft); color: var(--success); }
.cat-mark.warn { background: var(--coral-soft); color: var(--coral-ink); }

/* --------------------------------------------------------------------------
   Төлбөр
   -------------------------------------------------------------------------- */

.qr {
  display: block; width: 100%; max-width: 260px; margin: 0 auto;
  border-radius: var(--r); background: #fff; padding: 12px;
  border: 1px solid var(--line);
}

.bank-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bank {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 12px; text-align: center;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.bank:hover { text-decoration: none; border-color: var(--accent); }

/* Дансны мэдээлэл. Хэрэглэгч эдгээрийг банкны аппад ГАРААР шивнэ —
   дарахад хуулагдана. */
.pay-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.pay-row:last-of-type { border-bottom: 0; }
.pay-row span { color: var(--ink-2); font-size: 13px; flex: none; }
.pay-row b {
  font-size: 15px; font-weight: 650; text-align: right;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.pay-row.hot b { color: var(--accent); font-size: 17px; letter-spacing: .04em; }
.copyable { cursor: pointer; text-decoration: underline dotted var(--ink-3); }
.copyable:active { opacity: .6; }

/* Шилжүүлэх дүн — цонх нээмэгц хамгийн түрүүнд харагдах ёстой зүйл */
.pay-total {
  text-align: center; padding: 12px 12px 14px;
  background: var(--surface-2); border-radius: var(--r); margin-bottom: 16px;
}
.pay-total .overline { display: block; margin-bottom: 2px; }
.pay-total b {
  font-size: 27px; font-weight: 700; letter-spacing: -.02em;
  /* `--indigo` нь харанхуй горимд ДЭВСГЭР өнгө болдог тул бичвэрт
     хэрэглэвэл дүн нь бараг харагдахгүй болно. */
  font-variant-numeric: tabular-nums; color: var(--accent-ink);
}

/* Дугаарлагдсан алхмууд. Шилжүүлэг нь гурван үйлдэл — тэр гурвыг нь
   тоогоор нь харуулбал хаана явааг эргэлзэхгүй. */
.pay-steps { list-style: none; counter-reset: paystep; }
.pay-steps > li {
  counter-increment: paystep;
  position: relative; padding: 0 0 18px 38px;
}
.pay-steps > li::before {
  content: counter(paystep);
  position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--accent); color: var(--on-accent);
}
/* Алхмуудыг холбосон босоо зураас — сүүлчийнхээс доош үргэлжлэхгүй */
.pay-steps > li:not(:last-child)::after {
  content: ''; position: absolute; left: 12.5px; top: 30px; bottom: 6px;
  width: 1px; background: var(--line-strong);
}
.pay-steps > li > p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 6px; }
.pay-steps > li > p b { color: var(--ink); font-weight: 650; }
.pay-steps .tiny { margin-top: 8px; }
.pay-steps .pay-status { margin-top: 8px; }
.pay-steps .pay-row { min-height: 44px; }

/* Гүйлгээний утга. Энэ кодыг мартвал төлбөр эзэнгүй болдог тул
   цонхны хамгийн тод, хамгийн том дарагдах зүйл нь байх ёстой. */
.ref-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 12px 16px;
  background: var(--accent-soft); border: 1.5px dashed var(--accent);
  border-radius: var(--r-sm); cursor: pointer; text-decoration: none;
}
.ref-chip:active { opacity: .7; }
.ref-code {
  font-size: 21px; font-weight: 700; letter-spacing: .08em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ref-hint {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
}

.pay-tools { display: flex; gap: 8px; margin: 4px 0 16px; }
.pay-tools .btn { flex: 1; }

/* Төлбөр орсныг апп өөрөө хардаг — хэрэглэгч энэ мөрийг харж хүлээнэ */
.pay-status {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-sm);
  font-size: 13.5px; background: var(--surface-2); color: var(--ink-2);
}
.pay-status .dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-3);
}
/* Нэрийг нь `pulse` гэвэл `.speak-btn`-ий keyframes-тэй мөргөлдөнө —
   CSS-д сүүлд тодорхойлсон нь өмнөхийг чимээгүй дарж бичдэг. */
.pay-status[data-state="waiting"] .dot,
.pay-status[data-state="claimed"] .dot { animation: pay-pulse 1.6s ease-in-out infinite; }
.pay-status[data-state="claimed"] { background: var(--warn-soft); color: var(--warn); }
.pay-status[data-state="claimed"] .dot { background: var(--warn); }
.pay-status[data-state="paid"] { background: var(--success-soft); color: var(--success); }
.pay-status[data-state="paid"] .dot { background: var(--success); animation: none; }
.pay-status[data-state="cancelled"] { background: var(--surface-2); color: var(--ink-3); }

@keyframes pay-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .pay-status .dot { animation: none !important; }
}

/* Захиалгын түүх */
.order {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px; background: var(--surface); font: inherit; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px;
}
button.order { cursor: pointer; }
button.order:active { background: var(--surface-2); }
.order .grow { flex: 1; min-width: 0; }
.order b { display: block; font-size: 14.5px; font-weight: 650; }
/* Нэг мөрөнд багтаана. Хоёр мөр болж хуваагдвал төлвийн шошго нь
   тэдгээрийн ДУНД гацаж, эвгүй харагдана. */
.order small {
  display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.order .state {
  flex: none; font-size: 12px; font-weight: 650; padding: 6px 11px;
  border-radius: var(--r-pill);
}
.state.pending { background: var(--surface-2); color: var(--ink-2); }
.state.claimed { background: var(--warn-soft); color: var(--warn); }
.state.paid { background: var(--success-soft); color: var(--success); }
.state.cancelled { background: var(--surface-2); color: var(--ink-3); }

/* Хуулга уншсаны үр дүн */
.txns { margin-top: 12px; }
.txn {
  display: flex; gap: 10px; padding: 11px 12px; margin-bottom: 8px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); border-left-width: 4px;
}
.txn .grow { flex: 1; min-width: 0; }
.txn b { display: block; font-size: 14px; font-weight: 650; }
.txn small { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.txn small.tiny { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txn.paid { border-left-color: var(--success); }
.txn.short_payment, .txn.unknown_order { border-left-color: var(--coral); }
.txn.duplicate, .txn.no_reference, .txn.already_paid, .txn.not_payable {
  border-left-color: var(--line-strong);
}

/* --------------------------------------------------------------------------
   Мэндчилгээний дэлгэц

   Апп нээгдэх хормыг нөхнө. Онгоц Улаанбаатараас хөөрч нумаа зурж
   буухад брэнд нь ард нь гарч ирнэ.

   Хоёр зүйлийг барьж авсан:

     * Цагаан анивчилт — энэ хэсэг нь бүрхүүлд ШУУД бичигдсэн тул JS
       ачаалагдахыг хүлээхгүй, эхний зурагтаа гарна.
     * Хязгааргүй саатал — хөдөлгөөн нь `--splash-run` хугацаанд дуусна.
       Апп түүнээс удаан ачаалбал НЭМЖ хүлээлгэхгүй, шууд алга болно.
       Хөдөлгөөн багасгах горимд бүр огт хүлээлгэхгүй (app.js).

   ХУГАЦААНЫ ХУВААРЬ (`SPLASH_RUN_MS` = 5.3s):
     0.00s  тэнгэр асна
     0.10s  ЛОГОНЫ ӨӨРИЙН ОНГОЦ Монголын зүгээс нисч эхэлнэ
     1.20s  онгоц төвд ирж ШИНГЭЖ, оронд нь тэмдэг гарч ирнэ
     1.40s  «Тавтай морил»
     1.50s  тэмдгийн сүүдэр суух
     1.70s  хавтгай хэлбэр → бүтэн лого (1.0s-д дүүрнэ)
     1.75s  «FROM MONGOLIA TO» бүтнээрээ
     2.30s  уриа
     2.60s  явцын зураас
     3.40s  ★ товчлол ЭХЭЛНЭ: FROM + ON + TO → FROMONTO (1.1s)
     4.45s  үсгүүд нэр шиг нягтарна
     4.70s  SINCE 2026
     5.30s  бүхэлдээ дээшилж арилна

   ⚠ Хугацаа нь `app.js`-ийн `SPLASH_RUN_MS`-тэй ТААРАХ ёстой. Богино
   бол нэр нь товчлогдож амжаагүй байхад дэлгэц алга болно —
   `test_the_full_run_lasts_as_long_as_the_animation_does` барина.

   ★ ЯАГААД ТОВЧЛОЛ БОЛОН НЯГТРАЛ НЬ ДАРААЛЖ БОЛОВ.
   Хоёулаа BAЙРЛАЛ бодуулдаг: `max-width` нь өргөнийг, `letter-spacing`
   нь үсэг хоорондын зайг. Зэрэг ажиллуулбал хөтөч кадр бүрт мөрөө
   хоёр удаа дахин байрлуулна — утсан дээр тэр нь чичиргээ болж
   мэдэгдэнэ. Дараалуулахад кадр бүрт нэг л ажил үлдэнэ.
   -------------------------------------------------------------------------- */

.splash {
  --splash-fly-delay: .10s;
  /* Нислэг нь урт байх тусам «холоос ирж байна» гэсэн мэдрэмж төрнө.
     .95s дээр онгоц нь дэлгэцийг гатлаад шууд зогсдог байв. */
  --splash-fly: 1.3s;
  /* Хөөрөхдөө хурдан, ирэхдээ удаан. Онгоц төв рүү ЗӨӨЛӨН ирж зогсох
     ёстой — жигд хурдтай нисвэл ханан дээр мөргөсөн мэт харагдана. */
  --splash-ease: cubic-bezier(.16, .84, .30, 1);

  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 32px;
  background: var(--bg);
  transition: opacity .45s var(--ease-in-view), transform .45s var(--ease-in-view),
              visibility .45s var(--ease-in-view);
}
.splash[hidden] {
  /* `hidden` нь `display:none` болгодог тул гарах шилжилт харагдахгүй
     болно — хөдөлгөөнөө үзүүлэхийн тулд дарж бичив. */
  display: flex; opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(1.04);
}

/* Тэнгэр — доод давхарга. Өнгө нь брэндийн аяыг тогтооно. */
/* Тэнгэр. Видеоны эхлэл нь нар жаргах цагийн тал нутаг — тэр дулааныг
   энд өнгөөр л дуурайна. Гэрэл ба харанхуй горим ХОЁУЛАНД нь ажиллах
   ёстой тул логоны элсэн өнгийг МАШ бага тунгаар хэрэглэнэ: харанхуйд
   бүдэг халуун туяа, гэрэлд бараг мэдэгдэхгүй дулаан. */
.splash-sky {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(115% 62% at 50% 30%, rgba(232, 203, 125, .34) 0%, transparent 64%),
    radial-gradient(120% 78% at 50% 34%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(90% 60% at 50% 108%, var(--surface-2) 0%, transparent 70%);
  opacity: 0;
  /* Дулаан нь ГАРЧ ИРЭЭД, лого газардахад НАМЖИНА — тэгж байж
     анхаарал логон дээр үлдэнэ. */
  animation: splash-sky .9s var(--ease-in-view) forwards,
             splash-sky-cool 1.1s var(--ease-in-view) 1.5s forwards;
}
@keyframes splash-sky { to { opacity: 1; } }
@keyframes splash-sky-cool { to { opacity: .45; } }

/* --- Онгоцны нислэг ---------------------------------------------------- */

.splash-stage {
  position: relative;
  width: min(272px, 76vw);
  aspect-ratio: 240 / 132;
}

/* ★ ЛОГОНЫ ӨӨРИЙН ОНГОЦ.
 *
 * Өмнө нь энд хагас дугуй зам, хоёр цэг, цагаан гурвалжин онгоц байсан
 * — логотой ямар ч холбоогүй чимэглэл. Эзэмшигчийн хэлсэн: «delete
 * that little half circle animation».
 *
 * Одоо нисэж байгаа нь логоны ӨӨРИЙН ногоон онгоц. Монголын зүгээс
 * (зүүн доороос) хөөрч, дэлгэцийн төвд ирээд, тэндээ лого болж
 * хувирна.
 */
.splash-plane {
  position: absolute; left: 50%; top: 50%;
  width: 46%; height: auto;
  transform-origin: 50% 50%;
  animation: splash-fly var(--splash-fly) var(--splash-ease)
             var(--splash-fly-delay) both;
}
@keyframes splash-fly {
  /* Монголын зүгээс — зүүн доороос, хол, том */
  0% {
    transform: translate(-190%, 165%) scale(1.15) rotate(9deg);
    opacity: 0;
  }
  18% { opacity: 1; }
  /* Төвд ирэхдээ логоны дотор байх хэмжээндээ хүрч жижигрэнэ */
  80% {
    transform: translate(-50%, -50%) scale(.32) rotate(0deg);
    opacity: 1;
  }
  /* ★ Тэгээд ШИНГЭНЭ. Энэ нь заавал: төгсгөлд гарч ирэх лого нь
     ДОТРОО онгоцтой. Нисэж ирсэн онгоц үлдвэл дэлгэц дээр хоёр онгоц
     зэрэг зогсоно. */
  100% {
    transform: translate(-50%, -50%) scale(.26) rotate(0deg);
    opacity: 0;
  }
}

/* --- Тэмдэг ------------------------------------------------------------ */

/* Тэмдэг нь тайзны ЯГ ТӨВД — онгоц ирээд шингэдэг цэг дээр. Өмнө нь
   нумын доор, доогуур байрлуулсан байсан: тэр нум одоо байхгүй тул
   төвлөрүүлсэн бөгөөд том болгосон. Логоны дотор уул, шувууд, газрын
   зураг бий — жижиг байхад ногоон толбо болж хувирна. */
.splash-mark {
  position: absolute; left: 50%; top: 50%;
  width: 40%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: splash-mark-in .7s cubic-bezier(.2, .9, .3, 1.25) 1.2s both;
}
/* Гэрлэн цагираг — тэмдгээс тарж, зайлна.
   ⚠ Дугуй байх ёстой. Тэмдэг нь дэвсгэргүй болсон тул булантай
   дөрвөлжин цагираг нь БАЙХГҮЙ хайрцгийн ирмэгийг зурна. */
.splash-mark::after {
  content: ""; position: absolute; inset: -8%;
  border-radius: 50%; border: 2px solid var(--accent);
  opacity: 0; animation: splash-bloom 1.4s var(--ease-in-view) 1.3s forwards;
}
@keyframes splash-bloom {
  0%   { opacity: .55; transform: scale(.85); }
  100% { opacity: 0;   transform: scale(1.7); }
}
@keyframes splash-mark-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.splash-mark > * { display: block; width: 100%; height: 100%; }
/* `display: block` нь хөтчийн `[hidden] { display: none }`-ыг дарж
   бичдэг. Үүнгүйгээр өөрчилсөн лого ба анхны тэмдэг ХОЁУЛАА харагдана. */
.splash-mark > [hidden] { display: none; }

/* ★ Хавтгай хэлбэр → бүрэн лого.
 *
 * Бүрэн логоны ЯГ ДЭЭР давхарлагдаж, дараа нь замхарна. Хоёулаа ижил
 * хэмжээ, ижил байрлалтай тул шилжилтэд юу ч үсрэхгүй — зөвхөн өнгө нь
 * «дүүрнэ». Видеон дээрх шиг: эхлээд газрын зургийн хэлбэр, дараа нь
 * уул, нар, шувууд. */
.splash-flat {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  animation: splash-fill 1s var(--ease-in-view) 1.7s forwards;
}
@keyframes splash-fill {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Сүүдэр нь тэмдгийн ДООР суудаг: видеон дээр лого газардахдаа зөөлөн
   сүүдрээ орхидог. `::after` нь гэрлэн цагирагт аль хэдийн эзэлсэн тул
   энэ нь тусдаа давхарга. */
.splash-shadow {
  position: absolute; left: 50%; bottom: -9%;
  width: 62%; height: 9%;
  transform: translateX(-50%) scale(.4);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent 78%);
  opacity: 0; pointer-events: none;
  animation: splash-land .85s var(--ease-in-view) 1.5s forwards;
}
@keyframes splash-land {
  from { opacity: 0; transform: translateX(-50%) scale(.4); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
/* ★ Тэмдэг нь ДЭВСГЭРГҮЙ.
 *
 * Өмнө нь `logo-mark.png` нь цагаан дөрвөлжин дээр байсан бөгөөд энд
 * буланг нь дугуйлж, «дүрс» мэт харуулдаг байв. Эзэмшигчийн хэлсэн:
 * «make logo with no background white square, just pure logo».
 *
 * Одоо зураг нь өөрөө тунгалаг тул дугуйлах хайрцаг байхгүй — радиус
 * үлдээвэл ЗӨВХӨН хор хөнөөл: онгоцны далавчны үзүүрийг тайрна.
 *
 * ⚠ Оператор өөрийн лого тавьсан бол (`#splash-logo`) тэр нь дөрвөлжин
 * зураг байж болно. Түүнийг нь дугуйлсан хэвээр үлдээнэ. */
.splash-logo { object-fit: contain; }
#splash-logo { border-radius: 24%; }

/* --- Бичвэр ------------------------------------------------------------ */

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Мэндчилгээ нь логооос ЧУХАЛ. Хүн аппаа таньчихсан — түүнд хэрэгтэй
   нь «энэ юу вэ» биш, «эхэллээ» гэсэн мэдрэмж. */
.splash-hello {
  font-size: 13px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
  animation: splash-rise .6s var(--ease-in-view) 1.4s both;
}
/* ★ Нэрийн илчлэлт: «FROM MONGOLIA ONTO» → «FROMONTO».
 *
 * Эзэмшигчийн үзүүлсэн видеоны хамгийн сайхан санаа. Нэр нь санамсаргүй
 * үг биш — Монголоос ХААШАА гэдгийн товчлол мөн, тэгээд тэр нь нүдний
 * өмнө болж өнгөрнө.
 *
 * Гурван хэсэг: FROM · MONGOLIA · ONTO. Дундахыг нь замхруулж, өргөнийг
 * нь тэглэхэд хажуугийн хоёр нь өөрөө нийлнэ — байрлал тооцох
 * шаардлагагүй, ямар ч фонт, ямар ч дэлгэцийн өргөнд зөв ажиллана. */
.splash-name {
  position: relative;
  /* Хумилт нь `max-width`-ээр явдаг — тэр нь БАЙРЛАЛ бодуулна. `layout`
     нь тэр ажлыг ЭНЭ мөрөнд хорино: хөтөч бүтэн дэлгэцээ биш, зөвхөн
     нэрийг дахин байрлуулна. Утсан дээр чичиргээ нь эндээс гардаг. */
  contain: layout style;
  display: flex; align-items: baseline; white-space: pre;
  font-size: 23px; font-weight: 700; letter-spacing: .10em; color: var(--ink);
  text-transform: uppercase;
  margin-top: -10px;
  animation: splash-rise .7s var(--ease-in-view) 1.75s both,
             splash-focus .7s var(--ease-in-view) 1.75s both,
             splash-tighten .5s var(--ease-in-view) 4.45s forwards;
}
/* Бүдгээс тод руу. Видеон дээрх бичвэр нь фокус ороход энэ мэт
   гарч ирдэг — «хэвлэгдэж байгаа» мэт мэдрэмж өгнө. */
@keyframes splash-focus {
  from { filter: blur(6px); }
  to   { filter: blur(0); }
}
/* Товчилсны дараа үсгүүд нь нэр шиг нягт болно. */
@keyframes splash-tighten {
  to { letter-spacing: .16em; }
}
.splash-word { display: inline-block; }
/* Дундах үг. Өргөнийг нь тэглэх нь ХАЖУУГИЙН хоёрыг өөрсдийг нь
   ойртуулна — тэднийг зөөх шаардлагагүй. */
.splash-drop {
  display: inline-block; overflow: hidden;
  animation: splash-contract 1.1s var(--ease-in-view) 3.4s forwards;
}
/* ★ Хумилт нь ГУРВАН цохилттой, тус бүрдээ өөр ажил хийнэ:
 *
 *   0–20%   зогсоно. Хүн «FROM MONGOLIA TO» гэдгийг УНШИНА — энэ агшин
 *           байхгүй бол товчлол нь юунаас гарснаа хэлэхгүй.
 *   20–55%  дундах үсгүүд ДЭЭШЭЭ хөөрч замхарна, өргөн нь хэвээр.
 *           Байрлал нь хөдлөхгүй тул нүд нь үлдэх үсгүүд дээр тогтоно.
 *   55–100% сая өргөн нь хумигдаж, FROM · ON · TO ӨӨРСДӨӨ нийлнэ.
 *
 * Хоёр ажлыг ДАРААЛУУЛАХ нь чухал: өргөн нь хумигдах үед л мөр дахин
 * байрлана. Замхралт нь тэр ажлыг нэмэхгүй өнгөөр л явна. */
@keyframes splash-contract {
  0%   { max-width: 12em; opacity: 1; transform: translateY(0); }
  20%  { max-width: 12em; opacity: 1; transform: translateY(0); }
  55%  { max-width: 12em; opacity: 0; transform: translateY(-.35em); }
  100% { max-width: 0; opacity: 0; transform: translateY(-.35em); }
}
/* «SINCE 2026» — логоны доод мөр. Нэр товчлогдож дууссаны дараа. */
.splash-since {
  display: block; margin-top: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: .34em;
  color: var(--ink-3); text-transform: uppercase;
  animation: splash-rise .6s var(--ease-in-view) 4.7s both;
}
.splash-tag {
  font-size: 14px; color: var(--ink-2); text-align: center; max-width: 22em;
  margin-top: -8px;
  animation: splash-rise .65s var(--ease-in-view) 2.3s both;
}

/* Тодорхойгүй хугацааны заалт. Хувь харуулах нь худал болно — хэдэн
   хувь ачаалснаа апп мэдэхгүй. */
.splash-bar {
  width: 132px; height: 3px; margin-top: 10px;
  background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden;
  animation: splash-fade-in .55s var(--ease-in-view) 2.6s both;
}
@keyframes splash-fade-in { from { opacity: 0; } to { opacity: 1; } }
.splash-bar i {
  display: block; width: 40%; height: 100%; border-radius: inherit;
  background: var(--accent);
  animation: splash-slide 1.1s ease-in-out infinite;
}
@keyframes splash-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

/* ★ Богино горим — өдөрт нэг удаагаас хойш.
 *
 * Бүтэн хөдөлгөөн нь брэндийн агшин: нэг удаа үзэхэд сайхан, өдөрт
 * арван удаа үзэхэд саад. Хоёр дахь удаагаас эхлээд бүх хэсэг нь
 * ШУУД байрандаа орж, дэлгэц нь хурдан замхарна.
 *
 * Хөдөлгөөнийг бүрэн УСТГАХГҮЙ: хэсэг нь `both`-оор эхлэлийн байрлалаа
 * барьдаг тул зүгээр л хаявал зарим зүйл харагдахгүй үлдэнэ. Оронд нь
 * бүгдийг нь маш хурдан гүйцээнэ. */
/* ⚠ Урьд нь ЭНД бүх хэсгийг `.18s`, саатлыг нь `0s` болгодог байв.
 * Тэр нь хөдөлгөөнийг богиносгосонгүй — УСТГАСАН: арван хэсэг нэг
 * зэрэг байрандаа үсэрч, хүн ямар ч түүх харахгүй. Эзэмшигчийн хэлсэн:
 * «welcome animation is only 0.3 seconds long which is too short».
 *
 * Одоо энэ нь ЖИНХЭНЭ, зөвхөн ШАХСАН хөдөлгөөн: онгоц нисч, лого
 * дүүрч, нэр товчлогдоно — бүгд 1.4 секундэд. Дараалал нь бүтэн
 * хувилбартай ижил, зөвхөн хугацаа нь дөрөв дахин богино.
 *
 * ХУГАЧААНЫ ХУВААРЬ (богино = 1.4s):
 *   0.00s тэнгэр · 0.05s онгоц · 0.45s тэмдэг · 0.50s мэндчилгээ
 *   0.55s лого дүүрнэ · 0.60s нэр · 0.75s уриа · 0.85s зураас
 *   0.95s ТОВЧЛОЛ · 1.20s SINCE 2026 · 1.40s арилна */
.splash.brief .splash-sky {
  animation: splash-sky .35s var(--ease-in-view) forwards !important;
}
.splash.brief .splash-plane {
  animation: splash-fly .55s var(--splash-ease) .05s both !important;
}
.splash.brief .splash-mark {
  animation: splash-mark-in .3s cubic-bezier(.2, .9, .3, 1.25) .45s both !important;
}
.splash.brief .splash-mark::after {
  animation: splash-bloom .45s var(--ease-in-view) .5s forwards !important;
}
.splash.brief .splash-flat {
  animation: splash-fill .35s var(--ease-in-view) .55s forwards !important;
}
.splash.brief .splash-shadow {
  animation: splash-land .3s var(--ease-in-view) .5s forwards !important;
}
.splash.brief .splash-hello {
  animation: splash-rise .25s var(--ease-in-view) .5s both !important;
}
.splash.brief .splash-name {
  animation: splash-rise .3s var(--ease-in-view) .6s both,
             splash-focus .3s var(--ease-in-view) .6s both,
             splash-tighten .2s var(--ease-in-view) 1.3s forwards !important;
}
.splash.brief .splash-drop {
  animation: splash-contract .4s var(--ease-in-view) .95s forwards !important;
}
.splash.brief .splash-tag {
  animation: splash-rise .3s var(--ease-in-view) .75s both !important;
}
.splash.brief .splash-bar {
  animation: splash-fade-in .25s var(--ease-in-view) .85s both !important;
}
.splash.brief .splash-since {
  animation: splash-rise .25s var(--ease-in-view) 1.2s both !important;
}

/* Хөдөлгөөн нь чимэглэл — хэрэгтэй хүнд нь бүгдийг унтраана. app.js нь
   энэ горимд хиймэл саатал ч үүсгэхгүй: апп бэлэн болмогц шууд нээгдэнэ. */
@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash-sky,
  .splash-plane,
  .splash-mark,
  .splash-mark::after,
  .splash-flat,
  .splash-shadow,
  .splash-hello,
  .splash-name,
  .splash-drop,
  .splash-since,
  .splash-tag,
  .splash-bar,
  .splash-bar i {
    animation: none;
    transition: none;
  }
  .splash-sky, .splash-mark, .splash-hello,
  .splash-name, .splash-since, .splash-tag, .splash-bar { opacity: 1; }
  /* Хөдөлгөөнгүй үед товчлол харагдахгүй тул БЭЛЭН хэлбэрээр нь:
     хавтгай хэлбэр алга, нэр нь аль хэдийн товчлогдсон. */
  .splash-flat { opacity: 0; }
  .splash-drop { max-width: 0; opacity: 0; overflow: hidden; }
  .splash-name { filter: none; letter-spacing: .16em; }
  .splash-shadow { opacity: 1; transform: translateX(-50%) scale(1); }
  /* Хөдөлгөөнгүй үед энэ нь нислэг ДУУССАН зураг: онгоц нь аль хэдийн
     лого болж хувирсан тул харагдахгүй. */
  .splash-plane { opacity: 0; }
  .splash-mark::after { opacity: 0; }
  .splash-bar i { width: 100%; opacity: .5; }
}

/* --------------------------------------------------------------------------
   Виз
   -------------------------------------------------------------------------- */

.visa-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700;
}
.visa-head.need { color: var(--warn); }
.visa-head.free { color: var(--success); }

/* Ажиллах / ажиллахгүй жагсаалт */
.ticks { list-style: none; margin: 4px 0 0; }
.ticks li {
  position: relative; padding: 5px 0 5px 26px; font-size: 14px;
}
.ticks li::before {
  position: absolute; left: 2px; top: 5px;
  font-weight: 700; font-size: 15px;
}
.ticks.bad li::before { content: '✕'; color: var(--coral-ink); }
.ticks.good li::before { content: '✓'; color: var(--success); }

/* Аялал устгах. Устгах товч нь нээх талбайгаас ТУСДАА байх ёстой —
   нэг мөрөнд хамт байвал санамсаргүй дарах эрсдэлтэй. */
.tile-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.tile-row > .tile { flex: 1; min-width: 0; margin-bottom: 0; }
.tile-del {
  flex: none; width: 48px; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink-3); cursor: pointer;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.tile-del:hover, .tile-del:focus-visible {
  color: var(--coral-ink); border-color: var(--coral);
}
.tile-del:active { background: var(--coral-soft); }

/* Буцаах боломжгүй үйлдэл. Үндсэн товчтой ижил харагдаж болохгүй. */
.btn.danger { background: var(--coral-ink); color: var(--on-danger); }
.btn.danger:hover { filter: brightness(1.06); }

/* Тохиргооны нэр гэх мэт ЯГ хуулж бичих ёстой зүйл. Энгийн бичвэрээс
   ялгарахгүй бол хүн `ET_SMTP_HOST` гэдгийг өгүүлбэрийн нэг хэсэг гэж
   уншина. */
.note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; padding: 1px 5px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink);
}

/* Профайлын доод талын нам холбоос. Товч биш — өдөр тутам хэрэггүй,
   гэхдээ хайсан хүнд олдоно. */
.quiet-link {
  display: block; margin-top: var(--s4); padding: var(--s3);
  text-align: center; font-size: 13px; font-weight: 600;
  color: var(--ink-3); text-decoration: none;
}
.quiet-link:hover { text-decoration: underline; color: var(--ink-2); }

/* Зургийн эзний мөр. Нэр, лиценз, эх хуудас гурав нь ЦУГ байх ёстой —
   аль нэг нь дутвал лицензийн шаардлага хангагдахгүй. */
.credit-row { margin-bottom: var(--s2); }
.credit-row b { display: block; font-size: 14px; font-weight: 650; }
.credit-row small {
  display: block; margin-top: var(--s1);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
}
.credit-row a { display: inline-block; margin-top: var(--s2); font-size: 12.5px; }

/* Бүртгэл устгах руу орох холбоос. Товч БИШ: санамсаргүй дарагдах
   ёсгүй тул профайлын хамгийн доор, чимээгүй харагдана. Гэхдээ нуугдах
   ч ёсгүй — хүн өөрийнхөө өгсөн зүйлээ буцааж авах эрхтэй. */
.danger-link {
  display: block; margin-top: var(--s5); padding: var(--s3);
  text-align: center; font-size: 13px; font-weight: 600;
  color: var(--coral-ink); text-decoration: none;
}
.danger-link:hover { text-decoration: underline; }

/* Юу устахыг НЭРЛЭСЭН жагсаалт. «Бүх өгөгдөл устана» гэдэг нь юу ч
   хэлэхгүй — хүн юугаа алдаж байгаагаа мэдэж байж шийднэ. */
.loss {
  margin: var(--s2) 0 0; padding-left: var(--s5);
  font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.loss li + li { margin-top: var(--s1); }

/* Wizard дээр сонгосон очих газар */

/* --------------------------------------------------------------------------
   Төлбөр амжилттай

   Мөнгө шилжүүлсэн хүн «болсон уу, үгүй юу» гэж эргэлзэх ёсгүй. Тэр
   эргэлзээ нь дэмжлэг рүү бичих, эсвэл ДАХИН төлөх болж хувирдаг.
   -------------------------------------------------------------------------- */

.paid { text-align: center; padding: 6px 0 18px; }

.paid-mark { position: relative; width: 88px; height: 88px; margin: 0 auto 14px; }
.paid-mark svg { width: 100%; height: 100%; overflow: visible; }

.paid-ring {
  fill: var(--success-soft); stroke: none;
  transform-origin: center;
  animation: paid-pop .38s cubic-bezier(.2, 1.4, .4, 1) both;
}
.paid-tick {
  fill: none; stroke: var(--success); stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
  /* Зурааг нь урттайгаа тэнцүү тасархай — офсетийг 0 болгоход
     «зурагдаж байгаа» мэт харагдана. */
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: paid-draw .4s .22s ease-out forwards;
}

@keyframes paid-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes paid-draw { to { stroke-dashoffset: 0; } }

/* Баярын оч. Зурган файл, сан хэрэглэхгүй — хэдхэн дөрвөлжин. */
.paid-mark .spark {
  position: absolute; width: 7px; height: 7px; border-radius: 2px;
  opacity: 0; animation: paid-spark .6s .3s ease-out both;
}
.paid-mark .s1 { top: 6px;  left: 10px; background: var(--warn); transform: rotate(20deg); }
.paid-mark .s2 { top: 0;    right: 22px; background: var(--success); animation-delay: .36s; }
.paid-mark .s3 { top: 26px; right: 0;   background: var(--warn); animation-delay: .42s; }
.paid-mark .s4 { bottom: 16px; left: 0; background: var(--success); animation-delay: .48s; }
.paid-mark .s5 { top: 18px; left: -4px; background: var(--coral); animation-delay: .3s; }

@keyframes paid-spark {
  0%   { opacity: 0; transform: scale(.4) translateY(6px); }
  60%  { opacity: 1; }
  100% { opacity: .9; transform: scale(1) translateY(-4px); }
}

.paid h2 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.paid p { margin-top: 6px; }
.paid p b { color: var(--success); font-weight: 750; }

/* Баримтын мөрүүд */
.receipt { border-top: 1px solid var(--line); }
.rrow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.rrow:last-child { border-bottom: 0; }
.rrow .grow { flex: 1; min-width: 0; }
.rrow small { display: block; color: var(--ink-2); font-size: 12.5px; }
.rrow b {
  display: block; font-size: 15px; font-weight: 650; margin-top: 2px;
  word-break: break-word;
}
.rico {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  background: var(--success-soft); color: var(--success);
}
.rcopy {
  flex: none; width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--ink-3);
  cursor: pointer; border-radius: var(--r-xs); text-decoration: none;
}
.rcopy:hover { color: var(--accent); background: var(--surface-2); }

.btn.success { background: var(--success); color: var(--on-success); }
.btn.success:hover { filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .paid-ring, .paid-tick, .paid-mark .spark { animation: none; }
  .paid-tick { stroke-dashoffset: 0; }
  .paid-mark .spark { opacity: .9; }
}

/* --------------------------------------------------------------------------
   Нүүр дэлгэц — худалдааны бүтэцтэй давхцана

   Нэг л төлбөртэй үйлдэл бий (аялал төлөвлөх), тэр нь үнээ ХААЛГАН ДЭЭРЭЭ
   бичсэн байна. Бусад нь үнэгүй: газрын мэдээлэл, гарын авлага, буудлын
   захиалга — эдгээр нь комиссоор орлого өгдөг тул нуух шалтгаан алга.
   -------------------------------------------------------------------------- */

.dest-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); text-decoration: none; color: inherit;
}
.dest-strip:hover { text-decoration: none; border-color: var(--accent); }
.dest-strip .grow { flex: 1; min-width: 0; }
.dest-strip small { display: block; font-size: 12px; color: var(--ink-2); }
.dest-strip b { display: block; font-size: 15.5px; font-weight: 650; }
.dest-strip .swap {
  flex: none; font-size: 13px; font-weight: 650; color: var(--accent);
}
.dest-flag { flex: none; font-size: 26px; line-height: 1; }

/* Цорын ганц төлбөртэй үйлдэл */
.offer-hero {
  padding: var(--s5); border-radius: var(--r-lg);
  background: var(--brand-grad);
  color: var(--on-brand); margin-bottom: var(--s3);
}
/* Дэлхий нийтийн `h1,h2,h3` дүрэм нь бараан бэхийн өнгө өгдөг тул
   цэнхэр дэвсгэр дээр уншигдахгүй болно — эндээ дарж бичнэ. */
.offer-hero h2 {
  font-size: 21px; font-weight: 750; letter-spacing: -.02em;
  color: var(--on-brand);
}
.offer-hero p { font-size: 14px; margin-top: 6px; color: var(--on-brand); opacity: .92; }
.offer-hero .btn.primary {
  background: var(--brand-chip); color: var(--brand-ink); margin-top: var(--s4);
}
.offer-hero .btn.primary:hover { background: var(--brand-chip); filter: brightness(.97); }
.offer-hero .tiny {
  margin-top: 10px; text-align: center; color: var(--on-brand); opacity: .9;
}

/* Үнэ нь нуугдмал биш — хамгийн эхэнд, тод */
.offer-price {
  display: flex; align-items: baseline; gap: 8px; margin-top: 14px;
  font-size: 30px; font-weight: 750; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.offer-price small { font-size: 13px; font-weight: 600; opacity: .85; }

/* Өгөөш — SIM. Хямд гэдгийг нь хэлэхээс буцах шалтгаан алга. */
.tile.hook { border-color: var(--coral); }
.pill-cheap {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 700;
  background: var(--coral-soft); color: var(--coral-ink);
  text-transform: uppercase; letter-spacing: .04em;
}

/* Төлбөртэй хэсгийг НУУХГҮЙ, тэмдэглэнэ. Нуувал хоёр зүйл алдагдана:
   хүн юу авч болохоо мэдэхгүй, мөн багц нь ачаалагдахад хэсэг нь
   нүднийх нь өмнөөс алга болно. */
.pill-lock {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}

/* Нэвтрэхийн өмнө дотор нь юу байгааг харуулах. Хоосон хана мөргөх
   нь хэнийг ч бүртгүүлэхгүй — юу авахаа мэдэж байж шийднэ. */
.peek {
  margin-top: 22px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r);
}
.peek .overline { margin-bottom: 10px; }
.peek .tiny { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Нүүр хуудсан дээрх үнэ
   -------------------------------------------------------------------------- */

.price-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }

.price-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 13px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: inherit; text-decoration: none;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.price-card:hover { border-color: var(--accent); box-shadow: var(--e1); }
.price-card b { font-size: 15px; font-weight: 650; }
.price-card small { font-size: 12px; line-height: 1.4; color: var(--ink-3); }

.price-amount {
  font-size: 21px; font-weight: 700; letter-spacing: -.01em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.price-amount i { font-style: normal; font-size: 14px; margin-left: 1px; }
/* «-аас» — хүний тоогоор үнэлэгддэг багцын ЭХЛЭХ үнэ. Тоотой ижил
   хэмжээтэй байвал үнийн нэг хэсэг мэт уншигдана. */
.price-amount u {
  font-style: normal; text-decoration: none;
  font-size: 13px; font-weight: 600; color: var(--ink-3); margin-left: 2px;
}

/* Утасны нарийн дэлгэц дээр хоёр карт нь шахагдана */
@media (max-width: 360px) { .price-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Ойролцоох цэгүүдийн газрын зураг

   Leaflet-ийн өөрийн хэв маягийг тусад нь (vendor/leaflet.css) ачаална.
   Энд зөвхөн аппын хүрээ, товч, өнгийг тааруулна.
   -------------------------------------------------------------------------- */

/* Шүүлтүүр нь НЭГ мөрөнд багтаж, хажуу тийш гүйнэ. Мөр дамжуулбал
   утасны дэлгэцийн гуравны нэгийг эзэлж, газрын зураг доош шахагдана. */
.chips.oneline {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px; margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.chips.oneline::-webkit-scrollbar { display: none; }
.chips.oneline .chip { flex: none; }

.map-wrap { position: relative; margin: 2px 0 8px; }
.map {
  height: 38vh; min-height: 230px; max-height: 380px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-2);   /* хавтан ирээгүй ч хоосон цагаан харагдахгүй */
  z-index: 0;                     /* толгой хэсэг, хуудсыг халхлахгүй */
}
.map-btn {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 500;                   /* Leaflet-ийн удирдлагууд 400-1000 хооронд */
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 650;
  box-shadow: var(--shadow-1); cursor: pointer;
}
.map-btn:disabled { opacity: .6; cursor: default; }
.map-credit { text-align: center; color: var(--ink-3); margin: 0 0 10px; }

/* Leaflet-ийн бөмбөлөг нь өөрийн цагаан дэвсгэртэй ирдэг — харанхуй
   горимд аппын өнгөтэй нийцүүлнэ. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface); color: var(--ink);
}
.leaflet-popup-content { font: inherit; font-size: 13.5px; }
.leaflet-container { font: inherit; background: var(--surface-2); }

/* Харанхуй горимд газрын зураг.
 *
 * OSM-ийн хавтан нь зөвхөн ЦАГААН хувилбартай. Шөнө гудамжинд зогсоод
 * хогийн сав хайж байгаа хүний нүд рүү цагаан дэлгэц гэрэлтүүлэх нь
 * зүгээр л эвгүй биш — тэр хүн дараа нь эргэн тойрноо харахад хараа
 * нь дасахад хэдэн секунд орно.
 *
 * Тиймээс өнгийг нь ЭРГҮҮЛНЭ. `hue-rotate` нь эргүүлэлтийн дараа ус,
 * ногоон байгууламжийг жинхэнэ өнгөнд нь ойртуулж буцаана; эс тэгвээс
 * ус улбар шар болно.
 *
 * ⚠ Шүүлтүүр нь ЗӨВХӨН хавтангийн давхаргад. Бүх зурагт тавибал бидний
 * зүүн, товч, хэрэглэгчийн байршлын цэг хамт эргэж, өнгө нь утгаа
 * алдана — улаан тамхины цэг ногоон болно. */
.nb-dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9);
}
.leaflet-bar a {
  background: var(--surface); color: var(--ink); border-bottom-color: var(--line);
}
.leaflet-bar a:hover { background: var(--surface-2); color: var(--ink); }
/* Leaflet-ийн +/- товч нь анхдагчаараа 30x30 — хуруунд жижиг.
   Явж байхдаа, гартаа юм барьчихсан, чичирсэн автобусан дээр дарах
   гэж байгаа хүнд 44pt-аас доош товч нь дийлдэхгүй.

   `#nbMap`-аар эхэлж байгаа нь ЗОРИУД: `vendor/leaflet.css` нь энэ
   файлын ДАРАА, ажиллах үедээ `<head>` рүү нэмэгддэг тул ижил жинтэй
   дүрэм бичвэл түүнийх нь дийлнэ. Урьд нь яг ингэж унасан. */
#nbMap .leaflet-bar a {
  width: 44px; height: 44px; line-height: 44px; font-size: 20px;
}

/* Газрын зургийн удирдлага, зүү, дэлгэрэнгүй */

.map-tools { position: absolute; right: 10px; top: 10px; z-index: 500; }
.map-icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-1); cursor: pointer;
}
.map-icon:hover { background: var(--surface-2); }

.map-bar { display: flex; align-items: center; gap: 12px; margin: 0 2px 10px; }
.map-city { flex: 1; margin: 0; }
.map-city select { min-height: 44px; }
.map-credit { margin: 0; white-space: nowrap; }

/* Зүү — өнгө нь ангиллаа, дүрс нь юу болохыг хэлнэ. Ердийн дугуй нь
   зэрэгцэн зогсоход ялгагдахаа больдог. */
.pin-wrap { background: none; border: 0; }
.pin {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  background: var(--pin); color: #fff;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.pin .ico { transform: rotate(45deg); stroke-width: 2.2; }

/* Түлхүүр–утгын хос (дэлгэрэнгүй хуудас) */
.kv { margin: 0; }
.kv > div {
  display: flex; gap: 14px; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-3); font-size: 13.5px; flex: none; }
.kv dd { margin: 0; text-align: right; font-weight: 550; }

/* Хот сонгох — сонгогдсоныг нь ХАРАХАД шууд ялгарна */
.pick-city { width: 100%; text-align: left; }
/* `--art` өнгөгүй дүрсүүд. Ерөнхий `.thumb` дүрэм нь ӨНГӨТ дэвсгэр
   тооцсон цагаан дүрстэй тул эдгээр нь өөрсдөө өнгөө зааж өгөх ёстой —
   эс тэгвээс цайвар дээр цагаан болж бүрмөсөн алга болно. */
.city-mark, .vibe-mark, .party-mark {
  background: var(--surface-2); color: var(--accent);
}
.pick-city.on { border-color: var(--accent); background: var(--accent-soft); }
.pick-city.on .thumb { background: var(--accent); color: var(--on-accent); }

/* Техникийн тэмдэглэл — хэрэглэгчид саад болохооргүй, гэхдээ асуудал
   мэдээлэхэд нь уншигдахуйц */
.diag {
  display: block; margin-top: 6px;
  font-size: 12px; color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Нүүр дэлгэц дээрх визний хэсэг — төлбөрөө төлсөн хүний дараагийн ажил */
/* ★ Визний карт нь дэвсгэрээсээ ЯЛГАРАХ ёстой.
   Палитр саарал болоход `--accent-soft` (#eae5e0) нь дэвсгэр
   (#ede8e4)-тэй бараг ижил өнгө болсон — карт нь байгаа ч харагдахгүй.
   Тодруулах хамгийн найдвартай арга нь ӨНГӨНИЙ ЯЛГАА: цайвар горимд
   бараандуулж, харанхуйд цайруулна. `--surface-3` нь хоёуланд нь тэр
   чигийг барина. */
.visa-card { border-color: var(--line-strong); background: var(--surface-3); }
.visa-card .thumb { background: var(--accent); color: var(--on-accent); }
.bar {
  display: block; height: 5px; margin: 7px 0 5px;
  background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden;
}
.bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* Юу үзэх вэ — зурагтай сонголт.
   Хоёр баганаар: утсан дээр зураг нь танигдахуйц том, гэхдээ нэг
   дэлгэцэнд 4-6 газар багтана. */
.spot-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 6px;
}
.spot {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0; border: 0; background: none; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
}
.spot-art {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: var(--art, var(--surface-2)); color: #fff;
  border: 2px solid transparent; transition: border-color var(--fast);
}
.spot-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Дүрс нь картныхаа хэмжээг дагана — тогтмол пиксел бол нарийн дэлгэц
   дээр жижиг, өргөн дэлгэц дээр төөнөж харагдана. */
.spot-art .glyph { --glyph: 46%; opacity: .96; }
.spot.on .spot-art { border-color: var(--accent); }
.spot-tick {
  position: absolute; inset: auto 6px 6px auto;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent); color: var(--on-accent);
}
.spot b { font-size: 14px; line-height: 1.25; }
.spot small { color: var(--accent); letter-spacing: .06em; }

/* Гэрэл зурагтай карт нь дүрстэйгээсээ ӨӨР зан гаргана: зураг нь
   картаа бүтнээр эзэлж, дүрс шиг голдоо тавигдахгүй. */
.spot-art.has-photo { background: var(--surface-2); }
.spot-art.has-photo .glyph { display: none; }

/* --------------------------------------------------------------------------
   Хотын мөр — хажуу тийш гүйдэг зурагтай картууд.

   Аяллын апп дээр хот нь ГАЗАР, шошго биш. Урьд нь энгийн саарал
   чипүүд байсан нь «шүүлтүүр» гэсэн мэдрэмж өгдөг байв.
   -------------------------------------------------------------------------- */

.city-rail {
  display: flex; gap: var(--s3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* Мөрийн эхлэл, төгсгөл нь хуудасны захад наалдахгүй */
  padding: var(--s1) var(--s4); margin-left: calc(var(--s4) * -1);
  margin-right: calc(var(--s4) * -1);
  /* Наалдац (`scroll-snap`) нь хажуугийн зайг ҮЛ ТООМСОРЛОДОГ: эхний
     картын ирмэгийг савны ирмэгт наана. Тиймээс нээмэгц мөр нь 16px
     гүйж, эхний карт нь дэлгэцийн ирмэг рүү хагас орж, дугуй буланг
     нь тасалдаг байв. `scroll-padding` нь наалдацад тэр зайг ХЭЛНЭ. */
  scroll-padding-left: var(--s4); scroll-padding-right: var(--s4);
  scrollbar-width: none;
}
.city-rail::-webkit-scrollbar { display: none; }

.city-card {
  position: relative; flex: 0 0 auto; scroll-snap-align: start;
  width: 148px; aspect-ratio: 4 / 3;
  border: 2px solid transparent; border-radius: var(--r-lg);
  overflow: hidden; padding: 0; cursor: pointer;
  background: var(--art, var(--surface-2));
  font: inherit; color: #fff; text-align: left;
  box-shadow: var(--e1);
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.city-card:active { transform: scale(.98); }
/* СОНГОГДСОН гэдэг нь харагдах ёстой.
   2px хүрээ дангаараа хангалтгүй байсан: зурагтай, бараан картан дээр
   тэр нь бараг үл ялиг, тод гэрэлд огт мэдрэгдэхгүй. Тиймээс сонгосон
   нь тэмдэгтэй, өргөн хүрээтэй; сонгоогүй нь бүдгэрнэ. Доор нь мөн
   аль хот сонгогдсоныг ҮГЭЭР бичдэг (`#count`). */
.city-card.on {
  border-color: var(--accent); box-shadow: var(--e2);
  outline: 2px solid var(--accent); outline-offset: -4px;
}
.city-tick {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.city-card.on .city-tick { display: grid; }
.city-rail.picking .city-card:not(.on) { opacity: .5; }
.city-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.city-card-art { position: absolute; inset: 0; display: grid; place-items: center; }
.city-card-art .glyph { --glyph: 44%; opacity: .95; }

/* Нэр нь зураг дээр байрлана. Зураг нь цайвар байж болох тул доогуур
   нь бараан халхавч тавихгүй бол цагаан бичвэр уншигдахгүй. */
.city-card-name {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: var(--s5) var(--s3) var(--s2);
  background: linear-gradient(to top, rgba(6, 24, 28, .92) 0%,
                                       rgba(6, 24, 28, .78) 40%,
                                       rgba(6, 24, 28, .45) 72%, transparent 100%);
}
.city-card-name b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25;
}
.city-card-name small { display: block; font-size: 12px; color: rgba(255, 255, 255, .86); }

/* --------------------------------------------------------------------------
   Багц сонгох
   -------------------------------------------------------------------------- */

.tier { position: relative; }
/* Одоо ашиглаж байгаа багц нь ХАРАНГУУТАА ялгарах ёстой — «би юу
   авсан билээ» гэж бодуулах нь дараагийн алхмыг удаашруулна. */
.tier.mine { border-color: var(--accent); background: var(--accent-soft); }

.tier-head { display: flex; align-items: flex-start; gap: 14px; }
.tier-head b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tier-head small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; }
.tier-price {
  flex: none; font-size: 21px; font-weight: 750; letter-spacing: -.02em;
  color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.tier-price i { font-style: normal; font-size: 14px; font-weight: 650; margin-left: 1px; }

.tier-points { list-style: none; margin: 14px 0 16px; padding: 0; }
.tier-points li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 14px; line-height: 1.45; color: var(--ink);
}
.tier-points li + li { margin-top: 8px; }
.tier-points .ico { color: var(--success); margin-top: 2px; }

/* Аль хэдийн авсан багц. Энэ нь ТОВЧ шиг харагддаг тул товч шиг
   АЖИЛЛАХ ёстой — урьд нь энгийн `<p>` байсан бөгөөд дарахад юу ч
   болдоггүй байв. Баруун талын сум нь хаашаа явахыг хэлнэ. */
.tier-have {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0; padding: 11px 14px; min-height: 48px;
  border-radius: var(--r-pill); background: var(--success-soft);
  color: var(--success); font-size: 14px; font-weight: 650;
  text-decoration: none;
  transition: opacity var(--fast), transform var(--fast);
}
.tier-have:hover { text-decoration: none; opacity: .85; }
.tier-have:active { transform: scale(.98); }
.tier-have .chev { margin-left: auto; color: currentColor; opacity: .7; }

/* Аяслын сонголт — сонгосон нь ХАРАНГУУТАА мэдэгдэх ёстой */
.pick-vibe { width: 100%; text-align: left; }
.pick-vibe.on { border-color: var(--accent); background: var(--accent-soft); }
.pick-vibe.on .thumb { background: var(--accent); color: var(--on-accent); }

/* Аяллын ЗОРИЛГО — сонгосон нь ХАРАГДАХ ёстой.
 *
 * Энэ хэсэг нь `.on` ангитай байсан ч түүнд ямар ч дүрэм байгаагүй тул
 * сонгосон карт нь бусадтайгаа ЯГ адилхан харагддаг байв. Хүн дараад
 * юу ч болоогүй мэт — тэгээд аль нь сонгогдсоныг мэдэхгүй үлдэнэ.
 * Визний бүх материал энэ хариултаас хамаардаг тул тэр нь жижиг зүйл
 * биш. */
.pick-why { width: 100%; text-align: left; }
.pick-why.on { border-color: var(--accent); background: var(--accent-soft); }
.pick-why.on .thumb { background: var(--accent); color: var(--on-accent); }
/* Сонгосныг нь ҮГЭЭР ч хэлнэ: өнгө нь ганцаараа хангалтгүй (өнгө
   ялгах бэрхшээлтэй хүн, эсвэл наранд утсаа хардаг хүн). */
.pick-why.on .grow b::after {
  content: " ✓"; color: var(--accent); font-weight: 700;
}

/* --------------------------------------------------------------------------
   Нүүр дэлгэц дээрх визний хэсэг
   -------------------------------------------------------------------------- */

/* Виз дуусаагүй хүний нүүрийг ЭНЭ тэргүүлнэ. Тиймээс өнгө нь брэндийн
   өнгө, доорх «шинэ аялал» нь чимээгүй болно. */
.visa-lead {
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
}
.visa-lead-head { display: flex; gap: 13px; align-items: center; margin-bottom: 12px; }
.visa-lead-head b { display: block; font-size: 16px; font-weight: 700; }
.visa-lead-head small { display: block; color: var(--ink-2); font-size: 13px; margin-top: 1px; }
.visa-count {
  flex: none; font-size: 20px; font-weight: 750; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.visa-count i { font-style: normal; font-size: 13px; font-weight: 600; opacity: .7; }

.visa-next-label {
  margin: 14px 0 7px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.visa-next { list-style: none; margin: 0 0 4px; padding: 0; }
.visa-next li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 14px; line-height: 1.45;
}
.visa-next li + li { margin-top: 7px; }
.visa-next .ico { color: var(--accent); margin-top: 2px; }
/* Мөрөн дотор дарж болох үг нь ДАРЖ БОЛОХ ШИГ харагдах ёстой. Ижил
   өнгөөр бичвэл хүн түүнийг зүгээр л текст гэж уншаад өнгөрнө. */
.visa-next a { color: var(--accent); font-weight: 650; text-decoration: underline; }
.visa-lead .btn.primary { margin-top: 14px; }
.visa-lead .note { margin: 14px 0 0; }

/* Виз хүлээж байгаа хүнд «дахиад нэг аялал» нь чимээгүй байх ёстой —
   хоёр тод санал зэрэг байвал аль нь ч анхаарал татахгүй. */
.offer-hero.quiet {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); box-shadow: none;
}
.offer-hero.quiet h2, .offer-hero.quiet p { color: var(--ink); }
.offer-hero.quiet p { color: var(--ink-2); }
.offer-hero.quiet .btn.primary {
  background: var(--accent); color: var(--on-accent);
}
.offer-hero.quiet .btn.primary:hover { filter: brightness(.97); }

/* --------------------------------------------------------------------------
   «Өнөөдөр» — аялалд явж байх үеийн дэлгэц
   -------------------------------------------------------------------------- */

.today-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.today-head b { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.today-head span { color: var(--ink-2); font-size: 14px; }

.today-list { display: flex; flex-direction: column; gap: 8px; }

.today-stop {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px; min-height: 60px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--e1);
}
.today-time {
  flex: none; width: 46px; padding-top: 1px;
  font-size: 13px; font-weight: 650; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.today-body { min-width: 0; flex: 1; }
.today-body b { display: block; font-size: 15px; font-weight: 650; line-height: 1.3; }
.today-body small { display: block; margin-top: 3px; color: var(--ink-2); font-size: 13px; line-height: 1.45; }

/* Өнгөрсөн зүйлийг УСТГАХГҮЙ, бүдгэрүүлнэ: хүн «би энийг үзсэн үү»
   гэдгээ хармаар байдаг. */
.today-stop.done { opacity: .5; box-shadow: none; }
.today-stop.now { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--e2); }
.today-stop.next { border-color: var(--line-strong); }
/* Алгассан зүйл нь БАЙСАН гэдэг нь харагдах ёстой — санаагаа өөрчлөх
   боломж нь тэндээ л байна. */
.today-stop.off { opacity: .45; }
.today-stop.off .today-body b { text-decoration: line-through; }

.today-flag {
  display: inline-block; margin-bottom: 4px;
  font-size: 12px; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent-ink);
}
.today-stop.next .today-flag { color: var(--ink-2); }

.today-changed {
  display: inline-flex; gap: 6px; align-items: baseline; margin-top: 6px;
  font-size: 12px; color: var(--ink-2);
}
.linky {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}

.today-edit {
  flex: none; width: 34px; min-height: 44px; padding: 0;
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
}
.today-edit:hover { color: var(--accent); }

/* Аялалдаа явж байгаа хүний нүүр — энэ нь бүх зүйлээс дээр */
.today-card {
  display: block; text-decoration: none;
  border-color: var(--accent); background: var(--brand-grad);
  color: var(--on-brand);
}
.today-card-flag {
  display: inline-block; margin-bottom: 8px;
  font-size: 12px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; opacity: .85;
}
.today-card b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.today-card small { display: block; margin-top: 4px; font-size: 14px; opacity: .9; }
.today-card-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 10px 16px; min-height: 44px; box-sizing: border-box;
  border-radius: var(--r-pill); background: var(--brand-chip);
  color: var(--brand-ink); font-size: 14px; font-weight: 650;
}

/* Хамт явж байгаа хүмүүс */
.party-row { width: 100%; }
.party-hint { display: block; text-decoration: none; }
.party-hint b { display: block; font-size: 16px; font-weight: 700; }
.party-hint small { display: block; margin-top: 5px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.party-hint .linky { display: inline-block; margin-top: 10px; }

/* Найз нь визний мэдээллээ бэлдсэн үү.
   Бэлэн бол ногоон, бэлдэж байгаа бол саарал — АНХААРУУЛГА биш.
   Хүн өөрийн хурдаар бэлддэг; улаанаар шаардах шалтгаан алга. */
.ready-yes { color: var(--success) !important; font-weight: 600; }
.ready-no { color: var(--ink-3) !important; }

/* Хуваалцсан аялал — хэн урьсныг мөрөн дээр нь хэлнэ. Ингэснээр
   өөрийн аялал, найзын аялал хоёр нэг жагсаалтад холилдохгүй. */
.shared-by {
  display: inline-flex !important; align-items: center; gap: 5px;
  margin-top: 6px !important; color: var(--accent-ink) !important;
  font-weight: 600;
}
.shared-by .ico { width: 13px; height: 13px; flex: none; }

/* Монгол эзэнтэй байр */
.home-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.home-head b { display: block; font-size: 16px; font-weight: 700; }
.home-head small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; }
.home-price {
  flex: none; font-size: 17px; font-weight: 700; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.home-price i { font-style: normal; font-size: 13px; margin-left: 1px; }

/* Хүний тоо сонгох — байрны дэлгэц дээр */
.party-picker { display: flex; align-items: center; gap: 14px; }
.party-picker b { display: block; font-size: 15px; font-weight: 650; }
.party-picker small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; }
.stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper button {
  width: 44px; min-height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font-size: 20px; font-weight: 600; cursor: pointer;
}
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper span {
  min-width: 30px; text-align: center;
  font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Хүний тоогоор гарах үнийн харьцуулалт.
   Хүн «хямд» гэдгийг ЮУТАЙ харьцуулж хямдыг мэдэхгүй бол итгэхгүй —
   тиймээс хүн тутмын үнийг эхэнд нь тавина.

   ★ «Тус тусдаа авбал хэд болох» гэсэн мөр АРИЛСАН: шинэ үнээр
   «Хамтдаа» нь «Ганцаараа»-гаас үнэтэй болсон тул тэр харьцуулалт
   худал болно. `quoteRows`-ыг үзнэ үү. */
.quote { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 6px; }
.quote li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 14px; color: var(--ink-2);
}
.quote b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.quote .was { color: var(--ink-3); text-decoration: line-through; font-weight: 500; }
.quote .win b { font-size: 18px; }
.quote .save { color: var(--accent-ink); }
.quote .save b { color: var(--accent-ink); font-size: 13px; }
/* «6 хүнээс хүн тутамд …» гэсэн тайлбар нь тооноосоо урт тул
   мөр дамжина. Тоо нь баруун талдаа бүтнээрээ үлдэх ёстой. */
.quote .save span { flex: 1 1 auto; }
.quote .save b { flex: 0 0 auto; white-space: nowrap; }

/* Өнөөдрийн жагсаалт дээрх зай ба чөлөөт цаг */
.today-near {
  display: inline-flex; gap: 5px; align-items: center; margin-top: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--accent-ink);
}
.today-near .ico { width: 14px; height: 14px; }
.today-freed {
  display: inline-block; margin-top: 6px; padding: 3px 9px;
  border-radius: var(--r-pill); background: var(--success-soft);
  color: var(--success); font-size: 12px; font-weight: 650;
}

/* Бэлэн эхлэлийн карт — хотын картаас арай өргөн, хоногийн тоотой. */
.starter-card { width: 190px; aspect-ratio: 16 / 11; }
.starter-days {
  position: absolute; z-index: 1; inset: var(--s2) var(--s2) auto auto;
  padding: 3px var(--s2); border-radius: var(--r-pill);
  background: var(--cream); color: var(--on-cream);
  font-size: 12px; font-weight: 700;
}

/* Визний тооллын хуваарь — «3/9» доторх «/9». Инлайн загвараар бичвэл
   тэмдэглэх бүрд шинээр үүсгэх шаардлагатай болно. */
.visa-total { font-size: 19px; color: var(--ink-3); }

/* Хуваарийн дээр гарах «өөрийнхөөрөө болго» урилга. Хуваарь өөрөө
   гол зүйл тул энэ нь түүнээс НАМ байх ёстой — гэхдээ харагдана. */
.refine-card { margin-bottom: var(--s4); border-style: dashed; }

/* Хуваарийн дээрх визний сануулга — холбоос боловч анхааруулга шиг
   харагдана. Дарвал визний таб руу шууд орно.

   Нэр нь `visa-lead` БАЙЖ БОЛОХГҮЙ: нүүр дэлгэц дээрх «Визний бэлтгэл»
   карт нь тэр нэрийг аль хэдийн эзэмшдэг. Хоёр өөр зүйл нэг нэр
   хуваалцвал энд бичсэн `display` нь ТЭР КАРТЫГ ч мөн эвдэнэ —
   баганаар байх ёстой карт нь мөр болж, хуудас хажуу тийш 662px
   болтол сунана. Яг ийм зүйл нэг удаа болсон.

   `.note` нь өөрөө flex тул энд `display` тавих ШААРДЛАГАГҮЙ. */
.visa-banner { text-decoration: none; color: inherit; }
.visa-banner:hover { text-decoration: none; }

/* Зургийн эзний нэр. CC BY нь зохиогчийг заахыг ШААРДДАГ тул энэ мөр
   нь чимэглэл биш — байхгүй бол зургийг ашиглах эрх алга. Жижиг
   боловч уншигдахуйц: 12px нь энэ аппын доод хязгаар. */
.photo-credit {
  margin: var(--s2) 0 var(--s3); font-size: 12px; color: var(--ink-3);
}
.photo-credit a { color: var(--ink-3); text-decoration: underline; }
.sheet-photo {
  border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--surface-2); margin-bottom: var(--s2);
}
.sheet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Зураг ирээгүй үед оронд нь дүрс суух ба тэр нь ТӨВД байх ёстой:
   `object-fit` нь зурагт л ноогддог, SVG нь өөрөө сунахгүй. */
.sheet-photo.is-empty {
  display: grid; place-items: center; color: var(--ink-3);
}
.sheet-photo.is-empty .glyph { --glyph: 26%; }


/* --------------------------------------------------------------------------
   «эсвэл» тусгаарлагч — нууц үг ба Google хоёрын хооронд
   -------------------------------------------------------------------------- */

.or-line {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 16px; color: var(--ink-3); font-size: 13px;
}
.or-line::before, .or-line::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
#googleBtn { display: flex; justify-content: center; }


/* --------------------------------------------------------------------------
   Горим солих товч
   -------------------------------------------------------------------------- */

/* App bar-ын баруун захад, ҮРГЭЛЖ. Хүн шөнө гэрэл рүү шилжихийг хүсвэл
   тохиргооны дэлгэц хайж явах ёсгүй — нэг товшилт хангалттай. */
.theme-toggle {
  margin-left: 0; margin-right: -6px; flex: none;
  color: var(--ink-2);
}
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }


/* --------------------------------------------------------------------------
   Гэрэл зурагт карт — жагсаалтын шинэ хэлбэр
   --------------------------------------------------------------------------

   Урьд нь газар бүр нь ЗҮҮН талдаа 64px зурагтай, баруун талдаа
   бичвэртэй мөр байв — хаягийн дэвтрийн бичлэг шиг. Аяллын аппад
   хамгийн үнэтэй зүйл нь ГАЗАР ӨӨРӨӨ, түүний нэр биш.

   Тиймээс зураг нь одоо КАРТ ӨӨРӨӨ болно: бүтэн өргөнөөр, нэр нь
   дээр нь суусан. Зураг байхгүй үед ангиллын градиент, том дүрс нь
   яг ижил байрыг эзэлнэ — хоосон саарал нүх үлдэхгүй.
   -------------------------------------------------------------------------- */

.pcard {
  position: relative; display: block; width: 100%;
  aspect-ratio: 3 / 2; min-height: 208px;
  border: none; padding: 0; margin: 0; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--art, var(--surface-2));
  color: #fff; text-align: left; font: inherit;
  cursor: pointer; isolation: isolate;
  transition: transform var(--fast);
}
.pcard:active { transform: scale(.985); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pcard img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Зураггүй газрын дүрс — том, бүдэг. Ангиллын градиент дээр сууна. */
.pcard-glyph {
  position: absolute; inset: 0; z-index: -2;
  display: grid; place-items: center; opacity: .3;
}
.pcard-glyph .glyph { --glyph: 46%; }

/* ★ ХАЛХАВЧ. Зураг нь дээд талдаа цайвар (тэнгэр) байх нь ЭНГИЙН —
   тэгвэл цагаан гарчиг нь алга болно. Хоёр талаас нь бараандуулна:
   дээрээс гарчгийн төлөө, доороос үнийн төлөө. */
.pcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .12) 38%,
                    rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, .72) 100%);
}

.pcard-top {
  position: absolute; inset: var(--s4) 60px auto var(--s4);
}
/* Лавлагаан дээрх «WILD MEADOW WEEKEND» — том, ТОМ ҮСГЭЭР, шахуу.
   Хоёр мөрийн дараа таслана: гурван мөр болбол зураг харагдахаа болино. */
.pcard-top b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 21px; font-weight: 700; line-height: 1.12;
  letter-spacing: -.02em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.pcard-top small {
  display: block; margin-top: 5px;
  font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* Дугуй сум — лавлагаан дээрх ↗ товч. Дарагддаг гэдгийг нь хэлнэ. */
.pcard-go {
  position: absolute; top: var(--s4); right: var(--s4);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  /* ⚠ Энд `backdrop-filter: blur(8px)` байсан. Ганц товч дээр хямд
     санагдана — гэвч эдгээр нь ЖАГСААЛТ дотор байдаг: дэлгэц дүүрэн
     газрын карт бүр өөрийн бүдгэрүүлэх талбайтай болж, гүйлгэх бүрт
     тэр бүгд дахин тооцоологдоно. Зурган дээрх ялгарал нь бүдгэрүүлэлт
     биш, БАРААН хөшгөөс гардаг — тиймээс хөшгийг нь тодруулж,
     шүүлтүүрийг нь авлаа. */
  background: rgba(20, 24, 20, .42); color: #fff;
  border: 1px solid rgba(255, 255, 255, .34);
}
.pcard-go .ico { width: 17px; height: 17px; }

.pcard-foot {
  position: absolute; inset: auto var(--s4) var(--s4) var(--s4);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3);
}
.pcard-foot small {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.pcard-foot b {
  display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.pcard-foot .stars { color: #f0c05a; font-size: 13px; letter-spacing: -.5px; }

/* Жагсаалт нь картуудын хооронд илүү зайтай — карт том болсон тул
   хуучин 12px нь тэднийг наалдсан мэт харуулна. */
.list.photos { gap: var(--s4); }


/* --------------------------------------------------------------------------
   Зураггүй үеийн градиент — ХАРАНХУЙ горимд намдуулна
   --------------------------------------------------------------------------

   Гэрэл зураг татагдтал газар бүр ангиллынхаа өнгөт градиентээр
   дүрслэгдэнэ. Цайвар горимд тэд сэргэлэн харагдана; харанхуйд тод
   улбар шар, цэнхэр карт нь хар дэвсгэр дээр хашгирч, интерфэйсийн
   тайван байдлыг эвдэнэ.

   ⚠ Намдаах нь ЗӨВХӨН градиентад ноогдоно, ЗУРАГТ БИШ. Тиймээс
   `filter` хэрэглэхгүй — тэр нь бүх хүүхдэд, жинхэнэ зураг дээр ч
   ноогдоно. Зөвхөн дүрс суудаг давхаргад халхавч тавина; зураг орж
   ирэхэд тэр давхарга огт байхгүй.
   -------------------------------------------------------------------------- */

/* Халхавч нь `::before` дээр сууна, `.pcard-glyph` дээр биш.
   Дүрсний давхарга нь `z-index: -2` — картын ӨӨРИЙН дэвсгэрийн ард
   зурагддаг тул дээр нь өнгө тавихад юу ч өөрчлөгдөхгүй. Үүнийг
   таамаглаагүй, хөтөч дээр хэмжиж мэдсэн: дүрэм нь хэрэгжсэн
   (`rgba(7,7,7,.5)`) мөртлөө зураг дээр ямар ч ялгаа гараагүй.
   `::before` нь `-1` дээр — дэвсгэрийн ДЭЭР, агуулгын ДООР. */
.pcard.no-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: transparent;
  transition: background var(--base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pcard.no-photo::before { background: rgba(7, 7, 7, .52); }
  :root:not([data-theme="light"]) .city-card:not(.has-photo) .city-card-art {
    background: rgba(7, 7, 7, .45);
  }
}
:root[data-theme="dark"] .pcard.no-photo::before { background: rgba(7, 7, 7, .52); }
:root[data-theme="dark"] .city-card:not(.has-photo) .city-card-art {
  background: rgba(7, 7, 7, .45);
}


/* Найзыг аяллаас хасах.
   Урьд нь зөвхөн хогийн савны ДҮРС байсан. Дүрс нь «устгах» гэж
   ойлгогдож болно — эзэмшигч найзаа хасах товч байгааг олоогүй.
   Үг нь эргэлзээг арилгана. */
.party-drop {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 12px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.party-drop:hover {
  color: var(--coral-ink); border-color: var(--coral-ink);
  background: var(--coral-soft);
}

/* Түлхүүр үгээр хайсан зургийн илэрцүүд. Оператор утсан дээр сонгоно
   тул хоёр багана — жижиг зураг харж шийдэх боломжгүй. */
.photo-hits {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3);
}
.photo-hit { margin: 0; }
.photo-hit img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sm); background: var(--surface-2); display: block;
}
.photo-hit figcaption {
  font-size: 12px; color: var(--ink-3); margin: var(--s1) 0 var(--s2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.photo-hit-buttons { display: grid; gap: 6px; }

/* ★ «Төлөөлөх зураг» — аялагчид ХЭЛЭХ мөр.
   Нэрлэсэн рестораны карт дээрх зураг нь тэр газрынх гэж уншигдана.
   Хайлтаар олдсон зураг ихэвчлэн өөр газрынх тул энэ тэмдэг нь
   чимэглэл БИШ, үнэн. */
.photo-mark {
  display: inline-block; margin-right: 6px; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--ink-3);
}

/* Хайлтын мөр: талбар ба товч зэрэгцэнэ. */
.row-inline { display: flex; gap: var(--s2); align-items: center; }
.row-inline input { flex: 1; min-width: 0; }

/* Офлайн зураг — хуваарийн доорх карт. Дүрс ба гарчиг нэг мөрөнд. */
.offline-photos { margin-top: var(--s3, 16px); }
.offline-photos .offline-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.offline-photos p.muted { margin: 0 0 10px; }