/* ═══════════════════════════════════════════════════════════════════════
   Mebel City Academy — App shell + components (Duolingo-style, mobile-first)
   Prefiks: ac-  ·  tokens.css (var(--…)) ustiga quriladi.
   Signature: chunky 3D yashil tugmalar, qalin bordered kartalar, baland
   yumaloq progress, sakraydigan route-tugunlar, maskot, jonli pastki nav.
   ═══════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body { min-height: 100vh; overflow-x: hidden; }
a { color: var(--info); text-decoration: none; font-weight: 700; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; text-align: inherit; }
input, textarea, select { font-family: inherit; outline: none; color: var(--text); font-weight: 600; }
input::placeholder, textarea::placeholder { color: var(--text-3); font-weight: 600; }
img { max-width: 100%; display: block; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: var(--radius-full); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Animatsiyalar ── */
@keyframes ac-fadein   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ac-screenin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ac-popin    { 0% { opacity: 0; transform: scale(.85); } 60% { transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes ac-growx    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ac-toastin  { from { opacity: 0; transform: translateY(-16px) scale(.9); } 60% { transform: translateY(2px) scale(1.02); } to { opacity: 1; transform: none; } }
@keyframes ac-pulse    { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes ac-shimmer  { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes ac-xpfloat  { 0% { opacity: 0; transform: translate(-50%,10px) scale(.4); } 18% { opacity: 1; transform: translate(-50%,-6px) scale(1.15); } 32% { transform: translate(-50%,-6px) scale(1); } 100% { opacity: 0; transform: translate(-50%,-130px) scale(1); } }
@keyframes ac-confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(120vh) rotate(680deg); } }
@keyframes ac-nodepop  { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.14); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ac-spin     { to { transform: rotate(360deg); } }
/* Duolingo jonli harakatlar */
@keyframes ac-nodebounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ac-bob      { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
@keyframes ac-wiggle   { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes ac-flame    { 0%,100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.18) rotate(3deg); } }
@keyframes ac-navpop   { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1.12); } }
@keyframes ac-mascot   { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }

/* ═══════════════ LAYOUT SHELL ═══════════════ */
.ac-app { min-height: 100vh; }

/* Top bar (fixed) */
.ac-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 58px; display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4);
  padding-top: env(safe-area-inset-top, 0);
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 2px solid var(--border);
}
.ac-topbar-brand { display: flex; align-items: center; gap: var(--sp-2); flex: 1; cursor: pointer; min-width: 0; }
.ac-topbar-title { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.ac-topbar-actions { display: flex; align-items: center; gap: var(--sp-1); }
.ac-logo-mark {
  width: 34px; height: 34px; border-radius: var(--radius-md); flex: none;
  background: linear-gradient(150deg, var(--primary), var(--primary-light));
  color: var(--on-primary); display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--primary) 60%, #000);
}
.ac-logo-lg { width: 44px; height: 44px; font-size: 22px; border-radius: var(--radius-lg); }

.ac-icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-full); flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--text);
  transition: background-color var(--dur) var(--ease), transform .12s var(--bounce);
}
.ac-icon-btn:hover { background: var(--bg-2); }
.ac-icon-btn:active { transform: scale(.86); }
.ac-bell { position: relative; }
.ac-bell-dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); }

/* Theme toggle icon swap */
.ac-ic-moon { display: none; }
:root[data-theme="dark"] .ac-ic-sun { display: none; }
:root[data-theme="dark"] .ac-ic-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ac-ic-sun { display: none; }
  :root:not([data-theme="light"]) .ac-ic-moon { display: block; }
}

/* Sidebar (desktop only) */
.ac-sidebar { display: none; }
.ac-side-brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-2); }
.ac-side-title { font-weight: 800; font-size: 16px; }
.ac-side-sub { font-size: 12px; color: var(--text-2); font-weight: 700; }
.ac-side-nav { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-4); }
.ac-side-link {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: 12px var(--sp-3); border-radius: var(--radius-md); text-align: left;
  color: var(--text-2); font-weight: 800; font-size: 14px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ac-side-link:hover { background: var(--bg-2); color: var(--text); transform: translateX(2px); }
.ac-side-link.active { background: var(--primary-bg); color: var(--primary); }
.ac-side-foot { margin-top: auto; }
.ac-side-logout { color: var(--danger); }
.ac-side-logout:hover { color: var(--danger); background: var(--danger-bg); }

/* Main */
.ac-main { padding-top: 58px; padding-bottom: 88px; min-height: 100vh; }

/* Telegram mini-app fullscreen — safe-area (Telegram tepа tugmalari ostiga tushmasin) */
body.ac-tg .ac-topbar {
  height: calc(58px + var(--tg-safe-top, 0px));
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--tg-safe-top, 0px));
}
body.ac-tg .ac-main { padding-top: calc(58px + var(--tg-safe-top, 0px)); }
.ac-screen {
  /* 2026-07-29: max-width olib tashlandi — chetlarda bo'sh joy qoldirmasin
     (aniq talab qilindi). Grid'lar (.ac-poslist-grid, .ac-acc-body.open)
     auto-fit bilan kenglikka qarab ustunlar sonini o'zi moslaydi. */
  max-width: 100%; margin: 0; padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
  animation: ac-screenin .38s var(--ease) both;
}
.ac-screen-full { max-width: 460px; }

/* Bottom nav (mobile) — jonli, aktiv=yashil */
.ac-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around; align-items: stretch;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0));
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 2px solid var(--border);
}
.ac-bnav {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0; color: var(--text-3); font-size: 10px; font-weight: 800;
  letter-spacing: .01em;
  transition: color var(--dur) var(--ease), transform .12s var(--bounce);
}
.ac-bnav svg { transition: transform .2s var(--bounce); }
.ac-bnav.active { color: var(--success); }
.ac-bnav.active svg { transform: scale(1.16) translateY(-1px); animation: ac-navpop .34s var(--bounce) both; }
.ac-bnav:active { transform: scale(.88); }

/* No-chrome (login) — topbar/nav/sidebar yashirin.
   2026-08-02: Academy endi hb_shell_base.html ICHIDA ochiladi — bu klass
   avval faqat Akademiyaning O'Z (asosan endi ishlatilmaydigan) .ac-* chrome
   elementlarini yashirar edi. Tashqi HAQIQIY shell (.hb-topbar/.hb-sidebar/
   .hb-drawer/.hb-bottomnav) esa hali ko'rinar edi — login (autentifikatsiya
   qilinmagan) ekranida profil avatari, qo'ng'iroq, navigatsiya sidebar
   ko'rsatilishi noto'g'ri va chalkash edi. Endi shu bitta klass ikkalasini
   ham qamrab oladi — login sahifasi haqiqiy to'liq-ekran, mustaqil holat. */
body.ac-nochrome .ac-topbar,
body.ac-nochrome .ac-bottomnav,
body.ac-nochrome .ac-sidebar,
body.ac-nochrome .hb-topbar,
body.ac-nochrome .hb-sidebar,
body.ac-nochrome .hb-drawer,
body.ac-nochrome .hb-drawer-bg,
body.ac-nochrome .hb-bottomnav { display: none !important; }
body.ac-nochrome .ac-main { padding: 0; }
body.ac-nochrome .hb-shell { grid-template-columns: 1fr !important; background: transparent !important; }
body.ac-nochrome .hb-main { grid-template-rows: 1fr !important; grid-column: 1 !important; }
body.ac-nochrome .hb-content { padding: 0 !important; overflow-y: auto !important; animation: none !important; }

/* ═══════════════ COMPONENTS ═══════════════ */
.ac-card {
  background: var(--bg); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: none;
  transition: transform var(--dur) var(--bounce), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ac-card-2 { background: var(--bg-2); border-color: transparent; }
.ac-card-hover { cursor: pointer; }
.ac-card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.ac-card-hover:active { transform: translateY(0) scale(.99); }
.ac-glass {
  background: var(--glass); backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 2px solid var(--border); box-shadow: var(--shadow);
}

/* ── SIGNATURE 3D BUTTON ── */
.ac-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 50px; padding: 13px var(--sp-6); border-radius: var(--radius-md);
  background: var(--success);
  color: var(--on-primary); font-weight: 800; font-size: 15px;
  line-height: 1.15; text-align: center;
  text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 4px 0 var(--success-edge);
  transition: transform .09s ease, box-shadow .09s ease, filter .15s var(--ease), background-color .15s var(--ease);
}
.ac-btn:hover { filter: brightness(1.06); }
.ac-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--success-edge); }
.ac-btn[disabled] { opacity: .5; pointer-events: none; box-shadow: 0 4px 0 var(--success-edge); }
.ac-btn-block { width: 100%; }
.ac-btn-ghost {
  background: var(--bg); color: var(--text);
  border: 2px solid var(--border);
  box-shadow: 0 3px 0 var(--border);
  text-transform: none; letter-spacing: normal; font-weight: 800;
}
.ac-btn-ghost:hover { background: var(--bg-2); filter: none; }
.ac-btn-ghost:active { transform: translateY(3px); box-shadow: 0 0 0 var(--border); }
.ac-btn-ghost[disabled] { box-shadow: 0 3px 0 var(--border); }
.ac-btn-sm { min-height: 40px; padding: 9px var(--sp-4); font-size: 13px; text-transform: none; letter-spacing: normal; box-shadow: 0 3px 0 var(--success-edge); }
.ac-btn-sm.ac-btn-ghost { box-shadow: 0 3px 0 var(--border); }
.ac-btn-sm:active { transform: translateY(3px); }
.ac-btn-lg { min-height: 56px; font-size: 16px; box-shadow: 0 5px 0 var(--success-edge); }
.ac-btn-lg:active { transform: translateY(5px); box-shadow: 0 0 0 var(--success-edge); }

.ac-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 12px;
  border-radius: var(--radius-full); background: var(--bg-2); color: var(--text-2);
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.ac-chip-primary { background: var(--primary); color: var(--on-primary); }
.ac-chip-success { background: var(--success-bg); color: var(--success-d); }
.ac-chip-warning { background: var(--warning-bg); color: var(--warning); }
.ac-chip-muted   { background: var(--bg-2); color: var(--text-3); }
.ac-chip-danger  { background: var(--danger-bg); color: var(--danger-d); }
.ac-chip-info    { background: var(--info-bg); color: var(--info-edge); }

.ac-input {
  width: 100%; height: 52px; padding: 0 var(--sp-4);
  background: var(--bg-2); border: 2px solid var(--border);
  border-radius: var(--radius-md); font-size: 16px; color: var(--text); font-weight: 700;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ac-input:focus, .ac-input:focus-within { border-color: var(--info); background: var(--bg); }

/* Login usuli tanlovi (telefon/email) — to'liq uslub LOGIN bo'limida
   (pastda, "Mac style" segmented control, sirpanadigan thumb bilan). */

/* Progress bar — baland, yumaloq, yashil + yuqori nur */
.ac-progress { height: 16px; border-radius: var(--radius-full); background: var(--bg-3); overflow: hidden; }
.ac-progress-fill {
  height: 100%; border-radius: var(--radius-full);
  background-color: var(--success);
  background-image: linear-gradient(180deg, rgba(255,255,255,.40) 0, rgba(255,255,255,0) 46%);
  transform-origin: left; animation: ac-growx .7s var(--ease) both;
}
.ac-progress-thin { height: 8px; }

/* Section heading */
.ac-h { font-size: 13px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin: var(--sp-2) 0 2px; }
/* 2026-07-29: lavozim kartalari keng ekranda bir nechta ustunga yoyiladi
   (avval har biri to'liq kenglikda, bittadan pastma-past edi). */
.ac-poslist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3); }
.ac-greet { font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.ac-greet-sub { font-size: 14px; color: var(--text-2); margin-top: -4px; font-weight: 700; }

/* Empty / error state */
.ac-empty { text-align: center; padding: var(--sp-12) var(--sp-4); color: var(--text-2); font-weight: 700; }
.ac-empty-ic { font-size: 48px; margin-bottom: var(--sp-3); }
.ac-empty-title { font-weight: 900; font-size: 17px; color: var(--text); margin-bottom: 4px; }

/* Skeleton */
.ac-skel {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 800px 100%; animation: ac-shimmer 1.3s linear infinite;
}
.ac-skel-line { height: 14px; margin: 8px 0; }
.ac-skel-card { height: 96px; margin-bottom: var(--sp-3); }

/* Spinner */
.ac-spin { width: 20px; height: 20px; border: 3px solid color-mix(in srgb, var(--on-primary) 45%, transparent); border-top-color: var(--on-primary); border-radius: 50%; animation: ac-spin .7s linear infinite; }

/* Mascot (route-map / dashboard) — do'stona boyqush */
.ac-mascot { display: flex; justify-content: center; margin: 0 auto var(--sp-3); }
.ac-mascot svg { width: 92px; height: 92px; transform-origin: 50% 90%; animation: ac-mascot 2.6s ease-in-out infinite; }

/* ═══════════════ TOASTS ═══════════════ */
.ac-toasts {
  position: fixed; top: calc(66px + env(safe-area-inset-top, 0)); left: 0; right: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); pointer-events: none;
}
.ac-toast {
  pointer-events: auto; max-width: 92vw;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 13px var(--sp-5); border-radius: var(--radius-full);
  background: var(--bg); border: 2px solid var(--border); box-shadow: var(--shadow);
  font-size: 14px; font-weight: 800; color: var(--text);
  animation: ac-toastin .34s var(--bounce) both;
}
.ac-toast-success { border-color: var(--success); }
.ac-toast-error   { border-color: var(--danger); }
.ac-toast-info    { border-color: var(--info); }
.ac-toast-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ac-toast-success .ac-toast-dot { background: var(--success); }
.ac-toast-error .ac-toast-dot { background: var(--danger); }
.ac-toast-info .ac-toast-dot { background: var(--info); }

/* XP floating toast — katta yashil pop */
.ac-xptoast {
  position: fixed; left: 50%; top: 38%; z-index: 250; pointer-events: none;
  padding: 12px 26px; border-radius: var(--radius-full);
  background: var(--success); color: #fff;
  font-size: 28px; font-weight: 900; letter-spacing: .01em;
  box-shadow: 0 6px 0 var(--success-edge), var(--shadow-lg);
  animation: ac-xpfloat 1.7s var(--ease) forwards;
}

/* Confetti */
.ac-confetti-piece { position: fixed; top: -12px; z-index: 240; width: 10px; height: 15px; border-radius: 3px; pointer-events: none; animation: ac-confetti 2.4s var(--ease) forwards; }

/* ═══════════════ MODAL / SHEET ═══════════════ */
.ac-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: ac-fadein .2s ease;
}
.ac-sheet {
  width: 100%; max-width: 520px; background: var(--bg);
  border: 2px solid var(--border); border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0));
  max-height: 88vh; overflow-y: auto;
  animation: ac-sheetup .34s var(--bounce) both;
}
@keyframes ac-sheetup { from { transform: translateY(100%); } to { transform: none; } }
.ac-sheet-handle { width: 44px; height: 5px; border-radius: var(--radius-full); background: var(--bg-3); margin: 4px auto var(--sp-4); }
.ac-sheet-title { font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
@media (min-width: 640px) {
  .ac-backdrop { align-items: center; }
  .ac-sheet { border-radius: var(--radius-xl); border-bottom: 2px solid var(--border); }
}

/* ═══════════════ LOGIN — real redesign, round 2 (2026-08-10) ═══════════════
   2026-08-09'dagi birinchi "reskin" buyurtmachi tomonidan rad etildi ("nega
   login sahifasi buzilgan", "qaytadan dizayn qil [bu safar chinakam]") — u
   aslida faqat rang/shrift almashtirish edi, TUZILMA hali ham generik:
   markazlashgan tekis oq karta + tekis lime doira logotip ("B" bilan,
   kripto-token belgisiga o'xshab qolgan) + label-ustida-input standart
   shakl. Bu safar TUZILMA o'zi qayta ko'rib chiqildi:
     1) Logotip endi HECH QACHON sahifaning markaziy elementi emas — eyebrow
        qatorida 22px kichik nishon sifatida, brend hozirligini saqlab
        qoladi-yu, "bosh belgisi" bo'lib qolmaydi.
     2) Sarlavha o'zi katta Space Grotesk "Tizimga kirish" matni (=/hrm/
        landing'ning hbh-hero-title bilan bir xil vizual og'irlik) — endi
        logotip o'rniga TIPOGRAFIYA bosh e'tibor markazi.
     3) Fon endi markazlashgan emas — >=900px'da karta chapga suriladi, orqa
        fonda gigant xira "B" harfi o'ngga cho'kib turadi (landing'ning
        .hbh-hero-bg-num/.hbh-stage-bg-num naqshi bilan bir xil trik), bu
        asimmetriya sahifaga "shablon markazlashgan forma" emas, "ekran"
        hissini beradi. Mobil (<900px)'da markazga qaytadi, harf kichrayib
        pastroq opacity bilan orqada qoladi.
     4) Input maydonlari endi to'liq quti (.ac-input) emas — faqat pastki
        chiziqli (underline) qator: mono-uslub katta-harf yorliq + katta
        Space Grotesk qiymat matni. +998 prefiks endi input bilan BITTA
        chiziq/qatorni baham ko'radi (ichki ajratuvchi chiziq bilan) —
        "ikki mos kelmagan quti yopishtirilgan" emas.
     5. Brauzer avtomatik-to'ldirish (Chrome) sariq foni .ac-field-input'ni
        butunlay bosib, uslubni "buzilgan"dek ko'rsatardi — standart
        -webkit-autofill inset-shadow triki bilan tuzatildi, --bg/--text
        orqali (ikkala mavzuda ham avtomatik ishlaydi).
   Funksionallik TEGILMAGAN — faqat DOM/uslub. Umumiy .ac-btn/.ac-seg/...
   primitivlari boshqa sahifalarda ham ishlatiladi, shuning uchun bu yerdagi
   override'lar ATAYLAB `.ac-login` ichida QAMRAB OLINGAN. */
.ac-login {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Inter', system-ui, sans-serif;
  position: relative; overflow: hidden;
  --primary: var(--hb-acc, #24C29A);
  --primary-light: color-mix(in srgb, var(--hb-acc, #24C29A) 70%, white);
  --on-primary: var(--hb-acc-ink, #0B1F19);
  --login-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(900px 560px at 84% 4%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 60%),
    radial-gradient(circle, color-mix(in srgb, var(--primary) 7%, transparent) 1px, transparent 1.5px) 0 0 / 26px 26px,
    var(--bg);
}
/* [TUZATISH, 2026-08-10] Asimmetrik chap-tekislangan joylashuv + chetga
   "chiqib ketgan" ulkan harf — buyurtmachiga sahifa "buzilgandek" (yarim
   bo'sh, tugallanmagan) ko'rindi. Oddiy MARKAZIY joylashuvga qaytarildi —
   `.ac-login`ning bazaviy `justify-content:center` (yuqorida) ENDI hech
   qanday keng-ekran override'siz ishlatiladi, gigant fon-harf olib
   tashlandi. */
.ac-login-bgnum { display: none; }
/* Karta va orqaga-havola ustidagi qatlamda turishi uchun */
.ac-login-wrap { position: relative; z-index: 1; width: 100%; max-width: 392px; display: flex; flex-direction: column; gap: 14px; }

/* Bosh sahifaga qaytish — login ekranining istalgan bosqichida (asosiy/SMS/
   OTP) doim ko'rinadi, chunki shell() barcha uch ekran uchun umumiy. Sessiya
   TEGILMAYDI (oddiy <a href> navigatsiya, /hrm/ har doim anonim foydalanuvchi
   uchun ham ochiq). */
.ac-login-home {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  text-decoration: none; padding: 7px 10px 7px 8px; margin-left: -8px;
  border-radius: var(--radius-full);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.ac-login-home svg { flex: none; transition: transform .15s var(--ease); }
.ac-login-home:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ac-login-home:hover svg { transform: translateX(-3px); }
.ac-login-home:active { transform: scale(.97); }
.ac-login-home:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

.ac-login-card {
  position: relative; width: 100%;
  padding: 36px var(--sp-7, 26px) var(--sp-8);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset,
    0 24px 60px -20px rgba(20,15,10,.30),
    0 4px 18px rgba(20,15,10,.07);
  animation: ac-login-in .5s cubic-bezier(.19,1,.22,1) both;
  overflow: hidden;
}
/* Chap-yuqori burchakdagi qattiq aksent tab — o'rtadagi xira chiziq o'rniga
   (2026-08-09 versiyasi) endi kartaning o'zi "belgilangan" hissini beradi,
   asimmetrik joylashuv bilan mos keladi (markaziy simmetriya endi shart
   emas). */
.ac-login-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 3px;
  border-radius: 0 0 3px 0; background: var(--primary);
}
:root[data-theme="dark"] .ac-login-card {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
    0 24px 60px -18px rgba(0,0,0,.6),
    0 4px 18px rgba(0,0,0,.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ac-login-card {
    box-shadow:
      0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
      0 24px 60px -18px rgba(0,0,0,.6),
      0 4px 18px rgba(0,0,0,.3);
  }
}
@keyframes ac-login-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
/* Eyebrow — endi logotipning O'ZI shu qatorda, kichik nishon sifatida
   (58px markaziy doiradan 22px yordamchi belgiga tushirildi — "kripto-token"
   hissi shu bilan yo'qoladi, brend hozirligi saqlanadi). Matn chapga
   tekislangan (markazlashgan emas) — kartaning boshqa qismi ham chap
   tekislangan, "shablon markaziy forma" ko'rinishidan chiqish uchun. */
.ac-login-eyebrow {
  display: flex; align-items: center; gap: 9px; margin-bottom: 20px;
}
.ac-login-mark {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.ac-login-eyebrow span {
  font-family: var(--login-display); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
/* Sarlavha endi katta ikki qatorli Space Grotesk matn — logotip o'rniga
   BOSH e'tibor markazi shu (landing hero'sining hbh-hero-title bilan bir
   xil tipografik og'irlik, faqat login-o'lchamiga moslashtirilgan). */
.ac-login-title {
  font-family: var(--login-display); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 38px); line-height: 1.04; letter-spacing: -.03em;
  color: var(--text); margin: 0 0 6px;
}
.ac-login-sub { color: var(--text-2); font-size: 14px; font-weight: 500; margin: 0 0 var(--sp-6); }

/* ── Field primitivi — quti (.ac-input) o'rniga chiziqli (underline) qator.
   Boshqa sahifalardagi umumiy .ac-input bu yerda ATAYLAB ishlatilmaydi —
   login ekrani endi o'z field-tilini oladi (label + underline qator). ── */
.ac-field { margin-bottom: 18px; }
.ac-field-label {
  display: block; margin-bottom: 8px; font-family: var(--login-display);
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3);
}
.ac-field-row {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding-bottom: 9px; border-bottom: 1.5px solid color-mix(in srgb, var(--text) 15%, transparent);
  transition: border-color var(--dur) var(--ease);
}
.ac-field-row:focus-within { border-color: var(--primary); }
/* +998 prefiks endi input bilan BITTA chiziqni baham ko'radi (ichki
   ajratuvchi chiziq bilan) — ikki mos kelmagan quti yopishtirilgan emas. */
.ac-field-prefix { flex: none; font-family: var(--login-display); font-weight: 600; font-size: 16px; color: var(--text-2); }
.ac-field-divider { flex: none; width: 1px; height: 16px; background: color-mix(in srgb, var(--text) 18%, transparent); }
.ac-field-input {
  flex: 1; min-width: 0; height: 26px; padding: 0;
  background: none; border: none; outline: none;
  font-family: var(--login-display); font-size: 16px; font-weight: 500; color: var(--text);
}
.ac-field-input::placeholder { color: var(--text-3); font-weight: 400; font-family: inherit; }
.ac-field-eye {
  flex: none; display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 2px; color: var(--text-3); cursor: pointer;
  transition: color .15s var(--ease);
}
.ac-field-eye:hover { color: var(--text); }
/* Brauzer avtomatik-to'ldirish (Chrome) — sariq fon uslubni butunlay
   bosib ketardi, buzilgandek ko'rinardi. --bg/--text orqali ikkala
   mavzuda ham to'g'ri ishlaydi (alohida dark-mode qoidasi shart emas,
   tokenlar allaqachon mavzuga qarab almashadi). */
.ac-login .ac-field-input:-webkit-autofill,
.ac-login .ac-field-input:-webkit-autofill:hover,
.ac-login .ac-field-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Tugmalar — endi to'liq pill (landing'ning hbh-btn-primary bilan bir
   xil shakl tili), 11px qutili radius o'rniga. ── */
.ac-login .ac-btn {
  border-radius: var(--radius-full); text-transform: none; letter-spacing: -.005em;
  font-weight: 700; font-size: 14.5px;
  background: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 20px -8px color-mix(in srgb, var(--primary) 70%, transparent);
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.ac-login .ac-btn:hover { filter: brightness(1.05); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 24px -8px color-mix(in srgb, var(--primary) 75%, transparent); }
.ac-login .ac-btn:active { transform: scale(.985); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ac-login .ac-btn[disabled] { box-shadow: none; }
.ac-login .ac-btn-lg { min-height: 48px; font-size: 15px; }
.ac-login .ac-btn-ghost {
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: none; border-radius: var(--radius-full); font-weight: 600;
}
.ac-login .ac-btn-ghost:hover { background: var(--bg-2); filter: none; }
.ac-login .ac-btn-ghost:active { transform: scale(.985); box-shadow: none; }
.ac-login .ac-btn-sm {
  background: transparent; border: none; box-shadow: none;
  color: var(--text-2); font-weight: 600; font-size: 13px;
  min-height: auto; padding: 6px 4px;
}
.ac-login .ac-btn-sm:hover { color: var(--text); background: transparent; }
.ac-login .ac-btn-sm:active { transform: none; }

/* Login usuli tanlovi (telefon/email) — macOS segmented control uslubi,
   sirpanadigan "thumb" (JS faqat .ac-seg-email klassini almashtiradi,
   S.loginMethod holatiga qarab — login.js::renderMain). */
.ac-seg { position: relative; display: flex; background: color-mix(in srgb, var(--text) 6%, var(--bg-2)); border-radius: 12px; padding: 3px; margin-bottom: var(--sp-5); }
.ac-seg-thumb {
  position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px);
  background: var(--bg); border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 1px 6px rgba(0,0,0,.06);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
}
.ac-seg.ac-seg-email .ac-seg-thumb { transform: translateX(100%); }
.ac-seg-btn {
  position: relative; z-index: 1; flex: 1; border: none; background: transparent;
  color: var(--text-3); font-weight: 600; font-size: 13px;
  padding: 8px 0; border-radius: 9px; cursor: pointer; transition: color .2s var(--ease);
}
.ac-seg-btn.active { color: var(--text); }

/* OTP boxes — login ekrani ichida bo'lganda Space Grotesk raqamlar bilan
   (login-display), boshqa yerda (agar OTP boshqa oqimda ishlatilsa) o'zining
   asl font-family'siga tushadi (bu qoida `.ac-login` ostida qamrab olinmagan,
   chunki .ac-otp-box login sahifasidan tashqarida ishlatilmaydi — grep
   bilan tekshirilgan). */
.ac-otp { display: flex; gap: var(--sp-2); justify-content: center; }
.ac-otp-box {
  width: 42px; height: 52px; text-align: center; font-size: 22px; font-weight: 700;
  font-family: 'Space Grotesk', inherit;
  background: color-mix(in srgb, var(--bg-2) 65%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--text) 13%, transparent);
  border-radius: 12px; color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform .14s var(--bounce);
}
.ac-otp-box:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--primary) 16%, transparent); transform: none; }
.ac-otp-box.filled { border-color: var(--primary); }

.ac-divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-3); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: normal; margin: var(--sp-5) 0; }
.ac-divider::before, .ac-divider::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 2px; }

/* ═══════════════ DASHBOARD ═══════════════
   2026-08-02 qayta qurish: takroriy streak/XP/level 3-kartali qator olib
   tashlandi (bir xil ma'lumot /hrm/ launcher'ning "Akademiya" plitkasida
   bir bosishda bor). O'rniga: ac-dash-head (salom + daraja progressi),
   ac-quicknav (vositalar paneli), ac-dash-layout (>=900px'da 2-ustun:
   asosiy kontent + reyting/bildirishnoma yon paneli). ═══════════════ */

/* Salom bloki + ingichka "keyingi darajagacha" progress qatori */
.ac-dash-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.ac-levelbar {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-2); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px var(--sp-4);
  animation: ac-popin .4s var(--bounce) backwards;
}
.ac-levelbar-badge {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; color: var(--on-primary);
  background: linear-gradient(150deg, var(--primary), var(--primary-light));
  box-shadow: 0 3px 0 var(--primary-edge);
}
.ac-levelbar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ac-levelbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.ac-levelbar-name { font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-levelbar-sub { font-size: 11px; color: var(--text-2); font-weight: 700; white-space: nowrap; flex: none; }

/* Tezkor vositalar paneli — ghost tugmalar o'rniga chinakam ikonka-panel */
.ac-quicknav { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--sp-2); }
.ac-qn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px var(--sp-2); background: var(--bg); border: 2px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 3px 0 var(--border);
  color: var(--text-2); font-weight: 800; font-size: 11.5px; text-align: center;
  transition: transform .12s var(--bounce), box-shadow .12s ease, color .15s ease, border-color .15s ease;
}
.ac-qn-ic { font-size: 22px; line-height: 1; }
.ac-qn-item:hover { color: var(--text); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); transform: translateY(-2px); }
.ac-qn-item:active { transform: translateY(2px); box-shadow: 0 0 0 var(--border); }

/* Asosiy CTA — "Bugungi dars", salomdan keyin darhol (eng muhim harakat) */
.ac-today-card {
  background: linear-gradient(150deg, var(--primary), var(--primary-light));
  color: var(--on-primary); border-radius: var(--radius-xl); padding: var(--sp-5);
  box-shadow: 0 5px 0 var(--primary-edge); overflow: hidden; position: relative;
}
/* dekorativ pufakchalar — o'yinbop, lekin matnga xalaqit bermaydi */
.ac-today-card::before, .ac-today-card::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.10); pointer-events: none; }
.ac-today-card::before { width: 210px; height: 210px; top: -100px; right: -60px; }
.ac-today-card::after  { width: 130px; height: 130px; bottom: -60px; right: 30px; background: rgba(255,255,255,.07); }
.ac-today-card > * { position: relative; z-index: 1; }
.ac-today-card .ac-today-eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .88; }
.ac-today-card .ac-today-title { font-size: 22px; font-weight: 900; margin: 4px 0 2px; letter-spacing: -.01em; }
.ac-today-card .ac-today-sub { font-size: 14px; opacity: .92; font-weight: 700; }
.ac-today-card .ac-today-meta { font-size: 13px; opacity: .92; font-weight: 700; margin-top: 6px; }
.ac-today-card .ac-btn {
  background: #fff; color: var(--primary); margin-top: var(--sp-4);
  box-shadow: 0 4px 0 rgba(0,0,0,.20);
}
.ac-today-card .ac-btn:hover { filter: brightness(1); background: #fff; }
.ac-today-card .ac-btn:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,.20); }

.ac-iconbtn-share {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg-2); color: var(--text-2); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background-color .15s ease;
}
.ac-iconbtn-share:hover { background: var(--primary-bg); color: var(--primary); }
.ac-iconbtn-share:active { transform: scale(.92); }

/* Keng ekranda: asosiy kontent (lavozimlar) + yon panel (reyting/bildirishnoma).
   Mobil (default) — bitta ustun, tabiiy tartibda pastma-past. */
.ac-dash-layout { display: flex; flex-direction: column; gap: var(--sp-4); }
.ac-dash-main, .ac-dash-side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

.ac-h-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-2) 0 2px; }
.ac-count-badge {
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 900;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center; flex: none;
}

.ac-poscard { display: flex; align-items: center; gap: var(--sp-3); }
.ac-poscard-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 15px;
  background: linear-gradient(150deg, var(--pos-accent, var(--primary)), color-mix(in srgb, var(--pos-accent, var(--primary)) 45%, white));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--pos-accent, var(--primary)) 55%, #000);
}
.ac-poscard-body { flex: 1; min-width: 0; }
.ac-poscard-name { font-weight: 800; font-size: 16px; }
.ac-poscard-meta { font-size: 12px; color: var(--text-2); margin-top: 2px; font-weight: 700; }
.ac-poscard-arrow { color: var(--text-3); flex: none; }
.ac-poscard-foot { margin-top: 12px; }

/* Yutuqlar (achievements) — asosiy ustunda, lavozimlar ostida (bo'lsa) */
.ac-achv-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.ac-achv-badge {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 86px; padding: var(--sp-3) var(--sp-2);
  background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-lg);
  text-align: center; animation: ac-popin .4s var(--bounce) backwards;
}
.ac-achv-ic { font-size: 28px; line-height: 1; }
.ac-achv-name { font-size: 10.5px; font-weight: 800; color: var(--text-2); line-height: 1.25; }
.ac-progress-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: 10px; }
.ac-progress-row .ac-progress { flex: 1; }
.ac-progress-pct { font-size: 12px; font-weight: 900; color: var(--success-d); min-width: 36px; text-align: right; }

/* mini leaderboard row */
.ac-lb-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 0; }
.ac-lb-rank { width: 26px; text-align: center; font-weight: 900; color: var(--text-2); flex: none; font-size: 15px; }
.ac-lb-rank.top { font-size: 18px; }
.ac-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, var(--primary), var(--primary-light));
  color: var(--on-primary); display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; overflow: hidden;
}
.ac-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ac-lb-name { flex: 1; font-weight: 800; font-size: 14px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-lb-xp { font-weight: 900; font-size: 14px; color: var(--success-d); }
.ac-lb-me { background: var(--primary-bg); border-radius: var(--radius-md); padding-left: 10px; padding-right: 10px; }

/* notification row */
.ac-notif { display: flex; gap: var(--sp-3); padding: 11px 0; border-bottom: 2px solid var(--border); }
.ac-notif:last-child { border-bottom: none; }
.ac-notif-ic { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--primary-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; font-size: 18px; position: relative; }
.ac-notif-body { flex: 1; min-width: 0; }
.ac-notif-title { font-weight: 800; font-size: 14px; }
.ac-notif-msg {
  font-size: 13px; color: var(--text-2); font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ac-notif-time { font-size: 11px; color: var(--text-3); font-weight: 700; }
.ac-notif-unread .ac-notif-ic::after {
  content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--bg);
}
.ac-notif-unread .ac-notif-title { color: var(--text); }

/* ═══════════════ KURSLAR / POSITIONS (#/positions) ═══════════════
   2026-08-07 ROUND 2 (buyurtmachi v2'ni RAD ETDI — "hali ham xuddi eskisi,
   faqat rangi/kartasi o'zgargan"; to'liq rationale positions.js fayl
   boshida). Eski bo'lim-<select> + akkordeon/uzluksiz-oqim tuzilmasi
   (.ac-toolbar / .ac-select* / .ac-course-section* / .ac-acc-* / .ac-course-
   sections / .ac-course-block) BUTUNLAY olib tashlandi — bo'lim endi
   <select> qiymati emas, HAQIQIY marshrut segmenti (#/positions/:slug).
   Qisqacha yangi tuzilma:
     • Landing (#/positions) — qidiruv (.ac-search-hero) + bo'lim
       plitkalari (.ac-dept-grid/.ac-dept-tile) + (bo'lsa) "davom eting"
       tokchasi (.ac-continue-row).
     • Drill-in (#/positions/:slug) — orqaga tugmasi (.ac-dept-back) +
       rangli hero (.ac-dept-hero) + shu yerga ko'chgan daraja/holat
       filtrlari (.ac-chiprow/.ac-fchip — o'zgarmagan, faqat joyi
       ko'chgan) + kurslar grid (.ac-poslist-grid, o'zgarmagan).
   .ac-search / .ac-hint / .ac-chiprow* / .ac-fchip / .ac-course-controls
   o'zgarishsiz qoladi (funksionallik teginilmagan, faqat qayerda render
   qilinishi o'zgardi — endi drill-in/qidiruv natijalarida, landing
   plitkalarida emas).

   2026-08-09 QO'SHIMCHA TUZATISH (jiddiy, tasodifiy topilgan bug): yuqoridagi
   izohning aynan shu joyida ILGARI ".ac-select" so'zidan keyin bo'shliqsiz
   yulduzcha-va-qiyachiziq ketma-ketligi (ro'yxat ajratuvchisi sifatida)
   yozilgan edi. CSS'da yulduzcha darhol qiyachiziq bilan davom etsa, bu
   ketma-ketlik haqiqiy izoh-yopish belgisi bilan bir xil ko'rinadi —
   shuning uchun ushbu BUTUN izoh bloki chinakam niyatidan CHO'ZILGANIDAN
   KO'RA ANCHA OLDINROQ (atigi ~300 belgidan keyin) yopilib qolgan, qolgan
   matn (o'zbekcha tavsif, CSS emas) keyingi ochiluvchi jingalak qavsgacha
   (aynan pastdagi .ac-search'ning o'zi) yaroqsiz selector sifatida
   "yutilgan" — natijada PASTDAGI .ac-search{} qoidasi (display:flex/
   background/border/padding/height) BROWSER TOMONIDAN BUTUNLAY TASHLAB
   YUBORILGAN edi (CSSOM'da umuman yo'q edi — browser DevTools'da yashirin,
   konsolda xatosiz)! 2026-08-07'dan buyon jonli production'da shu tarzda
   buzuq turgan — qidiruv qutisi shu sababli display:flex/border/background/
   padding olmagan, faqat ichidagi svg+input elementlarining o'zi inline-
   level bo'lgani uchun tasodifan yonma-yon ko'rinardi (butunlay bo'sh/
   ko'rinmas emas edi, lekin chinakam buzuq — "×" tozalash tugmasi masalan
   pastki qatorga tushib qolardi, chunki u display:flex, ya'ni block-darajali).
   Aynan shu tasodifiy qidiruv-qutisi buzilishi haqidagi buyurtmachi xabari
   (bu sessiyaning Muammo-1'i) ORQALI topildi — CSS parserning butun faylini
   qo'lda simulyatsiya qilib (Playwright + izolyatsiyalangan style-teg testi
   bilan tasdiqlangan). TUZATISH: yuqorida yulduzcha bilan qiyachiziq orasiga
   bo'shliq qo'yildi, tasodifiy izoh-yopish endi hosil bo'lmaydi. SABOQ: uzun
   ko'p-qatorli izohlarda CSS/JS class-nom ro'yxatlarini yulduzcha+qiyachiziq
   ketma-ketligi bilan yozishdan saqlaning — vergul yoki bo'shliq bilan
   ajrating (va bu izohning o'zida ham xuddi shu ketma-ketlikni tirnoq
   ichida keltirishdan saqlaning — aynan shu xato takrorlanib qoladi). */
.ac-search {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--bg-2); border: 2px solid var(--border);
  border-radius: var(--radius-md); padding: 0 var(--sp-4); height: 52px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ac-search:focus-within { border-color: var(--info); background: var(--bg); }
.ac-search input { flex: 1; background: none; border: none; font-size: 16px; font-weight: 700; }
.ac-search svg { color: var(--text-3); flex: none; }

/* 2026-08-09: qidiruv maydonining "×" tozalash tugmasi (#ac-pos-q-clear) —
   avval markup/JS (positions.js::searchBarHtml) qo'shilgan, lekin CSS
   yozilmagan edi (grep bilan tasdiqlangan bo'shliq) — matn kiritilishi
   bilan display:none dan chiqib, umuman uslubsiz/tekis holatda ko'rinardi.
   Qidiruv ikonkasi (.ac-search svg, yuqorida) bilan bir xil o'lcham/rang
   tili, lekin bosiladigan doira-tugma sifatida (hover/focus/active bilan). */
.ac-search-clear {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--text-3); background: transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s var(--bounce);
}
.ac-search-clear svg { color: inherit; }
.ac-search-clear:hover { background: var(--bg-3); color: var(--text); }
.ac-search-clear:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
.ac-search-clear:active { transform: scale(.86); }

/* Landing'dagi qidiruv — bo'lim-plitka bosqichini CHETLAB o'tish yo'li,
   shuning uchun oddiy .ac-search'dan bir oz kattaroq/markaziy urg'u. */
.ac-search-hero { padding: var(--sp-3); }
.ac-search-hero .ac-search { height: 56px; }

.ac-hint { font-size: 12.5px; color: var(--text-2); font-weight: 700; }

/* Daraja/holat filtr-chiplari — endi DRILL-IN va QIDIRUV natijalarida
   ishlatiladi (landing plitkalarida emas — pastga qarang). */
.ac-chiprow { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.ac-chiprow-label { font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-right: 1px; }
.ac-fchip {
  padding: 7px 13px; border-radius: var(--radius-full); border: 2px solid var(--border);
  background: var(--bg-2); color: var(--text-2); font-weight: 800; font-size: 12.5px; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .12s var(--bounce);
}
.ac-fchip:hover { background: var(--bg-3); }
.ac-fchip:active { transform: scale(.95); }
.ac-fchip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Drill-in'dagi boshqaruv paneli — chiplar + natija-soni bitta .ac-card
   panelida (qidiruv natijalarida esa chiplar sarlavha qatori ostida
   to'g'ridan-to'g'ri, panelsiz — positions.js::searchResultsHtml). */
.ac-course-controls { display: flex; flex-direction: column; gap: var(--sp-3); }

/* 2026-08-09 (buyurtmachi so'rovi — bo'lim-ichi sahifa "yopishib qolgan"
   tuyulardi): #ac-drill-body ichiga positions.js::drawDrillBody() TO'G'RIDAN-
   TO'G'RI ikkita blokni ("controls" chiplar paneli + karta grid'i yoki
   bo'sh-holat) qatorlashtirib yozadi — bular oddiy pastma-past <div>lar,
   orasida hech qanday gap/margin yo'q edi, shuning uchun chegarali chip-
   paneli darhol kartalar qatoriga "yopishib" turardi (hero'dan #ac-drill-
   body'gacha bo'lgan tashqi bo'shliq .ac-screen'ning o'z flex-gap'i — o'sha
   yaxshi edi, muammo FAQAT shu konteyner ICHIDA edi). Bo'sh joy .ac-screen
   bilan bir xil ritmda (var(--sp-4)) — landing (#ac-pos-body) sahifasidagi
   sarlavha-qator/grid o'tishlari bilan bir xil tashqi ritm. */
#ac-drill-body { display: flex; flex-direction: column; gap: var(--sp-4); }

/* 2026-08-09: Landing/qidiruv ekrani (#ac-pos-body) — departament konteksti
   YO'Q, shuning uchun positions.js::render() Academy.resetPrimary() ni
   chaqiradi, bu esa --primary'ni tokens.css'dagi ESKI binafsha standartiga
   (#6B4C6B) qaytaradi. Natija: qidiruv chiplarining "active" holati
   (.ac-fchip.active — yuqorida) endi teal shell (--hb-acc) yoniga binafsha
   bo'lib chiqib, ko'rinishi buziladi (foydalanuvchi skrinshot bilan
   ko'rsatdi). Bu FAQAT shu konteynerga — kim aslida hech qanday departament
   ranggga ega emas, "Barchasi" kabi umumiy filtr chiplariga — tegishli;
   drill-in (#ac-drill-body, Academy.setPrimary(dept.color) chaqirilgan,
   HAQIQIY departament rangi) TEGILMAGAN qoladi. Naqsh admin.css'dagi
   .acadm/.acadm-sheet remapi bilan bir xil — global resetPrimary()/
   DEFAULT_PRIMARY o'zgarmaydi (uni boshqa bir nechta ekran ham chaqiradi). */
#ac-pos-body {
  --primary: var(--hb-acc);
  --primary-light: color-mix(in srgb, var(--hb-acc) 70%, white);
  --primary-bg: rgba(var(--hb-acc-rgb), .12);
  --on-primary: var(--hb-acc-ink);
}

/* ── Davom eting — faol (biriktirilgan, tugallanmagan) kurslar gorizontal
   qatori, landing'da plitkalardan OLDIN (bo'lsagina ko'rinadi). Netflix/
   Duolingo "continue" tokchasiga o'xshash tezkor kirish — BARCHA 41 ta
   kursni emas, faqat faollarini ko'rsatadi, shuning uchun "karta devori"
   muammosini qaytarmaydi. ── */
.ac-continue-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.ac-continue-row {
  display: flex; gap: var(--sp-3); overflow-x: auto;
  margin: 0 calc(-1 * var(--sp-4)); padding: 2px var(--sp-4) 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.ac-continue-row .ac-course-card { flex: 0 0 260px; scroll-snap-align: start; max-width: none; }

/* ── Bo'lim plitkalari (landing, #/positions) — kurs kartasidan ATAYLAB
   kattaroq/og'irroq: to'liq-fon gradient (band emas, butun karta bo'ylab),
   yumaloq-KVADRAT (radius-lg) ikonka-belgi — kurs avatarining DOIRA
   shaklidan ataylab farqli, "bu boshqa turdagi obyekt" degan vizual signal
   — va kattaroq sarlavha shrifti. ── */
.ac-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: var(--sp-4); }
.ac-dept-tile {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 176px; padding: var(--sp-5);
  background-image: linear-gradient(160deg,
    color-mix(in srgb, var(--pos-accent, var(--primary)) 16%, var(--bg)),
    var(--bg) 65%);
  border-color: color-mix(in srgb, var(--pos-accent, var(--primary)) 32%, var(--border));
}
.ac-dept-tile::after {
  content: ''; position: absolute; top: -54px; right: -54px; z-index: 0;
  width: 150px; height: 150px; border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--pos-accent, var(--primary)) 12%, transparent);
}
.ac-dept-tile > * { position: relative; z-index: 1; }
.ac-dept-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.ac-dept-tile-icon {
  width: 56px; height: 56px; border-radius: var(--radius-lg); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  background: linear-gradient(150deg, var(--pos-accent, var(--primary)), color-mix(in srgb, var(--pos-accent, var(--primary)) 45%, white));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--pos-accent, var(--primary)) 55%, #000);
}
.ac-dept-tile-count { font-size: 12px; font-weight: 800; color: var(--text-2); white-space: nowrap; margin-top: 4px; }
.ac-dept-tile-name { font-size: 19px; font-weight: 900; letter-spacing: -.01em; line-height: 1.25; }
.ac-dept-tile-stat { font-size: 11.5px; font-weight: 800; color: var(--text-2); }
.ac-dept-tile-cta {
  margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 800;
  color: var(--pos-accent, var(--primary));
}

/* ── Drill-in (#/positions/:slug) — bitta bo'lim ichidagi kurslar ekrani.
   Orqaga tugmasi + rangli "hero" (plitkaning o'zi kattalashgandek
   tuyulsin, davomiylik hissi uchun). ── */
.ac-dept-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--radius-full); border: 2px solid var(--border);
  background: var(--bg); color: var(--text-2); font-weight: 800; font-size: 13px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s var(--bounce);
}
.ac-dept-back:hover { background: var(--bg-2); color: var(--text); }
.ac-dept-back:active { transform: scale(.95); }
.ac-dept-hero {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: var(--radius-lg);
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--pos-accent, var(--primary)) 20%, var(--bg)),
    color-mix(in srgb, var(--pos-accent, var(--primary)) 6%, var(--bg)));
  border: 2px solid color-mix(in srgb, var(--pos-accent, var(--primary)) 30%, var(--border));
}
.ac-dept-hero-icon {
  width: 60px; height: 60px; border-radius: var(--radius-lg); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: linear-gradient(150deg, var(--pos-accent, var(--primary)), color-mix(in srgb, var(--pos-accent, var(--primary)) 45%, white));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--pos-accent, var(--primary)) 55%, #000);
}
.ac-dept-hero-name { font-size: 21px; font-weight: 900; letter-spacing: -.01em; }
.ac-dept-hero-sub { font-size: 13px; color: var(--text-2); font-weight: 700; margin-top: 2px; }

/* Kurs kartasi — 2026-08-07 qayta ko'rildi: ingichka 4px chiziq o'rniga
   to'liq rangli "band" (.ac-course-band, bo'lim rangida yumshoq gradient)
   avatarni o'z ichiga oladi, nom/meta/chip pastdagi .ac-course-card-body'da —
   qator-uslubidagi "ro'yxat elementi"dan ko'ra katalog-do'kon "muqovali
   karta"siga o'xshaydi. .ac-card bazaviy padding'i shu yerda 0'ga
   qaytariladi (band chekka-dan-chekkagacha chizilishi uchun), body o'z
   padding'ini oladi. FAQAT .ac-course-card ichida ishlaydi — dashboard.js'ning
   o'z (band'siz, qator-uslub) mini kartasi bazaviy .ac-poscard-avatar'dan
   foydalanadi va bu yerdagi qoidalar bilan TEGILMAYDI. */
/* 2026-08-07: max-width bosim — bo'lim/filtr natijasida bitta-yagona karta
   qolsa (masalan 1 ta kursli bo'lim), auto-fit grid shu yagona kartani
   BUTUN qator kengligiga cho'zib yuborardi (boshqa 3-ustunli bo'limlar
   yonida g'alati, nomutanosib ko'rinardi — screenshot orqali topildi).
   420px eski Kanban-ustun max-width'i bilan bir xil — yangi son o'ylab
   topilmagan. */
.ac-course-card { position: relative; overflow: hidden; padding: 0; max-width: 420px; }
.ac-course-band {
  position: relative;
  padding: var(--sp-4) var(--sp-4) 14px;
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--pos-accent, var(--primary)) 24%, var(--bg)),
      color-mix(in srgb, var(--pos-accent, var(--primary)) 7%, var(--bg)));
}
.ac-course-band .ac-poscard-avatar { width: 52px; height: 52px; font-size: 17px; }
.ac-course-card-body { padding: 14px var(--sp-4) var(--sp-4); }
.ac-course-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.ac-course-title-row .ac-poscard-name { flex: 1; min-width: 0; }
.ac-course-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* 2026-08-02: grayscale(.3) olib tashlandi — barcha "biriktirilmagan"
   kartalar (super_admin uchun katalogning katta qismi) bir xil kul rang
   ko'rinardi, bo'lim rangidan qat'i nazar (buyurtmachi topgan asosiy
   sabab). Rang endi to'liq ko'rinadi, faqat ozgina xiralashtiriladi. */
.ac-poscard-avatar-muted { opacity: .85; }
.ac-course-foot-muted { margin-top: 10px; font-size: 11.5px; font-weight: 800; color: var(--text-3); }

/* Kurs preview (#/position/:id) — 2026-08-02 v3 qayta qurish: uchta harakat
   holati (mening/admin-nazorat/biriktirilmagan) endi bir xil quti EMAS.
   "Mening" holati mavjud .ac-card/.ac-progress-row/.ac-btn primitivlaridan
   quriladi (yangi CSS shart emas). "Biriktirilmagan oddiy xodim" holati
   mavjud .ac-empty naqshidan (natija topilmaganda ham ishlatiladi — ilova
   bo'ylab tanish "passiv/o'lik-uchun" tili). Faqat ADMIN NAZORAT holati
   yangi — u HAQIQIY bosiladigan harakat, lekin haqiqiy biriktirishdan farqli
   ekani darhol ko'rinishi kerak, shuning uchun alohida "info" rangli,
   chiziqli-chegarali quti (positions.js::drawPreview). */
.ac-oversight-card {
  border: 2px dashed color-mix(in srgb, var(--info) 45%, var(--border));
  background: var(--info-bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.ac-oversight-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
  color: var(--info-edge);
}
.ac-oversight-text { color: var(--text-2); font-size: 13px; line-height: 1.55; margin-top: 6px; font-weight: 700; }
.ac-oversight-card .ac-btn-ghost {
  border-color: color-mix(in srgb, var(--info) 55%, var(--border));
  color: var(--info-edge);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--info) 45%, var(--border));
}
.ac-oversight-card .ac-btn-ghost:hover { background: color-mix(in srgb, var(--info) 12%, var(--bg)); }
.ac-oversight-card .ac-btn-ghost:active { box-shadow: 0 0 0 color-mix(in srgb, var(--info) 45%, var(--border)); }

/* 2026-08-02 v2 — the bespoke "KURS NAZORAT/AUDIT KO'RINISHI" single-page
   preview (#/course-preview/:id, .ac-cp-* block/day/question chrome) that
   used to live here was rejected by the customer in favor of routing
   admin oversight through the REAL #/routemap → #/lesson → #/quiz screens
   (routemap.js/lesson.js/quiz.js "preview mode", see those files) — so all
   .ac-cp-* rules were removed as dead code. */

/* ═══════════════ ROUTE MAP (Duolingo vertical path) ═══════════════ */
.ac-routemap { position: relative; padding: var(--sp-6) 0 var(--sp-12); }
.ac-rm-head { text-align: center; margin-bottom: var(--sp-6); }
.ac-rm-dept { font-size: 13px; font-weight: 900; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; }
.ac-rm-title { font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.ac-rm-sub { font-size: 14px; color: var(--text-2); font-weight: 700; }

.ac-rm-path { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; }
.ac-rm-node-wrap {
  position: relative; display: flex; justify-content: center; width: 100%;
  padding: 18px 0 72px; z-index: 1;
  animation: ac-nodepop .45s var(--bounce) backwards;
}
/* Duolingo zigzag */
.ac-rm-node-wrap:nth-child(4n+1) { transform: translateX(0); }
.ac-rm-node-wrap:nth-child(4n+2) { transform: translateX(64px); }
.ac-rm-node-wrap:nth-child(4n+3) { transform: translateX(0); }
.ac-rm-node-wrap:nth-child(4n)   { transform: translateX(-64px); }

/* Connecting line drawn behind nodes */
.ac-rm-line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 8px; transform: translateX(-50%);
  background: var(--bg-3); border-radius: var(--radius-full); z-index: 0;
}
.ac-rm-line-fill {
  position: absolute; left: 0; top: 0; width: 100%; border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--primary), var(--primary-light));
  transition: height .6s var(--ease);
}

.ac-node {
  width: 72px; height: 72px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 900; cursor: pointer;
  transition: transform .16s var(--bounce), box-shadow var(--dur) var(--ease), filter .15s var(--ease);
}
.ac-node:hover { transform: scale(1.08); animation: ac-wiggle .4s ease-in-out; }
.ac-node-label { position: absolute; top: 100%; margin-top: 10px; left: 50%; transform: translateX(-50%); width: 160px;
  text-align: center; font-size: 11px; font-weight: 700; color: var(--text-2); line-height: 1.3; white-space: normal; }

.ac-node-locked {
  background: var(--bg-3); color: var(--text-3);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--bg-3) 70%, #000);
}
.ac-node-locked:hover { transform: none; animation: none; filter: none; }
.ac-node-open {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--primary) 58%, #000);
  animation: ac-nodebounce 1.8s var(--bounce) infinite;
}
.ac-node-open:hover { transform: scale(1.08); filter: brightness(1.05); }
/* "BOSHLASH" popover — joriy tugun ustida */
.ac-node-open::before {
  content: 'BOSHLASH';
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  background: var(--bg); color: var(--primary);
  border: 2px solid var(--primary);
  font-size: 11px; font-weight: 900; letter-spacing: .05em;
  padding: 5px 12px; border-radius: var(--radius-full); white-space: nowrap;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--primary) 30%, var(--border));
  animation: ac-bob 1.5s ease-in-out infinite;
}
.ac-node-open::after {
  content: ''; position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--bg);
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
}
.ac-node-completed {
  background: var(--success); color: #fff;
  box-shadow: 0 6px 0 var(--success-edge);
}
.ac-node-perfect {
  background: var(--gold); color: #7a5c00;
  box-shadow: 0 6px 0 var(--gold-edge);
}
.ac-node-exhausted {
  background: var(--warning); color: #4a2c00;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--warning) 65%, #000);
}

/* 2026-08-09: admin kursga yangi kun qo'shsa (mavjud kunlar day_number
   bo'yicha siljiydi), shu kun ustiga kichik "🆕" belgisi — xodimga "bu kun
   yangi qo'shilgan, oldingi tartib emas" degan tez signal. Faqat vizual —
   gating/unlock holatiga tegmaydi (route_map_state added_after_start). */
.ac-node-newdot {
  position: absolute; top: -4px; right: -4px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--info); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; box-shadow: 0 2px 0 var(--info-edge);
  z-index: 2;
}

/* Legend */
.ac-rm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); padding: var(--sp-4); background: var(--bg-2); border: 2px solid var(--border); border-radius: var(--radius-lg); }
.ac-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); font-weight: 800; }
.ac-legend-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; }

/* ═══════════════ RESPONSIVE (desktop) ═══════════════ */
@media (min-width: 900px) {
  .ac-topbar { left: 240px; }
  .ac-bottomnav { display: none; }
  .ac-sidebar {
    display: flex; flex-direction: column; gap: var(--sp-2);
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 60;
    padding: var(--sp-5) var(--sp-3);
    background: var(--bg); border-right: 2px solid var(--border);
  }
  .ac-main { margin-left: 240px; padding-bottom: var(--sp-8); }
  body.ac-nochrome .ac-main { margin-left: 0; }

  /* Dashboard — asosiy kontent + reyting/bildirishnoma yon paneli yonma-yon */
  .ac-dash-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: var(--sp-5); }
  .ac-dash-side { position: sticky; top: calc(58px + var(--sp-5)); }
  .ac-dash-head { flex-direction: row; align-items: center; justify-content: space-between; }
  .ac-dash-head .ac-levelbar { max-width: 380px; }

  /* Kurslar (#/positions) — round 2: bo'lim-<select> yo'q endi (yuqoridagi
     .ac-dept-grid/.ac-poslist-grid'ning o'zidagi auto-fit/minmax keng
     ekranda tabiiy ravishda bir necha ustunga yoyiladi), shuning uchun bu
     yerda desktopga xos maxsus qoida shart emas. */
}

/* ═══════════════ KUTUBXONA (#/library, 2026-08-02) ═══════════════
   Turkum tabs + karta grid (.ac-poslist-grid qayta ishlatiladi) + matn-only
   yozuv uchun modal ustki qismi (o'zi .ac-backdrop/.ac-sheet'ni qayta
   ishlatadi, faqat ichki tarkib klasslari shu yerda). */
.ac-libtabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-libtab {
  padding: 9px 18px; border-radius: var(--radius-full); border: 2px solid var(--border);
  background: var(--bg-2); color: var(--text-2); font-weight: 800; font-size: 13px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform .12s var(--bounce);
}
.ac-libtab:hover { background: var(--bg-3); }
.ac-libtab:active { transform: scale(.95); }
.ac-libtab.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.ac-libcard { cursor: pointer; }
.ac-libcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.ac-libcard-ic {
  width: 44px; height: 44px; flex: none; border-radius: var(--radius-md);
  background: var(--primary-bg); color: var(--primary); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.ac-libcard-name { font-weight: 800; font-size: 15px; margin-top: 10px; line-height: 1.35; }
.ac-libcard-meta { font-size: 12px; color: var(--text-2); font-weight: 700; margin-top: 6px; }
.ac-libcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.ac-libmodal-text { white-space: pre-wrap; line-height: 1.7; font-size: 14px; margin-top: 10px; overflow-wrap: anywhere; }
.ac-libmodal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ac-btn:active, .ac-btn-lg:active, .ac-btn-ghost:active, .ac-btn-sm:active { transform: none; }
}