/* ============================================================
   Flamona — design system  «SIYOH»  (siyoh va qog'oz)

   Brend qat'iy oq-qora. Rang yo'q — shuning uchun uning ishini
   TIPOGRAFIKA va KONTRAST bajaradi:
     · Fraunces (display) katta o'lchamda xarakter beradi
     · "belgilangan" holat rang bilan emas, INVERSIYA bilan
       ko'rsatiladi (.fl-mark — oq ustida qora blok)
     · harakat — monoxromda tiriklikni bergan yagona narsa

   Yagona istisno: --success / --danger. Ular brend emas, funksiya:
   noto'g'ri javob noto'g'ri ko'rinishi shart. Ular ataylab bo'g'iq.
   Butunlay rangsiz xohlasangiz, ikkalasini ham var(--ink) qiling.

   Eski tizimlar: _archive/design-2026-08-30/ va _archive/design-2026-08-31-siyoh-oldin/
   31-avgust 2026
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..700&family=Montserrat:ital,wght@0,300..800;1,400..700&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --bg:          #FFFFFF;
  --bg2:         #F6F6F7;
  --bg3:         #EAEAEC;
  --surface:     #FFFFFF;
  --border:      #E2E2E5;
  --border-dark: #C6C6CA;
  --ink:         #111113;   /* Siyoh */
  --ink-mid:     #3E3E43;
  --ink-muted:   #55555C;
  --ink-faint:   #ADADB4;
  --primary:     #111113;   /* siyoh — brendning o'zi */
  --primary-600: #000000;
  --primary-soft:#EFEFF1;
  --on-primary:  #FFFFFF;
  --accent-inv:  #FFFFFF;
  --gold:        #0B0B0C;
  --success:     #2E7D57;   /* yagona signal rang — brend emas */
  --danger:      #A33B4A;
  --shadow:      0 1px 2px rgba(11,11,12,.05), 0 8px 24px rgba(11,11,12,.07);
  --shadow-md:   0 2px 4px rgba(11,11,12,.07), 0 18px 44px rgba(11,11,12,.13);
  --shadow-lg:   0 4px 8px rgba(11,11,12,.08), 0 30px 70px rgba(11,11,12,.18);
  --ring:        0 0 0 3px rgba(11,11,12,.16);
  --grid:        rgba(11,11,12,.05);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --mono:  'DM Mono', SFMono-Regular, Menlo, monospace;
  --r-sm: 3px; --r-md: 5px; --r-lg: 8px; --r-xl: 10px;
  --e: cubic-bezier(.16,1,.3,1);
}
html.dark, body.dark {
  --bg:          #0B0B0C;
  --bg2:         #141416;
  --bg3:         #1E1E21;
  --surface:     #121214;
  --border:      #2A2A2E;
  --border-dark: #3C3C41;
  --ink:         #FAFAFB;
  --ink-mid:     #C4C4CA;
  --ink-muted:   #8B8B93;
  --ink-faint:   #5D5D64;
  --primary:     #FAFAFB;
  --primary-600: #FFFFFF;
  --primary-soft:#1E1E21;
  --on-primary:  #0B0B0C;
  --accent-inv:  #0B0B0C;
  --gold:        #FAFAFB;
  --success:     #63B98C;
  --danger:      #DE8290;
  --grid:        rgba(250,250,251,.05);
  --ring:        0 0 0 3px rgba(250,250,251,.2);
  --shadow:      0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4);
  --shadow-md:   0 2px 4px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.5);
  --shadow-lg:   0 4px 8px rgba(0,0,0,.6), 0 30px 70px rgba(0,0,0,.55);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .25s, color .25s;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; }  /* buttons don't inherit color by default → fixes invisible text in dark mode */
::selection { background: var(--ink); color: var(--accent-inv); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 6px; }
.scroll-x { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { display: none; }

/* ---------- layout ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.wrap-tight { max-width: 760px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap, .wrap-tight { padding: 0 18px; } }

/* ---------- top navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--border);
}
/* the icon group is a grouping device for the side column only — in the top
   bar it disappears and its children lay out as direct siblings, as before */
.nav-icons { display: contents; }

/* ============================================================================
   SIDE NAVIGATION
   The same bar, stood on its end. Nothing about the markup changes — nav.js
   emits one structure and this decides whether it runs across the top or down
   the left, so every page gets the choice for free.

   Below 880px the column would eat half a phone, so it folds back into the top
   bar and the existing mobile behaviour takes over unchanged.
   ========================================================================== */
:root { --side-w: 250px; }

/* a heading for the side column only; the top bar never shows one */
.nav-sec { display: none; }

@media (min-width: 881px) {
  body.nav-side .nav {
    top: 0; bottom: 0; right: auto; width: var(--side-w);
    border-bottom: none; border-right: 1px solid var(--border);
  }
  /* the glide is enabled only after first paint (html.vw-anim), so pages
     never slide left-to-right while loading */
  html.vw-anim body.nav-side .nav { transition: transform .32s cubic-bezier(.4,0,.2,1), width .5s var(--e); }
  html.vw-anim body.nav-side.vw-has-nav { transition: padding-left .5s var(--e); }
  /* overflow:auto here was clipping the panels: a settings or notification menu
     is positioned to the RIGHT of the column, which is outside this box, so the
     browser cut it off — it looked as though the panel had opened behind the
     page. The column itself no longer scrolls; the links do. */
  body.nav-side .nav-inner {
    flex-direction: column; align-items: stretch; height: 100%;
    max-width: none; gap: 0; padding: 18px 12px 16px; overflow: visible;
  }
  body.nav-side .nav-links {
    overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto;
    scrollbar-width: thin;
  }
  body.nav-side .brand { padding: 2px 10px 0; }

  /* ---- the links ----
     Across a bar, small uppercase reads as a label. Down a column it reads as
     shouting, and eight of them in a row have no shape at all. Here they are
     ordinary sentence-case rows.

     Two things this column used to get wrong. Every row was a different size
     and a different grey depending on whether it lived inside a group or not,
     so the eye could not tell what was a link and what was a heading. And the
     links that belonged to no group sat between the headings with nothing
     above them. Now: ONE row style — 14.5px, one weight, one colour, and the
     row you are on is filled solid — and every link sits under a heading.
     The measurements are the sidebar's own (side.css), so Articles, My class
     and this column are the same column. */
  body.nav-side .nav-links {
    flex-direction: column; align-items: stretch; gap: 2px; margin: 14px 0 0;
  }

  /* section labels (Browse / You) stay quiet little captions */
  body.nav-side .nav-sec {
    display: block; pointer-events: none; cursor: default; background: none !important;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--ink-faint); padding: 14px 12px 6px; font-weight: 500; text-align: left;
    border: none; width: 100%;
  }
  body.nav-side .nav-links > .nav-sec:first-child { padding-top: 4px; }
  /* group buttons (Learn / Practice / My Life) are FULL rows now — the same
     size and shape as every other link, with an icon and a folding caret */
  body.nav-side .nav-drop-btn {
    pointer-events: auto; cursor: pointer; background: none; border: none; width: 100%;
    display: flex; align-items: center; gap: 11px;
    font-family: var(--sans); font-size: 14.5px; font-weight: 500;
    letter-spacing: 0; text-transform: none;
    color: var(--ink-mid); padding: 11px 12px; border-radius: 11px; text-align: left;
    transition: background .18s var(--e), color .18s var(--e);
  }
  body.nav-side .nav-drop-btn:hover { background: var(--bg2); color: var(--ink); }
  body.nav-side .nav-drop-btn.active { color: var(--ink); font-weight: 600; }
  body.nav-side .nav-drop-btn .nv-ic { display: inline-flex; }
  body.nav-side .nav-drop-btn .caret {
    display: inline-block; margin-left: auto; font-size: 9px; line-height: 1; opacity: .55;
    transition: transform .28s var(--e);
  }
  body.nav-side .nav-drop.grp-open > .nav-drop-btn .caret,
  body.nav-side .nav-drop.grp-peek > .nav-drop-btn .caret { transform: rotate(-180deg); }


  /* one row, one size, one colour */
  body.nav-side .nav-link:not(.nav-drop-btn),
  body.nav-side .drop-menu a {
    font-family: var(--sans); font-size: 14.5px; font-weight: 500; letter-spacing: 0;
    text-transform: none; color: var(--ink-mid);
    padding: 11px 12px; border-radius: 11px; text-align: left;
    transition: background .14s, color .14s;
  }
  body.nav-side .nav-link::after { display: none; }
  body.nav-side .nav-link:not(.nav-drop-btn):hover,
  body.nav-side .drop-menu a:hover { background: var(--bg2); color: var(--ink); }
  body.nav-side .nav-link:not(.nav-drop-btn).active,
  body.nav-side .drop-menu a.active {
    background: var(--ink); color: var(--accent-inv); font-weight: 600;
  }
  /* children sit a step deeper, so the tree reads at a glance */
  body.nav-side .drop-menu a { padding-left: 44px; }

  body.nav-side .nav-drop { position: static; }
  body.nav-side .drop-menu {
    position: static; box-shadow: none; border: none; background: none;
    min-width: 0; padding: 0; border-radius: 0;
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px);
    pointer-events: none;
    transition: max-height .24s var(--e), opacity .18s var(--e), transform .24s var(--e);
  }
  body.nav-side .nav-drop.grp-open > .drop-menu,
  body.nav-side .nav-drop.grp-peek > .drop-menu {
    max-height: 340px; opacity: 1; transform: none; pointer-events: auto;
  }

  /* ---- the bottom ---- */
  body.nav-side .nav-right {
    margin-left: 0; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  }
  body.nav-side .nav-icons {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px;
  }
  body.nav-side .nav-icons > * { flex: none; }
  body.nav-side .user-btn {
    width: 100%; justify-content: flex-start; gap: 10px; min-width: 0;
    padding: 8px 10px; border-radius: 100px;
  }
  body.nav-side .user-btn .un {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
  }
  body.nav-side .user-btn .avatar { order: -1; flex: none; }
  body.nav-side .nav-toggle { display: none !important; }
  /* fixed, not absolute: the column is a stacking context of its own (it has a
     backdrop-filter), so an absolutely-placed child could never rise above it.
     Pinned to the viewport instead, with a z-index above the bar. */
  body.nav-side .menu:not(.drop-menu) {
    position: fixed; top: auto; bottom: 16px; right: auto;
    left: calc(var(--side-w) + 10px); z-index: 200;
    max-height: calc(100vh - 32px); overflow-y: auto;
  }
  body.nav-side .notif-menu { left: calc(var(--side-w) + 10px); right: auto; }
  body.nav-side.side-closed .menu:not(.drop-menu),
  body.nav-side.side-closed .notif-menu { left: 10px; }

  /* ---- closing it ----
     A column you cannot put away is a column you resent. The close button lives
     next to the logo; when it is shut the page takes the full width back and a
     small tab on the edge brings it out again. */
  body.nav-side .side-close { display: grid; position: absolute; top: 16px; right: 10px; z-index: 2; }
  body.nav-side .nav-inner { position: relative; }
  body.nav-side .side-close svg { transition: transform .3s var(--e); }
  body.nav-side.side-closed .nav { transform: translateX(-100%); }
  body.nav-side.side-closed.vw-has-nav { padding-left: 0; }
  body.nav-side.side-closed .side-open { display: grid; }
  body.nav-side.side-closed .vw-upbar { left: 50%; }

  body.nav-side.vw-has-nav { padding-top: 0; padding-left: var(--side-w); }
  /* the pill is centred with translateX(-50%); shifting `left` by the whole
     column pushed half of it off the screen and gave the page a sideways
     scrollbar. Centre it in what is left instead. */
  body.nav-side .vw-upbar { left: calc(50% + var(--side-w) / 2); }
  body.nav-side .flamona-fab { right: 22px; }
}

/* ============================================================
   SIYOH — mini rail: yopilganda faqat ikonkalar qoladi
   ============================================================ */
html.side-mini { --side-w: 68px; }   /* early boot: padding & width settle before paint */
@media (min-width: 881px) {
  body.nav-side.side-mini { --side-w: 64px; }
  body.nav-side.side-mini .brand { padding: 0; display: flex; justify-content: center; }
  body.nav-side.side-mini .brand .mark { display: none; }
  body.nav-side.side-mini .side-close { position: static; margin: 6px auto 0; }
  body.nav-side.side-mini .side-close svg { transform: rotate(180deg); }
  body.nav-side.side-mini .nav-inner { padding: 14px 0 12px; align-items: center; }
  /* the icon column hides its scrollbar and centers its children;
     ONE gap between every icon — nothing else adds space */
  body.nav-side.side-mini .nav-links { align-items: center; scrollbar-width: none; width: 100%; gap: 6px; }
  body.nav-side.side-mini .nav-links::-webkit-scrollbar { display: none; }
  body.nav-side.side-mini .nav-sec { display: none; }
  /* GROUP buttons stay: one icon each. Hover (or click) opens a flyout beside the rail */
  body.nav-side.side-mini .nav-drop-btn {
    justify-content: center; gap: 0; font-size: 0; letter-spacing: 0;
    width: 46px; height: 44px; padding: 0; margin: 0; flex: none; align-self: center;
  }
  body.nav-side.side-mini .nav-drop-btn .caret { display: none; }
  body.nav-side.side-mini .nav-drop-btn.active { background: var(--bg2); }
  body.nav-side.side-mini .nav-links { margin-top: 6px; }
  body.nav-side.side-mini .nav-link:not(.nav-drop-btn) {
    justify-content: center; gap: 0; font-size: 0; letter-spacing: 0;
    width: 46px; height: 44px; padding: 0; margin: 0; flex: none; align-self: center;
  }
  body.nav-side.side-mini .nav-link:not(.nav-drop-btn):hover { transform: none; }
  body.nav-side.side-mini .nv-ic { margin: 0; }
  /* the flyout: a floating card to the right of the rail, only while hovered */
  body.nav-side.side-mini .nav-drop > .drop-menu {
    position: fixed; left: calc(var(--side-w) + 8px); top: 0;
    max-height: none; overflow: visible;
    opacity: 0; pointer-events: none; transform: translateX(-6px);
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow-md); padding: 8px; min-width: 200px; z-index: 300;
    transition: opacity .16s var(--e), transform .2s var(--e);
  }
  body.nav-side.side-mini .nav-drop.grp-peek > .drop-menu {
    opacity: 1; pointer-events: auto; transform: none;
  }
  /* invisible bridge over the gap, so the pointer can travel into the flyout */
  body.nav-side.side-mini .nav-drop > .drop-menu::before {
    content: ''; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px;
  }
  /* inside the flyout the links are full rows again — icon + name */
  body.nav-side.side-mini .drop-menu a {
    width: auto; height: auto; justify-content: flex-start; gap: 11px;
    font-size: 14px; padding: 10px 12px; margin: 0;
  }
  body.nav-side.side-mini .nav-right { padding-top: 10px; gap: 8px; align-items: center; width: 100%; }
  body.nav-side.side-mini .nav-icons { flex-direction: column; gap: 6px; justify-content: center; padding: 0; }
  body.nav-side.side-mini .user-btn { justify-content: center; padding: 6px; width: 46px; margin: 0 auto; }
  body.nav-side.side-mini .user-btn .un { display: none; }
  body.nav-side.side-mini .menu:not(.drop-menu),
  body.nav-side.side-mini .notif-menu { left: calc(var(--side-w) + 10px); }
}

/* the two little controls that open and shut the column */
.side-close {
  display: none; place-items: center; margin-left: auto; flex: none;
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border);
  background: none; color: var(--ink-muted); cursor: pointer; transition: all .15s;
}
.side-close:hover { border-color: var(--border-dark); color: var(--ink); background: var(--bg2); }
.side-open {
  display: none; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 81;
  place-items: center; width: 26px; height: 62px; border: 1px solid var(--border); border-left: none;
  border-radius: 0 12px 12px 0; background: var(--surface); color: var(--ink-muted);
  cursor: pointer; box-shadow: var(--shadow); transition: all .15s;
}
.side-open:hover { color: var(--ink); width: 30px; }

/* pages that mount the top nav reserve its height so content isn't hidden under the fixed bar */
body.vw-has-nav { padding-top: 64px; }
body.vw-has-nav.nav-collapsed { padding-top: 0; }

/* floating upgrade pill (free members) — compact, centered */
.vw-upbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  padding: 7px 7px 7px 18px; background: var(--ink); color: var(--accent-inv);
  border-radius: 100px; box-shadow: 0 12px 32px rgba(0,0,0,.30);
  animation: vwUpbarIn .4s cubic-bezier(.2,.7,.2,1); }
@keyframes vwUpbarIn { from { opacity: 0; transform: translate(-50%, 140%); } to { opacity: 1; transform: translateX(-50%); } }
.vw-upbar .ub-msg { font-family: var(--sans); font-size: 13px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-upbar .ub-btn { flex: none; font-family: var(--sans); font-weight: 600; font-size: 12.5px; background: var(--accent-inv); color: var(--ink); border-radius: 100px; padding: 8px 16px; white-space: nowrap; transition: transform .15s; }
.vw-upbar .ub-btn:hover { transform: translateY(-1px); }
@media (max-width: 460px) { .vw-upbar { padding-left: 14px; gap: 8px; } .vw-upbar .ub-msg { font-size: 12px; } }

/* username onboarding modal */
.vw-uname-wrap { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg) 45%, #000); backdrop-filter: blur(5px); animation: vwUFade .25s; }
@keyframes vwUFade { from { opacity: 0; } to { opacity: 1; } }
.vw-uname { width: min(440px, 100%); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-lg); }
.vw-uname h2 { font-family: var(--serif); font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.vw-uname > p { font-size: 14px; color: var(--ink-muted); margin: 6px 0 18px; line-height: 1.55; }
.vw-uname-field { display: flex; align-items: center; border: 1.5px solid var(--border-dark); border-radius: 12px; padding: 0 14px; transition: border-color .15s; }
.vw-uname-field:focus-within { border-color: var(--ink); }
.vw-uname-field .at { color: var(--ink-muted); font-size: 16px; }
.vw-uname-field input { flex: 1; border: none; background: none; outline: none; padding: 13px 8px; font-family: var(--sans); font-size: 15.5px; color: var(--ink); }
.vw-uname-msg { font-family: var(--mono); font-size: 11.5px; min-height: 16px; margin: 7px 2px 0; color: var(--ink-muted); }
.vw-uname-msg.ok { color: var(--success); } .vw-uname-msg.no { color: var(--danger); }
.vw-uname-vis { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 20px; }
.vw-vis { text-align: left; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-mid); background: var(--bg2); border: 1.5px solid var(--border); border-radius: 12px; padding: 11px 14px; cursor: pointer; transition: all .15s; }
.vw-vis.on { border-color: var(--ink); background: var(--bg3); color: var(--ink); }
.vw-uname-actions { display: flex; gap: 10px; align-items: center; }
.vw-uname-skip { flex: none; font-family: var(--sans); font-weight: 600; font-size: 14px; background: none; border: none; color: var(--ink-muted); padding: 12px 16px; cursor: pointer; }
.vw-uname-save { flex: 1; font-family: var(--sans); font-weight: 600; font-size: 14px; background: var(--ink); color: var(--accent-inv); border: none; border-radius: 100px; padding: 12px; cursor: pointer; transition: transform .15s; }
.vw-uname-save:hover { transform: translateY(-1px); }
.vw-uname-save:disabled { opacity: .6; }

/* onboarding popups: approved-promo reveal + Telegram subscribe */
.vw-modal-back { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 20px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 40%, #000); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: vwUFade .2s; }
.vw-modal { width: min(420px, 100%); background: var(--bg); border: 1px solid var(--border); border-radius: 22px; padding: 30px 26px 24px; box-shadow: var(--shadow-lg); text-align: center; animation: vwModalUp .26s cubic-bezier(.2,.8,.25,1); }
@keyframes vwModalUp { from { transform: translateY(16px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.vw-modal-ic { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--bg3); color: var(--ink); border: 1px solid var(--border); }
.vw-tg-ic { color: #2aabee; }
.vw-modal h2 { font-family: var(--serif); font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.vw-modal > p { font-size: 14px; color: var(--ink-muted); margin: 9px 0 20px; line-height: 1.55; }
.vw-promo-code { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: .04em; color: var(--ink); background: var(--bg2); border: 1.5px dashed var(--border-dark); border-radius: 14px; padding: 16px 14px; margin-bottom: 16px; word-break: break-all; user-select: all; }
.vw-modal-primary { display: block; width: 100%; box-sizing: border-box; font-family: var(--sans); font-weight: 600; font-size: 15px; background: var(--ink); color: var(--accent-inv); border: none; border-radius: 100px; padding: 14px; cursor: pointer; text-decoration: none; transition: transform .15s; }
.vw-modal-primary:hover { transform: translateY(-1px); }
.vw-modal-primary.ok { background: #2f8a4e; }
.vw-modal-ghost { display: block; width: 100%; margin-top: 8px; font-family: var(--sans); font-weight: 500; font-size: 14px; background: none; border: none; color: var(--ink-muted); padding: 11px; cursor: pointer; }
.vw-gift-reward { display: inline-block; font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -.01em; color: var(--ink); background: var(--bg3); border: 1.5px dashed var(--border-dark); border-radius: 14px; padding: 12px 22px; margin: 6px 0 18px; }
.vw-gift .vw-modal-ic { color: var(--ink); }
.vw-modal-ghost:hover { color: var(--ink); }

/* visual guide / walkthrough */
.vw-guide { position: relative; width: min(460px, 100%); background: var(--bg); border: 1px solid var(--border); border-radius: 22px; padding: 24px 26px 22px; box-shadow: var(--shadow-lg); text-align: center; animation: vwModalUp .26s cubic-bezier(.2,.8,.25,1); }
.vw-guide-x { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--ink-faint); font-size: 16px; cursor: pointer; line-height: 1; padding: 4px; }
.vw-guide-x:hover { color: var(--ink); }
.vw-guide-art { height: 168px; margin: 4px 0 16px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--border); color: var(--ink); display: grid; place-items: center; padding: 8px; overflow: hidden; }
.vw-guide-art svg { display: block; max-height: 100%; }
.vw-guide-where { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); background: var(--bg3); border-radius: 100px; padding: 5px 12px; margin-bottom: 10px; }
.vw-guide-where .nic { font-size: 13px; color: var(--ink); }
.vw-guide h2 { font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.vw-guide > p { font-size: 14px; color: var(--ink-muted); margin: 9px 0 16px; line-height: 1.55; min-height: 66px; }
.vw-guide-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 16px; }
.vw-guide-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-dark); transition: all .2s; }
.vw-guide-dots i.on { background: var(--ink); width: 20px; border-radius: 4px; }
.vw-guide-nav { display: flex; gap: 10px; align-items: center; }
.vw-guide-nav .vw-modal-ghost { flex: none; width: auto; margin: 0; padding: 13px 20px; }
.vw-guide-nav .vw-modal-primary { flex: 1; margin: 0; }
.nav-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 26px; padding: 0 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; }
.logo img, .mk img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand .mark { font-family: var(--serif); font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.brand .mark em { font-family: var(--serif); font-style: normal; font-weight: 700; font-size: 1em; line-height: 1; letter-spacing: -.02em; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.nav-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-muted); padding: 8px 13px; border-radius: 8px; transition: all .16s; white-space: nowrap; position: relative;
}
.nav-link::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--ink); background: var(--bg3); }
.nav-link.active::after { transform: scaleX(1); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn.nav-toggle { display: none; }

/* nav dropdowns: Learn (Study/Review/Quiz) · Practice (Speaking/Articles) */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; cursor: pointer; }
.nav-drop-btn .caret { font-size: 8px; line-height: 1; transition: transform .18s; }
.nav-drop-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.drop-menu { left: 0; right: auto; top: calc(100% + 4px); min-width: 168px; }
.drop-menu a.active { background: var(--bg2); color: var(--ink); font-weight: 600; }
/* hover (desktop): tugma bilan menyu orasidagi bo'shliqni ko'rinmas ko'prik yopib turadi */
@media (hover: hover) and (min-width: 881px) {
  .nav-drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
}

.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; border: 1px solid var(--border-dark); border-radius: 100px; padding: 6px 12px; color: var(--ink-mid); background: var(--bg); transition: all .16s; }
.pill .ic { font-size: 12px; line-height: 1; }
.pill.flame .ic { color: var(--ink-muted); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-dark); background: var(--bg); color: var(--ink-mid); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all .16s; }
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }

/* user menu */
.user-btn { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border-dark); background: var(--bg); border-radius: 100px; padding: 4px 5px 4px 13px; cursor: pointer; transition: all .16s; }
.user-btn:hover { border-color: var(--ink); }
.user-btn .un { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--accent-inv); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 15px; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.menu { position: absolute; top: 54px; right: 0; min-width: 222px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: all .18s; z-index: 90; }
.menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.menu .mhead { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menu .mhead b { font-family: var(--serif); font-weight: 700; font-size: 17px; display: block; line-height: 1.1; }
.menu .mhead span { font-family: var(--mono); font-size: 10px; color: var(--ink-muted); }
.menu a, .menu button { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-mid); background: none; border: none; cursor: pointer; transition: all .14s; }
.menu a:hover, .menu button:hover { background: var(--bg2); color: var(--ink); }
/* notifications */
.nav-bell { position: relative; }
.bell-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 100px; background: var(--ink); color: var(--accent-inv); font-family: var(--mono); font-size: 9px; line-height: 16px; text-align: center; display: none; border: 2px solid var(--bg); }
.bell-badge.show { display: block; }
.notif-menu { width: 330px; max-width: 86vw; max-height: 440px; overflow-y: auto; padding: 6px; }
.notif-head { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 8px 10px 6px; }
.notif { display: flex; gap: 11px; padding: 11px 10px; border-radius: 10px; text-decoration: none; color: inherit; align-items: flex-start; }
.notif:hover { background: var(--bg2); }
.notif .nic { width: 30px; height: 30px; border-radius: 9px; background: var(--bg2); display: grid; place-items: center; flex: none; color: var(--ink); font-size: 13px; }
.notif.unseen .nic { background: var(--ink); color: var(--accent-inv); }
.notif .nt { font-size: 13.5px; font-weight: 600; color: var(--ink); display: block; }
.notif .nb { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; line-height: 1.45; display: block; }
.notif .ntime { font-family: var(--mono); font-size: 9px; color: var(--ink-faint); margin-top: 4px; display: block; }
.notif-empty { padding: 30px; text-align: center; color: var(--ink-muted); font-size: 13px; }
/* mobile: keep the nav from overflowing + anchor the notif panel to the viewport */
html { overflow-x: hidden; }
@media (max-width: 560px) {
  .nav-inner { gap: 8px; }
  .nav-search { display: none; }
  .notif-menu { position: fixed; top: 62px; right: 10px; left: auto; width: min(330px, 92vw); }
  /* Anchored with right:0, a panel grows LEFTWARDS from a button that already
     sits near the right edge — so anything wider than the button's offset ran
     off the screen. On a phone it becomes a sheet pinned inside the viewport
     instead, and scrolls if the contents are taller than the screen. */
  .menu {
    position: fixed; top: 62px; left: 10px; right: 10px;
    min-width: 0; width: auto;
    max-height: calc(100vh - 84px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .settings-menu { min-width: 0; }
  .settings-menu .set-row { flex-wrap: wrap; }
  .settings-menu .set-seg { flex: 1 1 auto; justify-content: center; }
  .settings-menu .set-seg button { flex: 1 1 auto; }
}
.menu .danger:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }

/* settings (gear) panel */
.settings-menu { min-width: 258px; padding: 10px; }
.settings-menu .set-head { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 4px 6px 10px; }
.settings-menu .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px; }
.settings-menu .set-row.col { flex-direction: column; align-items: stretch; gap: 9px; }
.settings-menu .set-lbl { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-mid); }
.settings-menu .set-seg { display: flex; gap: 4px; background: var(--bg2); border-radius: 10px; padding: 3px; width: auto; }
.settings-menu .set-seg button { width: auto; padding: 6px 14px; border: none; background: none; border-radius: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-muted); cursor: pointer; transition: all .15s; }
.settings-menu .set-seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.settings-menu .set-swatches { display: flex; gap: 9px; }
.settings-menu .swatch { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid var(--border); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.settings-menu .swatch:hover { transform: scale(1.1); }
.settings-menu .swatch.active { border-color: var(--bg); box-shadow: 0 0 0 2px var(--ink); }
.settings-menu .set-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.settings-menu .font-opt { width: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font-size: 13px; color: var(--ink-mid); cursor: pointer; text-align: center; transition: all .15s; }
.settings-menu .font-opt:hover { border-color: var(--ink-muted); color: var(--ink); }
.settings-menu .font-opt.active { border-color: var(--ink); color: var(--ink); background: var(--bg2); font-weight: 600; }

@media (max-width: 880px) {
  .nav-links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px; margin: 0; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all .2s; box-shadow: var(--shadow); }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-link { padding: 13px 14px; font-size: 12px; border-radius: 10px; }
  .icon-btn.nav-toggle { display: flex; }
  .pill.hide-sm, .user-btn .un { display: none; }
  /* mobile: dropdown flattens back into the list — all links visible, no extra tap */
  .nav-drop { position: static; }
  .nav-drop-btn { display: none; }
  .drop-menu { position: static; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; border: none; background: none; min-width: 0; padding: 0; border-radius: 0; }
  .drop-menu a { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); padding: 13px 14px; border-radius: 10px; font-weight: 500; }
  .drop-menu a.active { color: var(--ink); background: var(--bg3); }
}

/* small phones: keep the top nav from overflowing off-screen */
@media (max-width: 480px) {
  .nav-inner { gap: 10px; padding: 0 14px; }
  .nav-right { gap: 6px; }
  .nav-right .btn { padding: 8px 12px !important; font-size: 12.5px; }
  .brand .mark { font-size: 19px; }
  .brand .logo { width: 25px; height: 25px; font-size: 14px; }
  .flamona-fab { font-size: 12px; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 12px 22px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: all .22s cubic-bezier(.2,.7,.2,1); user-select: none; white-space: nowrap; position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; inset: 0; left: -120%; width: 60%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg); transition: left .6s cubic-bezier(.2,.7,.2,1); }
.btn:hover::before { left: 140%; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ink); color: var(--accent-inv); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(0,0,0,.18); transform: translateY(-2px); }
.btn-ghost { background: var(--bg); color: var(--ink); border-color: var(--border-dark); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-lg { padding: 15px 30px; font-size: 15px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn .ar { font-family: var(--mono); transition: transform .2s; }
.btn:hover .ar { transform: translateX(3px); }

/* ---------- labels ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-muted); }
.eyebrow span.rule { width: 22px; height: 1px; background: var(--ink-faint); }
.label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- badges (monochrome) ---------- */
.cefr { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border-dark); color: var(--ink-mid); background: var(--bg); }
.lang-chip { flex-shrink: 0; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; margin-top: 2px; }
.lang-chip.en { background: var(--ink); color: var(--accent-inv); }
.lang-chip.uz { background: var(--bg3); color: var(--ink-mid); border: 1px solid var(--border-dark); }

/* ---------- surfaces ---------- */
.panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); }
mark { background: var(--ink); color: var(--accent-inv); border-radius: 2px; padding: 0 2px; }

/* ---------- speak button ---------- */
.speak { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--border-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); background: var(--bg); cursor: pointer; transition: all .16s; }
.speak:hover { color: var(--ink); border-color: var(--ink); }
.speak:active { transform: scale(.9); }
.speak.speaking { background: var(--ink); border-color: var(--ink); color: var(--accent-inv); animation: pulseRing 1.1s ease-out infinite; }
.speak svg { display: block; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--border); margin-top: 72px; padding: 40px 0 56px; color: var(--ink-muted); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; }
.foot .fb { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.foot .fb em { font-family: var(--serif); font-style: normal; font-weight: 700; font-size: 1em; line-height: 1; letter-spacing: -.02em; }
.foot small { font-family: var(--mono); font-size: 10px; display: block; margin-top: 6px; color: var(--ink-faint); }
.foot-links { display: flex; gap: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.foot-links a:hover { color: var(--ink); }
/* richer footer */
.foot .fb .logo { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; }
.foot-top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.foot-brand { max-width: 380px; }
.foot-desc { margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--ink-muted); font-weight: 300; }
.foot-meta { margin-top: 16px; display: flex; gap: 22px; flex-wrap: wrap; }
.foot-meta .fm b { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); display: block; line-height: 1; }
.foot-meta .fm span { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-top: 5px; display: block; }
/* .foot-author removed with the "By the author" link — a Team section takes this spot. */
.foot-cols { display: flex; gap: 54px; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; font-weight: 600; }
.foot-col a { font-size: 14px; color: var(--ink-muted); transition: color .15s; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--border); }
.foot-bottom small { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: .03em; margin: 0; display: inline; }
@media (max-width: 640px) { .foot-top { gap: 30px; } .foot-cols { gap: 30px; } }

/* ---------- motion ---------- */
@keyframes auraDrift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-22px,16px) scale(1.08); } 100% { transform: translate(0,0) scale(1); } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(0,0,0,.22); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes popIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* floating Flamona AI button (owner-only, bottom-right) — bare PNG logo, no fill */
.flamona-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 78;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: 100px;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  border: none; cursor: pointer;
  animation: floatY 4.2s ease-in-out infinite;
  transition: transform .18s, opacity .18s;
}
.flamona-fab.round { padding: 0; }
.flamona-fab .ffab-logo { width: 48px; height: 48px; object-fit: contain; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.28)); }
.flamona-fab.round .ffab-logo { width: 56px; height: 56px; }
.flamona-fab .ffab-txt { line-height: 1; padding-right: 4px; }
.flamona-fab:hover { transform: translateY(-3px) scale(1.06); }
.flamona-fab:active { transform: translateY(-1px) scale(.98); }
@media (max-width: 640px) {
  .flamona-fab { right: 14px; bottom: 14px; }
  /* the floating button sits over the bottom-right corner, so the last row of
     whatever the page is showing needs somewhere to scroll clear of it */
  body:has(.flamona-fab) { padding-bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) { .flamona-fab { animation: none; } }

/* Flamona dynamic AI chat panel */
.fchat {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 44px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border-dark); border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .22s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1);
}
.fchat.open { opacity: 1; transform: none; pointer-events: auto; }
.fchat-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.fchat-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; }
.fchat-brand img { width: 28px; height: 28px; object-fit: contain; }
.fchat-brand b { font-weight: 700; color: var(--ink); }
.fchat-acts { display: flex; gap: 4px; }
.fchat-ic { width: 30px; height: 30px; border: none; background: transparent; color: var(--ink-muted); border-radius: 8px; cursor: pointer; font-size: 15px; transition: background .15s, color .15s; }
.fchat-ic:hover { background: var(--bg2); color: var(--ink); }
.fchat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.fchat-empty { margin: auto; text-align: center; color: var(--ink-muted); padding: 10px; }
.fchat-empty img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 12px; }
.fchat-empty p { font-size: 13.5px; line-height: 1.6; max-width: 300px; margin: 0 auto; }
.fmsg { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; animation: fchatMsgIn .26s cubic-bezier(.2,.7,.2,1); }
@keyframes fchatMsgIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.fmsg.user { flex-direction: row-reverse; }
.fmsg-av { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; margin-top: 2px; }
.fmsg-b { font-size: 13.5px; line-height: 1.6; padding: 9px 13px; border-radius: 14px; max-width: 80%; word-wrap: break-word; overflow-wrap: anywhere; }
.fmsg.assistant .fmsg-b { background: var(--bg2); color: var(--ink); border-top-left-radius: 4px; }
.fmsg.user .fmsg-b { background: var(--ink); color: var(--accent-inv); border-top-right-radius: 4px; }
.fmsg-b .fmd-h { display: block; font-weight: 700; font-size: 1.02em; margin: 8px 0 3px; line-height: 1.35; }
.fmsg-b .fmd-h:first-child { margin-top: 0; }
.fmsg-b em { font-style: italic; }
.fmsg-b code { font-family: var(--mono); font-size: .86em; background: var(--bg3); padding: 1px 5px; border-radius: 4px; }
.fmsg-b pre { background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; overflow-x: auto; margin: 7px 0; }
.fmsg-b pre code { background: none; padding: 0; font-size: 12px; line-height: 1.5; }
.fmsg-b hr { border: none; border-top: 1px solid var(--border-dark); margin: 9px 0; }
.fmsg.user .fmsg-b hr { border-top-color: rgba(255,255,255,.3); }
.fmsg-typing { display: inline-flex; gap: 4px; align-items: center; }
.fmsg-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: fchatBlink 1.1s infinite ease-in-out; }
.fmsg-typing span:nth-child(2) { animation-delay: .18s; }
.fmsg-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes fchatBlink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* footer frames the floating composer; only the message body above it scrolls */
.fchat-foot { position: relative; flex-shrink: 0; padding: 10px 12px 13px; }
.fchat-foot::before { content: ''; position: absolute; left: 0; right: 0; top: -24px; height: 24px; pointer-events: none; background: linear-gradient(to top, var(--bg) 30%, transparent); }
.fchat-composer { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--border-dark); border-radius: 22px; padding: 10px 10px 9px; background: var(--bg); box-shadow: 0 3px 14px rgba(0,0,0,.06); transition: border-color .16s, box-shadow .16s; }
.fchat-composer:focus-within { border-color: var(--ink); box-shadow: 0 5px 22px rgba(0,0,0,.10); }
.fchat-composer textarea { border: none; outline: none; resize: none; background: transparent; padding: 4px 7px; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink); max-height: 140px; }
.fchat-composer textarea::placeholder { color: var(--ink-faint); }
.fchat-row { display: flex; align-items: center; gap: 8px; }
/* model picker lives INSIDE the composer; inherits the user's chosen font (var(--sans)) */
.fchat-model { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-dark); background: var(--bg); color: var(--ink-mid); border-radius: 100px; padding: 5px 10px 5px 11px; font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, transform .12s; }
.fchat-model:hover { border-color: var(--ink); color: var(--ink); }
.fchat-model:active { transform: scale(.97); }
.fchat-model .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.fchat-model .car { color: var(--ink-faint); font-size: 9px; }
.fchat-send { margin-left: auto; width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--ink); color: var(--accent-inv); cursor: pointer; display: grid; place-items: center; transition: transform .15s, opacity .15s; }
.fchat-send:hover { transform: scale(1.08); }
.fchat-send:active { transform: scale(.9); }
/* model menu floats above the composer; user font, soft pop-in */
.fchat-mmenu { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 8px); z-index: 6; background: var(--bg); border: 1px solid var(--border-dark); border-radius: 15px; box-shadow: 0 16px 44px rgba(0,0,0,.24); padding: 6px; display: none; }
.fchat-mmenu.open { display: block; animation: fchatPop .17s cubic-bezier(.2,.7,.2,1); }
@keyframes fchatPop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.fchat-mmenu button { display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; text-align: left; padding: 9px 11px; border-radius: 11px; cursor: pointer; font-family: var(--sans); transition: background .13s; }
.fchat-mmenu button:hover { background: var(--bg2); }
.fchat-mmenu .mn { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); }
.fchat-mmenu .chk { margin-left: auto; color: var(--ink); }
.fchat-mmenu .md { display: block; font-size: 11px; color: var(--ink-muted); margin-top: 2px; line-height: 1.4; }
.fchat-mmenu .mt { display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .03em; color: var(--ink-mid); border: 1px solid var(--border-dark); border-radius: 100px; padding: 2px 8px; margin-top: 5px; }
.fchat-mmenu .mt.zero { color: var(--danger); border-color: var(--danger); }
@media (max-width: 640px) {
  .fchat { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: none; }
  .fchat-foot { padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .fchat, .fchat.open, .fmsg, .fchat-mmenu.open { animation: none; transition: none; }
}

.fade-up { opacity: 0; transform: translateY(20px) scale(.985); filter: blur(6px); transition: opacity .75s cubic-bezier(.16,.84,.28,1), transform .75s cubic-bezier(.16,.84,.28,1), filter .75s cubic-bezier(.16,.84,.28,1); }
.fade-up.in { opacity: 1; transform: none; filter: blur(0); }
.d1 { transition-delay: .07s; } .d2 { transition-delay: .14s; } .d3 { transition-delay: .21s; }
.d4 { transition-delay: .28s; } .d5 { transition-delay: .35s; } .d6 { transition-delay: .42s; }

.sheen { position: relative; overflow: hidden; }
.sheen::after { content: ''; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--ink) 7%, transparent), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.sheen:hover::after { left: 130%; }

[data-tilt] { transform-style: preserve-3d; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade-up { opacity: 1; transform: none; filter: none; }
}

/* ---- one-time menu-position hint (nav.js showNavHint) ---- */
.vw-navhint > p { margin-bottom: 16px; }
.nh-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.nh-opt { display: grid; gap: 8px; justify-items: center; padding: 12px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; font-family: var(--sans); transition: border-color .15s, background .15s; }
.nh-opt:hover { border-color: var(--border-dark); }
.nh-opt.on { border-color: var(--ink); background: var(--bg3); }
.nh-fig { display: block; width: 100%; height: 52px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); padding: 5px; box-sizing: border-box; }
.nh-fig i { display: block; border-radius: 3px; }
.nh-fig-top .nh-bar { height: 9px; background: var(--ink-faint); margin-bottom: 5px; }
.nh-fig-top .nh-page { height: 26px; background: var(--bg3); }
.nh-fig-side { display: flex; gap: 5px; }
.nh-fig-side .nh-bar { width: 14px; background: var(--ink-faint); }
.nh-fig-side .nh-page { flex: 1; background: var(--bg3); }
.nh-opt.on .nh-bar { background: var(--ink); }
.nh-lbl { font-size: 13px; font-weight: 600; color: var(--ink-mid); }
.nh-opt.on .nh-lbl { color: var(--ink); }
.nh-where { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 16px; line-height: 1.5; }
.nh-where b { color: var(--ink-mid); font-weight: 600; }


/* ============================================================
   BREND QATLAMI — monoxrom · 30-avgust 2026
   Fayl oxirida turadi, shuning uchun yuqoridagi qoidalarni bosadi.
   ============================================================ */

/* asosiy tugma: to'la qora, oq matn (17.9:1) */
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0) scale(.985); }

/* fokus halqasi — klaviatura bilan yuruvchilar uchun ko'rinadigan holat */
.btn:focus-visible, .icon-btn:focus-visible, .nav-link:focus-visible,
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-sm);
}

/* Fraunces katta o'lchamda optik o'qi bilan chiroyliroq chiqadi */
h1, h2, .brand .mark, .big, .huge { font-variation-settings: 'opsz' 144; }
.big, .huge, .stat, .num, td, .tabnum { font-variant-numeric: tabular-nums; }

/* ---------- INVERSIYA: rangning o'rnini bosuvchi vosita ----------
   Monoxromda "bu muhim" degani rang emas, teskari yuza degani.
   Amber qayerda turishi kerak bo'lsa, o'sha yerda .fl-mark turadi. */
.fl-mark {
  background: var(--ink); color: var(--accent-inv);
  border-color: var(--ink) !important;
}
.fl-mark .lbl, .fl-mark .label, .fl-mark small { color: var(--accent-inv); opacity: .66; }

/* emoji ham oq-qora bo'lsin — monoxrom brendni buzmasin */
.fl-mono-emoji { filter: grayscale(1); }

/* ---------- yetishmayotgan uch lahza ----------
   quiz.js / review.js  ->  el.classList.add('fl-hit')
   dash.js              ->  streak bloki: class="fl-streak"  + .add('go')
   mock-report.html     ->  band raqami: class="fl-band"     + .add('go')
   ----------------------------------------------- */
@keyframes fl-hit {
  0%   { transform: scale(1);     box-shadow: 0 0 0 0    var(--ring-hit); }
  38%  { transform: scale(1.055); box-shadow: 0 0 0 14px transparent; }
  100% { transform: scale(1);     box-shadow: 0 0 0 0    transparent; }
}
:root { --ring-hit: rgba(11,11,12,.42); }
html.dark, body.dark { --ring-hit: rgba(250,250,251,.42); }
.fl-hit { animation: fl-hit .52s var(--e); }

@keyframes fl-flick {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.24); }
  100% { transform: scale(1); }
}
.fl-streak .flame { filter: grayscale(1) opacity(.32); transition: filter .5s var(--e); display: inline-block; }
.fl-streak.go .flame { filter: grayscale(1) opacity(1); animation: fl-flick .6s var(--e); }
.fl-streak.go .num { animation: fl-flick .6s var(--e); }

/* band ball — rang bilan emas, o'lcham va ostidagi chiziq bilan ta'kidlanadi */
.fl-band {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; font-variation-settings: 'opsz' 144;
  display: inline-block; position: relative;
}
.fl-band::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: var(--ink); transition: right .7s var(--e) .2s;
}
.fl-band.go::after { right: 0; }

@media (prefers-reduced-motion: reduce) {
  .fl-hit, .fl-streak.go .flame, .fl-streak.go .num { animation: none; }
  .fl-band::after { transition: none; }
}


/* ============================================================
   SIYOH qo'shimchalari — 31-avgust 2026
   1) menyu ikonkalari: ustunda ko'rinadi, yuqori barda yashirin
   2) yumshoq harakatlar (prefers-reduced-motion hurmat qilinadi)
   ============================================================ */

/* ---- nav ikonkalari ---- */
.nv-ic { display: none; }
@media (min-width: 881px) {
  body.nav-side .nav-link:not(.nav-drop-btn),
  body.nav-side .drop-menu a {
    display: flex; align-items: center; gap: 11px;
  }
  body.nav-side .nv-ic {
    display: inline-flex; flex: none; width: 19px; height: 19px;
    align-items: center; justify-content: center;
    color: var(--ink-muted);
    transition: color .18s var(--e), transform .22s var(--e);
  }
  body.nav-side .nv-ic svg { width: 18px; height: 18px; display: block; }
  body.nav-side .nav-link:hover .nv-ic,
  body.nav-side .drop-menu a:hover .nv-ic { color: var(--ink); }
  body.nav-side .nav-link.active:not(.nav-drop-btn) .nv-ic,
  body.nav-side .drop-menu a.active .nv-ic { color: var(--accent-inv); }
  body.nav-side .nav-drop-btn.active .nv-ic { color: var(--ink); }

  /* qator: sekin siljish + belgilangan qator inversiyasi allaqachon bor */
  body.nav-side .nav-link:not(.nav-drop-btn),
  body.nav-side .drop-menu a {
    transition: background .18s var(--e), color .18s var(--e), transform .18s var(--e);
  }
  body.nav-side .nav-link:not(.nav-drop-btn):hover,
  body.nav-side .drop-menu a:hover { transform: translateX(3px); }
  body.nav-side .nav-link:not(.nav-drop-btn).active,
  body.nav-side .drop-menu a.active { transform: none; }
}

/* ---- yumshoq animatsiyalar ---- */
@media (prefers-reduced-motion: no-preference) {
  body { animation: vwPageIn .38s var(--e) both; }
  @keyframes vwPageIn { from { opacity: 0; } to { opacity: 1; } }

  .drop-menu.open { animation: vwDropIn .22s var(--e) both; }
  @keyframes vwDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  body.nav-side .drop-menu { animation: none; } /* ustunda menyu doim ochiq */

  .btn, .btn-primary, button.submit { transition: transform .18s var(--e), box-shadow .18s var(--e), background .18s var(--e), color .18s var(--e), border-color .18s var(--e); }
  .btn:active, .btn-primary:active, button.submit:active { transform: scale(.97); }

  .vw-modal-back { animation: vwPageIn .25s ease both; }
  .vw-modal { animation: vwModalIn .3s var(--e) both; }
  @keyframes vwModalIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}