/* developer.eidmongolia.mn — eid-mongolia-mn/landing/page.css-ийн хуулбар (2026-09-28); зөвхөн фонтын зам /landing/fonts/ → /fonts/ өөр. Токен өөрчлөхгүй — эх нь портал. */
/* Дэд хуудсууд (/verify, /privacy, /terms) — нүүр хуудастай (index.html-ийн inline <style>) ижил
   токен, толгой, хөл. Нүүр хуудас өөрийн inline хэв маягаа хадгална (CSP-г нь хөндөхгүйн тулд);
   эндээс токен өөрчилбөл тэнд ч мөн адил өөрчил. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/geist-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/geist-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: light;
  --background: hsl(0 0% 100%);
  --background-subtle: hsl(210 40% 98%);
  --background-muted: hsl(210 40% 96%);
  --foreground: hsl(222 47% 11%);
  --foreground-muted: hsl(215 19% 35%);
  --foreground-subtle: hsl(215 16% 45%);
  --border: hsl(214 32% 91%);
  --border-strong: hsl(213 27% 84%);
  --accent: oklch(0.534 0.2 259);
  --accent-hover: color-mix(in oklab, var(--accent) 88%, black);
  --accent-foreground: #fff;
  --accent-subtle: oklch(0.97 0.03 259);
  --accent-subtle-foreground: oklch(0.474 0.19 259);
  --ring: oklch(0.604 0.2 259);
  /* Статус (design-research 08: subtle / border / foreground) */
  --success-subtle: hsl(152 76% 96%);
  --success-border: hsl(152 64% 80%);
  --success-foreground: hsl(163 70% 26%);
  --warning-subtle: hsl(48 100% 96%);
  --warning-border: hsl(45 95% 78%);
  --warning-foreground: hsl(23 75% 33%);
  --danger-subtle: hsl(0 86% 97%);
  --danger-border: hsl(0 96% 89%);
  --danger-foreground: hsl(0 74% 42%);
  --popover: hsl(0 0% 100%);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --duration-base: 160ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --z-sticky: 1100;
  --z-popover: 1400;
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Текстийн scale — gerege-ui theme.css / design-research 08 (хэмжээ · мөрийн өндөр · үсгийн зай); demo.eidmongolia.mn
     яг үүгээр зурагддаг тул гурван сайт нэг хэмжээтэй. Тайлбар: xs caption/badge/code · sm UI (цэс, холбоос, хөл) ·
     base body · lg landing body · 2xl H3-түвшний гарчиг · 3xl H1/H2 · 4xl–5xl зөвхөн нүүрийн hero. ≤8 шат. */
  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  --text-xs--letter-spacing: 0.005em;
  --text-sm: 0.8125rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 0.875rem;
  --text-base--line-height: 1.5rem;
  --text-lg: 1rem;
  --text-lg--line-height: 1.5rem;
  --text-2xl: 1.375rem;
  --text-2xl--line-height: 1.875rem;
  --text-2xl--letter-spacing: -0.015em;
  --text-3xl: 1.75rem;
  --text-3xl--line-height: 2.125rem;
  --text-3xl--letter-spacing: -0.02em;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 2.5rem;
  --text-4xl--letter-spacing: -0.025em;
  --text-5xl: 3rem;
  --text-5xl--line-height: 1.1;
  --text-5xl--letter-spacing: -0.03em;
  --tracking-tight: -0.025em;
}
/* Харанхуй горим — gerege-ui theme.css-ийн `.dark` блок (design-research 08-design-tokens.md, 2026-09-28);
   accent нь тэндхийн blue preset-ийн dark утга (L/C) брэндийн hue 259-тэй. theme.js нь localStorage.theme-ээс
   html[data-theme]-ийг эхний зурагдахаас өмнө тавина; атрибутгүй (system) үед доорх media query шийднэ.
   ХОЁР БЛОК ИЖИЛ — нэгийг засвал нөгөөг ч зас. Өнгө бүр токеноор: доорх дүрмүүдэд түүхий hex/hsl/oklch бичихгүй. */
html[data-theme="dark"] {
  color-scheme: dark;
  --background: hsl(229 50% 6%);
  --background-subtle: hsl(222 47% 9%);
  --background-muted: hsl(217 33% 13%);
  --foreground: hsl(210 40% 98%);
  --foreground-muted: hsl(213 27% 84%);
  --foreground-subtle: hsl(215 20% 65%);
  --border: hsl(217 33% 17%);
  --border-strong: hsl(215 25% 27%);
  --accent: oklch(0.64 0.15 259);
  --accent-hover: color-mix(in oklab, var(--accent) 88%, white);
  --accent-foreground: hsl(229 50% 6%);
  --accent-subtle: oklch(0.24 0.06 259);
  --accent-subtle-foreground: oklch(0.82 0.1 259);
  --ring: oklch(0.68 0.15 259);
  --popover: hsl(222 47% 11%);
  --success-subtle: hsl(165 80% 8%);
  --success-border: hsl(163 70% 18%);
  --success-foreground: hsl(154 60% 64%);
  --warning-subtle: hsl(20 60% 10%);
  --warning-border: hsl(22 70% 26%);
  --warning-foreground: hsl(40 92% 65%);
  --danger-subtle: hsl(0 75% 12%);
  --danger-border: hsl(0 70% 35%);
  --danger-foreground: hsl(0 91% 71%);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --background: hsl(229 50% 6%);
    --background-subtle: hsl(222 47% 9%);
    --background-muted: hsl(217 33% 13%);
    --foreground: hsl(210 40% 98%);
    --foreground-muted: hsl(213 27% 84%);
    --foreground-subtle: hsl(215 20% 65%);
    --border: hsl(217 33% 17%);
    --border-strong: hsl(215 25% 27%);
    --accent: oklch(0.64 0.15 259);
    --accent-hover: color-mix(in oklab, var(--accent) 88%, white);
    --accent-foreground: hsl(229 50% 6%);
    --accent-subtle: oklch(0.24 0.06 259);
    --accent-subtle-foreground: oklch(0.82 0.1 259);
    --ring: oklch(0.68 0.15 259);
    --popover: hsl(222 47% 11%);
    --success-subtle: hsl(165 80% 8%);
    --success-border: hsl(163 70% 18%);
    --success-foreground: hsl(154 60% 64%);
    --warning-subtle: hsl(20 60% 10%);
    --warning-border: hsl(22 70% 26%);
    --warning-foreground: hsl(40 92% 65%);
    --danger-subtle: hsl(0 75% 12%);
    --danger-border: hsl(0 70% 35%);
    --danger-foreground: hsl(0 91% 71%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--text-base--line-height); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
code { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--text-xs--line-height); letter-spacing: var(--text-xs--letter-spacing); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--accent); color: var(--accent-foreground); padding: 8px 16px; border-radius: var(--radius-md); z-index: 2000; }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }

/* Нэг хүрээ — demo.eidmongolia.mn-ий `mx-auto max-w-7xl px-4 sm:px-6 lg:px-8`: толгойн мөр, hero, агуулга, хөл бүгд энэ ирмэг дээр. */
.container { max-width: 80rem; margin: 0 auto; padding: 0 16px; }
.container-narrow { max-width: 760px; }
@media (min-width: 640px) { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 32px; } }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Өөр хост руу гарах холбоосын дүрс — demo-ийн `<Icons.ExternalLink className="ml-1 size-3.5 opacity-70" />` */
.icon-ext { display: inline-block; width: 14px; height: 14px; margin-left: 4px; opacity: 0.7; vertical-align: -2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius-md); font: 500 var(--text-lg)/1 var(--font-sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--accent-foreground); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: progress; }
.btn-outline { background: var(--background); color: var(--foreground); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--background-muted); }
.btn-sm { height: 36px; padding: 0 14px; font-size: var(--text-sm); }

/* Толгой — demo.eidmongolia.mn-тэй нэг бүтэц (gerege-ui TopNav / TopNavLink / IconButton ghost md / DropdownMenu):
   64px sticky мөр, .container-тай нэг ирмэг; brand + badge, холбоосууд (≥768px), баруун талд горимын цэс + гар утасны цэс. */
.nav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--background); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; font-weight: 600; font-size: var(--text-base); line-height: var(--text-base--line-height); white-space: nowrap; border-radius: var(--radius-md); }
.brand-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; background: var(--accent-subtle); color: var(--accent-subtle-foreground); font-size: var(--text-xs); line-height: var(--text-xs--line-height); letter-spacing: var(--text-xs--letter-spacing); font-weight: 500; }
.nav-links { display: none; align-items: center; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 500; color: var(--foreground-muted); text-decoration: none; white-space: nowrap; transition: color var(--duration-base) var(--ease-out); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--foreground); }
.nav-actions { margin-left: auto; display: flex; flex: none; align-items: center; gap: 8px; }
/* IconButton (ghost, md): 36px, дүрс 16px */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin: 0; background: transparent; color: var(--foreground-muted); border: 0; border-radius: var(--radius-md); cursor: pointer; list-style: none; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover, .dropdown[open] > .icon-btn { background: var(--background-muted); color: var(--foreground); }
.icon-btn .icon { width: 16px; height: 16px; }
/* Dropdown (DropdownMenuContent align=end, sideOffset 4 / DropdownMenuItem) */
.dropdown { position: relative; }
.dropdown .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-popover); min-width: 12rem; padding: 4px; display: grid; background: var(--popover); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.dropdown .menu > a, .dropdown .menu > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; margin: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--foreground); font: 400 var(--text-sm)/var(--text-sm--line-height) var(--font-sans); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-base) var(--ease-out); }
.dropdown .menu > a:hover, .dropdown .menu > button:hover { background: var(--background-muted); }
.dropdown .menu .icon { width: 16px; height: 16px; }
.dropdown .menu .icon-ext { width: 14px; height: 14px; margin-left: auto; }
/* Горимын цэс: сонгосон мөрөнд check; товчны дүрс = бодит горим (нар/сар), theme.js-гүйгээр CSS шийднэ */
.theme-menu .check { display: none; margin-left: auto; }
.theme-menu [aria-checked="true"] .check { display: block; }
.theme-menu .icon-dark { display: none; }
html[data-theme="dark"] .theme-menu .icon-light { display: none; }
html[data-theme="dark"] .theme-menu .icon-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-menu .icon-light { display: none; }
  html:not([data-theme="light"]) .theme-menu .icon-dark { display: block; }
}
/* Гар утасны цэс <768px (TopNav nav = hidden md:flex) */
.nav-menu { display: none; }
@media (min-width: 768px) { .nav-links { display: flex; } .nav-inner { gap: 32px; } }
@media (max-width: 767px) { .nav-menu { display: block; } }

/* Хуудасны гарчиг (demo-ийн h1 = text-3xl font-semibold tracking-tight, бүх өргөнд нэг) */
.page-head { background: var(--background-subtle); border-bottom: 1px solid var(--border); padding: 56px 0 40px; }
.page-head h1 { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); letter-spacing: var(--tracking-tight); font-weight: 600; }
.page-head p { margin-top: 12px; color: var(--foreground-muted); max-width: 60ch; }
.page-head .meta { margin-top: 8px; font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--foreground-subtle); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .page-head { padding: 40px 0 32px; } }
.page-body { padding: 40px 0 72px; }

/* Эрх зүйн баримт */
.doc { display: grid; gap: 16px; }
.doc section { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
@media (max-width: 639px) { .doc section { padding: 16px; } }
.doc h2 { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); letter-spacing: var(--text-2xl--letter-spacing); font-weight: 600; }
.doc p, .doc ul { margin: 12px 0 0; color: var(--foreground-muted); }
.doc ul { padding-left: 20px; display: grid; gap: 8px; }
.doc a:not(.btn) { color: var(--accent-subtle-foreground); }

/* Шалгагч */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--background-muted); border-radius: var(--radius-lg); margin-bottom: 24px; }
.tabs button { height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground-muted); font: 500 var(--text-sm)/1 var(--font-sans); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
@media (max-width: 479px) { .tabs { display: flex; } .tabs button { flex: 1; padding: 0 8px; } }

.drop { position: relative; display: grid; justify-items: center; gap: 12px; min-height: 180px; padding: 32px 16px; border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--background-subtle); text-align: center; cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-subtle); }
.drop:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.drop .icon { width: 32px; height: 32px; color: var(--accent); }
.drop b { font-weight: 600; }
.drop span { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--foreground-subtle); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.field { display: grid; gap: 8px; }
.field label { font-weight: 500; }
.field .hint { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--foreground-subtle); }
.field textarea { width: 100%; min-height: 200px; padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font: var(--text-xs)/var(--text-sm--line-height) var(--font-mono); color: var(--foreground); resize: vertical; }
.field textarea:focus { outline: 2px solid var(--ring); outline-offset: 0; border-color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.note { margin-top: 16px; display: flex; gap: 8px; font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--foreground-subtle); }
.note .icon { width: 16px; height: 16px; margin-top: 2px; }

.alert { display: flex; gap: 12px; padding: 16px; border: 1px solid; border-radius: var(--radius-lg); }
.alert .icon { margin-top: 2px; }
.alert b { font-weight: 600; }
.alert p { margin-top: 4px; }
.alert.valid { background: var(--success-subtle); border-color: var(--success-border); color: var(--success-foreground); }
.alert.indeterminate { background: var(--warning-subtle); border-color: var(--warning-border); color: var(--warning-foreground); }
.alert.invalid, .alert.error { background: var(--danger-subtle); border-color: var(--danger-border); color: var(--danger-foreground); }

.results { margin-top: 32px; display: grid; gap: 16px; }
.results:empty { display: none; }
.sig { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 16px; }
@media (max-width: 639px) { .sig { padding: 16px; } }
.sig-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sig-head h2 { font-size: var(--text-base); line-height: 1.25; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 9999px; font-size: var(--text-xs); line-height: var(--text-xs--line-height); letter-spacing: var(--text-xs--letter-spacing); font-weight: 500; border: 1px solid; white-space: nowrap; }
.badge .icon { width: 14px; height: 14px; }
.badge.valid { background: var(--success-subtle); border-color: var(--success-border); color: var(--success-foreground); }
.badge.indeterminate { background: var(--warning-subtle); border-color: var(--warning-border); color: var(--warning-foreground); }
.badge.invalid { background: var(--danger-subtle); border-color: var(--danger-border); color: var(--danger-foreground); }
.problems { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--foreground-muted); }
dl.facts { margin: 0; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 10px 16px; }
dl.facts dt { color: var(--foreground-subtle); }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dl.facts .mono { font: var(--text-xs)/var(--text-sm--line-height) var(--font-mono); letter-spacing: var(--text-xs--letter-spacing); }
dl.facts .num { font-variant-numeric: tabular-nums; }
@media (max-width: 559px) { dl.facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } dl.facts dd { margin-bottom: 8px; } }
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 9999px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Хөл — demo-ийн SiteFooter: bg-background-subtle, py-12, 1/2/4 багана gap-8, гарчиг text-sm 600 mb-3, холбоос text-sm,
   доод мөр text-xs mt-10 pt-6 (нэг багана, ≥640px нэг мөр) */
.footer { border-top: 1px solid var(--border); background: var(--background-subtle); padding: 48px 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.footer h3 { font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 600; margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--foreground-muted); text-decoration: none; overflow-wrap: anywhere; }
.footer a:hover { color: var(--foreground); text-decoration: underline; }
.footer .brand { font-size: var(--text-base); line-height: var(--text-base--line-height); color: var(--foreground); display: inline-flex; }
.footer .brand:hover { text-decoration: none; }
.footer-about p { margin-top: 12px; font-size: var(--text-sm); line-height: var(--text-base--line-height); color: var(--foreground-muted); max-width: 20rem; }
.footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--foreground-subtle); font-size: var(--text-xs); line-height: var(--text-xs--line-height); letter-spacing: var(--text-xs--letter-spacing); display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: span 2; } .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .footer-about { grid-column: auto; } }
@media (max-width: 479px) { .nav-inner { gap: 8px; } }

/* Хөгжүүлэгчийн баримт (/developers) */
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.docs-toc { position: sticky; top: 80px; font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.docs-toc h2 { font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--foreground-subtle); margin-bottom: 12px; }
.docs-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.docs-toc li { counter-increment: toc; }
.docs-toc a { display: flex; gap: 10px; padding: 6px 8px; border-radius: var(--radius-md); color: var(--foreground-muted); text-decoration: none; }
.docs-toc a::before { content: counter(toc, decimal-leading-zero); font: 500 var(--text-xs)/var(--text-sm--line-height) var(--font-mono); color: var(--foreground-subtle); flex: none; }
.docs-toc a:hover { background: var(--background-muted); color: var(--foreground); }
.docs-body { min-width: 0; display: grid; gap: 40px; }
.docs-body section { scroll-margin-top: 80px; display: grid; gap: 12px; }
.docs-body h3[id] { scroll-margin-top: 80px; }
.docs-body h2 { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); letter-spacing: var(--text-2xl--letter-spacing); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.docs-body h3 { font-size: var(--text-base); line-height: 1.25; font-weight: 600; margin-top: 8px; }
.docs-body p, .docs-body li { color: var(--foreground-muted); }
.docs-body ul, .docs-body ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.docs-body a { color: var(--accent-subtle-foreground); }
.docs-body code { font: var(--text-xs)/var(--text-xs--line-height) var(--font-mono); letter-spacing: var(--text-xs--letter-spacing); background: var(--background-muted); padding: 1px 5px; border-radius: 4px; color: var(--foreground); overflow-wrap: anywhere; }
.docs-body pre { margin: 0; padding: 14px 16px; background: var(--background-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; font: var(--text-xs)/var(--text-sm--line-height) var(--font-mono); letter-spacing: var(--text-xs--letter-spacing); color: var(--foreground); }
.docs-body pre code { background: none; padding: 0; font: inherit; }
.docs-body table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.docs-body th, .docs-body td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.docs-body th { font-weight: 600; color: var(--foreground-subtle); font-size: var(--text-xs); line-height: var(--text-xs--line-height); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.docs-body td { color: var(--foreground-muted); }
/* Хүснэгтийн code: урт зам/талбар (`signatureProtocolParameters.rpChallenge`, JSON хэлбэр) нэг мөрөнд үлдвэл тайлбарын баганыг
   дэлгэцээс түлхдэг — ерөнхийдөө ороно (`.docs-body code`-ийн overflow-wrap: anywhere); хоёр багана (TOC) харагдах ≥960px-д
   сүүлийн биш баганын code (endpoint, талбарын нэр) нэг мөрөнд. */
.docs-body td code { white-space: normal; }
@media (min-width: 960px) { .docs-body td:not(:last-child) code { white-space: nowrap; } }
.docs-body td .wrap { white-space: normal; }
/* Гүйдэг хэсэг (pre, хүснэгт) гараар хүрэх боломжтой: HTML-д tabindex="0" role="region" aria-label; sr-only-д relative. */
.table-wrap { position: relative; overflow-x: auto; }
.docs-body pre:focus-visible, .table-wrap:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-lg); }
/* Уншихад тохиромжтой мөрийн урт ~72ch; хүснэгт, pre, тэдгээрийг агуулсан алхмын жагсаалт бүтэн өргөнөөр. */
.docs-body section > p, .docs-body section > ul, .docs-body section > ol:not(:has(pre, .table-wrap)) { max-width: 72ch; }
.callout { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--warning-border); background: var(--warning-subtle); border-radius: var(--radius-lg); }
.callout .icon { color: var(--warning-foreground); margin-top: 2px; }
.callout p, .callout li { color: var(--warning-foreground); }
.callout.info { border-color: var(--border); background: var(--accent-subtle); }
.callout.info .icon, .callout.info p { color: var(--accent-subtle-foreground); }
.req { font: 500 var(--text-xs)/1 var(--font-mono); padding: 2px 6px; border-radius: 4px; background: var(--accent-subtle); color: var(--accent-subtle-foreground); white-space: nowrap; }
.opt { font: 500 var(--text-xs)/1 var(--font-mono); padding: 2px 6px; border-radius: 4px; background: var(--background-muted); color: var(--foreground-subtle); white-space: nowrap; }
.steps-doc { list-style: none; padding: 0; counter-reset: st; display: grid; gap: 12px; }
.steps-doc li { counter-increment: st; position: relative; padding-left: 44px; }
.steps-doc li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 9999px; background: var(--accent); color: var(--accent-foreground); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--text-sm); }
.steps-doc b { color: var(--foreground); }
/* Гар утсанд алхмын доторх pre/хүснэгт 44px догол алдахгүй — жагсаалтын зүүн ирмэгээс бүтэн өргөнөөр. */
@media (max-width: 639px) {
  .docs-body .steps-doc { padding-left: 0; }
  .steps-doc li > pre, .steps-doc li > .table-wrap { margin-left: -44px; max-width: none; }
  .docs-body td { overflow-wrap: anywhere; }
}
@media (max-width: 959px) { .docs { grid-template-columns: minmax(0, 1fr); gap: 24px; } .docs-toc { position: static; } .docs-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .docs-toc ol { grid-template-columns: minmax(0, 1fr); } }
.docs-body section > *, .docs-body li > * { min-width: 0; max-width: 100%; }
.docs-body pre, .table-wrap { min-width: 0; max-width: 100%; }
.docs-body li { min-width: 0; }
.page-head .meta code { overflow-wrap: anywhere; }
.lang-tabs { padding-top: 24px; }
.lang-tabs .tabs { margin-bottom: 0; }
.lang-tabs a[role="tab"] { height: 36px; padding: 0 16px; border-radius: var(--radius-md); color: var(--foreground-muted); font: 500 var(--text-sm)/36px var(--font-sans); text-decoration: none; }
.lang-tabs a[role="tab"][aria-selected="true"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
/* lang.js <head>-д html[data-lang]-ийг эхний зурагдахаас өмнө тавина — сонгосон хэл л зурагдана; hidden атрибутыг DOMContentLoaded-д солино. */
html[data-lang] .lang-block { display: none !important; }
html[data-lang="mn"] .lang-block[data-lang="mn"], html[data-lang="en"] .lang-block[data-lang="en"], html[data-lang="ru"] .lang-block[data-lang="ru"], html[data-lang="zh"] .lang-block[data-lang="zh"] { display: block !important; }

/* ====================================================================================================================
   «Хөгжүүлэгчийн портал» mockup (2026-10-26): толгой, hero, хостууд, боломжууд, хэрхэн ажилладаг, эхлэх заавар,
   баримтын layout (14 бүлэг бүрэн хэвээр — зөвхөн хэв маяг), хураангуй картууд, бараан хөл. Өнгө бүр доорх токеноор;
   харанхуй горимын хоёр блок ИЖИЛ. Хэмжээ нь mockup-ынх (px) — энэ блок дотор --text-* scale-аас гадуур.
   ==================================================================================================================== */
:root {
  --d-page: #F4F6FB; --d-surface: #FFFFFF; --d-ink: #0A1631; --d-ink-muted: #3A4766; --d-ink-subtle: #4A5675; --d-ink-faint: #8A97B5;
  --d-line: #E1E6F0; --d-line-2: #E6EAF2; --d-brand: #2457E6; --d-brand-fg: #FFFFFF; --d-brand-strong: #1238A8; --d-brand-soft: #EAF0FF; --d-brand-line: #D4E0FF;
  --d-ok: #137A47; --d-ok-soft: #E7F6EE; --d-ok-line: #BFE6D0; --d-ok-ink: #2F5A44;
  --d-warn: #8A4B00; --d-warn-soft: #FFF1DC; --d-note: #FFF7EA; --d-note-line: #F4DDB5; --d-note-ink: #5C3A06;
  --d-bad: #A3262B; --d-bad-soft: #FDECEC;
  --d-panel: #0A1631; --d-panel-2: #13244A; --d-panel-3: #0F1E40; --d-panel-line: #24396A; --d-panel-line-2: #2E4478; --d-panel-line-3: #1B2C55;
  --d-panel-fg: #FFFFFF; --d-panel-muted: #C2CCE3; --d-panel-subtle: #A9B6D3; --d-panel-accent: #8FB0FF; --d-panel-ok: #7FE0AE;
  --d-code-bg: #050C1E; --d-code-head: #0A1430; --d-code-fg: #E3E9F6; --d-code-s: #F2C38F; --d-code-c: #6F7FA6; --d-code-ln: #3F5384;
  --d-nav-bg: rgb(255 255 255 / 0.88); --d-shadow-pill: 0 1px 3px rgb(10 22 49 / 0.08); --d-shadow-cta: 0 6px 16px rgb(36 87 230 / 0.28);
  --d-shadow-code: 0 30px 60px rgb(0 0 0 / 0.35);
}
html[data-theme="dark"] {
  --d-page: hsl(229 50% 6%); --d-surface: hsl(222 47% 9%); --d-ink: hsl(210 40% 98%); --d-ink-muted: hsl(213 27% 84%); --d-ink-subtle: hsl(215 20% 72%); --d-ink-faint: hsl(215 20% 55%);
  --d-line: hsl(217 33% 17%); --d-line-2: hsl(217 33% 17%); --d-brand: #3D6EF0; --d-brand-fg: #FFFFFF; --d-brand-strong: oklch(0.82 0.1 259); --d-brand-soft: oklch(0.24 0.06 259); --d-brand-line: oklch(0.32 0.08 259);
  --d-ok: hsl(154 60% 64%); --d-ok-soft: hsl(165 80% 8%); --d-ok-line: hsl(163 70% 18%); --d-ok-ink: hsl(154 40% 75%);
  --d-warn: hsl(40 92% 65%); --d-warn-soft: hsl(20 60% 10%); --d-note: hsl(20 60% 10%); --d-note-line: hsl(22 70% 26%); --d-note-ink: hsl(40 80% 75%);
  --d-bad: hsl(0 91% 71%); --d-bad-soft: hsl(0 75% 12%);
  --d-panel: hsl(222 47% 11%); --d-panel-2: hsl(217 33% 15%); --d-panel-3: hsl(220 40% 13%); --d-panel-line: hsl(215 25% 24%); --d-panel-line-2: hsl(215 25% 30%); --d-panel-line-3: hsl(215 25% 20%);
  --d-panel-fg: hsl(210 40% 98%); --d-panel-muted: hsl(213 27% 80%); --d-panel-subtle: hsl(215 20% 68%); --d-panel-accent: #8FB0FF; --d-panel-ok: #7FE0AE;
  --d-code-bg: hsl(229 50% 5%); --d-code-head: hsl(225 45% 8%); --d-code-fg: #E3E9F6; --d-code-s: #F2C38F; --d-code-c: #6F7FA6; --d-code-ln: #3F5384;
  --d-nav-bg: hsl(229 50% 6% / 0.88); --d-shadow-pill: 0 1px 3px rgb(0 0 0 / 0.4); --d-shadow-cta: 0 6px 16px rgb(0 0 0 / 0.4);
  --d-shadow-code: 0 30px 60px rgb(0 0 0 / 0.5);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --d-page: hsl(229 50% 6%); --d-surface: hsl(222 47% 9%); --d-ink: hsl(210 40% 98%); --d-ink-muted: hsl(213 27% 84%); --d-ink-subtle: hsl(215 20% 72%); --d-ink-faint: hsl(215 20% 55%);
    --d-line: hsl(217 33% 17%); --d-line-2: hsl(217 33% 17%); --d-brand: #3D6EF0; --d-brand-fg: #FFFFFF; --d-brand-strong: oklch(0.82 0.1 259); --d-brand-soft: oklch(0.24 0.06 259); --d-brand-line: oklch(0.32 0.08 259);
    --d-ok: hsl(154 60% 64%); --d-ok-soft: hsl(165 80% 8%); --d-ok-line: hsl(163 70% 18%); --d-ok-ink: hsl(154 40% 75%);
    --d-warn: hsl(40 92% 65%); --d-warn-soft: hsl(20 60% 10%); --d-note: hsl(20 60% 10%); --d-note-line: hsl(22 70% 26%); --d-note-ink: hsl(40 80% 75%);
    --d-bad: hsl(0 91% 71%); --d-bad-soft: hsl(0 75% 12%);
    --d-panel: hsl(222 47% 11%); --d-panel-2: hsl(217 33% 15%); --d-panel-3: hsl(220 40% 13%); --d-panel-line: hsl(215 25% 24%); --d-panel-line-2: hsl(215 25% 30%); --d-panel-line-3: hsl(215 25% 20%);
    --d-panel-fg: hsl(210 40% 98%); --d-panel-muted: hsl(213 27% 80%); --d-panel-subtle: hsl(215 20% 68%); --d-panel-accent: #8FB0FF; --d-panel-ok: #7FE0AE;
    --d-code-bg: hsl(229 50% 5%); --d-code-head: hsl(225 45% 8%); --d-code-fg: #E3E9F6; --d-code-s: #F2C38F; --d-code-c: #6F7FA6; --d-code-ln: #3F5384;
    --d-nav-bg: hsl(229 50% 6% / 0.88); --d-shadow-pill: 0 1px 3px rgb(0 0 0 / 0.4); --d-shadow-cta: 0 6px 16px rgb(0 0 0 / 0.4);
    --d-shadow-code: 0 30px 60px rgb(0 0 0 / 0.5);
  }
}
body { background: var(--d-page); color: var(--d-ink); }
.container { max-width: 1280px; padding-inline: 24px; }
.m { font-family: var(--font-mono); }

/* Толгой */
.nav { background: var(--d-nav-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--d-line-2); }
.nav-inner { height: auto; min-height: 68px; padding-block: 12px; gap: 12px 24px; }
.brand { gap: 12px; min-height: 44px; color: var(--d-ink); }
.mark { display: block; width: 36px; height: 36px; flex: none; }
.mark-dark { display: none; }
html[data-theme="dark"] .mark-light { display: none; }
html[data-theme="dark"] .mark-dark { display: block; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .mark-light { display: none; } html:not([data-theme="light"]) .mark-dark { display: block; } }
.brand-name { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1; }
.brand-name .dash { color: var(--d-brand); }
.brand-name > span:last-child { font-weight: 500; color: var(--d-ink-subtle); }
.brand-dev { font: 500 12px/1 var(--font-mono); color: var(--d-ink); padding: 5px 9px; border-radius: 8px; background: var(--d-brand-soft); border: 1px solid var(--d-brand-line); }
.nav-links { margin-left: auto; gap: 2px; padding: 4px; border-radius: 999px; background: var(--d-page); border: 1px solid var(--d-line-2); }
.nav-links a { height: auto; padding: 10px 16px; border-radius: 999px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--d-ink-muted); }
.nav-links a:hover, .nav-links a[aria-current] { background: var(--d-surface); color: var(--d-ink); box-shadow: var(--d-shadow-pill); }
.nav-home { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 10px 14px; color: var(--d-ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.nav-home .icon { width: 13px; height: 13px; }
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--d-brand); color: var(--d-brand-fg); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: var(--d-shadow-cta); white-space: nowrap; }
.nav-cta:hover { background: var(--d-brand-strong); color: var(--d-brand-fg); }
@media (max-width: 1099px) { .nav-home { display: none; } }
@media (max-width: 1023px) { .nav-links { display: none; } .nav-menu { display: block; } }
@media (max-width: 559px) { .nav-cta { display: none; } .brand-dev { display: none; } }

/* Ерөнхий хэсэг */
.d-sec { padding-block: 104px; }
.d-sec-alt { background: var(--d-surface); border-block: 1px solid var(--d-line); }
@media (max-width: 767px) { .d-sec { padding-block: 72px; } }
.d-eyebrow { display: block; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--d-brand); text-transform: uppercase; letter-spacing: 0.08em; }
.d-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 64px; margin-bottom: 48px; }
.d-head > div { flex: 1 1 520px; display: flex; flex-direction: column; gap: 16px; }
.d-head-col { flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; }
.d-head > p { flex: 1 1 360px; max-width: 460px; font-size: 17px; line-height: 1.65; color: var(--d-ink-muted); }
.d-sec h2, .docs-body h2 { font-weight: 600; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; color: var(--d-ink); }
.d-lbl { font-size: 12px; font-weight: 700; color: var(--d-ink-subtle); text-transform: uppercase; letter-spacing: 0.06em; }

/* Hero */
.d-hero { background: var(--d-panel); color: var(--d-panel-fg); }
.d-hero-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-block: 88px 96px; }
.d-hero-copy { flex: 1 1 500px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.d-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--d-panel-accent); padding: 6px 12px; border-radius: 999px; background: var(--d-panel-2); border: 1px solid var(--d-panel-line); }
.d-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d-panel-ok); }
.d-hero h1 { font-weight: 700; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.04; letter-spacing: -0.035em; }
.d-hero h1 span { color: var(--d-panel-accent); }
.d-hero-copy > p { font-size: 19px; line-height: 1.6; color: var(--d-panel-muted); max-width: 560px; }
.d-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.d-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; }
.d-btn .icon { width: 18px; height: 18px; }
.d-btn-light { background: var(--d-panel-fg); color: var(--d-panel); }
.d-btn-ghost { color: var(--d-panel-fg); border: 1px solid var(--d-panel-line-2); }
.d-cmd { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--d-panel-2); border: 1px solid var(--d-panel-line); max-width: 520px; min-width: 0; font: 14px/1.4 var(--font-mono); }
.d-cmd-p { color: var(--d-panel-ok); }
.d-cmd-t { flex: 1; min-width: 0; color: var(--d-code-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-copy { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--d-panel-line-2); background: transparent; color: var(--d-panel-subtle); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.d-copy:hover, .d-copy[data-done] { color: var(--d-panel-ok); }
.d-code { flex: 1 1 520px; min-width: 0; background: var(--d-code-bg); border: 1px solid var(--d-panel-line); border-radius: 22px; overflow: hidden; box-shadow: var(--d-shadow-code); }
.d-code-head, .d-code-mid { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--d-code-head); border-bottom: 1px solid var(--d-panel-line-3); font: 12px/1.4 var(--font-mono); color: var(--d-panel-subtle); }
.d-code-mid { border-top: 1px solid var(--d-panel-line-3); gap: 10px; }
.d-dots { display: flex; gap: 6px; }
.d-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--d-panel-line-2); }
.d-tab.on { color: var(--d-code-fg); padding: 6px 10px; border-radius: 8px; background: var(--d-panel-2); }
.d-200 { font-weight: 500; color: var(--d-panel); background: var(--d-panel-ok); padding: 3px 8px; border-radius: 6px; }
.d-code pre { margin: 0; padding: 20px; font: 13px/1.75 var(--font-mono); color: var(--d-code-fg); overflow-x: auto; white-space: pre; }
.k-ok { color: var(--d-panel-ok); } .k-s { color: var(--d-code-s); } .k-c { color: var(--d-code-c); } .k-k { color: var(--d-panel-accent); }

/* Хостууд */
.d-hosts { background: var(--d-surface); border-bottom: 1px solid var(--d-line); }
.d-hosts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding-block: 28px; }
.d-hosts-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--d-page); border: 1px solid var(--d-line); }
.d-hosts-grid .m { font-size: 13px; font-weight: 500; }
.d-hosts-grid span:last-child { font-size: 12px; color: var(--d-ink-subtle); }

/* Боломжууд */
.d-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.d-cap { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 24px; background: var(--d-surface); border: 1px solid var(--d-line); color: var(--d-ink); text-decoration: none; transition: border-color var(--duration-base) var(--ease-out); }
.d-cap:hover { border-color: var(--d-brand); }
.d-cap-top { display: flex; justify-content: space-between; align-items: center; }
.d-cap-top .m { font-size: 12px; color: var(--d-ink-subtle); }
.d-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--d-brand-soft); color: var(--d-brand); display: flex; align-items: center; justify-content: center; }
.d-ico .icon { width: 24px; height: 24px; stroke-width: 1.8; }
.d-cap h3 { font-size: 21px; font-weight: 600; }
.d-cap p { font-size: 15px; line-height: 1.6; color: var(--d-ink-muted); }
.d-cap-code { margin-top: auto; font-size: 12px; color: var(--d-brand); }

/* Хэрхэн ажилладаг */
.d-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.d-flow-step { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; background: var(--d-page); border: 1px solid var(--d-line); }
.d-flow-step .m { font-size: 12px; color: var(--d-ink-subtle); }
.d-flow-step .d-k { color: var(--d-brand); }
.d-flow-step b { font-size: 18px; font-weight: 600; }
.d-flow-step.dark { background: var(--d-panel); border-color: var(--d-panel); color: var(--d-panel-fg); }
.d-flow-step.dark .d-k { color: var(--d-panel-accent); } .d-flow-step.dark .m:last-child { color: var(--d-panel-subtle); }
.d-flow-step.ok { background: var(--d-ok-soft); border-color: var(--d-ok-line); }
.d-flow-step.ok .d-k { color: var(--d-ok); } .d-flow-step.ok .m:last-child { color: var(--d-ok-ink); }
.d-flow-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--d-ink-faint); padding: 0 2px; }
.d-flow-arrow .icon { width: 22px; height: 22px; }
@media (max-width: 1099px) { .d-flow-arrow { display: none; } }
.d-ttl { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; color: var(--d-ink-muted); }
.d-ttl > span { display: inline-flex; align-items: center; gap: 8px; }
.d-ttl .m { font-size: 12px; padding: 4px 8px; border-radius: 6px; background: var(--d-page); border: 1px solid var(--d-line); color: var(--d-ink); }

/* Эхлэх заавар */
.d-qs { display: flex; flex-wrap: wrap; gap: 56px; }
.d-qs-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.d-qs-copy > p { font-size: 17px; line-height: 1.65; color: var(--d-ink-muted); }
.d-qs-copy > p .m { font-size: 15px; color: var(--d-ink); }
.d-note { display: flex; gap: 12px; padding: 18px 20px; border-radius: 18px; background: var(--d-note); border: 1px solid var(--d-note-line); font-size: 14px; line-height: 1.6; color: var(--d-note-ink); }
.d-note .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--d-warn); stroke-width: 2; }
.d-note .m { font-size: 13px; }
.d-steps { flex: 1 1 560px; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.d-step { display: flex; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--d-surface); border: 1px solid var(--d-line); }
.d-step > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.d-step b { font-size: 16px; font-weight: 700; }
.d-step b small { font-size: 12px; font-weight: 600; color: var(--d-ink-subtle); }
.d-step > span:last-child > span { font-size: 14px; line-height: 1.55; color: var(--d-ink-muted); overflow-wrap: anywhere; }
.d-step .m { font-size: 13px; }
.d-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--d-panel); color: var(--d-panel-fg); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.d-step.opt .d-num { background: var(--d-page); border: 1px dashed var(--d-ink-faint); color: var(--d-ink-muted); }
.d-step.acc .d-num { background: var(--d-brand); color: var(--d-brand-fg); }
.d-step.ok { background: var(--d-ok-soft); border-color: var(--d-ok-line); }
.d-step.ok .d-num { background: var(--d-ok); color: var(--d-brand-fg); }
.d-step.ok > span:last-child > span { color: var(--d-ok-ink); }

/* Баримтын layout — mockup-ын «Баримт бичиг» хажуугийн цэс; 14 бүлгийн агуулга хэвээр, зөвхөн хэв маяг */
.d-docs { background: var(--d-surface); border-top: 1px solid var(--d-line); }
.d-docs-inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 104px; }
.docs-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; max-height: calc(100vh - 110px); overflow-y: auto; }
.docs-toc .d-lbl { margin-bottom: 10px; }
.docs-toc a { display: flex; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--d-ink-muted); text-decoration: none; }
.docs-toc a::before { content: none; }
.docs-toc a .m { flex: none; width: 20px; color: var(--d-ink-faint); }
.docs-toc a:hover, .docs-toc a[aria-current] { background: var(--d-page); color: var(--d-ink); }
.docs-toc a[aria-current] .m { color: var(--d-brand); }
@media (max-width: 959px) {
  .d-docs-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 72px; }
  .docs-toc { position: static; max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .docs-toc .d-lbl { grid-column: 1 / -1; }
}
.docs-body { gap: 88px; }
.docs-body section { gap: 16px; scroll-margin-top: 92px; }
.docs-body h3[id] { scroll-margin-top: 92px; }
.docs-body h2 { padding-bottom: 0; border-bottom: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; margin-bottom: 4px; }
.docs-body h3 { font-size: 18px; line-height: 1.35; font-weight: 600; margin-top: 16px; color: var(--d-ink); }
.docs-body p, .docs-body li { font-size: 15px; line-height: 1.65; color: var(--d-ink-muted); }
.docs-body b { color: var(--d-ink); }
.docs-body a { color: var(--d-brand); text-underline-offset: 3px; }
.docs-body a:hover { color: var(--d-brand-strong); }
.docs-body code { font-size: 13px; line-height: 1.5; background: var(--d-page); border: 1px solid var(--d-line); padding: 1px 6px; border-radius: 6px; color: var(--d-ink); }
.docs-body pre { padding: 20px; background: var(--d-code-bg); border: 1px solid var(--d-panel-line); border-radius: 18px; color: var(--d-code-fg); font: 13px/1.75 var(--font-mono); }
.docs-body pre code { border: 0; color: inherit; }
.table-wrap { border: 1px solid var(--d-line); border-radius: 18px; }
.docs-body table { font-size: 14px; line-height: 1.5; }
.docs-body th { background: var(--d-page); padding: 12px 20px; font-size: 12px; font-weight: 700; color: var(--d-ink-subtle); letter-spacing: 0.06em; border-bottom: 1px solid var(--d-line); }
.docs-body td { padding: 14px 20px; border-bottom: 1px solid var(--d-line); color: var(--d-ink-muted); }
.docs-body tr:last-child td { border-bottom: 0; }
.callout { gap: 12px; padding: 18px 20px; border-radius: 18px; background: var(--d-note); border-color: var(--d-note-line); }
.callout .icon { color: var(--d-warn); }
.callout p, .callout li { color: var(--d-note-ink); }
.callout.info { background: var(--d-brand-soft); border-color: var(--d-brand-line); }
.callout.info .icon, .callout.info p, .callout.info li { color: var(--d-brand-strong); }
.req { background: var(--d-brand-soft); color: var(--d-brand-strong); border-radius: 6px; padding: 3px 7px; }
.opt { background: var(--d-page); color: var(--d-ink-subtle); border: 1px solid var(--d-line); border-radius: 6px; padding: 2px 7px; }
.steps-doc li { padding-left: 48px; }
.steps-doc li::before { width: 32px; height: 32px; background: var(--d-panel); color: var(--d-panel-fg); font-weight: 700; }
.d-intro { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px; border-radius: 20px; background: var(--d-page); border: 1px solid var(--d-line); }
.d-intro p { max-width: 72ch; }
.d-intro .meta { font-size: 13px; color: var(--d-ink-subtle); }
.d-lead { font-size: 16px; }
.docs-body .m { font-size: 13px; color: var(--d-ink); }

/* Хураангуй картууд (бүлгийн эхэнд) */
.d-eptable { border: 1px solid var(--d-line); border-radius: 18px; overflow-x: auto; }
.d-eptable > div { min-width: 640px; display: flex; flex-direction: column; }
.d-ep { display: grid; grid-template-columns: 84px minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; padding: 16px 20px; border-top: 1px solid var(--d-line); align-items: center; font-size: 14px; color: var(--d-ink-muted); }
.d-ep .m { overflow-wrap: anywhere; }
.d-ep-h { border-top: 0; background: var(--d-page); padding: 12px 20px; font-size: 12px; font-weight: 700; color: var(--d-ink-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.d-meth { justify-self: start; font: 500 12px/1.4 var(--font-mono); padding: 4px 8px; border-radius: 6px; color: var(--d-brand-strong); background: var(--d-brand-soft); }
.d-meth.get { color: var(--d-ok); background: var(--d-ok-soft); }
.d-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.d-states > div, .d-errs > div { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; background: var(--d-page); border: 1px solid var(--d-line); }
.d-chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.d-chips > span { padding: 5px 9px; border-radius: 6px; }
.c-warn { background: var(--d-warn-soft); color: var(--d-warn); }
.c-ok { background: var(--d-ok-soft); color: var(--d-ok); }
.c-bad { background: var(--d-bad-soft); color: var(--d-bad); }
.c-acc { background: var(--d-brand-soft); color: var(--d-brand-strong); }
.c-plain { background: var(--d-surface); border: 1px solid var(--d-line); color: var(--d-ink); }
.c-dark { background: var(--d-panel-2); border: 1px solid var(--d-panel-line); color: var(--d-panel-fg); }
.d-verify { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 22px; background: var(--d-panel); color: var(--d-panel-fg); }
.d-verify-h { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 600; }
.d-verify-h .icon { width: 24px; height: 24px; color: var(--d-panel-ok); }
.d-verify-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 24px; font-size: 14px; line-height: 1.55; color: var(--d-panel-muted); }
.d-verify-list > span, .d-feats > span { display: flex; gap: 10px; }
.d-verify-list .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--d-panel-ok); stroke-width: 2.4; }
.d-verify-list > span:last-child .icon { color: var(--d-bad); }
.d-sdks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.d-sdk { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 24px; background: var(--d-surface); border: 1px solid var(--d-line); font-size: 14px; line-height: 1.6; color: var(--d-ink-muted); }
.d-sdk-h { display: flex; justify-content: space-between; align-items: center; }
.d-sdk-h b { font-size: 22px; font-weight: 600; color: var(--d-ink); }
.d-sdk-pkg { font-size: 13px; color: var(--d-ink); padding: 12px 14px; border-radius: 12px; background: var(--d-page); border: 1px solid var(--d-line); overflow-wrap: anywhere; }
.d-sdk.dark { background: var(--d-panel); border-color: var(--d-panel); color: var(--d-panel-muted); }
.d-sdk.dark .d-sdk-h b { color: var(--d-panel-fg); }
.d-sdk.dark .d-sdk-pkg { background: var(--d-panel-2); border-color: var(--d-panel-line); color: var(--d-panel-muted); }
.d-badge { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.d-badge.ok { color: var(--d-panel); background: var(--d-panel-ok); }
.d-badge.ok-soft { color: var(--d-ok); background: var(--d-ok-soft); }
.d-badge.warn { color: var(--d-warn); background: var(--d-warn-soft); }
.d-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.d-feats > span { align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--d-surface); border: 1px solid var(--d-line); font-size: 14px; font-weight: 600; color: var(--d-ink); }
.d-feats .icon { width: 18px; height: 18px; color: var(--d-ok); stroke-width: 2.4; }
.d-errs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.d-errs b { font-size: 15px; font-weight: 700; }
.d-http { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--d-ink-muted); }
.d-http > span { display: flex; gap: 10px; }
.d-http .m { width: 36px; flex: none; color: var(--d-bad); }
.d-reg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: var(--d-panel); color: var(--d-panel-fg); }
.d-reg-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.d-reg .d-eyebrow { color: var(--d-panel-accent); }
.docs-body .d-reg h2 { color: var(--d-panel-fg); font-size: clamp(28px, 3.4vw, 44px); }
.docs-body .d-reg p { font-size: 16px; color: var(--d-panel-muted); }
.d-reg-contact { flex: 0 1 360px; display: flex; flex-direction: column; gap: 12px; }
.docs-body .d-reg-contact a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-radius: 18px; text-decoration: none; }
.d-reg-contact a > span { display: flex; flex-direction: column; gap: 2px; }
.d-reg-contact small { font-size: 12px; font-weight: 700; }
.d-reg-contact b { font-size: 17px; font-weight: 700; color: inherit; }
.docs-body .d-reg-mail { background: var(--d-panel-fg); color: var(--d-panel); }
.d-reg-mail small { color: var(--d-ink-subtle); }
.docs-body .d-reg-tel { background: var(--d-panel-2); border: 1px solid var(--d-panel-line); color: var(--d-panel-fg); }
.d-reg-tel small, .d-reg-note { color: var(--d-panel-subtle); }
.d-reg-note { font-size: 13px; }

/* Хөл — mockup-ын бараан хөл + өмнөх бүх холбоосын багана */
.footer { background: var(--d-panel); color: var(--d-panel-muted); border-top: 0; padding: 56px 0 32px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 36px; border-bottom: 1px solid var(--d-panel-line); }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--d-panel-fg); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.footer-brand img { width: 36px; height: 36px; }
.footer-brand .dash { color: var(--d-panel-accent); }
.footer-brand > span > span:last-child { font-weight: 500; color: var(--d-panel-muted); }
.footer-quick { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.footer .footer-quick a { color: var(--d-panel-muted); padding: 8px 0; }
.footer-grid { padding-top: 36px; }
.footer h3 { color: var(--d-panel-fg); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.footer a { color: var(--d-panel-muted); font-size: 14px; }
.footer a:hover { color: var(--d-panel-fg); }
.footer-about p { color: var(--d-panel-muted); font-size: 14px; }
.footer-bottom { border-top-color: var(--d-panel-line); color: var(--d-panel-subtle); font-size: 13px; flex-wrap: wrap; gap: 12px; justify-content: space-between; }