:root{
  /* --- Primitive өнгө · design-tokens.css §1 --- */
  --c-pri-900: var(--c-primary-900, #10203A);
  --c-pri-800: var(--c-primary-800, #17294A);
  --c-pri-700: var(--c-primary-700, #1F3864);
  --c-pri-500: var(--c-primary-500, #42659E);
  --c-pri-200: var(--c-primary-200, #CFDDF2);
  --c-pri-100: var(--c-primary-100, #EAF0FA);
  --c-pri-50 : var(--c-primary-50,  #F5F8FD);

  --c-warn-700: var(--c-warning-700, #B45309);
  --c-warn-100: var(--c-warning-100, #FEF3C7);
  --c-ok-700  : var(--c-success-700, #166534);
  --c-ok-100  : var(--c-success-100, #DCFCE7);
  --c-err-700 : var(--c-error-700,   #B91C1C);
  --c-err-100 : var(--c-error-100,   #FEE2E2);

  /* --- Семантик өнгө · design-tokens.css §2 --- */
  --c-ink   : var(--color-text-primary,   #10203A);
  --c-ink-2 : var(--color-text-secondary, #4F5C73);
  --c-ink-3 : var(--color-text-tertiary,  #5E6E88);
  --c-line  : var(--color-border-strong,  #8FA2C0);
  --c-line-2: var(--color-border-subtle,  #DDE3EC);
  --c-bg    : var(--color-bg-page,        #F7F9FC);
  --c-surf  : var(--color-bg-surface,     #FFFFFF);
  --c-white : var(--c-neutral-0,          #FFFFFF);
  --c-stage : var(--c-neutral-100,        #EDF1F7);
  --c-dim   : var(--color-bg-overlay,     rgba(16,32,58,.56));
  --c-skel-1: var(--color-skeleton-base,  #EDF1F7);
  --c-skel-2: var(--color-skeleton-shine, #DDE3EC);

  --c-gold  : var(--c-accent-300,   #E2BF85);
  --c-brand : var(--c-brand-orange, #FF6B1F);

  /* --- Типографи · design-tokens.css §0, §3 --- */
  --f-body: var(--font-sans, "Inter", "Manrope", "Roboto", "Helvetica Neue", "Segoe UI", "Noto Sans", Arial, system-ui, sans-serif);
  --f-head: var(--font-display, "Montserrat", "Inter", "Manrope", "Segoe UI", "Helvetica Neue", system-ui, sans-serif);

  --t-ov : var(--font-size-overline, 0.6875rem);
  --t-xs : var(--font-size-caption,  0.75rem);
  --t-sm : var(--font-size-body-sm,  0.875rem);
  --t-md : var(--font-size-body,     1rem);
  --t-lg : var(--font-size-body-lg,  1.125rem);
  --t-xl : var(--font-size-h3,       1.25rem);
  --t-2xl: var(--font-size-h1,       1.75rem);

  /* --- Зай, радиус, сүүдэр · design-tokens.css §4 --- */
  --s-1: var(--space-2, 0.25rem);
  --s-2: var(--space-3, 0.5rem);
  --s-3: var(--space-4, 0.75rem);
  --s-4: var(--space-5, 1rem);
  --s-5: var(--space-6, 1.25rem);
  --s-6: var(--space-7, 1.5rem);

  --r-sm  : var(--radius-lg,   8px);
  --r-md  : var(--radius-xl,   12px);
  --r-lg  : var(--radius-2xl,  16px);
  --r-pill: var(--radius-pill, 999px);

  --sh-1: var(--shadow-sm, 0 1px 3px rgba(16,32,58,.08));
  --sh-2: var(--shadow-md, 0 4px 8px rgba(16,32,58,.08));
  --sh-3: var(--shadow-xl, 0 24px 48px rgba(16,32,58,.14));

  /* --- Мобайл орчны хэмжээс · design-tokens.css §5 --- */
  --tap  : var(--tap-target-min-mobile, 48px);
  --focus: var(--focus-ring-width, 3px);
}
.ic{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ic--sm{width:20px;height:20px;flex:0 0 20px}
.ic--lg{width:32px;height:32px;flex:0 0 32px}

/* App bar → .sp-topbar (мобайл variant) */
.mk-bar{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);
  background:var(--c-surf);border-bottom:1px solid var(--c-line-2);min-height:56px}
.mk-bar--pri{background:var(--c-pri-700);color:var(--c-white);border-bottom-color:var(--c-pri-700)}
.mk-bar__t{font-family:var(--f-head);font-size:var(--t-lg);font-weight:700;margin:0;flex:1 1 auto}
.mk-iconbtn{width:var(--tap);height:var(--tap);min-width:var(--tap);display:flex;align-items:center;
  justify-content:center;border:0;background:transparent;color:inherit;border-radius:var(--r-md);cursor:pointer}
.mk-iconbtn:focus-visible{outline:var(--focus) solid var(--c-pri-700);outline-offset:1px}

/* Bottom tab bar → .sp-tabbar */
.mk-tabs{flex:0 0 auto;display:flex;background:var(--c-surf);border-top:1px solid var(--c-line-2);
  padding:var(--s-1) 0 2px}
.mk-tab{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-size:var(--t-ov);color:var(--c-ink-3);text-decoration:none;font-weight:600}
.mk-tab[aria-current="page"]{color:var(--c-pri-700)}
.mk-tab .ic{width:22px;height:22px;flex:0 0 22px}
.mk-tab--lock{color:var(--c-line)}

/* Button → .sp-btn */
.mk-btn{display:flex;align-items:center;justify-content:center;gap:var(--s-2);width:100%;
  min-height:var(--tap);padding:0 var(--s-4);border-radius:var(--r-md);border:1px solid transparent;
  font-family:var(--f-head);font-size:var(--t-md);font-weight:700;cursor:pointer;text-decoration:none}
.mk-btn:focus-visible{outline:var(--focus) solid var(--c-pri-700);outline-offset:2px}
.mk-btn--pri{background:var(--c-pri-700);color:var(--c-white)}
.mk-btn--ghost{background:var(--c-surf);color:var(--c-pri-700);border-color:var(--c-pri-700)}
.mk-btn--quiet{background:var(--c-surf);color:var(--c-ink-2);border-color:var(--c-line)}
.mk-btn--danger{background:var(--c-err-700);color:var(--c-white)}
.mk-btn--gold{background:var(--c-gold);color:var(--c-ink)}
.mk-btn[aria-disabled="true"]{background:var(--c-line-2);color:var(--c-ink-3);border-color:transparent}
.mk-btn--sm{min-height:40px;font-size:var(--t-sm);width:auto;padding:0 var(--s-3)}
.mk-btn-row{display:flex;gap:var(--s-2)}

/* Card / list → .sp-card · .sp-table--stack мөр */
.mk-card{background:var(--c-surf);border:1px solid var(--c-line-2);border-radius:var(--r-md);
  padding:var(--s-3);box-shadow:var(--sh-1)}
.mk-card+.mk-card{margin-top:var(--s-2)}
.mk-card--flat{box-shadow:none}
.mk-card__t{font-family:var(--f-head);font-size:var(--t-sm);font-weight:700;margin:0 0 var(--s-1)}
.mk-row{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);
  padding:var(--s-2) 0;border-bottom:1px solid var(--c-line-2)}
.mk-row:last-child{border-bottom:0}
/* Нягт мөр — ЗӨВХӨН интерактив БИШ, зөвхөн харуулах өгөгдөлд (components.md §7 dense 40px) */
.mk-dense .mk-row{min-height:40px;padding:5px 0}
.mk-row__main{flex:1 1 auto;min-width:0}
.mk-row__t{font-size:var(--t-sm);font-weight:600;margin:0}
.mk-row__s{font-size:var(--t-xs);color:var(--c-ink-3);margin:2px 0 0;line-height:1.45}
.mk-row__v{font-size:var(--t-sm);font-weight:700;white-space:nowrap}
.mk-av{width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-pill);background:var(--c-pri-100);
  color:var(--c-pri-700);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:700;font-size:var(--t-sm)}

/* KPI → .sp-kpi */
.mk-kpi{display:flex;gap:var(--s-2)}
.mk-kpi>div{flex:1;background:var(--c-surf);border:1px solid var(--c-line-2);border-radius:var(--r-md);padding:var(--s-3)}
.mk-kpi dt{font-size:var(--t-xs);color:var(--c-ink-3);margin:0}
.mk-kpi dd{font-family:var(--f-head);font-size:var(--t-xl);font-weight:700;margin:var(--s-1) 0 0;letter-spacing:-.01em}

/* Badge / chip → .sp-badge */
.mk-bdg{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:700;
  border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
.mk-bdg--new{background:var(--c-pri-100);color:var(--c-pri-700)}
.mk-bdg--warn{background:var(--c-warn-100);color:var(--c-warn-700)}
.mk-bdg--ok{background:var(--c-ok-100);color:var(--c-ok-700)}
.mk-bdg--err{background:var(--c-err-100);color:var(--c-err-700)}
.mk-bdg--mute{background:var(--c-line-2);color:var(--c-ink-2)}
.mk-bdg--gold{background:var(--c-gold);color:var(--c-ink)}
.mk-bdg i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}

/* Form field → .sp-field / .sp-input */
.mk-f{margin-bottom:var(--s-3)}
.mk-f>label{display:block;font-size:var(--t-xs);font-weight:700;color:var(--c-ink-2);margin-bottom:var(--s-1)}
.mk-in{width:100%;min-height:var(--tap);border:1px solid var(--c-line);border-radius:var(--r-md);
  background:var(--c-surf);padding:0 var(--s-3);font-family:var(--f-body);font-size:var(--t-md);color:var(--c-ink);
  display:flex;align-items:center}
.mk-in--ta{min-height:92px;align-items:flex-start;padding:var(--s-2) var(--s-3);line-height:1.5;display:block}
.mk-in--ph{color:var(--c-ink-3)}
.mk-in--err{border-color:var(--c-err-700);border-width:2px;background:var(--c-white)}
.mk-in--ro{background:var(--c-line-2);color:var(--c-ink-2);border-style:dashed}
.mk-help{font-size:var(--t-xs);color:var(--c-ink-3);margin:var(--s-1) 0 0;line-height:1.5}
.mk-help--err{color:var(--c-err-700);font-weight:600;display:flex;gap:6px;align-items:flex-start}
.mk-cnt{font-size:var(--t-xs);color:var(--c-ink-3);text-align:right;margin:var(--s-1) 0 0}

/* Segmented → .sp-seg */
.mk-seg{display:flex;background:var(--c-line-2);border-radius:var(--r-md);padding:3px;gap:3px}
.mk-seg button{flex:1;min-height:40px;border:0;border-radius:var(--r-sm);background:transparent;
  font-family:var(--f-head);font-size:var(--t-sm);font-weight:700;color:var(--c-ink-2);cursor:pointer}
.mk-seg button[aria-selected="true"]{background:var(--c-surf);color:var(--c-pri-700);box-shadow:var(--sh-1)}

/* Toggle → .sp-switch */
.mk-sw{width:52px;height:30px;flex:0 0 52px;border-radius:var(--r-pill);background:var(--c-line);
  position:relative;border:0;cursor:pointer}
.mk-sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--c-white)}
.mk-sw[aria-checked="true"]{background:var(--c-ok-700)}
.mk-sw[aria-checked="true"]::after{left:25px}

/* Notice / alert → .sp-alert (info · warning · error · success) */
.mk-note{display:flex;gap:var(--s-2);border-radius:var(--r-md);padding:var(--s-3);font-size:var(--t-sm);line-height:1.5}
.mk-note--info{background:var(--c-pri-100);color:var(--c-pri-700)}
.mk-note--warn{background:var(--c-warn-100);color:var(--c-warn-700)}
.mk-note--err{background:var(--c-err-100);color:var(--c-err-700)}
.mk-note--ok{background:var(--c-ok-100);color:var(--c-ok-700)}
.mk-note strong{font-family:var(--f-head)}
.mk-note a{color:inherit;font-weight:700}

/* [БӨГЛӨХ] → .sp-todo */
.mk-todo{display:inline-flex;align-items:center;gap:6px;background:var(--c-warn-100);
  border:1px dashed var(--c-warn-700);color:var(--c-warn-700);
  font-size:var(--t-xs);font-weight:700;border-radius:var(--r-sm);padding:2px 8px}

/* Empty state → .sp-empty */
.mk-empty{text-align:center;padding:var(--s-6) var(--s-4)}
.mk-empty .ic{width:56px;height:56px;color:var(--c-line);margin:0 auto var(--s-3)}
.mk-empty h3{font-family:var(--f-head);font-size:var(--t-lg);margin:0 0 var(--s-2)}
.mk-empty p{font-size:var(--t-sm);color:var(--c-ink-2);margin:0 0 var(--s-4);line-height:1.55}

/* Skeleton → .sp-skel */
.mk-sk{background:linear-gradient(90deg,var(--c-skel-2) 0%,var(--c-skel-1) 50%,var(--c-skel-2) 100%);
  border-radius:var(--r-sm);height:14px}
.mk-sk--t{height:22px}.mk-sk--b{height:64px;border-radius:var(--r-md)}

/* Bottom sheet / modal → .sp-sheet · .sp-modal · overlay */
.mk-dim{position:absolute;inset:0;background:var(--c-dim)}
.mk-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--c-surf);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-3);padding:var(--s-4);max-height:72%}
.mk-sheet__grab{width:44px;height:4px;border-radius:2px;background:var(--c-line);margin:0 auto var(--s-3)}
.mk-sheet__t{font-family:var(--f-head);font-size:var(--t-lg);margin:0 0 var(--s-1)}
.mk-sheet__s{font-size:var(--t-sm);color:var(--c-ink-2);margin:0 0 var(--s-3);line-height:1.5}
.mk-modal{position:absolute;left:var(--s-4);right:var(--s-4);top:50%;transform:translateY(-50%);
  background:var(--c-surf);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:var(--s-5);text-align:center}
.mk-modal .ic--lg{margin:0 auto var(--s-3)}
.mk-modal h3{font-family:var(--f-head);font-size:var(--t-lg);margin:0 0 var(--s-2)}
.mk-modal p{font-size:var(--t-sm);color:var(--c-ink-2);margin:0 0 var(--s-4);line-height:1.55}

/* Radio / check option → .sp-check / .sp-radio мөр */
.mk-opt{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);padding:var(--s-2) var(--s-3);
  border:1px solid var(--c-line-2);border-radius:var(--r-md);background:var(--c-surf);margin-bottom:var(--s-2)}
.mk-opt--on{border-color:var(--c-pri-700);border-width:2px;background:var(--c-pri-50)}
.mk-opt__dot{width:22px;height:22px;flex:0 0 22px;border:2px solid var(--c-line);border-radius:50%}
.mk-opt--on .mk-opt__dot{border-color:var(--c-pri-700);border-width:7px}
.mk-opt__box{width:22px;height:22px;flex:0 0 22px;border:2px solid var(--c-line);border-radius:6px}
.mk-opt--on .mk-opt__box{background:var(--c-pri-700);border-color:var(--c-pri-700);color:var(--c-white);
  display:flex;align-items:center;justify-content:center}
.mk-opt__t{flex:1 1 auto;font-size:var(--t-sm);font-weight:600;display:block}
.mk-opt__s{display:block;font-size:var(--t-xs);color:var(--c-ink-3);font-weight:400;margin:2px 0 0;line-height:1.45}

/* PIN → .sp-pin · numpad (ЗӨВХӨН нэвтрэх урсгалд, components.md §26-ийн тэмдэглэл) */
.mk-pin{display:flex;gap:var(--s-3);justify-content:center;margin:var(--s-4) 0}
.mk-pin i{width:16px;height:16px;border-radius:50%;border:2px solid var(--c-line);display:block}
.mk-pin i.on{background:var(--c-pri-700);border-color:var(--c-pri-700)}
.mk-pin i.err{border-color:var(--c-err-700)}
.mk-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.mk-pad button{min-height:60px;border:1px solid var(--c-line-2);border-radius:var(--r-md);background:var(--c-surf);
  font-family:var(--f-head);font-size:var(--t-xl);font-weight:700;color:var(--c-ink);cursor:pointer}
.mk-pad button.q{background:transparent;border-color:transparent}

/* Код оруулах нүд → .sp-pin--6 (ил хувилбар) */
.mk-code{display:flex;gap:var(--s-2);justify-content:center}
.mk-code span{width:52px;height:60px;border:2px solid var(--c-line);border-radius:var(--r-md);background:var(--c-white);
  display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-size:var(--t-xl);font-weight:700}
.mk-code span.on{border-color:var(--c-pri-700)}

/* QR (CSS-ээр зурсан, зургийн файл БАЙХГҮЙ) → .sp-receipt-ийн QR блок */
.mk-qr{width:176px;height:176px;margin:0 auto;background-color:var(--c-white);position:relative;
  background-image:repeating-linear-gradient(90deg,var(--c-ink) 0 8px,transparent 8px 16px),
                   repeating-linear-gradient(0deg,var(--c-ink) 0 8px,transparent 8px 16px);
  background-size:16px 16px;border:8px solid var(--c-white);outline:1px solid var(--c-line-2)}

/* Статусын timeline → .sp-stepper (БОСОО variant, components.md §15) */
.mk-tl{list-style:none;margin:0;padding:0}
.mk-tl li{position:relative;padding:0 0 var(--s-2) 30px;min-height:40px}
.mk-tl li::before{content:"";position:absolute;left:5px;top:4px;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--c-line);background:var(--c-surf)}
.mk-tl li::after{content:"";position:absolute;left:10px;top:18px;bottom:0;width:2px;background:var(--c-line-2)}
.mk-tl li:last-child::after{display:none}
.mk-tl li[data-state="done"]::before{background:var(--c-ok-700);border-color:var(--c-ok-700)}
.mk-tl li[data-state="current"]::before{border-color:var(--c-pri-700);border-width:4px}
.mk-tl li[data-state="todo"]{opacity:.65}
.mk-tl b{display:block;font-size:var(--t-sm);font-family:var(--f-body)}
.mk-tl span{display:block;font-size:var(--t-xs);color:var(--c-ink-3);line-height:1.45}

/* Chart (тайлан) → .sp-chart */
.mk-chart{display:flex;align-items:flex-end;gap:6px;height:112px;padding-top:var(--s-2)}
.mk-chart div{flex:1;background:var(--c-pri-500);border-radius:4px 4px 0 0}
.mk-chart div.hl{background:var(--c-pri-700)}
.mk-xax{display:flex;gap:6px;margin-top:var(--s-1)}
.mk-xax span{flex:1;text-align:center;font-size:var(--t-ov);color:var(--c-ink-3)}

/* Lock / paywall → дизайн системд БАЙХГҮЙ (хүсэлт A2) */
.mk-lock{background:var(--c-pri-700);color:var(--c-white);
  border-radius:var(--r-md);padding:var(--s-4);text-align:center}
.mk-lock .ic--lg{margin:0 auto var(--s-2);color:var(--c-gold)}
.mk-lock h3{font-family:var(--f-head);font-size:var(--t-lg);margin:0 0 var(--s-2)}
.mk-lock p{font-size:var(--t-sm);margin:0 0 var(--s-4);color:var(--c-pri-200);line-height:1.55}
.mk-plan{border:1px solid var(--c-line-2);border-radius:var(--r-md);padding:var(--s-3);background:var(--c-surf)}
.mk-plan+.mk-plan{margin-top:var(--s-2)}
.mk-plan--cur{border-color:var(--c-ok-700);border-width:2px;background:var(--c-ok-100)}
.mk-plan--up{border-color:var(--c-pri-700);border-width:2px}
.mk-plan__h{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-1)}
.mk-plan__n{font-family:var(--f-head);font-size:var(--t-md);font-weight:700;margin:0;flex:1}
.mk-plan ul{margin:var(--s-2) 0 0;padding-left:18px;font-size:var(--t-xs);color:var(--c-ink-2);line-height:1.7}

/* Footer тэмдэглэл экран дотор (макетын тэмдэглэл, бүтээгдэхүүний UI БИШ) */
.mk-ftr{flex:0 0 auto;background:var(--c-pri-900);color:var(--c-pri-200);font-size:var(--t-ov);line-height:1.45;
  padding:6px var(--s-3)}
.mk-ftr b{color:var(--c-white)}

.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}

/* ---- SPA layout (бодит апп; прототипийн .ph хүрээ биш) ---- */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--f-body);font-size:var(--t-md);color:var(--c-ink);background:var(--c-stage);-webkit-font-smoothing:antialiased}
#app{max-width:480px;height:100%;margin:0 auto;background:var(--c-bg);display:flex;flex-direction:column;position:relative;overflow:hidden}
.view{flex:1 1 auto;overflow-y:auto;padding:var(--s-4)}
.view--center{display:flex;flex-direction:column;justify-content:center}
.mk-btn[disabled]{opacity:.6;cursor:default}
.mk-in input{border:0;outline:0;background:transparent;font:inherit;color:inherit;width:100%;min-height:calc(var(--tap) - 4px)}
a.mk-row{text-decoration:none;color:inherit}
.eid-code{font-family:var(--f-head);font-size:var(--t-2xl);font-weight:800;letter-spacing:.2em;text-align:center;color:var(--c-pri-700);margin:var(--s-3) 0}
#qr{display:flex;justify-content:center;margin:var(--s-3) 0}
#qr svg,#qr canvas,#qr img{width:200px;height:200px;background:#fff;padding:8px;border:1px solid var(--c-line-2);border-radius:var(--r-md)}
.qr-link{word-break:break-all;font-size:var(--t-xs);text-align:center}
.mk-bar--pri .mk-iconbtn{color:#fff}