/* ═══════════════════════════════════════════════════════════════
   KOMPAS LAB — kompas-ui.css (2026-10-18)
   Sayt tuzilmasi: Bosh sahifa → Lab → Modul → Dars.
   Umumiy qism: sahifalar orasidagi oʻtish (View Transitions), Lab ichidagi
   tablar, "yoʻl" (modul va dars bekatlari), dars sahifasi xromi, yakun oynasi.
   Rang va shriftlar mavjud brend tokenlaridan olinadi (--accent, --accent2 ...).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --kl-forest:#2d4a3e; --kl-forest-d:#1e3329; --kl-clay:#c4622d; --kl-gold:#c9a84c; --kl-cream:#f4f3ef;
  --kl-line:#d8cfb6; --kl-ease:cubic-bezier(.22,.8,.24,1);
  --kl-nav:62px; --kl-tabs:0px;
}
body.klb-on{--kl-top:40px;}

/* ── Sahifalar orasida oʻtish ─────────────────────────────────── */
@view-transition{navigation:auto;}
.nav,.top{view-transition-name:kl-nav;}
.klb{view-transition-name:kl-live;}
.kl-tabs a[aria-current="page"]::after{view-transition-name:kl-tab-ind;}
.kl-route-needle{view-transition-name:kl-needle;}
::view-transition-group(root){animation-duration:.34s;animation-timing-function:var(--kl-ease);}
::view-transition-old(root){animation:kl-out .2s var(--kl-ease) both;}
::view-transition-new(root){animation:kl-in .34s var(--kl-ease) both;}
html:active-view-transition-type(next)::view-transition-old(root){animation:kl-out-l .22s var(--kl-ease) both;}
html:active-view-transition-type(next)::view-transition-new(root){animation:kl-in-r .36s var(--kl-ease) both;}
html:active-view-transition-type(prev)::view-transition-old(root){animation:kl-out-r .22s var(--kl-ease) both;}
html:active-view-transition-type(prev)::view-transition-new(root){animation:kl-in-l .36s var(--kl-ease) both;}
::view-transition-group(kl-tab-ind),::view-transition-group(kl-needle){animation-duration:.42s;animation-timing-function:var(--kl-ease);}
@keyframes kl-out{to{opacity:0}}
@keyframes kl-in{from{opacity:0;transform:translateY(10px)}}
@keyframes kl-out-l{to{opacity:0;transform:translateX(-28px)}}
@keyframes kl-in-r{from{opacity:0;transform:translateX(36px)}}
@keyframes kl-out-r{to{opacity:0;transform:translateX(28px)}}
@keyframes kl-in-l{from{opacity:0;transform:translateX(-36px)}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
}

/* ── Lab tablari (Umumiy · Dastur · Moslik testi · Narxlar · Savollar) ── */
.kl-tabs{display:flex;gap:2px;margin:0 auto;align-items:center;}
.kl-tabs a{position:relative;padding:8px 12px;border-radius:9px;font-size:15px;font-weight:700;color:var(--muted,#5f7169);text-decoration:none;white-space:nowrap;transition:color .18s,background .18s;}
.kl-tabs a:hover{color:var(--kl-forest);background:rgba(45,74,62,.07);}
.kl-tabs a[aria-current="page"]{color:var(--kl-forest);}
.kl-tabs a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px;background:var(--kl-clay);}
.kl-tabbar{display:none;}
.nav .kl-sfx{display:flex;align-items:center;}
@media(max-width:1100px){
  .nav .kl-tabs{display:none;}
  .kl-tabbar{display:block;position:fixed;left:0;right:0;top:calc(var(--kl-top,0px) + var(--kl-nav));z-index:190;background:rgba(244,243,239,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border,#e2ded3);view-transition-name:kl-tabbar;}
  .kl-tabbar .kl-tabs{overflow-x:auto;scrollbar-width:none;padding:4px 12px;justify-content:flex-start;scroll-snap-type:x proximity;}
  .kl-tabbar .kl-tabs::-webkit-scrollbar{display:none;}
  .kl-tabbar .kl-tabs a{scroll-snap-align:center;padding:9px 12px;}
  body.kl-has-tabs{--kl-tabs:46px;}
  body.kl-has-tabs .hero,body.kl-has-tabs .kl-pagehead{padding-top:calc(var(--kl-nav) + var(--kl-tabs) + 34px);}
}

/* ── Ichki sahifa sarlavhasi ──────────────────────────────────── */
.kl-pagehead{padding:calc(var(--kl-nav) + 54px) 0 18px;}
.kl-pagehead .crumb,.kl-crumb{font-size:15px;color:var(--muted,#5f7169);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.kl-crumb a{color:var(--muted,#5f7169);text-decoration:none;border-bottom:1px solid transparent;}
.kl-crumb a:hover{color:var(--kl-forest);border-color:currentColor;}
.kl-crumb span[aria-hidden]{opacity:.45;}
.kl-pagehead h1{font-family:"Cambria","Caladea","Playfair Display",serif;font-weight:400;font-size:clamp(34px,4.6vw,54px);line-height:1.06;color:var(--kl-forest);letter-spacing:-.5px;max-width:20ch;}
.kl-pagehead .lead{margin-top:14px;max-width:62ch;}
.kl-pagehead + section{padding-top:28px;}
.kl-pagehead .kl-head-row{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;}
.kl-pagehead .kl-head-art{width:92px;height:92px;flex:none;}

/* ── "Yoʻl": modul va dars bekatlari ──────────────────────────── */
.kl-route{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:10px;}
.kl-route::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:repeating-linear-gradient(to bottom,var(--kl-line) 0 7px,transparent 7px 13px);}
.kl-st{position:relative;}
.kl-st > a,.kl-st > div{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 16px 12px 0;border-radius:16px;text-decoration:none;color:inherit;transition:background .2s var(--kl-ease);}
.kl-st > a:hover{background:rgba(255,254,251,.9);box-shadow:0 1px 0 var(--border,#e2ded3),0 10px 28px rgba(45,74,62,.07);}
.kl-st-n{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--surface,#fffefb);border:2px solid var(--kl-line);font-weight:800;font-size:16.5px;color:var(--kl-forest);font-variant-numeric:tabular-nums;transition:transform .25s var(--kl-ease),background .2s,border-color .2s,color .2s;}
.kl-st > a:hover .kl-st-n{transform:scale(1.06);border-color:var(--kl-forest);}
.kl-st-b{min-width:0;}
.kl-st-b b{display:block;font-size:17px;line-height:1.3;color:var(--text,#1a2e26);}
.kl-st-b small{display:block;margin-top:3px;font-size:15px;color:var(--muted,#5f7169);line-height:1.45;}
.kl-st-s{font-size:14px;font-weight:800;padding:5px 11px;border-radius:99px;white-space:nowrap;background:rgba(45,74,62,.07);color:var(--kl-forest);}
.kl-st.is-free .kl-st-n{background:var(--kl-forest);border-color:var(--kl-forest);color:#fff;}
.kl-st.is-free .kl-st-s{background:#e6f4ec;color:#1a7a4a;}
.kl-st.is-locked .kl-st-s{background:transparent;color:var(--muted,#5f7169);border:1px solid var(--border,#e2ded3);}
.kl-st.is-done .kl-st-n{background:#1a7a4a;border-color:#1a7a4a;color:#fff;}
.kl-st.is-done .kl-st-s{background:#e6f4ec;color:#1a7a4a;}
.kl-st.is-current .kl-st-n{border-color:var(--kl-clay);color:var(--kl-clay);box-shadow:0 0 0 6px rgba(196,98,45,.12);}
.kl-st.is-current .kl-st-s{background:var(--kl-clay);color:#fff;}
.kl-st.is-here > a,.kl-st.is-here > div{background:var(--surface,#fffefb);box-shadow:0 1px 0 var(--border,#e2ded3),0 12px 30px rgba(45,74,62,.08);}
.kl-phase{list-style:none;font-size:15px;font-weight:800;color:var(--kl-clay);padding:14px 0 2px 72px;}
.kl-phase:first-child{padding-top:0;}
/* Kompas strelkasi: joriy bekatni koʻrsatadi */
.kl-route-needle{position:absolute;left:6px;width:44px;height:44px;z-index:2;pointer-events:none;transition:top .7s var(--kl-ease);}
.kl-route-needle svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 8px rgba(30,51,41,.18));}
.kl-route-needle .kn{transform-origin:22px 22px;animation:kl-needle 1.4s var(--kl-ease) both;}
@keyframes kl-needle{0%{transform:rotate(-200deg)}55%{transform:rotate(24deg)}75%{transform:rotate(-10deg)}100%{transform:rotate(0)}}
.kl-route.has-needle .kl-st.is-current .kl-st-n,.kl-route.has-needle .kl-st.is-here .kl-st-n{color:transparent;}
@media(max-width:640px){
  .kl-route::before{left:21px;top:22px;bottom:22px;}
  .kl-st > a,.kl-st > div{grid-template-columns:44px minmax(0,1fr);gap:12px;padding-right:10px;}
  .kl-st-n{width:44px;height:44px;font-size:15px;}
  .kl-st-s{grid-column:2;justify-self:start;margin-top:-4px;}
  .kl-st-b b{font-size:16px;}
  .kl-phase{padding-left:56px;}
  .kl-route-needle{left:3px;width:38px;height:38px;}
}

/* ── Lab umumiy sahifasi: dastur boʻlimi ──────────────────────── */
.kl-path{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;}
.kl-path aside{position:sticky;top:calc(var(--kl-top,0px) + var(--kl-nav) + 24px);background:var(--surface,#fffefb);border:1px solid var(--border,#e2ded3);border-radius:20px;padding:22px;}
.kl-path aside h3{font-family:"Cambria","Caladea","Playfair Display",serif;font-weight:400;font-size:24px;color:var(--kl-forest);line-height:1.15;}
.kl-path aside p{font-size:16px;color:var(--muted,#5f7169);margin:10px 0 16px;}
.kl-path aside .btn{width:100%;}
.kl-path aside .btn + .btn{margin-top:8px;}
.kl-path aside dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:16px;margin:0 0 16px;}
.kl-path aside dt{color:var(--muted,#5f7169);}
.kl-path aside dd{font-weight:800;text-align:right;margin:0;font-variant-numeric:tabular-nums;}
@media(max-width:960px){.kl-path{grid-template-columns:minmax(0,1fr);}.kl-path aside{position:static;}}

/* Keyingi sahifalar kartochkasi (Lab ichida) */
.kl-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;}
.kl-next a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:16px;background:var(--surface,#fffefb);border:1px solid var(--border,#e2ded3);text-decoration:none;color:inherit;transition:border-color .2s,transform .25s var(--kl-ease);}
.kl-next a:hover{border-color:var(--kl-forest);transform:translateY(-2px);}
.kl-next b{font-size:16px;color:var(--kl-forest);}
.kl-next span{font-size:15px;color:var(--muted,#5f7169);}

/* ── Modul (M1+) sahifasi: darslar roʻyxati ───────────────────── */
.kl-mod-art{margin-top:18px;display:flex;gap:12px;align-items:flex-start;background:var(--surface,#fffefb);border:1px solid var(--border,#e2ded3);border-left:4px solid var(--kl-gold);border-radius:14px;padding:14px 18px;font-size:16.5px;max-width:760px;}
.kl-mod-art b{color:var(--kl-forest);}
.kl-lock{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:18px 20px;border-radius:16px;background:var(--kl-forest);color:#fff;}
.kl-lock img{width:48px;height:48px;flex:none;}
.kl-lock b{font-size:16px;}
.kl-lock p{font-size:16px;color:rgba(255,255,255,.78);margin-top:4px;}
.kl-lock .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.kl-lock .btn-g{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);}
.kl-modnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px;}

/* ── Oldingi / keyingi ─────────────────────────────────────────── */
.kl-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kl-pager a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:16px;border:1px solid var(--border,#e2ded3);background:var(--surface,#fffefb);text-decoration:none;color:inherit;min-height:76px;justify-content:center;transition:border-color .2s,box-shadow .25s;}
.kl-pager a:hover{border-color:var(--kl-forest);box-shadow:0 10px 26px rgba(45,74,62,.08);}
.kl-pager small{font-size:14px;font-weight:700;color:var(--muted,#5f7169);}
.kl-pager b{font-size:15.5px;color:var(--kl-forest);line-height:1.3;}
.kl-pager .nx{text-align:right;align-items:flex-end;grid-column:2;}
.kl-pager .nx b::after{content:"";display:inline-block;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:10px;vertical-align:2px;transition:transform .2s;}
.kl-pager .pv b::before{content:"";display:inline-block;width:8px;height:8px;border-bottom:2px solid currentColor;border-left:2px solid currentColor;transform:rotate(45deg);margin-right:10px;vertical-align:2px;}
.kl-pager .nx:hover b::after{transform:translateX(3px) rotate(45deg);}
.kl-pager .nx.primary{background:var(--kl-forest);border-color:var(--kl-forest);}
.kl-pager .nx.primary small{color:rgba(255,255,255,.7);}
.kl-pager .nx.primary b{color:#fff;}
@media(max-width:560px){.kl-pager,.kl-modnav{grid-template-columns:1fr;}.kl-pager .nx{grid-column:1;}}

/* ── Modul sahifalari (M0): hub / dars / yakun koʻrinishi ──────── */
body[data-kview] .kl-only-hub,body[data-kview] .kl-only-lesson,body[data-kview] .kl-only-yakun{display:none;}
body[data-kview="hub"] .kl-only-hub,body[data-kview="lesson"] .kl-only-lesson,body[data-kview="yakun"] .kl-only-yakun{display:block;}
body[data-kview="hub"] #darslar .lessons,
body[data-kview="hub"] #vositalar,body[data-kview="hub"] #qaror{display:none!important;}
body[data-kview="lesson"] main .hero,body[data-kview="lesson"] main .map,body[data-kview="lesson"] main > .wrap > section:not(#darslar),
body[data-kview="lesson"] #darslar > h2,body[data-kview="lesson"] #darslar > .sub,
body[data-kview="lesson"] .lesson:not(.kl-cur){display:none!important;}
body[data-kview="lesson"] .lesson.kl-cur{border-color:var(--accent);box-shadow:0 18px 50px rgba(45,74,62,.10);}
body[data-kview="lesson"] .lesson.kl-cur .l-body{display:block;}
body[data-kview="lesson"] .lesson.kl-cur .l-head{display:none;}
body[data-kview="lesson"] .lesson.kl-cur .l-body{border-top:0;}
body[data-kview="lesson"] .lesson.kl-cur .chev{display:none;}
body[data-kview="lesson"] #darslar{padding-top:6px;}
body[data-kview="yakun"] main .hero,body[data-kview="yakun"] main .map,body[data-kview="yakun"] #darslar,
body[data-kview="yakun"] main > .wrap > section:not(#vositalar):not(#nishonlar):not(#qaror){display:none!important;}
body[data-kview="hub"] #nishonlar{display:block;}
body[data-kview="hub"] main .map{display:none!important;}

/* Dars sahifasi xromi */
.kl-lhead{padding:30px 0 10px;}
.kl-lhead .kl-crumb{margin-bottom:10px;}
.kl-lhead h1{font-family:"Cambria","Caladea","Playfair Display",serif;font-weight:400;font-size:clamp(30px,4.2vw,46px);line-height:1.08;color:var(--accent,#2d4a3e);margin:0;}
.kl-lhead .kl-lmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:15px;color:var(--muted,#5f7169);}
.kl-steps{display:flex;align-items:center;gap:0;margin:22px 0 30px;}
.kl-steps a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--muted,#5f7169);font-size:13px;font-weight:800;min-width:0;}
.kl-steps a::before{content:"";position:absolute;top:14px;left:-50%;right:50%;height:2px;background:var(--border,#e2ded3);z-index:0;}
.kl-steps a:first-child::before{display:none;}
.kl-steps a.done::before,.kl-steps a.cur::before{background:var(--accent,#2d4a3e);}
.kl-steps i{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13.5px;background:var(--surface,#fffefb);border:2px solid var(--border,#e2ded3);transition:transform .2s;}
.kl-steps a:hover i{transform:scale(1.1);}
.kl-steps a.done i{background:var(--accent,#2d4a3e);border-color:var(--accent,#2d4a3e);color:#fff;}
.kl-steps a.cur i{border-color:var(--accent2,#c4622d);color:var(--accent2,#c4622d);box-shadow:0 0 0 5px rgba(196,98,45,.13);}
.kl-steps a.cur{color:var(--accent2,#c4622d);}
.kl-steps span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
@media(max-width:560px){.kl-steps span{display:none;}.kl-steps a.cur span{display:block;position:absolute;top:36px;}.kl-steps{margin-bottom:18px;}}
.kl-read{position:fixed;left:0;right:0;top:calc(var(--kl-top,0px) + 60px);height:3px;z-index:99;pointer-events:none;}
.kl-read i{display:block;height:100%;width:0;background:var(--accent,#2d4a3e);transform-origin:left;}
.kl-lfoot{margin:26px 0 8px;}
.kl-keys{font-size:14px;color:var(--muted,#5f7169);text-align:center;margin-top:12px;}
.kl-keys kbd{font-family:inherit;font-weight:800;border:1px solid var(--border,#e2ded3);border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:var(--surface,#fffefb);}
@media(hover:none){.kl-keys{display:none;}}

/* Modul hub: darslar yoʻli */
.kl-hub-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kl-hub-route{margin-top:6px;}
.kl-yakun-card{margin-top:14px;}

/* ── Yakun oynasi ─────────────────────────────────────────────── */
.kl-done{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:20px;background:rgba(20,34,28,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s;}
.kl-done.on{opacity:1;pointer-events:auto;}
.kl-done-c{width:min(440px,100%);background:var(--surface,#fffefb);border-radius:24px;padding:30px 26px 24px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.25);transform:translateY(16px) scale(.97);transition:transform .45s var(--kl-ease);}
.kl-done.on .kl-done-c{transform:none;}
.kl-done svg{width:84px;height:84px;margin:0 auto 10px;display:block;}
.kl-done svg circle{fill:none;stroke:#1a7a4a;stroke-width:4;stroke-dasharray:240;stroke-dashoffset:240;}
.kl-done svg path{fill:none;stroke:#1a7a4a;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;}
.kl-done.on svg circle{animation:kl-draw .6s .1s var(--kl-ease) forwards;}
.kl-done.on svg path{animation:kl-draw .35s .55s var(--kl-ease) forwards;}
@keyframes kl-draw{to{stroke-dashoffset:0}}
.kl-done h2{font-family:"Cambria","Caladea","Playfair Display",serif;font-weight:400;font-size:30px;color:var(--accent,#2d4a3e);line-height:1.1;}
.kl-done p{font-size:16.5px;color:var(--muted,#5f7169);margin:8px 0 18px;}
.kl-done .kl-xp{display:inline-block;background:var(--gold-lit,#f8f0d6);color:var(--gold,#8a6a10);font-weight:800;font-size:16px;padding:4px 12px;border-radius:99px;margin-bottom:10px;}
.kl-done .btn{width:100%;}
.kl-done .btn + .btn{margin-top:8px;}
@media (prefers-reduced-motion: reduce){.kl-done svg circle,.kl-done svg path{stroke-dashoffset:0;animation:none!important;}.kl-route-needle .kn{animation:none;}}

/* Klaviatura fokusi */
.kl-st a:focus-visible,.kl-pager a:focus-visible,.kl-tabs a:focus-visible,.kl-next a:focus-visible,.kl-steps a:focus-visible{outline:3px solid var(--kl-clay);outline-offset:3px;}

/* Dastur sahifasi: modul kartasidan modul sahifasiga */
.kl-modlink{display:inline-flex;align-items:center;gap:8px;margin:2px 0 16px 20px;font-weight:800;font-size:16px;color:var(--kl-clay);text-decoration:none;}
.kl-modlink::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;}
.kl-modlink:hover::after{transform:translateX(3px) rotate(45deg);}
.kl-lessons .kl-st-n{font-size:15px;}
.kl-st-n.sm{font-size:13.5px;letter-spacing:-.2px;}

/* ── Dastur: faza tablari (2026-10-30, js/kompas-ui.js phaseTabs) ──
   JS yoʻq boʻlsa: hamma modul yopiq holda koʻrinadi, tugmalar oddiy karta. */
.kl-ph button.phase{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;position:relative;transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;}
.kl-ph button.phase:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 22px rgba(45,74,62,.10);}
.kl-ph button.phase:focus-visible{outline:3px solid var(--accent2);outline-offset:2px;}
.kl-ph-on .kl-ph button.phase[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(45,74,62,.22);}
.kl-ph-on .kl-ph button.phase[aria-pressed="true"] small{color:var(--gold-lit,#fdf6dc);}
.kl-ph-on .kl-ph button.phase[aria-pressed="true"] span{color:rgba(255,255,255,.78);}
.kl-ph-on .kl-ph button.phase[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:-9px;width:16px;height:16px;background:var(--accent);transform:translateX(-50%) rotate(45deg);border-radius:3px;}
.kl-ph-hint{font-size:16px;color:var(--muted);margin:18px 0 14px;}
.kl-ph-body{scroll-margin-top:90px;}
.kl-ph-body .mod li small{display:none;}
.kl-ph-body [hidden]{display:none !important;}
.kl-ph-in{animation:kl-ph-in .32s var(--kl-ease,ease) both;}
.kl-ph-body details.kl-ph-in:nth-of-type(2){animation-delay:.05s}.kl-ph-body details.kl-ph-in:nth-of-type(3){animation-delay:.1s}.kl-ph-body details.kl-ph-in:nth-of-type(4){animation-delay:.15s}
@keyframes kl-ph-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html[data-theme="dark"] .kl-ph-on .kl-ph button.phase[aria-pressed="true"]{background:#2d4a3e;border-color:#9fd0b6;}
html[data-theme="dark"] .kl-ph-on .kl-ph button.phase[aria-pressed="true"]::after{background:#2d4a3e;}
@media (prefers-reduced-motion: reduce){.kl-ph-in{animation:none}.kl-ph button.phase{transition:none}}
@media (max-width:720px){.kl-ph-on .kl-ph{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;padding:2px 2px 6px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:none;}.kl-ph-on .kl-ph::-webkit-scrollbar{display:none}.kl-ph-on .kl-ph button.phase{flex:0 0 68%;scroll-snap-align:center;}.kl-ph-on .kl-ph button.phase::after{display:none}.kl-ph-on .kl-ph button.phase:hover{transform:none}}

/* ── Profil belgisi (js/kompas-ui.js, 2026-10-30) ── */
.kl-me{position:relative;flex:none;}
.kl-me-b{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:3px 12px 3px 3px;border-radius:999px;border:1px solid var(--border,#e0e8e2);background:var(--surface,#fff);color:var(--text,#1a2e26);font:inherit;font-size:14px;font-weight:700;cursor:pointer;max-width:180px;}
.kl-me-b:hover{border-color:var(--kl-forest);}
.kl-me-b:focus-visible{outline:2px solid var(--kl-clay);outline-offset:2px;}
.kl-me-a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--kl-forest);color:#f4f3ef;font-size:13px;font-weight:800;letter-spacing:.02em;flex:none;box-shadow:0 0 0 2px var(--surface,#fff);}
.kl-me.is-paid .kl-me-a{box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 4px var(--kl-gold);}
.kl-me-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kl-me-m{position:absolute;right:0;top:calc(100% + 8px);z-index:400;width:280px;max-width:calc(100vw - 24px);padding:8px;border-radius:14px;border:1px solid var(--border,#e0e8e2);background:var(--surface,#fff);color:var(--text,#1a2e26);box-shadow:0 14px 40px rgba(30,51,41,.18);font-size:14px;}
.kl-me-m[hidden]{display:none;}
.kl-me-h{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;}
.kl-me-h .kl-me-a{width:40px;height:40px;font-size:15px;}
.kl-me-h b{display:block;line-height:1.25;word-break:break-word;}
.kl-me-h small{display:block;color:var(--muted,#5f7169);font-size:12.5px;word-break:break-all;}
.kl-me-s{margin:0 0 6px;padding:10px;border-radius:10px;background:#f4f3ef;}
.kl-me-s ul{margin:6px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted,#5f7169);}
.kl-me-s li+li{margin-top:3px;}
.kl-me-tag{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--kl-forest);color:#f4f3ef;font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;}
.kl-me.is-paid .kl-me-tag{background:var(--kl-gold);color:#1e3329;}
.kl-me-m a{display:block;padding:9px 10px;border-radius:9px;color:inherit;text-decoration:none;font-weight:600;}
.kl-me-m a:hover,.kl-me-m a:focus-visible{background:rgba(45,74,62,.08);}
.kl-me-m .kl-me-out{color:var(--kl-clay);border-top:1px solid var(--border,#e0e8e2);border-radius:0 0 9px 9px;margin-top:4px;}
.kl-me-sm .kl-me-b{min-height:34px;padding:2px;}
.kl-me-sm .kl-me-n{display:none;}
.kl-me-sm .kl-me-a{width:28px;height:28px;font-size:12px;}
header.top .xp .kl-me{margin-left:6px;}
@media (max-width:480px){header.top .xp .kl-me{display:none;}}
@media (max-width:720px){.kl-me-b{padding:2px;}.kl-me-n{display:none;}}

/* ==== TUNGI REJIM (generator: tools/site/dark_css.py) ==== */
/* Qoʻlda tahrirlamang. Mavzu: html[data-theme] (js/kompas-ui.js qoʻyadi). */
html[data-theme="dark"]{color-scheme:dark;--ko-accent:#2d4a3e;--ko-accent-h:#1e3329;--ko-accent-lit:#e8f0ec;--ko-accent2:#c4622d;--ko-accent2-h:#a84f23;--ko-accent2-lit:#faeee7;--ko-bg:#f5f7f5;--ko-border:#e0e8e2;--ko-cream:#f4f3ef;--ko-gold:#b08a00;--ko-gold-lit:#fdf6dc;--ko-green:#1a7a4a;--ko-green-lit:#e6f4ec;--ko-kl-cream:#f4f3ef;--ko-kl-forest:#2d4a3e;--ko-kl-forest-d:#1e3329;--ko-kl-line:#d8cfb6;--ko-muted:#5f7169;--ko-muted2:#9aada6;--ko-red:#b42318;--ko-red-lit:#fdecea;--ko-surface:#ffffff;--ko-text:#1a2e26;--accent:#9fd0b6;--accent-h:#bfe3cf;--accent-lit:#1c2b24;--accent2:#e0874f;--accent2-h:#ec9a66;--accent2-lit:#2e2018;--bg:#0f1512;--border:#2a3731;--cream:#121a16;--gold:#d9b65a;--gold-lit:#2a2412;--green:#6fcf9a;--green-lit:#15291e;--kl-cream:#1d1c18;--kl-forest:#b9d4c9;--kl-forest-d:#c0dace;--kl-line:#39352b;--muted:#a2b4aa;--muted2:#71847a;--red:#f19a90;--red-lit:#2e1816;--surface:#17201b;--text:#e5ece7}
html[data-theme="dark"] body{background:var(--bg,#0f1512)}
html[data-theme="dark"] .nav{background:rgba(23,25,23,0.9)}
html[data-theme="dark"] .logo-m{background:var(--ko-accent)}
html[data-theme="dark"] .btn-p{background:var(--ko-accent2)}
html[data-theme="dark"] .btn-p:hover{background:var(--ko-accent2-h)}
html[data-theme="dark"] .badge{border:1px solid #5d563a}
html[data-theme="dark"] .packet-top{background:var(--ko-accent)}
html[data-theme="dark"] .dark{background:var(--ko-accent)}
html[data-theme="dark"] .label::before{background:var(--ko-accent2)}
html[data-theme="dark"] .src a.s{color:#99b6d8}
html[data-theme="dark"] .excl{border:1px solid #503431}
html[data-theme="dark"] .f-top{background:linear-gradient(135deg,var(--ko-accent),#4a7a65)}
html[data-theme="dark"] .scope th{background:var(--ko-accent)}
html[data-theme="dark"] .pay-status{border:1px solid #5d563a}
html[data-theme="dark"] .plan.main{background:var(--ko-accent)}
html[data-theme="dark"] .plan.main .tag-top{background:var(--ko-accent2)}
html[data-theme="dark"] .q select:focus{background:#131313}
html[data-theme="dark"] .bar i{background:var(--ko-accent)}
html[data-theme="dark"] footer{background:var(--ko-text)}
html[data-theme="dark"] .sources a{color:#99b6d8}
html[data-theme="dark"] .mdl{background:#131313}
html[data-theme="dark"] .mdl input:focus{background:#131313}
html[data-theme="dark"] .banner.warn{border:1px solid #5d563a}
html[data-theme="dark"] .banner.red{border:1px solid #503431}
html[data-theme="dark"] .banner.green{border:1px solid #3a4c41}
html[data-theme="dark"] .cmp th{background:var(--ko-accent)}
html[data-theme="dark"] .nav{background:rgba(29,28,24,0.94)}
html[data-theme="dark"] .live i{background:var(--ko-green)}
html[data-theme="dark"] .who li::before{background:var(--ko-accent2)}
html[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--ko-accent)}
html[data-theme="dark"] .stats-note i{background:var(--ko-green)}
html[data-theme="dark"] .lc-b:hover{background:var(--ko-accent)}
html[data-theme="dark"] .steps li::before{background:var(--ko-accent)}
html[data-theme="dark"] .cmpc input:focus,html[data-theme="dark"] .cmpc select:focus{background:#131313}
html[data-theme="dark"] .seg button[aria-pressed="true"]{background:var(--ko-accent)}
html[data-theme="dark"] .out{background:var(--ko-accent)}
html[data-theme="dark"] .stat .lv i,html[data-theme="dark"] .stats-note i{background:var(--ko-green)}
@media (hover:hover){
  html[data-theme="dark"] .lc:hover{border-color:#3f4541}
  html[data-theme="dark"] .honest div:hover,html[data-theme="dark"] .rules div:hover{border-color:#3f4541}
}
html[data-theme="dark"] .motto{border:1px solid #4d3c32}
html[data-theme="dark"] .fnd-steps i.on{background:var(--ko-accent2)}
html[data-theme="dark"] .fq b .n{background:var(--ko-accent)}
html[data-theme="dark"] .result.has{border-color:#4d3c32}
html[data-theme="dark"] .fsel:focus{background:#131313}
html[data-theme="dark"] .at-callout{border:1px solid #3a443d;background:#141b15}
html[data-theme="dark"] .at-callout b{color:#c0dace}
html[data-theme="dark"] .at-callout p{color:#b1bdb8}
html[data-theme="dark"] .k4x-base{stroke:var(--ko-border)}
html[data-theme="dark"] .k4x-s.on .k4x-dot{background:var(--ko-accent)}
html[data-theme="dark"] .k4x-trav circle:first-child{stroke:#b9d4c9}
html[data-theme="dark"] .dn-dot{background:var(--ko-accent2)}
html[data-theme="dark"] .kg-card > a:hover{background:#1b201e}
html[data-theme="dark"] .kg-fly:hover{background:#1b201e}
html[data-theme="dark"] .kg-list button[aria-pressed="true"]{background:#231913}
html[data-theme="dark"] .kg-seg button[aria-pressed="true"]{background:var(--ko-accent)}
html[data-theme="dark"] .kg-ib:hover{background:#1b201e}
html[data-theme="dark"] .kg-err{color:#d89c97}
html[data-theme="dark"] .kg-filt button[aria-pressed="true"]{background:#231913}
html[data-theme="dark"] .kg-sp text{fill:#a8b3af}
html[data-theme="dark"] .kglobe.kg-full{background:var(--bg,#1d1c18)}
html[data-theme="dark"] .kglobe:fullscreen{background:var(--bg,#1d1c18)}
html[data-theme="dark"] .kl-tabs a{color:var(--muted,#b1bdb8)}
@media (max-width:1100px){
  html[data-theme="dark"] .kl-tabbar{background:rgba(29,28,24,0.96);border-bottom:1px solid var(--border,#44423b)}
}
html[data-theme="dark"] .kl-pagehead .crumb,html[data-theme="dark"] .kl-crumb{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-crumb a{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-st > a:hover{background:rgba(29,25,11,0.9)}
html[data-theme="dark"] .kl-st-n{background:var(--surface,#1d190b)}
html[data-theme="dark"] .kl-st-b b{color:var(--text,#c1dcd1)}
html[data-theme="dark"] .kl-st-b small{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-st.is-free .kl-st-n{background:var(--ko-kl-forest)}
html[data-theme="dark"] .kl-st.is-free .kl-st-s{background:#18221c;color:#a6ddc1}
html[data-theme="dark"] .kl-st.is-locked .kl-st-s{color:var(--muted,#b1bdb8);border:1px solid var(--border,#44423b)}
html[data-theme="dark"] .kl-st.is-done .kl-st-s{background:#18221c;color:#a6ddc1}
html[data-theme="dark"] .kl-st.is-here > a,html[data-theme="dark"] .kl-st.is-here > div{background:var(--surface,#1d190b)}
html[data-theme="dark"] .kl-path aside{background:var(--surface,#1d190b);border:1px solid var(--border,#44423b)}
html[data-theme="dark"] .kl-path aside p{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-path aside dt{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-next a{background:var(--surface,#1d190b);border:1px solid var(--border,#44423b)}
html[data-theme="dark"] .kl-next span{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-mod-art{background:var(--surface,#1d190b);border:1px solid var(--border,#44423b)}
html[data-theme="dark"] .kl-lock{background:var(--ko-kl-forest)}
html[data-theme="dark"] .kl-pager a{border:1px solid var(--border,#44423b);background:var(--surface,#1d190b)}
html[data-theme="dark"] .kl-pager small{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-pager .nx.primary{background:var(--ko-kl-forest)}
html[data-theme="dark"] .kl-lhead h1{color:var(--accent,#b9d4c9)}
html[data-theme="dark"] .kl-lhead .kl-lmeta{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-steps a{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-steps a::before{background:var(--border,#2b2924)}
html[data-theme="dark"] .kl-steps i{background:var(--surface,#1d190b);border:2px solid var(--border,#44423b)}
html[data-theme="dark"] .kl-keys{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-keys kbd{border:1px solid var(--border,#44423b);background:var(--surface,#1d190b)}
html[data-theme="dark"] .kl-done-c{background:var(--surface,#1d190b)}
html[data-theme="dark"] .kl-done svg circle{stroke:#a6ddc1}
html[data-theme="dark"] .kl-done svg path{stroke:#a6ddc1}
html[data-theme="dark"] .kl-done h2{color:var(--accent,#b9d4c9)}
html[data-theme="dark"] .kl-done p{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-done .kl-xp{background:var(--gold-lit,#2b2616);color:var(--gold,#ddcea4)}
html[data-theme="dark"] .kl-ph-on .kl-ph button.phase[aria-pressed="true"]{background:var(--ko-accent)}
html[data-theme="dark"] .kl-ph-on .kl-ph button.phase[aria-pressed="true"]::after{background:var(--ko-accent)}
html[data-theme="dark"][data-theme="dark"] .kl-ph-on .kl-ph button.phase[aria-pressed="true"]{border-color:#43554b}
html[data-theme="dark"] .kl-me-b{border:1px solid var(--border,#39403b);background:var(--surface,#131313);color:var(--text,#c1dcd1)}
html[data-theme="dark"] .kl-me-a{background:var(--ko-kl-forest)}
html[data-theme="dark"] .kl-me-m{border:1px solid var(--border,#39403b);background:var(--surface,#131313);color:var(--text,#c1dcd1)}
html[data-theme="dark"] .kl-me-h small{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-me-s{background:#1d1c18}
html[data-theme="dark"] .kl-me-s ul{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .kl-me-tag{background:var(--ko-kl-forest)}
html[data-theme="dark"] .kl-me.is-paid .kl-me-tag{color:#c0dace}
html[data-theme="dark"] .kl-me-m .kl-me-out{border-top:1px solid var(--border,#39403b)}
html[data-theme="dark"] .top{background:rgba(29,28,24,0.94)}
html[data-theme="dark"] .xp-pill{background:var(--ko-accent)}
html[data-theme="dark"] .xp-bar i{background:linear-gradient(90deg,var(--ko-accent2),#d9a441)}
html[data-theme="dark"] .node.done .dot{background:var(--ko-accent)}
html[data-theme="dark"] .node.done::after{background:var(--ko-accent)}
html[data-theme="dark"] .l-ic .ok{background:var(--ko-green)}
html[data-theme="dark"] .tab .seen{background:var(--ko-green)}
html[data-theme="dark"] th{background:var(--ko-accent)}
html[data-theme="dark"] .decide{background:var(--ko-accent)}
html[data-theme="dark"] .mentor .av{background:var(--ko-accent2)}
html[data-theme="dark"] .toast{background:var(--ko-text)}
html[data-theme="dark"] .fld input:focus,html[data-theme="dark"] .fld select:focus{background:#131313}
html[data-theme="dark"] .card3 .b{background:var(--ko-accent)}
html[data-theme="dark"] .decide .chip[aria-pressed="true"]{background:#131313;border-color:#333333}
html[data-theme="dark"] .srcs a{color:#99b6d8}
html[data-theme="dark"] .st3.n{background:#1a1223;color:#ab8ad3}
html[data-theme="dark"] .legal h2{color:var(--green,#b9d4c9)}
html[data-theme="dark"] .fct a{color:#99b6d8}
html[data-theme="dark"] .meter-t i{background:#131313}
html[data-theme="dark"] .pf-card{background:var(--surface,#131313);border:1px solid var(--border,#39403b)}
html[data-theme="dark"] .pf-top small{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .pf-tag.paid{color:#c0dace}
html[data-theme="dark"] .pf-meta div{background:#1d1c18}
html[data-theme="dark"] .pf-meta span{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .pf-sub+.pf-sub{border-top:1px solid var(--border,#39403b)}
html[data-theme="dark"] .pf-sub small{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .pf-st.on{background:#1c231f;color:#b9d4c9}
html[data-theme="dark"] .pf-st.off{background:#291e17;color:#d9b09c}
html[data-theme="dark"] .pf-empty{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .pf-form label{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .pf-form input,html[data-theme="dark"] .pf-form select{border:1px solid var(--border,#39403b);background:var(--surface,#131313);color:var(--text,#c1dcd1)}
html[data-theme="dark"] .pf-msg.ok{color:#b9d4c9}
html[data-theme="dark"] .pf-msg.err{color:#d8a997}
html[data-theme="dark"] .pf-note{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .pf-load{color:var(--muted,#b1bdb8)}
html[data-theme="dark"] .yn button[aria-pressed="true"]{background:var(--ko-accent)}
html[data-theme="dark"] .at-nav{background:#131313}
html[data-theme="dark"] .atlas-hero{background:radial-gradient(circle at 82% 12%,#1d201c 0,transparent 40%),linear-gradient(#181915,#171917)}
html[data-theme="dark"] .pill{border:1px solid #3a433d;background:#131313}
html[data-theme="dark"] .notice{background:#221e10;border:1px solid #554e37;color:#e1d5af}
html[data-theme="dark"] .at-panel{background:#131313}
html[data-theme="dark"] .at-status{background:#181e1a}
html[data-theme="dark"] .field label{color:#b6cabf}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select{border:1px solid #3d443f;background:#151813;color:#c1dcd1}
html[data-theme="dark"] .field input::placeholder{color:#a4b2aa}
html[data-theme="dark"] .btn-quiet{background:#131313}
html[data-theme="dark"] .btn-quiet:hover{background:#171e19}
html[data-theme="dark"] .at-file label:hover{background:#171e19}
html[data-theme="dark"] .at-cities button{border:1px solid #3d433e;background:#131313;color:#b4d1c1}
html[data-theme="dark"] .at-cities button:hover,html[data-theme="dark"] .at-cities button[aria-pressed="true"]{background:var(--ko-accent)}
html[data-theme="dark"] .sponsor{background:#131313}
html[data-theme="dark"] .sponsor-icon{background:#1a1f1b}
html[data-theme="dark"] .sponsor .meta span{background:#181d19;color:#add8be}
html[data-theme="dark"] .empty{background:#131313;border:1px dashed #3e4640}
html[data-theme="dark"] .load-more{background:var(--ko-accent)}
html[data-theme="dark"] .load-more:hover{background:var(--ko-accent-h)}
html[data-theme="dark"] .at-details article{border-top:2px solid #3c443e}
html[data-theme="dark"] .at-bottom{background:#1b1f1c;border-top:1px solid #3a423c}
html[data-theme="dark"] .at-error{color:#d69b93 !important}
html[data-theme="dark"] .ukmap{background:#191d19;border:1px solid #39413b}
html[data-theme="dark"] .ukmap-canvas{background:radial-gradient(circle at 60% 48%,#121912,#1b201d)}
html[data-theme="dark"] .ukmap svg .uk-dot:hover,html[data-theme="dark"] .ukmap svg .uk-dot.selected{fill:#b9d4c9}
html[data-theme="dark"] .ukmap svg .uk-dot:focus-visible{stroke:#c1dcd1}
html[data-theme="dark"] .ukmap svg text{fill:#c0dace}
html[data-theme="dark"] .ukmap-info{background:#131313}
html[data-theme="dark"] .map-stat{background:#161a16;border:1px solid #374039}
html[data-theme="dark"] .map-stat b{color:#b9d8ca}
html[data-theme="dark"] .career-card{background:#131313}
html[data-theme="dark"] .career-card small{color:#dcc6a3}
html[data-theme="dark"] .journey-section{border:1px solid #3c483f;background:#161c16}
html[data-theme="dark"] .journey-grid a{background:#131313;border:1px solid #3b443d}
/* qoʻlda */
html[data-theme="dark"] .nav,html[data-theme="dark"] .kl-tabbar{background:rgba(15,21,18,.9)}
html[data-theme="dark"] .dark,html[data-theme="dark"] section.dark{background:#16261f}
html[data-theme="dark"] footer{background:#0a0f0c}
html[data-theme="dark"] img.i3d,html[data-theme="dark"] .st-i{filter:none}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background-color:var(--surface);color:var(--text);border-color:var(--border)}
html[data-theme="dark"] ::placeholder{color:var(--muted2)}
html[data-theme="dark"] #globus canvas{filter:brightness(.8) contrast(1.05)}
html[data-theme="dark"] .k4x-trav circle:first-child{fill:#f4f3ef}
html[data-theme="dark"] .k4x-bg{background-image:radial-gradient(circle at 1px 1px,rgba(159,208,182,.14) 1px,transparent 1.6px),radial-gradient(ellipse 60% 50% at 15% 30%,rgba(159,208,182,.06),transparent 70%),radial-gradient(ellipse 50% 45% at 85% 70%,rgba(224,135,79,.07),transparent 70%)}
html[data-theme="dark"] .k4x-s.on:not(.later) .k4x-dot{background:#2d4a3e;color:#fff}
.kl-theme{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--border,#e0e8e2);background:var(--surface,#fff);color:var(--text,#1a2e26);cursor:pointer;font-size:16px;line-height:1;flex:none;padding:0}
.kl-theme:hover{border-color:var(--accent,#2d4a3e)}
.kl-theme svg{width:18px;height:18px}
.kl-theme-float{position:fixed;left:14px;bottom:14px;z-index:300;box-shadow:0 4px 14px rgba(0,0,0,.18)}
header.top .kl-theme{margin-left:auto;margin-right:8px}

/* ==== TUNGI REJIM OXIRI ==== */