/* ==========================================================================
   WebUstoz — Talaba ilovasi · dizayn tizimi v2
   Barcha ekranlar shu fayldan oladi.
   ========================================================================== */

/* ---------- 1. Tokenlar ---------- */
:root{
  --brand-50:#E6F6EE; --brand-100:#C7ECD9; --brand-300:#64CB9A;
  --brand-500:#0F9D63; --brand-600:#0C8A57; --brand-700:#08754A;
  --ink-950:#0B1613; --ink-900:#14231D; --ink-700:#22322C;
  --ink-500:#4B5B54; --ink-400:#64748B; --ink-200:#C7D2CD; --ink-100:#E5EDEA;
  --canvas:#F5F9F7; --surface:#FFFFFF; --surface-2:#FBFDFC;
  --border:#E5EDEA; --border-strong:#D2DED8;
  --amber-50:#FFF6E5; --amber-500:#E8930C; --amber-700:#B36D00;
  --violet-50:#F1ECFF; --violet-500:#7A55E5; --violet-700:#5A38C2;
  --blue-50:#EAF2FF; --blue-500:#2F6BFF; --blue-700:#1F4FCC;
  --danger-50:#FEECEC; --danger-500:#DC3B3B;

  --glow:rgba(15,157,99,.30);
  --hair:linear-gradient(160deg,rgba(255,255,255,.9),rgba(15,157,99,.16) 42%,rgba(255,255,255,0) 78%);
  --sheen:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);

  --shadow-sm:0 1px 2px rgba(11,22,19,.05);
  --shadow-md:0 2px 4px rgba(11,22,19,.05),0 10px 26px rgba(11,22,19,.07);
  --shadow-lg:0 6px 14px rgba(11,22,19,.07),0 26px 60px rgba(11,22,19,.11);

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --ui:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --shell:min(1180px,100%);
  --pad:clamp(14px,3vw,28px);
  --ease:cubic-bezier(.22,.9,.3,1);
  --spring:cubic-bezier(.2,1.3,.35,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand-50:#0A2A1D; --brand-100:#0E3A28; --brand-300:#3FBE8A;
    --brand-500:#23B978; --brand-600:#37C98A; --brand-700:#7FE0B4;
    --ink-950:#F2F7F5; --ink-900:#E8F0EC; --ink-700:#C3D2CB;
    --ink-500:#93A69E; --ink-400:#7E918A; --ink-200:#33443D; --ink-100:#22322C;
    --canvas:#080F0D; --surface:#101C18; --surface-2:#152521;
    --border:#22322C; --border-strong:#2E403A;
    --amber-50:#33260C; --amber-500:#E8A63C; --amber-700:#F2C078;
    --violet-50:#241B3D; --violet-500:#A88CF0; --violet-700:#C4B0FA;
    --blue-50:#122341; --blue-500:#6E9CFF; --blue-700:#9BBBFF;
    --danger-50:#3A1717; --danger-500:#F07272;
    --glow:rgba(35,185,120,.34);
    --hair:linear-gradient(160deg,rgba(255,255,255,.14),rgba(35,185,120,.20) 42%,rgba(255,255,255,0) 78%);
    --sheen:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.12) 48%,transparent 62%);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 2px 4px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.42);
    --shadow-lg:0 8px 18px rgba(0,0,0,.4),0 30px 70px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --brand-50:#0A2A1D; --brand-100:#0E3A28; --brand-300:#3FBE8A;
  --brand-500:#23B978; --brand-600:#37C98A; --brand-700:#7FE0B4;
  --ink-950:#F2F7F5; --ink-900:#E8F0EC; --ink-700:#C3D2CB;
  --ink-500:#93A69E; --ink-400:#7E918A; --ink-200:#33443D; --ink-100:#22322C;
  --canvas:#080F0D; --surface:#101C18; --surface-2:#152521;
  --border:#22322C; --border-strong:#2E403A;
  --amber-50:#33260C; --amber-500:#E8A63C; --amber-700:#F2C078;
  --violet-50:#241B3D; --violet-500:#A88CF0; --violet-700:#C4B0FA;
  --blue-50:#122341; --blue-500:#6E9CFF; --blue-700:#9BBBFF;
  --danger-50:#3A1717; --danger-500:#F07272;
  --glow:rgba(35,185,120,.34);
  --hair:linear-gradient(160deg,rgba(255,255,255,.14),rgba(35,185,120,.20) 42%,rgba(255,255,255,0) 78%);
  --sheen:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.12) 48%,transparent 62%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 4px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.42);
  --shadow-lg:0 8px 18px rgba(0,0,0,.4),0 30px 70px rgba(0,0,0,.55);
}

/* ---------- 2. Asos + mesh fon ---------- */
*{box-sizing:border-box}
body{
  margin:0;background:var(--canvas);color:var(--ink-900);
  font-family:var(--ui);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;padding-bottom:78px;
  overflow-x:hidden;
}
@media(min-width:900px){body{padding-bottom:0}}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--brand-500);outline-offset:3px;border-radius:8px}
.wrap{width:var(--shell);margin:0 auto;padding:clamp(16px,3vw,30px) var(--pad) 44px;position:relative;z-index:1}
.num{font-variant-numeric:tabular-nums}

/* orqa fondagi yumshoq nur dog'lari */
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mesh i{
  position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.55;
  animation:drift 26s var(--ease) infinite alternate;
}
.mesh i:nth-child(1){width:44vw;height:44vw;left:-12vw;top:-14vw;background:radial-gradient(circle,var(--glow),transparent 68%)}
.mesh i:nth-child(2){width:38vw;height:38vw;right:-10vw;top:12vh;background:radial-gradient(circle,rgba(122,85,229,.22),transparent 68%);animation-delay:-9s}
.mesh i:nth-child(3){width:34vw;height:34vw;left:22vw;bottom:-16vw;background:radial-gradient(circle,rgba(47,107,255,.18),transparent 68%);animation-delay:-17s}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4vw,5vh,0) scale(1.16)}
}

/* ---------- 3. Yuqori panel ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--surface) 76%,transparent);
  backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  transition:box-shadow .25s,background .25s;
}
.topbar.is-stuck{box-shadow:0 6px 24px rgba(11,22,19,.07);background:color-mix(in srgb,var(--surface) 92%,transparent)}
.topbar__in{
  width:var(--shell);margin:0 auto;padding:10px var(--pad);
  display:flex;align-items:center;gap:12px;
}
.brand{font-weight:800;letter-spacing:-.03em;font-size:18px;flex:1;display:flex;align-items:center;gap:8px}
.brand b{
  background:linear-gradient(92deg,var(--brand-500),var(--brand-300));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand__d{
  width:9px;height:9px;border-radius:50%;background:var(--brand-500);flex:none;
  box-shadow:0 0 0 0 var(--glow);animation:beat 3.4s ease-out infinite;
}
@keyframes beat{0%{box-shadow:0 0 0 0 var(--glow)}60%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

.back{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  color:var(--ink-700);transition:transform .2s var(--spring),border-color .2s,box-shadow .2s;
}
.back:hover{transform:translateX(-3px);border-color:var(--brand-300);box-shadow:var(--shadow-sm)}
.crumb{min-width:0;flex:1}
.crumb__top{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.crumb__main{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}

/* chiplar */
.chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border-radius:999px;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;
  border:1px solid transparent;transition:transform .2s var(--spring);
}
.chip svg{width:14px;height:14px}
.chip:hover{transform:translateY(-1px)}
.xp-chip{background:var(--amber-50);color:var(--amber-700);border-color:color-mix(in srgb,var(--amber-500) 22%,transparent)}
.wc-chip{background:var(--brand-50);color:var(--brand-700);border-color:color-mix(in srgb,var(--brand-500) 22%,transparent)}
.streak-chip{background:var(--danger-50);color:var(--danger-500);border-color:color-mix(in srgb,var(--danger-500) 20%,transparent)}
.streak-chip svg{animation:flick 1.8s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.14) rotate(-5deg)}70%{transform:scale(.97) rotate(3deg)}}

.icon-btn{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink-500);
  transition:color .2s,border-color .2s,transform .2s var(--spring);
}
.icon-btn svg{width:18px;height:18px}
@media(max-width:560px){
  .topbar__in{gap:8px}
  .chip{padding:6px 10px;font-size:12.5px}
  .topbar .streak-chip{display:none}
  .brand{font-size:16.5px}
}
.icon-btn:hover{color:var(--brand-600);border-color:var(--brand-300);transform:rotate(-8deg) scale(1.06)}

/* progress rail */
.rail{height:3px;background:var(--ink-100);position:relative;overflow:hidden}
.rail__fill{
  height:100%;background:linear-gradient(90deg,var(--brand-600),var(--brand-300));
  width:0;border-radius:0 3px 3px 0;
  animation:fill 1.2s var(--ease) .15s forwards;
  box-shadow:0 0 12px var(--glow);
}
@keyframes fill{to{width:var(--pct,45%)}}

/* ---------- 4. Navigatsiya ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(18px) saturate(1.6);
  border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
@media(min-width:900px){.tabbar{display:none}}
.tabbar a{
  position:relative;display:grid;justify-items:center;gap:4px;padding:10px 4px 11px;
  font-size:10.5px;font-weight:600;color:var(--ink-400);transition:color .2s;
}
.tabbar a svg{width:21px;height:21px;transition:transform .28s var(--spring)}
.tabbar a[aria-current]{color:var(--brand-500)}
.tabbar a[aria-current] svg{transform:translateY(-2px) scale(1.1)}
.tabbar a[aria-current]::before{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;width:26px;height:3px;
  border-radius:0 0 4px 4px;background:var(--brand-500);box-shadow:0 2px 10px var(--glow);
  animation:tabin .3s var(--spring);
}
@keyframes tabin{from{width:0;opacity:0}to{width:26px;opacity:1}}
.tabbar a:active svg{transform:scale(.88)}

.sidenav{display:none}
@media(min-width:900px){
  .sidenav{display:grid;gap:3px;position:sticky;top:80px;align-content:start}
  .sidenav a{
    position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;
    border-radius:12px;font-size:14px;font-weight:600;color:var(--ink-500);
    transition:background .2s,color .2s,transform .2s var(--spring);
  }
  .sidenav a svg{width:18px;height:18px;flex:none;transition:transform .28s var(--spring)}
  .sidenav a:hover{background:var(--surface-2);color:var(--ink-900);transform:translateX(3px)}
  .sidenav a:hover svg{transform:scale(1.14)}
  .sidenav a[aria-current]{
    background:linear-gradient(96deg,var(--brand-50),transparent);
    color:var(--brand-700);
  }
  .sidenav a[aria-current]::before{
    content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;
    background:var(--brand-500);box-shadow:0 0 10px var(--glow);
  }
}

/* ---------- 5. Kartalar ---------- */
.card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:17px;box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s;
}
/* nozik gradient hoshiya */
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--hair);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.9;
}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand-300)}
.card__h{
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-400);margin:0 0 13px;display:flex;align-items:center;gap:8px;
}
.card__h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}

.sec-label{
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-400);margin:32px 0 13px;
}
.sec-label:first-child{margin-top:0}
.h-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:32px 0 13px}
.h-row:first-child{margin-top:0}
.h-row .sec-label{margin:0}
.h-row a{font-size:13px;font-weight:700;color:var(--brand-600);display:inline-flex;align-items:center;gap:4px;transition:gap .2s}
.h-row a:hover{gap:8px}

/* ---------- 6. Tugmalar ---------- */
.btn{
  position:relative;overflow:hidden;border-radius:13px;padding:12px 19px;
  font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;
  transition:transform .22s var(--spring),box-shadow .25s,background .2s,border-color .2s;
}
.btn svg{width:17px;height:17px}
.btn--go{
  background:linear-gradient(135deg,var(--brand-500),var(--brand-600));
  color:#fff;box-shadow:0 4px 18px var(--glow);
}
.btn--go:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--glow)}
.btn--go:active{transform:translateY(0) scale(.98)}
/* nur o'tishi */
.btn--go::after{
  content:"";position:absolute;inset:0;background:var(--sheen);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn--go:hover::after{transform:translateX(120%)}
.btn--ghost{background:var(--surface);border:1px solid var(--border);color:var(--ink-700)}
.btn--ghost:hover{border-color:var(--brand-300);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--sm{padding:9px 14px;font-size:13.5px;border-radius:11px}
.btn.is-done{background:var(--brand-50);color:var(--brand-700);box-shadow:none;pointer-events:none}

/* ---------- 7. Nishonlar ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pill--brand{background:var(--brand-50);color:var(--brand-700)}
.pill--amber{background:var(--amber-50);color:var(--amber-700)}
.pill--violet{background:var(--violet-50);color:var(--violet-700)}
.pill--blue{background:var(--blue-50);color:var(--blue-700)}
.pill--danger{background:var(--danger-50);color:var(--danger-500)}
.pill--muted{background:var(--surface-2);color:var(--ink-400);border:1px solid var(--border)}

/* ikonka kvadratchalari */
.ic{
  width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;
  transition:transform .3s var(--spring);position:relative;
}
.ic svg{width:19px;height:19px}
.ic--quiz{background:linear-gradient(140deg,var(--violet-50),color-mix(in srgb,var(--violet-50) 40%,transparent));color:var(--violet-500)}
.ic--task{background:linear-gradient(140deg,var(--amber-50),color-mix(in srgb,var(--amber-50) 40%,transparent));color:var(--amber-500)}
.ic--code{background:linear-gradient(140deg,var(--brand-50),color-mix(in srgb,var(--brand-50) 40%,transparent));color:var(--brand-600)}
.ic--live{background:linear-gradient(140deg,var(--danger-50),color-mix(in srgb,var(--danger-50) 40%,transparent));color:var(--danger-500)}
.ic--doc{background:linear-gradient(140deg,var(--blue-50),color-mix(in srgb,var(--blue-50) 40%,transparent));color:var(--blue-500)}
.ic--type{background:linear-gradient(140deg,var(--violet-50),color-mix(in srgb,var(--violet-50) 40%,transparent));color:var(--violet-500)}

/* ---------- 8. Ro'yxat elementi ---------- */
.rows{display:grid;gap:10px}
.row{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:44px 1fr auto;gap:13px;align-items:center;
  padding:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:border-color .25s,transform .25s var(--ease),box-shadow .25s;
}
.row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand-500),var(--brand-300));
  transform:scaleY(0);transform-origin:center;transition:transform .3s var(--ease);
}
.row:hover{border-color:var(--brand-300);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.row:hover::before{transform:scaleY(1)}
.row:hover .ic{transform:scale(1.09) rotate(-4deg)}
.row__t{display:block;font-weight:700;font-size:14.5px;margin-bottom:2px;letter-spacing:-.01em}
.row__d{display:block;font-size:12.5px;color:var(--ink-400);line-height:1.45}
.row--done{opacity:.6}
.row--done:hover{opacity:.85}

/* ---------- 9. Progress ---------- */
.bar{height:7px;background:var(--ink-100);border-radius:999px;overflow:hidden;position:relative}
.bar__f{
  display:block;height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,var(--brand-600),var(--brand-300));
  animation:fill 1.1s var(--ease) .2s forwards;position:relative;overflow:hidden;
}
.bar__f::after{
  content:"";position:absolute;inset:0;background:var(--sheen);
  transform:translateX(-100%);animation:shine 2.6s var(--ease) 1.2s infinite;
}
@keyframes shine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(160%)}}

/* halqa progress */
.ring{width:76px;height:76px;flex:none;position:relative;display:grid;place-items:center}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring .ring__bg{stroke:var(--ink-100)}
.ring .ring__fg{
  stroke:url(#ringGrad);
  stroke-dasharray:var(--c,201);stroke-dashoffset:var(--c,201);
  animation:ringfill 1.3s var(--ease) .25s forwards;
}
@keyframes ringfill{to{stroke-dashoffset:calc(var(--c,201) - var(--c,201) * var(--p,.5))}}
.ring__t{position:absolute;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- 10. Bo'sh holat ---------- */
.empty{
  text-align:center;padding:44px 20px;background:var(--surface);
  border:1px dashed var(--border-strong);border-radius:var(--r-lg);
}
.empty__ic{
  width:56px;height:56px;margin:0 auto 15px;border-radius:17px;
  background:linear-gradient(140deg,var(--brand-50),transparent);color:var(--brand-500);
  display:grid;place-items:center;animation:float 4s ease-in-out infinite;
}
.empty__ic svg{width:25px;height:25px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.empty h3{margin:0 0 6px;font-size:16.5px;font-weight:800}
.empty p{margin:0 0 17px;color:var(--ink-400);font-size:14px}

/* ---------- 11. Harakat ---------- */
/* scroll bo'yicha ochilish — app.js yoqadi.
   JS ishlamasa hamma narsa ko'rinib turadi (html.js bo'lmaydi). */
html.js [data-rv]{opacity:0;transform:translateY(16px) scale(.985)}
html.js [data-rv].in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--d,0ms);
}

.pop{animation:pop .45s var(--spring)}
@keyframes pop{0%{transform:scale(.84)}60%{transform:scale(1.08)}100%{transform:scale(1)}}

/* skeleton */
.sk{background:var(--ink-100);border-radius:8px;position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;background:var(--sheen);transform:translateX(-100%);animation:shine 1.5s infinite}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .rail__fill,.bar__f{width:var(--pct,45%)}
  html.js [data-rv]{opacity:1;transform:none}
  .mesh{display:none}
}

/* ---------- 12. Sahifa qolipi ---------- */
/* grid ichida uzun matn gorizontal siljish qilmasin */
.page>*,.page--3>*,.row>*,.rows>*>*,.grid>*,.tabs>*{min-width:0}
.page{display:grid;gap:28px}
@media(min-width:900px){.page{grid-template-columns:212px minmax(0,1fr);align-items:start}}
.page--3{display:grid;gap:28px}
@media(min-width:900px){.page--3{grid-template-columns:212px minmax(0,1fr) 300px;align-items:start}}
@media(min-width:900px) and (max-width:1120px){.page--3{grid-template-columns:212px minmax(0,1fr)}.page--3 .right{display:none}}
.right{display:grid;gap:16px;position:sticky;top:80px}

.ph{margin:0 0 6px;font-size:clamp(21px,3.4vw,28px);font-weight:800;letter-spacing:-.03em}
.ph-sub{margin:0 0 22px;color:var(--ink-400);font-size:14.5px;max-width:62ch}

/* ---------- 13. Filtr chiplari ---------- */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;margin:0 0 16px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.tabs a{
  flex:none;padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:700;
  background:var(--surface);border:1px solid var(--border);color:var(--ink-500);
  transition:all .22s var(--ease);white-space:nowrap;
}
.tabs button:hover,.tabs a:hover{border-color:var(--brand-300);color:var(--ink-900)}
.tabs .on{background:linear-gradient(135deg,var(--brand-500),var(--brand-600));color:#fff;border-color:transparent;box-shadow:0 4px 14px var(--glow)}

/* ---------- 14. Kartalar to'ri ---------- */
.grid{display:grid;gap:14px}
@media(min-width:620px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:620px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid--3{grid-template-columns:repeat(3,1fr)}}

/* kurs muqovasi */
.thumb{
  position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-md);
  display:grid;place-items:center;color:#EAF6F0;font-weight:800;font-size:26px;letter-spacing:-.03em;
}
.thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 90% at 20% 0%,rgba(255,255,255,.22),transparent 60%)}
.th-1{background:linear-gradient(140deg,#0D2A1F,#15654A)}
.th-2{background:linear-gradient(140deg,#1B2350,#3A46A8)}
.th-3{background:linear-gradient(140deg,#3A1F52,#7A55E5)}
.th-4{background:linear-gradient(140deg,#4A2A0E,#C9791A)}

/* avatar */
.av{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#fff;background:linear-gradient(140deg,var(--brand-500),var(--brand-700));
}
.av--v{background:linear-gradient(140deg,#8B6BF0,#5A38C2)}
.av--b{background:linear-gradient(140deg,#5C90FF,#1F4FCC)}
.av--a{background:linear-gradient(140deg,#F0A93C,#B36D00)}

/* ---------- 15. Kod maydoni ---------- */
.code{
  margin:0;background:var(--ink-950);color:#D7E7DF;border-radius:var(--r-md);padding:15px 17px;
  font-family:var(--mono);font-size:13px;line-height:1.75;overflow-x:auto;
  border:1px solid var(--border-strong);
}
.code .k{color:#7FE0B4}.code .s{color:#E8C07D}.code .c{color:#6D8B80}.code .n{color:#9CC7FF}

/* ---------- 16. Jadval ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{
  text-align:left;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-400);padding:0 10px 10px;
}
.tbl td{padding:11px 10px;border-top:1px solid var(--border)}
.tbl tr{transition:background .2s}
.tbl tbody tr:hover{background:var(--surface-2)}

/* ==========================================================================
   17. Talaba qobig'i — doimiy chap panel (admin bilan bir xil qattiqlik)
   ========================================================================== */
.shell{display:grid;min-height:100dvh}
@media(min-width:1000px){.shell{grid-template-columns:238px minmax(0,1fr)}}
.shell>*{min-width:0}

/* --- chap panel --- */
.side{
  display:none;position:sticky;top:0;height:100dvh;overflow-y:auto;
  background:var(--surface);border-right:1px solid var(--border);
  padding:16px 12px;z-index:30;flex-direction:column;gap:10px;
}
@media(min-width:1000px){.side{display:flex}}
.side__logo{
  display:flex;align-items:center;gap:9px;padding:6px 10px 14px;
  font-weight:800;font-size:18px;letter-spacing:-.03em;
}
.side__logo b{background:linear-gradient(92deg,var(--brand-500),var(--brand-300));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.side__logo i{width:9px;height:9px;border-radius:50%;background:var(--brand-500);font-style:normal;
  box-shadow:0 0 0 0 var(--glow);animation:beat 3.4s ease-out infinite}

.side__nav{display:grid;gap:3px;flex:1;align-content:start}
.side__nav a{
  position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;
  border-radius:12px;font-size:14px;font-weight:600;color:var(--ink-500);
  transition:background .2s,color .2s,transform .2s var(--spring);
}
.side__nav a svg{width:18px;height:18px;flex:none;transition:transform .28s var(--spring)}
.side__nav a:hover{background:var(--surface-2);color:var(--ink-900);transform:translateX(3px)}
.side__nav a:hover svg{transform:scale(1.13)}
.side__nav a[aria-current]{
  background:linear-gradient(96deg,var(--brand-50),transparent);color:var(--brand-700);font-weight:700}
.side__nav a[aria-current]::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;
  background:var(--brand-500);box-shadow:0 0 10px var(--glow)}
.side__nav a .n{
  margin-left:auto;background:var(--brand-500);color:#fff;font-size:10.5px;font-weight:800;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:grid;place-items:center}

/* pastdagi mini panel */
.side__card{
  background:linear-gradient(150deg,var(--brand-50),transparent);
  border:1px solid color-mix(in srgb,var(--brand-500) 18%,var(--border));
  border-radius:var(--r-md);padding:12px;display:grid;gap:9px;
}
.side__row{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:12.5px}
.side__row span{color:var(--ink-400);font-weight:600;display:flex;align-items:center;gap:6px}
.side__row span svg{width:13px;height:13px}
.side__row b{font-weight:800;font-variant-numeric:tabular-nums}
.side__me{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;
  transition:background .2s}
.side__me:hover{background:var(--surface-2)}
.side__me .av{display:grid;place-items:center;color:#fff;font-size:12.5px;line-height:1;flex:none}
.side__me b{display:block;font-size:13px;font-weight:700;line-height:1.3}
.side__me span{display:block;font-size:11.5px;color:var(--ink-400)}

/* --- yuqori panel --- */
.top{
  position:sticky;top:0;z-index:25;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  transition:box-shadow .25s,background .25s;
}
.top.is-stuck{box-shadow:0 6px 24px rgba(11,22,19,.07);
  background:color-mix(in srgb,var(--surface) 92%,transparent)}
.top__in{display:flex;align-items:center;gap:11px;padding:10px clamp(14px,2.6vw,26px)}
.top__t{flex:1;min-width:0}
.top__t b{display:block;font-weight:800;font-size:16px;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top__t span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* mobil logotip — desktopda chap panelda bor */
.top__logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;
  letter-spacing:-.03em;flex:none}
.top__mark{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--brand-500),var(--brand-700));color:#fff;
  font-weight:800;font-size:14.5px;box-shadow:0 3px 12px var(--glow);
  transition:transform .22s var(--spring)}
.top__logo:hover .top__mark{transform:scale(1.06) rotate(-4deg)}
.top__word b{background:linear-gradient(92deg,var(--brand-500),var(--brand-300));
  -webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:700px){.top__word{display:none}}
@media(min-width:1000px){.top__logo{display:none}}

.main{padding:clamp(16px,2.6vw,28px) clamp(14px,2.6vw,26px) 84px;position:relative;z-index:1;max-width:100%}
@media(min-width:1000px){.main{padding-bottom:44px}}
.main--narrow{max-width:840px;margin:0 auto}

@media(max-width:560px){
  .top__in{gap:8px}
  .top .streak-chip{display:none}
  .chip{padding:6px 10px;font-size:12.5px}
}

/* WU_PATCH_RC4_ROW_PLAIN
   .row uch ustunga mo'ljallangan: 44px ikonka / 1fr matn / auto pill.
   Kurs dasturi, vazifalar, testlar va amaliyot ro'yxatlari .row ni IKKI bola bilan
   yasaydi — birinchi bola 44px lik ikonka ustuniga tushib, matn harfma-harf o'raladi.
   .row--plain o'sha holat uchun: ikonka ustuni yo'q. .row ning o'zi tegilmagan,
   chunki uni admin review/settings shablonlari ham ishlatadi. */
.row--plain{grid-template-columns:1fr auto}
.row--plain>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.row--plain>span:first-child b{font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.row--plain>span:last-child{white-space:nowrap;text-align:right}
@media(max-width:560px){
  .row--plain{grid-template-columns:1fr;gap:6px}
  .row--plain>span:last-child{text-align:left}
}

/* WU_PATCH_RC4_TEXT_LESSON
   Videosiz dars: player o'rniga ixcham chiziq. Avval 16/9 bo'sh quti
   ekranning yarmini egallab, dars matnini pastga surib yuborardi. */
.player.player--text{aspect-ratio:auto;background:var(--brand-50);border:1px solid var(--border)}
.player.player--text::after{display:none}
.player__text{display:flex;align-items:center;gap:10px;padding:13px 16px;
  color:var(--brand-700);font-size:13.5px;line-height:1.4;flex-wrap:wrap}
.player__text svg{width:19px;height:19px;flex:none}
.player__text b{font-weight:800;font-size:14px}
.player__text span{color:var(--ink-500)}

/* Dars matnidagi kod bloklari (chekinish bilan yozilgan qatorlar). */
.prose pre.code{margin:14px 0;padding:14px 16px;border-radius:var(--r-md);
  background:var(--ink-050,#f4f6f5);border:1px solid var(--border);
  font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--ink-900);
  white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:560px){.prose pre.code{font-size:12.2px;padding:12px}}

/* Dars yuklanayotgandagi holat (JS kelguncha ko'rinadi). */
.player__load{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;z-index:2;
  color:#e8fff5;font-size:13.5px;font-weight:700}
.player__load i{width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(232,255,245,.85);border-top-color:transparent;
  animation:wu-spin 1.1s linear infinite}
@keyframes wu-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.player__load i{animation:none}}