/* CorelMed — sayt va ilova maketi.
   Qoida: bu yerda RANG, O'LCHAM yoki SHRIFT qiymati yozilmaydi — faqat tokens.css
   o'zgaruvchilari. Komponentlar fk.css da (dizayn tizimidan o'zgarishsiz).
   G'oya: «Tungi smena» — qorong'i xonadagi bitta stol chirog'i. */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-000); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 400 16px/24px var(--font-sans); background: var(--surface-000); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
a { color: var(--teal); }
h1, h2, h3, h4 { margin: 0; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
::selection { background: var(--lamp-soft); color: var(--lamp-ink); }

.wrap { width: 100%; max-width: var(--size-page); margin: 0 auto; padding: 0 40px; }
.grow { flex: 1; }
.hide { display: none !important; }
.mut { color: var(--ink-muted); }

/* Soʻz belgisi: CORELMED (sans) + kahrabo yulduzcha.
   Oʻlchami `font-size` dan kelib chiqadi — bitta qiymat bilan boshqariladi. */
.fk-logo--word { display: inline-flex; align-items: baseline; line-height: 1;
  white-space: nowrap; color: var(--ink); text-decoration: none; }
a .fk-logo--word, .fk-header__brand { text-decoration: none; }
.fk-logo__a { font-family: var(--font-sans); font-weight: 600; letter-spacing: .16em;
  font-size: .92em; }
.fk-logo__ast { display: inline-flex; align-self: flex-start; margin: 0 .02em 0 .04em; }

/* ───────────────────────── Sarlavha paneli ───────────────────────── */

.shell { position: sticky; top: 0; z-index: 30; background: var(--surface-000);
  border-bottom: 1px solid var(--line); }
.shell .wrap { padding: 0 40px; }
.shell .fk-header { border-bottom: 0; padding: 0; }
.shell .fk-header__link { white-space: nowrap; }
.hsearch { flex: none; width: 300px; }
.hsearch .fk-search { height: 40px; padding-left: var(--space-3); }
.hsearch .fk-search__input { font-size: 15px; }

/* telefon paneli */
.appbar { display: none; align-items: center; gap: var(--space-2); height: 56px; }
.appbar__title { flex: 1; min-width: 0; font: 600 16px/20px var(--font-sans); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* til tanlash */
.lang { position: relative; }
.langbtn { display: inline-flex; align-items: center; gap: var(--space-1); height: 40px;
  padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted);
  font: 500 12px/16px var(--font-mono); letter-spacing: .08em; cursor: pointer; }
.langbtn:hover { color: var(--ink); background: var(--surface-100); }
.langbtn .fk-icon { color: var(--ink-muted); }
/* Menyu butun panelga tegishli: desktop tugmasi ham, ilovadagi globus ham shuni ochadi. */
/* Menyu `.wrap` ichida — shuning uchun tugma bilan bir chiziqda turadi
   (ilgari `.shell` ga nisbatan turib, keng ekranda o'ngga qochib ketardi). */
.shell .wrap { position: relative; }
.shell .langmenu { right: 40px; left: auto; top: calc(100% + var(--space-2));
  max-width: calc(100vw - 2 * var(--space-4)); }
.langmenu { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 40;
  min-width: 232px; padding: var(--space-2); border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface-200);
  box-shadow: var(--shadow-float); display: none; }
.langmenu.on { display: block; }
.langmenu button { display: flex; width: 100%; align-items: center; gap: var(--space-3);
  min-height: var(--size-touch); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); font: 400 15px/20px var(--font-sans);
  text-align: left; cursor: pointer; }
.langmenu button:hover { background: var(--surface-100); }
.langmenu button[disabled] { color: var(--ink-faint); cursor: not-allowed; }
.langmenu .nm { flex: 1; min-width: 0; }
.langmenu .tail { display: inline-flex; align-items: center; margin-left: auto; }
.langmenu .cur { color: var(--teal); }

/* katalog varag'i */
.catbox { display: none; border-top: 1px solid var(--line); background: var(--surface-100); }
.catbox.on { display: block; }
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3); padding: var(--space-5) 0; }
.catgrid a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink);
  text-decoration: none; font: 400 15px/20px var(--font-sans); }
.catgrid a:hover { background: var(--surface-200); }

/* ───────────────────────── Bosh sahifa: qahramon bloki ───────────────────────── */

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: var(--space-8); align-items: center; padding: var(--space-9) 0 0; }
.hero__stamp { margin: 0 0 var(--space-4); font: 500 12px/16px var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--lamp-ink); }
.hero h1 { color: var(--ink); word-spacing: .06em; }
.hero__lead { margin: var(--space-4) 0 0; max-width: 46ch; color: var(--ink-muted); }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__art { position: relative; overflow: hidden; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-6); }

/* Brend rasmi: javonda turgan kitoblar, tepada chiroq doirasi, o'ngda yotgan kitob.
   Dizayn tizimidagi muqova rasmi — faqat haqiqiy muqovalar bilan. */
.shelf { position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: var(--space-2); padding: 0 0 var(--space-5); min-height: 320px; }
.shelf::after { content: ''; position: absolute; left: 0; right: 0; bottom: var(--space-5);
  height: 1px; background: var(--line-strong); }
.shelf .fk-cover { position: relative; z-index: 1; }
.shelf__disc { position: absolute; right: -48px; top: -48px; width: 176px; height: 176px;
  border-radius: 50%; background: var(--lamp); z-index: 0; }
/* Javonda yotgan kitob — muqovalar ustida turadi (z-index 2), shuning uchun
   ularning rangidan FARQ QILISHI shart. Brend qizil bo'lgach `var(--brand)`
   muqovalar bilan qo'shilib ketib, kitoblarni yutib yuborgandi. */
.shelf__lying { position: absolute; right: -40px; bottom: var(--space-5); width: 160px; height: 40px;
  border-radius: var(--radius-xs); background: var(--cover-6); z-index: 2; }

/* ───────────────────────── Bo'limlar ───────────────────────── */

.sec { padding: var(--space-8) 0 0; }
.sechead { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-5); }
.sechead h2 { color: var(--ink); word-spacing: .06em; }
.sechead a { font: 600 14px/20px var(--font-sans); color: var(--teal); text-decoration: none; }

.shelfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: var(--space-6) var(--space-5); }
.shelfgrid .fk-book { width: 100% !important; }
.shelfgrid .fk-cover { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3; }

.fk-plan__price small { display: block; margin-top: var(--space-1); }
.fk-plan { justify-content: space-between; }
.fk-plan__list { flex: 1; }
.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--space-5); }

.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5); }
.feat { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-100); }
.feat .fk-icon { color: var(--teal); margin-bottom: var(--space-4); }
.feat b { display: block; margin-bottom: var(--space-2); font: 600 19px/24px var(--font-serif);
  font-variation-settings: 'opsz' 20; color: var(--ink); }
.feat span { color: var(--ink-muted); font-size: 15px; line-height: 22px; }

/* ───────────────────────── Kitob sahifasi ───────────────────────── */

.crumbs { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5) 0 0;
  font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); flex-wrap: wrap; }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.book { display: grid; grid-template-columns: var(--size-cover-lg) minmax(0, 1fr) 320px;
  gap: var(--space-6) var(--space-8); align-items: start; padding: var(--space-6) 0 var(--space-8); }
.book > * { min-width: 0; }
.book__title { color: var(--ink); word-spacing: .06em; }
.book__author { margin-top: var(--space-2); color: var(--ink-muted); }
.book__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.panel { margin-top: var(--space-6); padding: var(--space-6); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface-100); }
.panel > h3 { margin-bottom: var(--space-4); font: 600 19px/24px var(--font-serif);
  font-variation-settings: 'opsz' 20; color: var(--ink); }
.desc { color: var(--ink); font-size: 16px; line-height: 26px; }
.desc.clip { max-height: 140px; overflow: hidden; }
.more { margin-top: var(--space-3); padding: 0; border: 0; background: transparent;
  color: var(--teal); font: 600 14px/20px var(--font-sans); cursor: pointer; }

.spec { width: 100%; border-collapse: collapse; }
.spec td { padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 22px; vertical-align: top; }
.spec tr:last-child td { border-bottom: 0; }
.spec td:first-child { width: 42%; color: var(--ink-muted); padding-right: var(--space-4); }
.spec td:last-child { color: var(--ink); }

.row { display: flex; flex-wrap: wrap; gap: var(--space-5); }

.buy { position: sticky; top: 96px; }
.buy .fk-plan { gap: var(--space-4); }
.planpick { display: flex; flex-direction: column; gap: var(--space-2); }
.planpick button { display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); font: 400 15px/20px var(--font-sans);
  text-align: left; cursor: pointer; }
.planpick button .nm { grid-area: 1 / 1; font-weight: 500; }
.planpick button .fk-badge { grid-area: 2 / 1; justify-self: start; }
.planpick button .p { grid-area: 1 / 2; text-align: right;
  font: 500 15px/20px var(--font-mono); color: var(--ink); }
.planpick button .sub { grid-area: 2 / 2; text-align: right;
  font: 400 11px/15px var(--font-sans); color: var(--ink-muted); }
.planpick button.on .sub { color: var(--teal); }
.planpick button.on { border-color: transparent; background: var(--teal-soft); color: var(--teal); }
.planpick button.on .p { color: var(--teal); }
.hint { margin-top: var(--space-4); color: var(--ink-muted); font-size: 13px; line-height: 19px; }

/* sharhlar */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars .fk-star path { fill: var(--lamp); }
.stars .off path { fill: var(--ink-faint); }
.rev { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.rev:last-child { border-bottom: 0; }
.rev b { color: var(--ink); font: 600 15px/20px var(--font-sans); }
.rev .when { margin-left: var(--space-2); font: 500 11px/16px var(--font-mono);
  letter-spacing: .06em; color: var(--ink-muted); }
.rev p { margin: var(--space-2) 0 0; color: var(--ink); font-size: 15px; line-height: 23px; }
.pickstars { display: inline-flex; gap: var(--space-1); }
.pickstars button { width: var(--size-touch); height: var(--size-touch); display: grid;
  place-items: center; border: 0; background: transparent; cursor: pointer; }
.pickstars .fk-star path { fill: var(--ink-faint); }
.pickstars button.on .fk-star path { fill: var(--lamp); }
textarea { width: 100%; min-height: 92px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-200); color: var(--ink); font: 400 15px/23px var(--font-sans);
  resize: vertical; }
textarea:focus { outline: none; border-color: transparent; box-shadow: var(--focus-ring); }

/* ───────────────────────── Profil ───────────────────────── */

.pcard { margin-bottom: var(--space-5); padding: var(--space-6); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface-100); }
.pcard > h3 { margin-bottom: var(--space-2); font: 600 19px/24px var(--font-serif);
  font-variation-settings: 'opsz' 20; color: var(--ink); }
.pcard .sub { margin-bottom: var(--space-4); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.kv { display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--ink-muted); }
.kv b { color: var(--ink); font-weight: 600; text-align: right; }
.kv .mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: .04em; }
.subst { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-4); }
.subst .big { font: 500 40px/44px var(--font-mono); letter-spacing: -.02em; color: var(--lamp-ink); }
.subst .lab { font: 500 11px/16px var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); }

.plist { display: flex; flex-direction: column; }
.plist > a, .plist > button { display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--size-touch); padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font: 400 15px/20px var(--font-sans);
  text-align: left; text-decoration: none; cursor: pointer; width: 100%; }
.plist > a:last-child, .plist > button:last-child { border-bottom: 0; }
.plist .fk-icon { color: var(--ink-muted); flex: none; }
.plist .ch { margin-left: auto; color: var(--ink-faint); }
.plist .danger { color: var(--danger); }
.plist .danger .fk-icon { color: var(--danger); }
.devrow { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.devrow:last-child { border-bottom: 0; }
.devrow b { color: var(--ink); font: 600 15px/20px var(--font-sans); }
.devrow .ua { color: var(--ink-muted); font: 500 11px/16px var(--font-mono); letter-spacing: .04em; }

/* ───────────────────────── Pastki varaq (modal) ───────────────────────── */

.mask { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
  justify-content: center; padding: var(--space-5); background: #00000099; }
.mask.on { display: flex; }
.modal { width: 100%; max-width: 420px; max-height: 92vh; overflow: auto; padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-200);
  box-shadow: var(--shadow-float); }
.modal > h3 { margin-bottom: var(--space-2); font: 600 24px/30px var(--font-serif);
  font-variation-settings: 'opsz' 24; color: var(--ink); }
.modal .sub { margin-bottom: var(--space-5); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.modal .fk-field, .modal .fk-code { margin-bottom: var(--space-4); }
.modal .fk-code { display: flex; }
.modal .acts { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.tabs { display: flex; gap: 2px; margin-bottom: var(--space-5); padding: 3px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-100); }
.tabs button { flex: 1; height: 36px; border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-muted); font: 600 13px/16px var(--font-sans); cursor: pointer; }
.tabs button.on { background: var(--teal-soft); color: var(--teal); }
.msg { display: inline-flex; align-items: center; gap: 6px; min-height: 18px;
  font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.msg.e { color: var(--danger); }
.msg.s { color: var(--success); }

/* ───────────────────────── Pastki menyu (ilova) ───────────────────────── */

.fk-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  padding-bottom: env(safe-area-inset-bottom); }
.fk-tabbar__tab { text-decoration: none; }
@media (max-width: 900px) {
  body.hastabs .fk-tabbar { display: flex; }
  body.hastabs { padding-bottom: calc(var(--size-tabbar) + env(safe-area-inset-bottom)); }
}
body.app.hastabs .fk-tabbar { display: flex; }
body.app.hastabs { padding-bottom: calc(var(--size-tabbar) + env(safe-area-inset-bottom)); }

/* ───────────────────────── Pastki qism ───────────────────────── */

footer.site { margin-top: var(--space-8); border-top: 1px solid var(--line);
  background: var(--surface-100); padding: var(--space-7) 0 var(--space-6); }
.fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-6); }
.fgrid h4 { margin-bottom: var(--space-3); font: 500 12px/16px var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.fgrid a { display: block; padding: 6px 0; color: var(--ink); font-size: 14px;
  line-height: 20px; text-decoration: none; }
.fgrid a:hover { color: var(--teal); }
.fgrid p { margin: var(--space-4) 0 0; max-width: 34ch; color: var(--ink-muted);
  font-size: 14px; line-height: 21px; }
.fbot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line);
  font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); }

/* ───────────────────────── Moslashuv ───────────────────────── */

@media (max-width: 1080px) {
  .hsearch { display: none; }
  .book { grid-template-columns: var(--size-cover-md) minmax(0, 1fr); }
  .buy { grid-column: 1 / -1; position: static; }
}
@media (max-width: 900px) {
  .shell .fk-header { display: none; }
  .appbar { display: flex; }
  .hero { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6) 0 var(--space-7); }
  .hero h1 { font-size: 36px; line-height: 42px; letter-spacing: -.015em; }
  .hero__art { order: -1; }
  .shelf { min-height: 260px; }
  .shelf__lying { display: none; }
  .fgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .wrap, .shell .wrap { padding: 0 var(--space-4); }
  .sec { padding-top: var(--space-7); }
  .hero { padding: var(--space-5) 0 var(--space-6); }
  .hero h1 { font-size: 30px; line-height: 36px; }
  .shelfgrid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-5) var(--space-4); }
  .book { grid-template-columns: 1fr; gap: var(--space-5); }
  .book__cov { display: flex; justify-content: center; }
  .panel, .pcard, .feat { padding: var(--space-4); }
  .mask { padding: 0; align-items: flex-end; }
  .modal { max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0; padding: var(--space-5) var(--space-4) var(--space-6); }
  .fgrid { grid-template-columns: 1fr; gap: var(--space-5); }
  .fbot { flex-direction: column; gap: var(--space-2); }
  .shelf__disc { width: 132px; height: 132px; }
}

/* Ilova rejimi (APK / PWA): sayt sarlavhasi yo'q, faqat panel va tab-bar */
body.app .shell { border-bottom: 1px solid var(--line); }
body.app .shell .fk-header { display: none; }
body.app .appbar { display: flex; }
body.app .wrap { padding: 0 var(--space-4); }
body.app footer.site { display: none; }
body.app .sec { padding-top: var(--space-7); }

@media print { body { display: none !important; } }

/* 12 xonali obuna kodi — katakchalar joyga moslashadi (balandlik size-touch). */
.fk-code--code { width: 100%; }
.fk-code--code .fk-code__cells { gap: var(--space-1); }
.fk-code--code .fk-code__cell { flex: 1; width: auto; min-width: 0;
  height: var(--size-touch); font-size: 15px; }

/* ─────────── Ichki sahifalar (admin, oferta) ─────────── */
header.plain { border-bottom: 1px solid var(--line); background: var(--surface-000);
  position: sticky; top: 0; z-index: 30; }
header.plain .fk-header { max-width: var(--size-page); margin: 0 auto; padding: 0 40px;
  border-bottom: 0; }
header.plain .fk-header__brand { margin-right: auto; }
.doc { max-width: 820px; margin: 0 auto; padding: 0 40px var(--space-8); }
.doc h1 { margin: var(--space-7) 0 var(--space-2); font: 600 36px/42px var(--font-serif);
  font-variation-settings: 'opsz' 30; letter-spacing: -.015em; word-spacing: .06em; color: var(--ink); }
.doc h3 { margin: var(--space-6) 0 var(--space-2); font: 600 19px/24px var(--font-serif);
  font-variation-settings: 'opsz' 20; color: var(--ink); }
.doc p, .doc li { color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.doc ul { padding-left: var(--space-5); }
label { display: block; margin-bottom: var(--space-2); font: 600 14px/20px var(--font-sans);
  color: var(--ink); }
input:not([type=range]):not(.fk-search__input):not(.fk-field__input):not(.fk-code__input) {
  width: 100%; height: 52px; padding: 0 var(--space-4); margin-bottom: var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-200); color: var(--ink); font: 400 16px/24px var(--font-sans); }
input:focus { outline: none; border-color: transparent; box-shadow: var(--focus-ring); }
select { height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface-200); color: var(--ink);
  font: 400 15px/20px var(--font-sans); }
code { padding: 3px 7px; border-radius: 6px; background: var(--surface-200);
  font: 500 13px/18px var(--font-mono); letter-spacing: .06em; color: var(--lamp-ink); }
@media (max-width: 720px) { .doc, header.plain .fk-header { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* Obuna kodini so'rash — Telegram / Instagram */
.codehelp { display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--line); }
.codehelp > span { color: var(--ink-muted); font-size: 13px; line-height: 19px; }
.codehelp__links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.codehelp__links .fk-btn { flex: 1; min-width: 120px; }

/* ─────────── Harakat ───────────
   Dizayn tizimi: sokin bo'lsin — rang 160 ms da, bosilganda ozgina kichrayadi.
   Sakrash, aylanish va parallaks YO'Q. */
.fk-btn { transition: background-color .16s ease, border-color .16s ease,
  color .16s ease, transform .12s ease; }
.fk-btn:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(.975); }
.fk-header__link, .catgrid a, .plist > a, .plist > button,
.langmenu button, .planpick button, .more, .tabs button, .fgrid a {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.planpick button:active, .catgrid a:active { transform: scale(.995); }
.fk-tabbar__tab .fk-icon { transition: transform .12s ease; }
.fk-tabbar__tab:active .fk-icon { transform: scale(.88); }
.langbtn { transition: background-color .16s ease, color .16s ease; }

@keyframes fk-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.langmenu.on { animation: fk-pop .16s ease-out; }
.catbox.on { animation: fk-fade .16s ease-out; }
.mask.on { animation: fk-fade .18s ease-out; }
.mask.on .modal { animation: fk-rise .24s cubic-bezier(.2, .8, .2, 1); }

/* Tizim «harakatni kamaytir» desa — hammasi darhol */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ─────────── Davlat kodi tanlagich ─────────── */
.ccbtn { display: inline-flex; align-items: center; gap: 6px; height: 36px;
  margin-left: calc(var(--space-4) * -1 + 6px); padding: 0 var(--space-2) 0 var(--space-3);
  border: 0; border-right: 1px solid var(--line); border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color .16s ease; }
.ccbtn:hover { background: var(--surface-100); }
.ccbtn .iso { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--ink-muted); }
.ccbtn .dial { font: 500 16px/1 var(--font-mono); color: var(--ink); }
.ccbtn .fk-icon { color: var(--ink-faint); transform: rotate(90deg); }

.ccmenu { position: absolute; z-index: 60; margin-top: 6px; width: min(340px, calc(100vw - 48px));
  max-height: 46vh; overflow: auto; padding: var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-200); box-shadow: var(--shadow-float); display: none; }
.ccmenu.on { display: block; animation: fk-pop .16s ease-out; }
.ccmenu button { display: flex; width: 100%; align-items: center; gap: var(--space-3);
  min-height: var(--size-touch); padding: 0 var(--space-3); border: 0;
  border-radius: var(--radius-sm); background: transparent; color: var(--ink);
  font: 400 15px/20px var(--font-sans); text-align: left; cursor: pointer;
  transition: background-color .16s ease; }
.ccmenu button:hover { background: var(--surface-100); }
.ccmenu button.cur { color: var(--teal); }
.ccmenu .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccmenu .dial { font: 500 13px/1 var(--font-mono); color: var(--ink-muted); }
.modal .fk-field { position: relative; }