@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
  --bg:#050d16;--bg2:#0a1624;--card:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.09);--text:#f3f7fc;--muted:#94a3b8;
  --blue:#4db8ff;--blue2:#8bd5ff;--green:#4ade80;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.5}

/* Global dark scrollbar — oq/oppoq scrollni olib tashlash (asosiy sahifa + kabinet) */
html, body{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:8px;height:8px}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.28);
  background-clip:padding-box;
}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
button{cursor:pointer;border:0;background:none}
img{max-width:100%;display:block}
::selection{background:rgba(77,184,255,.3);color:#fff}

body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse 80% 50% at 70% -10%,rgba(77,184,255,.14),transparent 50%),
    radial-gradient(ellipse 60% 40% at 10% 90%,rgba(77,184,255,.06),transparent 45%);
}

.container{width:min(1140px,92%);margin:auto}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:.4s var(--ease)}
.nav.scrolled{background:rgba(5,13,22,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.25)}
.navin{height:72px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:900;letter-spacing:.07em;font-size:15px}
.logo span{color:var(--blue)}
.links{display:flex;gap:26px;font-size:13.5px;color:#a8b9cb;font-weight:500}
.links a{position:relative;transition:color .25s}
.links a:hover{color:#fff}
.links a:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:var(--blue2);transform:scaleX(0);transition:transform .3s var(--ease)}
.links a:hover:after{transform:scaleX(1)}
.btn,.navcta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;font-weight:800;font-size:14px;
  background:linear-gradient(135deg,#5ec5ff,#2f8fe0);color:#03101d;
  box-shadow:0 10px 32px rgba(47,143,224,.28);
  transition: transform var(--anim-micro,200ms) var(--anim-ease,cubic-bezier(.16,1,.3,1)),
              box-shadow var(--anim-micro,200ms) var(--anim-ease,cubic-bezier(.16,1,.3,1)),
              background var(--anim-micro,200ms) ease,
              border-color var(--anim-micro,200ms) ease;
  border:1px solid rgba(255,255,255,.1);
}
.btn:hover,.navcta:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(47,143,224,.38)}
.btn:active,.navcta:active{transform:translateY(0) scale(.98)}
.ghost{background:transparent;color:rgba(255,255,255,.85);box-shadow:none;border:1px solid rgba(255,255,255,.12)}
.ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(139,213,255,.28);color:#fff;box-shadow:none}
.navRight{display:flex;align-items:center;gap:12px}
.navCabBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 16px;border-radius:999px;font-weight:700;font-size:13px;
  background:rgba(255,255,255,.06);color:#e8f4ff;
  border:1px solid rgba(255,255,255,.14);cursor:pointer;
  transition: transform var(--anim-micro,200ms) var(--anim-ease,cubic-bezier(.16,1,.3,1)),
              background var(--anim-micro,200ms) ease,
              border-color var(--anim-micro,200ms) ease,
              color var(--anim-micro,200ms) ease;
  white-space:nowrap;
}
.navCabBtn:hover{
  background:rgba(94,197,255,.15);border-color:rgba(94,197,255,.4);
  color:#fff;transform:translateY(-1px);
}
.navCabBtn:active{transform:scale(.98)}
.burger{
  display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0
}
.burger span{
  display:block;width:18px;height:2px;background:#d7e6f5;border-radius:2px;
  transition:transform .3s var(--ease),opacity .25s
}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobileMenu{
  position:fixed;inset:72px 0 0 0;z-index:45;background:rgba(5,13,22,.96);
  backdrop-filter:blur(16px);padding:20px 6%;overflow:auto
}
.mobileMenu[hidden]{display:none!important}
.mobileMenuInner{display:flex;flex-direction:column;gap:6px;max-width:420px;margin:0 auto}
.mobileMenuInner a{
  display:block;padding:14px 16px;border-radius:14px;font-size:16px;font-weight:600;color:#c5d6e8;
  border:1px solid transparent;transition:.2s
}
.mobileMenuInner a:hover{background:rgba(77,184,255,.08);border-color:var(--line);color:#fff}
/* courseActions defined in COURSE block */

/* HERO */
/* ========== HERO (cinematic full-bleed) ========== */
.hero{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;
  padding:88px 0 100px;overflow:hidden;
  isolation:isolate;
}
.heroBg{
  position:absolute;inset:0;z-index:0;
  will-change:transform;
  transform:translate3d(0,0,0) scale(1.05);
}
.heroShowcase{position:absolute;inset:0;background:#060e18}
.heroShowcase img,
.heroShowcase video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.8s cubic-bezier(.22,.61,.36,1), transform 10s cubic-bezier(.22,.61,.36,1);
}
.heroShowcase img.active,
.heroShowcase video.active{opacity:1;transform:scale(1)}
/* Chap: qorong‘i (matn o‘qiladi) · O‘ng: rasm ko‘rinadi · Past: yumshoq fade */
.heroVignette{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,
      rgba(5,13,22,.94) 0%,
      rgba(5,13,22,.82) 28%,
      rgba(5,13,22,.45) 52%,
      rgba(5,13,22,.18) 72%,
      rgba(5,13,22,.28) 100%),
    linear-gradient(180deg,
      rgba(5,13,22,.4) 0%,
      transparent 22%,
      transparent 58%,
      rgba(5,13,22,.82) 100%);
}
.heroGlow{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 55% 50% at 12% 55%, rgba(77,184,255,.1), transparent 60%);
}
.heroInner{
  position:relative;z-index:2;
  width:min(1140px,92%);margin:0 auto;
  padding-top:12px;
}
.heroCopy{
  max-width:560px;
  margin-left:clamp(0px, 2vw, 24px);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--blue2);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px
}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(74,222,128,.5)}
.heroEyebrow{
  opacity:0;transform:translateY(10px);
  animation:heroFadeUp .9s cubic-bezier(.22,.61,.36,1) .12s forwards;
}
/* Headline: 72–88px, weight 700, oq, yaqin qatorlar */
.hero h1,
.heroSlogan{
  font-size:clamp(42px,6.8vw,84px);
  line-height:1.0;
  letter-spacing:-.04em;
  font-weight:700;
  color:#fff;
  max-width:11ch;
  margin:0;
  opacity:0;filter:blur(12px);transform:translateY(16px);
  animation:heroSloganIn 1.2s cubic-bezier(.22,.61,.36,1) .25s forwards;
  will-change:opacity,transform,filter;
}
.hero h1 span,
.heroSlogan span{
  color:#fff;
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
}
/* Animatsiyali gradient shior — SamAutoClass */
.heroSlogan.anim-gradient{
  font-weight:800;
  font-size:clamp(34px,5.2vw,64px);
  max-width:none;
  letter-spacing:-.02em;
  background:linear-gradient(90deg,#353950,#00ddff,#353950);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:heroSloganIn 1.2s cubic-bezier(.22,.61,.36,1) .25s forwards,
            gradient-slide 2.8s linear infinite;
}
@keyframes gradient-slide{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
@keyframes heroSloganIn{
  0%{opacity:0;filter:blur(12px);transform:translateY(16px)}
  60%{opacity:1;filter:blur(1.5px);transform:translateY(4px)}
  100%{opacity:1;filter:blur(0);transform:translateY(0)}
}
@keyframes heroFadeUp{
  to{opacity:1;transform:translateY(0)}
}
/* Tagline: 18–21px, yumshoq oq */
.heroLead{
  color:rgba(255,255,255,.75);
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.55;
  font-weight:500;
  max-width:22ch;
  margin:26px 0 0;
  white-space:pre-line;
  opacity:0;transform:translateY(12px);
  animation:heroFadeUp 1s cubic-bezier(.22,.61,.36,1) .48s forwards;
}
.heroCta{
  margin-top:32px;
  opacity:0;transform:translateY(12px);
  animation:heroFadeUp 1s cubic-bezier(.22,.61,.36,1) .65s forwards;
}
/* Soft rectangle CTA — pill emas */
.heroBtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:190px;height:56px;padding:0 28px;
  border-radius:14px;font-size:15px;font-weight:700;
  box-shadow:0 14px 40px rgba(47,143,224,.32);
}
.heroBtn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 48px rgba(47,143,224,.42);
}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.heroContacts{display:none}

/* Scroll — nozik */
.heroScroll{
  position:absolute;left:50%;bottom:26px;z-index:3;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.45);text-decoration:none;
  opacity:0;animation:heroFadeUp 1s ease .9s forwards;
  transition:color .3s;
}
.heroScroll:hover{color:rgba(255,255,255,.8)}
.heroScrollLine{
  width:1px;height:36px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.45), transparent);
  position:relative;overflow:hidden;
}
.heroScrollLine:after{
  content:"";position:absolute;left:0;right:0;height:28%;
  background:rgba(255,255,255,.75);
  animation:scrollPulse 1.9s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%{top:-30%;opacity:0}
  35%{opacity:1}
  100%{top:100%;opacity:0}
}
.heroScrollText{
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
}
.heroEmpty{
  height:100%;display:grid;place-items:center;color:#5d738a;
  font-size:12px;letter-spacing:.14em;font-weight:700;background:#07111d
}
.heroBadge{display:none}
@media (prefers-reduced-motion:reduce){
  .heroSlogan,.heroEyebrow,.heroLead,.heroCta,.heroScroll{opacity:1;filter:none;transform:none;animation:none}
  .heroScrollLine:after{animation:none}
  .heroBg{transform:none !important}
  .heroShowcase img,.heroShowcase video{transition:opacity .6s ease}
}

/* SECTIONS */
section{padding:100px 0}
.sectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}
.sectionHead h2{font-size:clamp(22px,3.2vw,32px);letter-spacing:-.03em;line-height:1.15;font-weight:800}
.sectionHead p{color:var(--muted);max-width:380px;line-height:1.55;font-size:13.5px}
/* Typewriter — about sarlavha (bir marta) */
.typewriter-title{
  min-height:1.15em;
  white-space:normal;
}
.typewriter-title.is-typing::after{
  content:'';
  display:inline-block;
  width:2px;
  height:.85em;
  margin-left:3px;
  vertical-align:-0.05em;
  background:var(--blue2, #4db8ff);
  animation:twCaret .7s step-end infinite;
}
@keyframes twCaret{
  50%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .typewriter-title.is-typing::after{display:none}
}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{
  border:1px solid var(--line);background:var(--card);border-radius:22px;padding:26px;
  transition:transform .4s var(--ease),border-color .35s,box-shadow .4s var(--ease)
}
.card:hover{transform:translateY(-6px);border-color:rgba(77,184,255,.35);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.icon{
  width:44px;height:44px;border-radius:13px;background:rgba(77,184,255,.12);
  display:grid;place-items:center;color:var(--blue2);font-weight:900;font-size:14px;margin-bottom:20px
}
.card h3{font-size:18px;margin-bottom:8px;font-weight:800}
.card p{color:var(--muted);font-size:14px;line-height:1.65}

/* COURSE — minimalist */
#courses .sectionHead{
  margin-bottom:28px;gap:20px;align-items:flex-end
}
#courses .sectionHead h2{
  font-size:clamp(22px,3.2vw,32px);letter-spacing:-.03em;line-height:1.15;font-weight:800
}
#courses .sectionHead p{
  font-size:13.5px;line-height:1.55;max-width:340px;color:#8fa3b8
}
#courses .eyebrow{margin-bottom:10px;font-size:10px;letter-spacing:.14em}

/* ===== COURSES — compact product cards ===== */
.courseGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width:720px){
  .courseGrid{grid-template-columns:1fr;gap:12px}
}

.courseMain{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:16px;
  overflow:hidden;
  background:#0c1520;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 28px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.04);
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.courseMain:hover{
  transform:translateY(-3px);
  border-color:rgba(77,184,255,.32);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(77,184,255,.1);
}
.courseMain--featured{
  border-color:rgba(77,184,255,.38);
  box-shadow:0 10px 32px rgba(47,143,224,.16), inset 0 1px rgba(255,255,255,.05);
  z-index:1;
}
.courseMain--featured:hover{
  border-color:rgba(94,197,255,.5);
  box-shadow:0 16px 40px rgba(47,143,224,.22);
}

/* Image — pastroq */
.courseMedia{
  position:relative;
  aspect-ratio:2/1;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%,rgba(77,184,255,.12),transparent 55%),
    linear-gradient(160deg,#0a1420,#122032);
}
.courseMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.courseMain:hover .courseMedia img{transform:scale(1.04)}

.coursePopularBadge{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
  padding:3px 8px;
  border-radius:999px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#03101d;
  background:linear-gradient(135deg,#5ec5ff,#2f8fe0);
  box-shadow:0 3px 10px rgba(47,143,224,.35);
}

.coursePricePill{
  position:absolute;
  bottom:8px;
  right:8px;
  z-index:2;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:rgba(8,16,28,.82);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
  letter-spacing:-.02em;
}
.coursePricePill small{
  font-weight:600;
  font-size:10px;
  opacity:.75;
  margin-left:2px;
}
.coursePricePill--sale{
  background:rgba(251,191,36,.92);
  color:#0b0f17;
  border-color:transparent;
}
.coursePricePill--sale small{color:rgba(11,15,23,.7)}

/* Body — ixcham */
.courseBody{
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.courseTags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:8px;
}
.courseTag{
  font-size:10px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  border:1px solid rgba(255,255,255,.07);
}
.courseTag--b{
  background:rgba(77,184,255,.12);
  color:#93c5fd;
  border-color:rgba(77,184,255,.22);
}
.courseTag--bc{
  background:rgba(52,211,153,.1);
  color:#6ee7b7;
  border-color:rgba(52,211,153,.22);
}
.courseTag--accent{
  background:rgba(77,184,255,.12);
  color:#93c5fd;
  border-color:rgba(77,184,255,.2);
}

.courseName{
  font-size:clamp(15px,1.8vw,17px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25;
  margin:0 0 4px;
  color:var(--text);
}
.courseLead{
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
  margin:0 0 8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.coursePriceOld{
  font-size:11px;
  color:var(--muted);
  text-decoration:line-through;
  margin-bottom:1px;
}
.courseInstallment{
  font-size:11px;
  font-weight:600;
  color:#7eb8e8;
  margin-bottom:10px;
}
.courseActions{
  display:flex;
  gap:6px;
  margin-top:auto;
}
.courseActions .btn{
  flex:1;
  padding:9px 12px;
  font-size:12px;
  border-radius:10px;
  white-space:nowrap;
  text-align:center;
  justify-content:center;
}
.courseActions .btn.ghost{
  padding:9px 12px;
}

/* Legacy */
.courseFeatures,.courseFeature,.coursePriceBox,.coursePriceLabel,.coursePrice,.coursePriceLeft,.courseCat,.courseCatRow,.courseDurationBadge{display:none!important}

/* Admin gallery thumbs */
.galleryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:14px}
.galleryThumb{
  position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#06101a
}
.galleryThumb img{width:100%;height:100%;object-fit:cover}
.galleryThumb .rm{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.75);color:#fff;border:0;font-size:14px;line-height:1;
  display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);z-index:2
}
.galleryThumb .rm:hover{background:rgba(220,50,50,.9)}
.galleryThumb .lbl{
  position:absolute;left:6px;bottom:6px;padding:3px 7px;border-radius:6px;
  background:rgba(0,0,0,.65);font-size:9px;font-weight:700;letter-spacing:.06em;color:#fff
}
.galleryUpload{
  border:1px dashed rgba(77,184,255,.3);border-radius:14px;padding:16px;
  background:rgba(77,184,255,.04);margin-top:12px
}

/* DOCUMENTS (hujjatlar) */
.docsGrid{gap:18px}
.docCard{
  border:1px solid var(--line);background:var(--card);border-radius:22px;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s var(--ease);
  display:flex;flex-direction:column
}
.docCard:hover{
  transform:translateY(-4px);
  border-color:rgba(59,130,246,.5);
  box-shadow:
    0 0 15px rgba(59,130,246,.3),
    0 16px 40px rgba(0,0,0,.28);
}
.docVisual{
  background:rgba(77,184,255,.06);padding:22px 18px 10px;
  display:grid;place-items:center;min-height:130px;
  border-bottom:1px solid var(--line);
  transition:background .35s
}
.docCard:hover .docVisual{
  background:rgba(77,184,255,.1)
}
.docVisual svg{width:100%;max-width:140px;height:auto}
.docBody{padding:20px 22px 24px}
.docNum{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:28px;border-radius:8px;margin-bottom:12px;
  background:rgba(77,184,255,.12);color:var(--blue2);
  font-weight:900;font-size:13px;letter-spacing:.02em;
  transition:background .35s,color .35s,box-shadow .35s
}
.docCard:hover .docNum{
  background:rgba(59,130,246,.32);
  color:#93c5fd;
  box-shadow:0 0 12px rgba(59,130,246,.25)
}
.docCard h3{font-size:16px;font-weight:800;margin-bottom:6px;line-height:1.3}
.docCard p{color:var(--muted);font-size:13.5px;line-height:1.55}

/* SCROLLER CARDS */
.scrollerWrap{position:relative}
.scroller{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:6px 2px 14px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  /* Muhim: barmoq karta ustida bo‘lsa ham tepaga-pastga sayt scroll qilinsin */
  touch-action:pan-x pan-y;
}
.scroller::-webkit-scrollbar{display:none}
.personCard,.branchCard{
  flex:0 0 min(300px,82vw);scroll-snap-align:start;
  border:1px solid var(--line);border-radius:24px;background:var(--card);overflow:hidden;
  cursor:pointer;
  /* GPU-friendly: transform + opacity — CSS transition (JS emas) */
  transition:transform 0.4s ease, border-color 0.35s ease, box-shadow 0.4s ease, opacity 0.4s ease;
  will-change:transform;
}
.personCard:hover,.branchCard:hover{
  transform:translateY(-6px);border-color:rgba(77,184,255,.35);
  box-shadow:0 28px 70px rgba(0,0,0,.28)
}
/* Navbatdagi (faol) instruktor kartasi — JS .active beradi */
/* Markaziy karusel: yon kartalar xira, faol markazda */
.instructorScroller .personCard{
  opacity:0.55;
  transform:scale(0.92);
  filter:grayscale(15%);
}
.instructorScroller .personCard.active{
  opacity:1;
  transform:translateY(-12px) scale(1.05);
  filter:none;
  border-color:rgba(59,130,246,0.75);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.45),
    0 0 22px rgba(59,130,246,0.35),
    0 0 8px rgba(139,92,246,0.25);
  z-index:2;
}
.instructorScroller .personCard.active:hover{
  transform:translateY(-12px) scale(1.05);
  border-color:rgba(59,130,246,0.85);
}
/* Markazlash uchun yon padding — chap/o'ng peek */
.instructorScroller{
  padding-top:22px;
  padding-bottom:32px;
  scroll-padding-inline: calc((100% - min(300px, 82vw)) / 2);
}
.instructorScrollerWrap{
  overflow:visible;
}
/* scroll-snap markazga */
.instructorScroller .personCard{
  scroll-snap-align:center;
  scroll-snap-stop:normal;
}
/* Seamless loop jump: scroll-snap va transition o'chiriladi */
.instructorScroller.instr-no-snap{
  scroll-snap-type: none !important;
}
.instructorScroller.instr-no-snap .personCard{
  transition: none !important;
}

.personPic,.branchPic{
  height:230px;background:radial-gradient(circle at 50% 20%,rgba(77,184,255,.12),transparent 50%),rgba(255,255,255,.02);
  display:grid;place-items:center;font-size:56px;font-weight:900;color:rgba(255,255,255,.07);overflow:hidden;position:relative
}
.personPic img,.branchPic img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.personCard:hover .personPic img,.branchCard:hover .branchPic img{transform:scale(1.05)}
.cardTag{
  position:absolute;left:14px;top:14px;padding:6px 10px;border-radius:999px;
  background:rgba(5,12,20,.55);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);font-size:9px;font-weight:800;letter-spacing:.1em;color:#cfe3f5
}
.personBody,.branchBody{padding:20px 22px 22px}
.personBody h3,.branchBody h3{font-size:20px;font-weight:800;margin-bottom:4px;letter-spacing:-.02em}
.cardSocials{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:14px}
.cardSocials .chip{
  flex:1 1 0;min-width:0;text-align:center;padding:8px 6px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:#d7e6f4;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  transition:background .25s var(--ease),border-color .25s,color .25s,box-shadow .25s,transform .2s;
  white-space:nowrap
}
.cardSocials .chip:hover{
  transform:translateY(-1px);
  color:#fff;
}
/* Tel — yashil / teal */
.cardSocials .chip--tel:hover{
  background:rgba(34,197,94,.22);
  border-color:rgba(34,197,94,.65);
  box-shadow:0 0 14px rgba(34,197,94,.35);
  color:#bbf7d0;
}
/* Telegram — ko'k */
.cardSocials .chip--tg:hover{
  background:rgba(37,150,211,.28);
  border-color:rgba(37,150,211,.75);
  box-shadow:0 0 16px rgba(37,150,211,.4);
  color:#e0f2fe;
}
/* Instagram — gradient */
.cardSocials .chip--ig:hover{
  background:linear-gradient(135deg,rgba(131,58,180,.35),rgba(253,29,29,.3),rgba(252,176,69,.28));
  border-color:rgba(225,48,108,.7);
  box-shadow:0 0 16px rgba(225,48,108,.4);
  color:#fff;
}

.muted{color:var(--muted);font-size:13px}
.cardLink{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;font-weight:800}
.cardLink span{transition:transform .25s}

.personCard:hover .cardLink span,.branchCard:hover .cardLink span{transform:translateX(4px)}

/* REVIEWS — glass cards + stars + badge + nav */
.sectionHead--reviews{
  margin-bottom:22px;
  align-items:flex-end;
}
.reviewNav{
  display:flex;gap:8px;flex-shrink:0;
}
.reviewNavBtn{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  font-size:22px;line-height:1;font-weight:300;
  color:var(--blue2);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(77,184,255,.22);
  transition:background .25s, border-color .25s, color .25s, transform .2s, box-shadow .25s;
}
.reviewNavBtn:hover{
  background:rgba(77,184,255,.12);
  border-color:rgba(77,184,255,.45);
  color:#fff;
  box-shadow:0 0 18px rgba(77,184,255,.2);
  transform:translateY(-1px);
}
.reviewNavBtn:active{transform:translateY(0)}

.reviewScrollerWrap{position:relative}
.reviewScroller{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:6px 2px 18px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
}
.reviewScroller::-webkit-scrollbar{display:none}

.reviewCard{
  position:relative;
  flex:0 0 min(300px,82vw);
  max-width:320px;
  scroll-snap-align:start;
  padding:22px 20px 20px;
  border-radius:20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(0,150,255,.15);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .4s var(--ease), border-color .35s, box-shadow .4s, background .35s;
  will-change:transform;
}
.reviewCard:hover{
  transform:translateY(-6px);
  border-color:rgba(77,184,255,.45);
  background:rgba(77,184,255,.05);
  box-shadow:0 20px 50px rgba(0,0,0,.28), 0 0 28px rgba(0,150,255,.12);
}

/* Large faded quote mark */
.reviewQuoteMark{
  position:absolute;
  top:8px;right:14px;
  font-size:72px;line-height:1;
  font-family:Georgia,serif;
  color:rgba(77,184,255,.11);
  pointer-events:none;
  user-select:none;
  z-index:0;
}

/* Category badge top-right */
.reviewBadge{
  position:absolute;
  top:14px;right:14px;
  z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--blue2);
  background:rgba(5,13,22,.55);
  border:1px solid rgba(77,184,255,.28);
  backdrop-filter:blur(8px);
  max-width:46%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.reviewBadgeDot{
  width:5px;height:5px;border-radius:50%;
  background:var(--blue2);
  box-shadow:0 0 6px rgba(77,184,255,.6);
  flex-shrink:0;
}

.reviewTop{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:relative;z-index:1;
  padding-right:4px;
}
.reviewStars{
  display:flex;gap:2px;
  font-size:14px;line-height:1;
  letter-spacing:.02em;
}
.reviewStars .star{
  color:rgba(255,255,255,.18);
  transition:color .2s, text-shadow .2s;
}
.reviewStars .star.is-on{
  color:#f5c542;
  text-shadow:0 0 10px rgba(245,197,66,.45);
}
.reviewDate{
  font-size:11px;font-weight:600;
  color:#7a93ab;
  white-space:nowrap;
}

.reviewText{
  position:relative;z-index:1;
  margin:0;
  font-size:14.5px;line-height:1.65;
  color:#d8e6f3;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}

.reviewHead{
  display:flex;align-items:center;gap:12px;
  margin-top:4px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;z-index:1;
}
.reviewAvatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;object-fit:cover;
  border:1.5px solid rgba(77,184,255,.32);
  box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 0 3px rgba(77,184,255,.06);
}
.reviewAvatarFallback{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:13px;font-weight:800;color:#8bd5ff;
  border:1.5px solid rgba(77,184,255,.32);
  background:linear-gradient(145deg,rgba(77,184,255,.22),rgba(10,22,36,.95));
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.reviewMeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.reviewAuthor{
  font-size:13.5px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.reviewRole{
  font-size:11.5px;color:#8fa3b8;font-weight:500;
}

/* legacy class hooks (agar boshqa joyda ishlatilsa) */
.quote{font-size:15.5px;line-height:1.65;color:#d8e6f3}
.author{margin-top:16px;color:var(--muted);font-size:12.5px;font-weight:600}

@media(max-width:600px){
  .sectionHead--reviews{margin-bottom:16px}
  .reviewNavBtn{width:36px;height:36px;font-size:20px}
  .reviewCard{flex:0 0 min(280px,86vw);padding:18px 16px 16px}
  .reviewQuoteMark{font-size:56px;top:4px;right:10px}
}
.coursePriceOld{
  font-size:13px;color:#b8c9d9;text-decoration:line-through;opacity:.95;font-weight:600;
  margin-bottom:2px;letter-spacing:-.01em;
}


/* ========== BRANCH FROSTED GLASS BUTTONS ========== */
.branchButtons{
  display:flex;
  flex-wrap:wrap;
  gap:16px 18px;
  justify-content:flex-start;
  align-items:center;
  padding:8px 0 12px;
}
.branchBtnSkeleton{
  width:160px;height:56px;border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  animation:pulse 1.4s ease-in-out infinite;
}

/* Glassy button — adapted to SAM AVTO blue theme */
.glassy-button{
  --_padding: 1rem 1.65rem;
  --_transition-speed: 200ms;
  --_hover-opacity: 0.22;
  --_pressed-opacity: 0.12;
  --_hover-blurriness: 8px;
  --_pressed-blurriness: 12px;
  --_frostiness: 0.35;
  --_hover-offset: 0.4rem;
  --_pressed-offset: 0.2rem;
  --_motion-factor: 0.08;
  --_surface: #4db8ff;

  outline: 0;
  cursor: pointer;
  font: inherit;
  color: #061018;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background-color: transparent;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.glassy-button > span{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  padding: var(--_padding);
  border-radius: inherit;
  background-color: hsl(0 0% 100% / 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background-color var(--_transition-speed),
    backdrop-filter var(--_transition-speed),
    translate var(--_transition-speed),
    -webkit-backdrop-filter var(--_transition-speed);
  white-space: nowrap;
}
.glassy-button .branchBtnInner{
  display: flex;
  align-items: center;
  gap: 10px;
}
.glassy-button .branchPin{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: 1;
  color: inherit;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
  transition: transform var(--_transition-speed), opacity var(--_transition-speed);
}
.glassy-button:hover .branchPin,
.glassy-button:focus-visible .branchPin{
  transform: translateY(-1px) scale(1.12);
  opacity: 1;
}
.glassy-button .branchBtnLabel{
  display: inline;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.glassy-button > span::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 171 171' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.74' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0;
  transition: opacity var(--_transition-speed);
}
.glassy-button::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-color: var(--_surface);
  box-shadow: 0 8px 24px rgba(0,120,255,.18);
  transition: scale var(--_transition-speed),
    translate var(--_transition-speed),
    box-shadow var(--_transition-speed);
  animation: branchGlassyExit forwards var(--_transition-speed);
}
.glassy-button:hover > span,
.glassy-button:focus-visible > span{
  outline: 1px solid hsl(0 0% 100% / 0.55);
  background-color: hsl(0 0% 100% / var(--_hover-opacity));
  -webkit-backdrop-filter: blur(var(--_hover-blurriness));
  backdrop-filter: blur(var(--_hover-blurriness));
  translate: 0 calc(var(--_hover-offset) * -1);
}
.glassy-button:hover > span::before,
.glassy-button:focus-visible > span::before{
  opacity: var(--_frostiness);
}
.glassy-button:hover::after,
.glassy-button:focus-visible::after{
  scale: 0.96;
  translate: 0 0.1rem;
  box-shadow: 0 12px 32px rgba(0,150,255,.28);
  animation: branchGlassyEnter forwards var(--_transition-speed);
}
.glassy-button:active > span{
  -webkit-backdrop-filter: blur(var(--_pressed-blurriness));
  backdrop-filter: blur(var(--_pressed-blurriness));
  background-color: hsl(0 0% 100% / var(--_pressed-opacity));
  translate: 0 calc(var(--_pressed-offset) * -1);
}
.glassy-button:active::after{
  scale: 0.9;
  translate: 0 0.2rem;
}

@keyframes branchGlassyEnter {
  from { transform: translate(0, 0); }
  to {
    transform: translate(
      calc(var(--_x-motion, 0px) * var(--_motion-factor) * -1),
      calc(var(--_y-motion, 0px) * var(--_motion-factor) * -1)
    );
  }
}
@keyframes branchGlassyExit {
  from {
    transform: translate(
      calc(var(--_x-motion, 0px) * var(--_motion-factor) * -1),
      calc(var(--_y-motion, 0px) * var(--_motion-factor) * -1)
    );
  }
  to { transform: translate(0, 0); }
}

/* Color variants — cycle through site blues */
.branchGlassy:nth-child(4n+1){ --_surface: #4db8ff; color: #061018; }
.branchGlassy:nth-child(4n+2){ --_surface: #3d9aef; color: #061018; }
.branchGlassy:nth-child(4n+3){ --_surface: #6ec8ff; color: #061018; }
.branchGlassy:nth-child(4n+4){ --_surface: #2b8ad4; color: #f0f7ff; }

@media (max-width: 600px){
  .branchButtons{ gap: 12px; }
  .glassy-button{ font-size: 14px; }
  .glassy-button{ --_padding: 0.85rem 1.25rem; border-radius: 14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .glassy-button,
  .glassy-button span,
  .glassy-button::after{
    transition: none !important;
    animation: none !important;
  }
}


/* FAQ */
.faqTabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  max-width:820px;margin:0 auto 22px;padding:0 4px
}
.faqTab{
  appearance:none;border:1px solid rgba(77,184,255,.22);
  background:rgba(12,22,36,.55);color:rgba(255,255,255,.72);
  padding:10px 16px;border-radius:999px;font-size:13px;font-weight:650;
  cursor:pointer;transition:all .25s var(--ease);opacity:.6;
  white-space:nowrap;letter-spacing:.01em
}
.faqTab:hover{opacity:.9;border-color:rgba(77,184,255,.4);color:#fff}
.faqTab.active{
  opacity:1;color:#fff;
  background:linear-gradient(135deg,rgba(30,120,220,.55),rgba(77,184,255,.28));
  border-color:rgba(77,184,255,.85);
  box-shadow:0 0 0 1px rgba(77,184,255,.25),0 8px 28px rgba(30,120,220,.25)
}
.faq{max-width:820px;margin:auto;display:grid;gap:10px;transition:opacity .18s ease}
.faq.faqFading{opacity:0}
.faq.faqFadingIn{animation:faqFadeIn .28s ease both}
@keyframes faqFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.faqItem{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faqItem:hover{border-color:rgba(77,184,255,.25)}
.faqItem.open{border-color:rgba(77,184,255,.4);box-shadow:0 12px 40px rgba(0,0,0,.15)}
.faqQ{
  width:100%;padding:18px 20px;color:#fff;display:flex;justify-content:space-between;align-items:center;
  text-align:left;font-weight:700;font-size:14.5px;gap:14px;background:transparent;border:0;cursor:pointer
}
.faqQ i{
  width:28px;height:28px;border-radius:50%;background:rgba(77,184,255,.1);
  display:grid;place-items:center;color:var(--blue2);font-style:normal;font-size:16px;flex-shrink:0;
  transition:transform .35s var(--ease),background .3s
}
.faqItem.open .faqQ i{transform:rotate(45deg);background:rgba(77,184,255,.2)}
.faqA{max-height:0;overflow:hidden;color:var(--muted);line-height:1.7;padding:0 20px;font-size:14px;transition:.4s var(--ease)}
.faqItem.open .faqA{max-height:420px;padding:0 20px 18px}
.faqEmpty{text-align:center;padding:28px 16px;border:1px dashed var(--line);border-radius:16px}
.faqCta{
  max-width:820px;margin:28px auto 0;text-align:center;
  padding:22px 18px;border-radius:18px;
  border:1px solid rgba(77,184,255,.18);
  background:linear-gradient(180deg,rgba(20,36,58,.55),rgba(12,22,36,.35))
}
.faqCtaText{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.faqCtaActions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.adminCatBadge{
  display:inline-block;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:650;
  background:rgba(77,184,255,.12);color:var(--blue2);border:1px solid rgba(77,184,255,.25);white-space:nowrap
}
@media (max-width:560px){
  .faqTabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:16px;
  }
  .faqTab{
    padding:10px 8px;
    font-size:12px;
    white-space:normal;
    text-align:center;
    line-height:1.25;
    border-radius:14px;
  }
  /* "Barchasi" / "Все" — to‘liq kenglikda chiroyli */
  .faqTab[data-cat="all"]{
    grid-column:1 / -1;
  }
}

/* FINAL */
.final{text-align:center;padding:110px 0}
.finalBox{
  border:1px solid var(--line);border-radius:32px;padding:64px 28px;
  background:radial-gradient(circle at center,rgba(77,184,255,.11),rgba(255,255,255,.02) 50%);
  box-shadow:0 0 0 1px rgba(77,184,255,.04)
}
.final h2{font-size:clamp(34px,5.5vw,56px);letter-spacing:-.045em;font-weight:900}
.final p{color:var(--muted);margin:16px auto 28px;max-width:480px;line-height:1.7;font-size:15px}
@media (max-width:560px){
  #finalActions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
    max-width:360px;
    margin:0 auto;
  }
  #finalActions .btn{
    width:100%;
    justify-content:center;
    padding-left:10px;
    padding-right:10px;
    font-size:13.5px;
  }
  .finalBox{padding:40px 18px;border-radius:24px}
}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:48px 0 22px}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot h4{margin-bottom:14px;font-size:13px;font-weight:800;letter-spacing:.04em}
.foot a,.foot p{display:block;color:var(--muted);font-size:13.5px;line-height:2;transition:color .2s}
.foot a:hover{color:#fff}
.copyright{border-top:1px solid var(--line);margin-top:36px;padding-top:18px;color:#5a6f84;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.copyright span{line-height:1.4}
@media (max-width:720px){
  .footgrid{
    grid-template-columns:1fr 1fr !important;
    gap:22px 18px;
  }
  /* Brand to'liq kenglik */
  .footgrid > .foot:first-child{
    grid-column:1 / -1;
  }
  /* Aloqa va Bo'limlar yonma-yon (2- va 3-ustun) — avtomatik */
  .foot a,.foot p{line-height:1.85;font-size:13px}
  .copyright{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    text-align:left;
  }
}

/* REVEAL */
.reveal{opacity:0;transform:translateY(22px);transition:.75s var(--ease)}
.reveal.show{opacity:1;transform:none}

/* MODALS */
.modal{
  position:fixed;inset:0;background:rgba(2,6,12,.78);backdrop-filter:blur(14px);
  z-index:200;display:none;align-items:center;justify-content:center;padding:18px;overflow-y:auto
}
.modal.show{display:flex}
#editModal{z-index:220}
#loginModal{z-index:230}
.formBox,.login{
  width:min(440px,100%);max-height:min(92vh,700px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#0a1522;border:1px solid var(--line);border-radius:24px;padding:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);animation:modalIn .4s var(--ease)
}
#editModal .formBox{max-height:min(88vh,640px);padding:18px 20px}
#editModal .field{margin:9px 0}
#editModal .field input,#editModal .field textarea,#editModal .field select{padding:10px 12px}
#editModal .imagePreview{height:96px}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
.field{display:grid;gap:7px;margin:14px 0}
.field label{font-size:11.5px;color:#9aafc2;font-weight:600}
.field input,.field textarea,.field select{
  width:100%;background:#06101a;color:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 13px;outline:none;transition:border-color .25s
}
.field input:focus,.field textarea:focus{border-color:var(--blue)}
.imagePreview{width:100%;height:130px;border:1px dashed var(--line);border-radius:12px;display:grid;place-items:center;overflow:hidden;background:#06101a;color:var(--muted);margin-top:6px;font-size:12px}
.imagePreview img{width:100%;height:100%;object-fit:cover}

/* DETAIL MODAL — scroll qo‘llab-quvvatlanadi (uzun tavsif uchun) */
.detailModal .formBox{
  width:min(880px,100%);
  padding:0;
  max-height:min(92vh,860px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.detailGrid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.detailPhoto{
  min-height:280px;
  background:radial-gradient(circle at 50% 20%,rgba(77,184,255,.1),transparent 50%),#07111d;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.detailPhoto img{width:100%;height:100%;object-fit:cover}
.detailBody{
  padding:36px 34px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  max-height:min(92vh,860px);
}
.detailBody h2{font-size:30px;letter-spacing:-.03em;margin:8px 0 6px;font-weight:900}
.detailClose{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.4);color:#fff;font-size:18px;z-index:2
}

/* ADMIN */
.adminOpen{display:none!important; /* public yuzda yashirin */
  position:fixed;right:16px;bottom:16px;z-index:90;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#0b1b2d;color:#8fa3b8;opacity:.55;transition:.3s;
  display:grid;place-items:center;font-size:18px;cursor:pointer
}
.adminOpen:hover{opacity:1;color:var(--blue2);transform:scale(1.08);border-color:rgba(77,184,255,.35)}
.admin{
  position:fixed;inset:0;z-index:110;background:#050d16;display:none;
  overflow:hidden; /* butun panel emas — faqat main scroll */
}
.admin.show{display:flex;flex-direction:column}
.adminTop{
  height:64px;flex-shrink:0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;background:rgba(5,13,22,.95);backdrop-filter:blur(12px);z-index:2
}
.adminLayout{
  display:grid;grid-template-columns:210px 1fr;
  flex:1;min-height:0; /* flex ichida scroll ishlashi uchun */
  overflow:hidden;
}
.side{
  border-right:1px solid var(--line);padding:18px 10px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  height:100%;
}
.side button{width:100%;padding:11px 12px;color:#9aafc2;text-align:left;border-radius:9px;margin-bottom:3px;font-size:13px;font-weight:600;transition:.2s}
.side button.active,.side button:hover{background:rgba(77,184,255,.1);color:#fff}
.adminMain{
  padding:24px;max-width:1060px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  height:100%;
}
.dash{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 24px}
.dash .card{cursor:default;transition:border-color .25s,transform .25s}
.dash .card:hover{border-color:rgba(77,184,255,.25)}
.dash .card b{font-size:26px;display:block;margin-top:6px}
.dash .card.dashClick{cursor:pointer}
.dash .card.dashClick:hover{transform:translateY(-2px);border-color:rgba(77,184,255,.4)}
.periodTabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.periodTabs button{
  padding:8px 14px;border-radius:999px;font-size:12px;font-weight:600;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted)
}
.periodTabs button.active{background:rgba(77,184,255,.14);border-color:rgba(77,184,255,.4);color:#fff}
.quickActions{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 18px}
.statusChip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:600;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--muted);cursor:pointer;transition:.2s
}
.statusChip:hover,.statusChip.active{border-color:rgba(77,184,255,.4);color:#fff;background:rgba(77,184,255,.12)}
.statusChip b{color:#fff}
.badgeStatus{
  display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.02em
}
.badgeStatus.new{background:rgba(77,184,255,.18);color:#8bd5ff}
.badgeStatus.contacted{background:rgba(250,204,21,.15);color:#fde68a}
.badgeStatus.enrolled,.badgeStatus.paid{background:rgba(74,222,128,.15);color:#86efac}
.badgeStatus.done{background:rgba(255,255,255,.08);color:#c5d4e4}
.badgeStatus.cancel{background:rgba(255,100,120,.15);color:#ffb3bd}
.adminTable{width:100%;border-collapse:collapse}
.adminTable th,.adminTable td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:12.5px}
.adminTable th{color:#7a91a6;font-weight:600}
.adminTable tbody tr{transition:background .2s}
.adminTable tbody tr:hover{background:rgba(255,255,255,.03)}
.miniBtn{border:1px solid var(--line);background:#0b1b2d;color:#fff;border-radius:8px;padding:7px 10px;margin-right:4px;font-size:12px;font-weight:600}
.miniBtn.danger{color:#ff9baa}
.miniBtn:disabled{opacity:.55;cursor:not-allowed}
.panel{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:18px}
.uploadProgress{
  height:6px;border-radius:999px;background:rgba(255,255,255,.06);margin-top:8px;overflow:hidden;display:none
}
.uploadProgress > span{
  display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue2));
  transition:width .2s ease
}
.imagePreview{position:relative}
.confirmOverlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;display:none;
  align-items:center;justify-content:center;padding:20px
}
.confirmOverlay.show{display:flex}
.confirmBox{
  width:min(400px,92vw);background:#0a1624;border:1px solid var(--line);border-radius:16px;
  padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.45)
}
.confirmBox h3{font-size:17px;margin-bottom:8px}
.confirmBox p{color:var(--muted);font-size:13.5px;line-height:1.5;margin-bottom:16px}
.barChart{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:16px;padding:0 4px}
.barChart .bar{
  flex:1;background:rgba(77,184,255,.18);border-radius:8px 8px 4px 4px;min-height:4px;
  position:relative;transition:height .4s var(--ease)
}
.barChart .bar span{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);
  white-space:nowrap;margin-bottom:4px
}
.barChart .bar label{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);
  margin-top:6px;white-space:nowrap
}
.toast{
  position:fixed;right:18px;top:84px;background:#0f2436;border:1px solid rgba(77,184,255,.35);
  padding:12px 16px;border-radius:12px;z-index:9999;transform:translateX(120%);transition:.4s var(--ease);
  font-size:13px;font-weight:600;box-shadow:0 12px 40px rgba(0,0,0,.3);max-width:min(420px,90vw);word-break:break-word
}
.toast.show{transform:none}

/* MOBILE */
@media(max-width:900px){
  .links{display:none}
  .burger{display:flex}
  .navcta{display:none}
  .navCabBtn{display:none}
  .grid3,.footgrid,.adminLayout,.courseFeatures,.courseGrid,.dash,.detailGrid{grid-template-columns:1fr}
  .hero{align-items:flex-end;padding:72px 0 88px}
  .heroVignette{
    background:
      linear-gradient(180deg,
        rgba(5,13,22,.35) 0%,
        rgba(5,13,22,.5) 35%,
        rgba(5,13,22,.88) 100%),
      linear-gradient(90deg, rgba(5,13,22,.55) 0%, rgba(5,13,22,.25) 100%);
  }
  .heroCopy{max-width:100%;margin-left:0}
  .side{display:none}
  .sectionHead{display:block}
  .sectionHead p{margin-top:12px}
  .coursePriceBox{flex-direction:column;align-items:stretch;gap:12px}
  .courseActions{width:100%}
  .courseActions .btn{flex:1}
  .detailPhoto{min-height:200px;max-height:220px}
  .detailGrid{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .detailBody{max-height:none;overflow-y:visible;padding:24px 20px 28px}
  .detailModal .formBox{max-height:min(94vh,900px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:560px){
  .hero{padding:64px 0 80px}
  .hero h1,.heroSlogan{font-size:clamp(40px,11vw,48px);max-width:10ch;font-weight:700}
  .heroSlogan.anim-gradient{max-width:none;font-weight:800;font-size:clamp(30px,8.5vw,42px)}
  .heroLead{font-size:17px;max-width:20ch;margin-top:20px}
  .heroBtn{height:52px;min-width:170px;border-radius:12px}
  .heroScroll{bottom:16px}
  .heroScrollLine{height:28px}
  section{padding:72px 0}
  .final{padding:80px 0}
  .courseMain{padding:18px 16px 16px}
  .courseMain--featured{margin-top:0;padding:18px 16px 16px}
  .courseMain h3{font-size:17px}
  .coursePrice{font-size:20px}
  .courseFeature{font-size:11px;padding:4px 8px}
  .btn,.navcta{padding:12px 18px;font-size:13px}
}

/* PROMO BANNER — Cyberpunk / Web3 Gradient */
.promoWrap{margin:22px 0 0;width:100%}
.promoWrap:empty,.promoWrap[hidden]{display:none!important;margin:0!important;padding:0!important;height:0!important}

.promoCard{
  position:relative;overflow:hidden;border-radius:22px;
  /* Glassmorphism */
  background:rgba(15,23,42,.65);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:28px 32px;
  display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  /* Soft outer glow (purple + orange) */
  box-shadow:
    0 0 0 1px transparent,
    0 20px 60px rgba(0,0,0,.45),
    0 0 40px rgba(139,92,246,.12),
    0 0 60px rgba(249,115,22,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
  animation:promoIn .7s var(--ease) both;
}
/* Gradient border via mask (border-radius ishlaydi) */
.promoCard:after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,#3B82F6 0%,#8B5CF6 45%,#F97316 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:0;
}
/* Soft ambient glow blob */
.promoCard:before{
  content:"";position:absolute;inset:auto -15% -40% auto;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(249,115,22,.22),rgba(139,92,246,.12) 40%,transparent 70%);
  pointer-events:none;z-index:0;
  animation:promoGlow 6s ease-in-out infinite alternate;
}

.promoLeft{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:12px;
  flex:1;min-width:min(100%,280px);
}
.promoRight{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  flex-shrink:0;
}

.promoBadge{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  color:#e0e7ff;
  background:rgba(139,92,246,.22);
  border:1px solid rgba(139,92,246,.4);
  padding:5px 12px;border-radius:999px;
}
.promoTitle{
  font-size:clamp(18px,2.4vw,24px);font-weight:900;line-height:1.25;
  color:#fff;letter-spacing:-.02em;margin:0;
}
.promoDesc{
  font-size:13.5px;color:#94A3B8;max-width:520px;line-height:1.55;margin:0;
}

/* Countdown — alohida kapsulalar */
.promoTimer{
  display:flex;align-items:stretch;gap:6px;margin-top:4px;flex-wrap:wrap;
}
.promoTimerUnit{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:52px;
}
.promoTimerNum{
  display:flex;align-items:center;justify-content:center;
  min-width:48px;height:42px;padding:0 8px;
  font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;
  color:#fff;letter-spacing:.02em;
  background:rgba(15,23,42,.75);
  border:1px solid rgba(148,163,184,.2);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.promoTimerLbl{
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#64748b;
}
.promoTimerSep{
  display:flex;align-items:center;padding-bottom:18px;
  font-size:16px;font-weight:700;color:rgba(148,163,184,.45);
}

/* Foyda matni — yashil o'rniga olovrang */
.promoDiscount{
  font-size:clamp(18px,2.2vw,26px);font-weight:900;letter-spacing:-.02em;
  color:#F97316;
  text-shadow:0 0 28px rgba(249,115,22,.4);
  text-align:right;line-height:1.2;
}

/* CTA — olovrang tugma + hover glow */
.promoCta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:14px;
  font-size:15px;font-weight:800;letter-spacing:.01em;
  color:#fff;
  background:linear-gradient(135deg,#F97316 0%,#ea580c 100%);
  border:0;cursor:pointer;
  box-shadow:0 8px 28px rgba(249,115,22,.35), 0 0 0 1px rgba(249,115,22,.2);
  transition:transform .25s var(--ease), box-shadow .25s, filter .25s;
}
.promoCta:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:
    0 12px 36px rgba(249,115,22,.5),
    0 0 40px rgba(249,115,22,.25),
    0 0 0 1px rgba(249,115,22,.35);
}
.promoCta:active{transform:translateY(0);filter:brightness(.98)}

@keyframes promoIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes promoGlow{from{transform:translate(0,0) scale(1);opacity:.85}to{transform:translate(-24px,-12px) scale(1.15);opacity:1}}

@media(max-width:720px){
  .promoCard{padding:24px 20px;gap:20px}
  .promoRight{align-items:stretch;width:100%}
  .promoDiscount{text-align:left}
  .promoCta{width:100%}
  .promoTimerUnit{min-width:46px}
  .promoTimerNum{min-width:44px;height:38px;font-size:16px}
}
.trustBar{
  display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:center;align-items:center;
  margin:18px auto 0;width:min(1140px,92%);padding:14px 18px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:13px;color:var(--muted);
}
.trustBar b{color:#fff;font-weight:700}


/* ========== SKELETON LOADING ========== */
@keyframes skeletonShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.skeleton{
  background:linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 75%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.4s ease-in-out infinite;
  border-radius:12px;
  pointer-events:none;
  user-select:none;
}
.skeleton-text{height:14px;border-radius:8px;margin-bottom:10px}
.skeleton-text.lg{height:22px;width:70%}
.skeleton-text.md{height:16px;width:90%}
.skeleton-text.sm{height:12px;width:55%}
.skeleton-text.xs{height:10px;width:40%}
.skeleton-avatar{width:100%;aspect-ratio:4/3;border-radius:16px;margin-bottom:14px}
.skeleton-circle{width:36px;height:36px;border-radius:50%;flex-shrink:0}

/* Course skeleton */
.skeleton-course{
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:28px;min-height:320px
}
.skeleton-course .skeleton-badge{width:72px;height:22px;border-radius:999px;margin-bottom:16px}
.skeleton-course .skeleton-price{width:140px;height:36px;border-radius:12px;margin-top:20px}
.skeleton-course .skeleton-btn{width:110px;height:42px;border-radius:999px;margin-top:16px;display:inline-block}

/* Person / Branch card skeleton */
.skeleton-card{
  flex:0 0 260px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;padding:0 0 18px
}
.skeleton-card .skeleton-avatar{border-radius:0;margin-bottom:0;aspect-ratio:1.2}
.skeleton-card-body{padding:16px 16px 0}

/* Review skeleton */
.skeleton-review{
  flex:0 0 300px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:22px;min-height:160px
}
.skeleton-review .skeleton-quote{height:48px;border-radius:10px;margin-bottom:18px}
.skeleton-review-head{display:flex;align-items:center;gap:12px}

/* FAQ skeleton */
.skeleton-faq{
  border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:18px 20px;margin-bottom:10px
}
.skeleton-faq .skeleton-text{margin-bottom:0;height:18px;width:75%}

/* Hero skeleton */
.skeleton-hero{
  position:absolute;inset:0;border-radius:24px;overflow:hidden
}
.skeleton-hero .skeleton{width:100%;height:100%;border-radius:24px}

/* Course grid while loading */
.skeleton-course-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px
}
@media(max-width:768px){
  .skeleton-course-grid{grid-template-columns:1fr}
  .skeleton-card{flex:0 0 220px}
  .skeleton-review{flex:0 0 260px}
}

/* ========== BLOG (premium, calm) ========== */
#blog{padding:80px 0 40px}
.blogCard{
  flex:0 0 min(300px,82vw);
  scroll-snap-align:start;
  background:linear-gradient(180deg, rgba(14,24,38,.95) 0%, rgba(8,14,24,.98) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .4s var(--ease), border-color .35s, box-shadow .4s;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
}
.blogCard:hover{
  transform:translateY(-6px);
  border-color:rgba(77,184,255,.32);
  box-shadow:0 28px 64px rgba(0,0,0,.32), 0 0 0 1px rgba(77,184,255,.08);
}
.blogPic{
  position:relative;
  aspect-ratio:16/10;
  background:linear-gradient(135deg, #0c1828 0%, #061018 100%);
  overflow:hidden;
}
.blogPic img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.blogCard:hover .blogPic img{transform:scale(1.06)}
.blogPicFade{
  position:absolute; inset:auto 0 0 0; height:48%;
  background:linear-gradient(180deg, transparent 0%, rgba(8,14,24,.85) 100%);
  pointer-events:none;
}
.blogPicPlaceholder{
  display:grid; place-items:center; height:100%;
  font-size:42px; opacity:.12;
}
.blogBadge{ display:none !important; } /* rasmni to‘smasin */
.blogBody{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;gap:0}
.blogBody h3{
  font-size:16.5px;font-weight:750;letter-spacing:-.02em;line-height:1.35;
  margin:0 0 8px;color:#f1f5f9;
}
.blogExcerpt{
  font-size:13.5px;color:#94a3b8;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  flex:1;margin:0 0 14px;
}
.blogCta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:#4db8ff;
  transition:gap .25s var(--ease), color .2s;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  margin-top:auto;
}
.blogCta:hover{color:#fff;gap:10px}
.blogCta span{transition:transform .25s var(--ease)}
.blogCta:hover span{transform:translateX(3px)}
a.blogCta{text-decoration:none}

.skeleton-blog{
  flex:0 0 min(320px,85vw);
  background:var(--card);border:1px solid var(--line);
  border-radius:22px;overflow:hidden;
}
@media(max-width:768px){
  .skeleton-blog{flex:0 0 260px}
  .blogCard{flex:0 0 280px}
}

/* ========== AVTOPARK (fleet) ========== */
.carCard{
  flex:0 0 min(340px,88vw);
  scroll-snap-align:start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .4s var(--ease), border-color .35s, box-shadow .4s;
}
.carCard:hover{
  transform:translateY(-6px);
  border-color:rgba(77,184,255,.32);
  box-shadow:0 28px 70px rgba(0,0,0,.28);
}
.carPic{
  position:relative;
  aspect-ratio:16/10;
  background:
    radial-gradient(circle at 70% 30%, rgba(77,184,255,.12), transparent 50%),
    #07111d;
  overflow:hidden;
}
.carPic img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.carCard:hover .carPic img{transform:scale(1.05)}
.carPic:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(5,13,22,.75) 100%);
  pointer-events:none;
}
.carModel{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  background:rgba(5,13,22,.7);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);color:var(--blue2);
}
.carBody{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1;gap:6px}
.carBody h3{
  font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:#fff;margin:0;
}
.carDesc{
  font-size:13.5px;color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:0;
}

/* ========== FLEET SPLIT + 3D PARALLAX ========== */
.fleetSplit{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:36px 48px;
  align-items:center;
  margin-top:8px;
}
.fleetCopy{max-width:480px}

/* Feature cards — gradient border, better contrast, spacing */
.fleetFeatures{list-style:none;display:grid;gap:16px;margin:0;padding:0}
.fleetFeatures li{
  position:relative;
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid transparent;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* Gradient border via mask */
.fleetFeatures li::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(
    135deg,
    rgba(77,184,255,.55) 0%,
    rgba(77,184,255,.22) 40%,
    rgba(77,184,255,.08) 70%,
    rgba(77,184,255,.04) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.9;
  transition:opacity .3s ease;
}
.fleetFeatures li:hover{
  background:rgba(77,184,255,.06);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,.2);
}
.fleetFeatures li:hover::before{opacity:1}

/* First card — default active highlight */
.fleetFeatures li.is-featured{
  background:rgba(77,184,255,.09);
  box-shadow:0 0 0 1px rgba(77,184,255,.12), 0 10px 32px rgba(0,120,255,.1);
}
.fleetFeatures li.is-featured::before{
  background:linear-gradient(
    135deg,
    rgba(77,184,255,.75) 0%,
    rgba(77,184,255,.35) 35%,
    rgba(77,184,255,.12) 70%,
    rgba(77,184,255,.06) 100%
  );
  opacity:1;
}

/* Icon block — soft blue gradient + border */
.fleetFeatIcon{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  display:grid;place-items:center;font-size:16px;
  background:linear-gradient(145deg, rgba(77,184,255,.28), rgba(77,184,255,.07));
  border:1px solid rgba(77,184,255,.38);
  box-shadow:0 0 14px rgba(77,184,255,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
.fleetFeatures li.is-featured .fleetFeatIcon{
  background:linear-gradient(145deg, rgba(77,184,255,.38), rgba(77,184,255,.12));
  border-color:rgba(77,184,255,.5);
  box-shadow:0 0 18px rgba(77,184,255,.22), inset 0 1px 0 rgba(255,255,255,.1);
}

.fleetFeatures b{
  display:block;font-size:14px;font-weight:800;color:#fff;margin-bottom:3px;
  letter-spacing:-.01em;
}
/* Secondary text — brighter for readability */
.fleetFeatures span{
  font-size:12.5px;
  color:#a8c4dc;
  line-height:1.5;
  opacity:.92;
}

.fleetStage{
  display:flex;justify-content:center;align-items:center;
  perspective:50rem;
  padding:36px 20px 48px;
  overflow:visible;
}
.fleet3dCard{
  width:min(100%,440px);
  aspect-ratio:4/3;
  cursor:default;
  transform-style:preserve-3d;
  overflow:visible;
}
.fleet3dInner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  will-change:transform;
  overflow:visible;
}
.fleet3dLayer{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  pointer-events:none;
}
/* 1. Background + soft shadow */
.fleet3dBg{
  border-radius:24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 70%, rgba(0,180,255,.12), transparent 60%),
    linear-gradient(160deg, rgba(15,23,42,.95), rgba(8,14,24,.98));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 30px 60px rgba(0,0,0,.5),
    0 0 40px rgba(0,180,255,.08);
  transform:translateZ(0);
}
/* 2. Neon frame — larger breathing room (expanded ~12%) */
.fleet3dFrame{
  inset:10px;
  border-radius:18px;
  border:1.5px solid rgba(77,184,255,.55);
  box-shadow:
    0 0 18px rgba(77,184,255,.25),
    inset 0 0 18px rgba(77,184,255,.08);
  transform:translateZ(2rem);
  opacity:1;
  transition:opacity .45s ease, box-shadow .45s ease, border-color .45s ease;
}
/* 3. Car — more inner padding vs frame (tighter inset = more space) */
.fleet3dCar{
  display:flex;align-items:center;justify-content:center;
  inset:16% 12% 22% 12%;
  transform:translateZ(2.5rem) scale(1);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transition:transform .45s cubic-bezier(.16,1,.3,1), inset .45s ease, filter .45s ease;
}
.fleet3dCar img{
  width:100%;height:100%;object-fit:contain;
  pointer-events:none;user-select:none;
}
/* Hover / tilt: faqat real sichqoncha (desktop) — mobile sticky :hover muammosini oldini oladi */
@media (hover: hover) and (pointer: fine) {
  .fleet3dCard.is-tilting .fleet3dCar,
  .fleet3dCard:hover .fleet3dCar{
    inset:-4% -2% 10% -2%;
    transform:translateZ(5.5rem) scale(1.12);
    filter:drop-shadow(0 22px 32px rgba(0,0,0,.5)) drop-shadow(0 0 28px rgba(0,200,255,.28));
  }
  .fleet3dCard.is-tilting .fleet3dFrame,
  .fleet3dCard:hover .fleet3dFrame{
    opacity:.5;
    border-color:rgba(77,184,255,.35);
    box-shadow:
      0 10px 40px rgba(0,150,255,.25),
      0 0 32px rgba(77,184,255,.2),
      inset 0 0 16px rgba(77,184,255,.06);
  }
}

.fleetExtraWrap{margin-top:28px}
.fleetExtraWrap[hidden]{display:none!important}

@media(max-width:900px){
  .fleetSplit{grid-template-columns:1fr;gap:28px}
  .fleetCopy{max-width:100%}
  .fleetStage{padding:16px 8px 28px;order:-1}
  .fleet3dCard{width:min(100%,380px)}
}
/* Mobil / touch: sticky hover yo‘q, barqaror chiroyli holat */
@media (max-width:767px), (hover: none), (pointer: coarse) {
  .fleet3dInner{transform:none!important}
  .fleet3dCar{
    inset:14% 10% 18% 10% !important;
    transform:translateZ(0) scale(1.02) !important;
    filter:drop-shadow(0 12px 22px rgba(0,0,0,.4)) drop-shadow(0 0 18px rgba(0,200,255,.2)) !important;
  }
  .fleet3dFrame{
    opacity:1 !important;
    border-color:rgba(77,184,255,.55) !important;
    box-shadow:0 0 22px rgba(77,184,255,.35), inset 0 0 16px rgba(77,184,255,.1) !important;
  }
  .fleet3dCard.is-tilting .fleet3dCar,
  .fleet3dCard:hover .fleet3dCar,
  .fleet3dCard.is-tilting .fleet3dFrame,
  .fleet3dCard:hover .fleet3dFrame{
    /* touch qurilmalarda hover/tilt effektini majburan o‘chirish */
    inset:14% 10% 18% 10% !important;
    transform:translateZ(0) scale(1.02) !important;
  }
}

.skeleton-car{
  flex:0 0 min(340px,88vw);
  background:var(--card);border:1px solid var(--line);
  border-radius:24px;overflow:hidden;
}
@media(max-width:768px){
  .carCard,.skeleton-car{flex:0 0 300px}
}

/* ========== LANG SWITCH ========== */
.langSwitch{
  display:inline-flex;align-items:center;gap:0;
  border:1px solid var(--line);border-radius:999px;padding:2px;
  background:rgba(255,255,255,.03);
}
.langBtn{
  font-size:11px;font-weight:800;letter-spacing:.06em;
  padding:6px 10px;border-radius:999px;color:var(--muted);
  transition:color .2s, background .2s;
}
.langBtn:hover{color:#fff}
.langBtn.active{
  background:rgba(77,184,255,.18);color:#fff;
  box-shadow:0 0 0 1px rgba(77,184,255,.25);
}
@media(max-width:900px){
  .langSwitch{order:-1}
}

/* ========== v2.3 Avtodrom Premium + Student Cabinet ========== */
.autodromeSection{padding:48px 0 20px}
.premium-card-container{
  display:flex;justify-content:center;padding:8px 0 24px
}
.premium-card{
  background:linear-gradient(145deg,rgba(15,28,48,.95) 0%,rgba(10,22,36,.98) 100%);
  border:1px solid rgba(77,184,255,.28);
  box-shadow:0 16px 48px rgba(0,0,0,.35),0 0 40px rgba(77,184,255,.08);
  border-radius:24px;padding:32px 36px;max-width:520px;width:100%;
  position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .35s
}
.premium-card:before{
  content:"";position:absolute;inset:-1px;border-radius:24px;padding:1px;
  background:linear-gradient(135deg,rgba(77,184,255,.45),transparent 40%,rgba(74,222,128,.25));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7
}
.premium-card:hover{
  transform:translateY(-6px);
  border-color:rgba(77,184,255,.5);
  box-shadow:0 24px 56px rgba(0,0,0,.4),0 0 50px rgba(77,184,255,.14)
}
.badge-vip{
  display:inline-block;
  background:linear-gradient(90deg,#4db8ff,#4ade80);
  color:#03101d;font-weight:800;font-size:11px;padding:5px 12px;
  border-radius:999px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px
}
.premium-card h3{font-size:22px;font-weight:800;margin-bottom:10px;letter-spacing:-.02em}
.premium-card p{color:var(--muted);font-size:14.5px;line-height:1.65;margin-bottom:16px}
.premium-features{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.premium-features li{
  font-size:13.5px;color:#c8d7e8;padding-left:22px;position:relative
}
.premium-features li:before{
  content:"✓";position:absolute;left:0;color:var(--green);font-weight:800
}
.btn-premium{
  width:100%;padding:14px 20px;border-radius:999px;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,#5ec5ff,#2f8fe0);color:#03101d;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 32px rgba(47,143,224,.32);
  transition:.35s var(--ease);display:inline-flex;align-items:center;justify-content:center;gap:8px
}
.btn-premium:hover{
  transform:translateY(-2px);box-shadow:0 16px 40px rgba(47,143,224,.42)
}

/* Student auth tabs */
.studentAuthBox{max-width:400px}
.studentAuthTabs{
  position:relative;
  display:flex;gap:0;margin:16px 0 18px;padding:4px;
  background:rgba(255,255,255,.04);border-radius:12px;border:1px solid var(--line)
}
.stuAuthPill{
  position:absolute;
  top:4px;bottom:4px;left:4px;
  width:0;
  border-radius:9px;
  background:rgba(77,184,255,.18);
  border:1px solid rgba(77,184,255,.4);
  box-shadow:0 4px 14px rgba(14,165,233,.18);
  transition:left .4s cubic-bezier(0.65, 0, 0.35, 1),
             width .4s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events:none;
  z-index:0;
}
.stuTab{
  position:relative;z-index:1;
  flex:1;padding:10px;border-radius:9px;font-size:13px;font-weight:700;
  color:var(--muted);transition:color .25s;
  background:transparent;border:none;
}
.stuTab.active{
  color:#fff;
  background:transparent;border:none;
}
.stuTab:hover:not(.active){color:#fff}

/* ========== Animation system (L1 micro / L2 card / L3 page) ========== */
:root{
  --anim-micro: 200ms;
  --anim-card: 300ms;
  --anim-page: 400ms;
  --anim-ease: cubic-bezier(.16,1,.3,1);
}

/* ========== STUDENT CABINET — SIDEBAR LAYOUT ========== */
.studentCabinet{
  position:fixed;inset:0;z-index:180;
  display:none;
  background:var(--bg);
  overflow:hidden;
  opacity:0;
  transform:translateY(10px);
}
.studentCabinet.show{
  display:flex;
  flex-direction:row;
  min-width:0;
  width:100%;
  max-width:100vw;
  animation:stuCabIn .35s cubic-bezier(.16,1,.3,1) forwards;
}
.studentCabinet.show > .stuShell{
  flex:1 1 0;
  min-width:0;
  max-width:100%;
}
.studentCabinet.closing{
  display:flex;
  animation:stuCabOut .3s ease forwards;
}
@keyframes stuCabIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes stuCabOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(8px)}
}
body.student-cabinet-open{ overflow:hidden; }

/* —— Sidebar —— */
.stuSidebar{
  width:268px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(180deg, rgba(8,16,28,.97) 0%, rgba(5,12,22,.98) 100%);
  border-right:1px solid rgba(255,255,255,.07);
  z-index:5;
  height:100%;
  transition:width .3s cubic-bezier(.16,1,.3,1), opacity .25s ease, border-color .25s;
  overflow:hidden;
}
.studentCabinet.sidebar-collapsed .stuSidebar{
  width:0;
  border-right-color:transparent;
  opacity:0;
  pointer-events:none;
}
.stuSidebarTop{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.stuCabBrand{display:flex;align-items:center;gap:10px;min-width:0}
.stuCabLogo{
  font-weight:900;letter-spacing:.06em;font-size:15px;white-space:nowrap;
  color:#f1f5f9;
}
.stuCabLogo span{color:#4db8ff}
.stuSidebarClose{
  width:34px;height:34px;border-radius:999px;
  color:#e2e8f0;font-size:18px;line-height:1;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:grid;place-items:center;flex-shrink:0;
  transition:background .2s, border-color .2s;
}
.stuSidebarClose:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}

.stuSidebarNav{
  position:relative;
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px 12px 12px;
  display:flex;flex-direction:column;gap:4px;
  min-width:0;
  width:100%;
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent;
}
.stuSidebarNav::-webkit-scrollbar{width:5px}
.stuSidebarNav::-webkit-scrollbar-track{background:transparent}
.stuSidebarNav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:999px;
}
.stuSidebarNav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}

/* Sliding pill — subtler, used as soft active track */
.stuSidePill{
  position:absolute;
  left:12px;right:12px;
  top:0;height:0;
  border-radius:12px;
  background:rgba(59,130,246,.18);
  border:1px solid rgba(59,130,246,.28);
  box-shadow:0 4px 16px rgba(37,99,235,.15);
  transition:top .35s cubic-bezier(0.65, 0, 0.35, 1),
             height .35s cubic-bezier(0.65, 0, 0.35, 1),
             opacity .2s ease;
  pointer-events:none;
  z-index:0;
  opacity:0;
}

.stuNavIcon{width:18px;height:18px;flex-shrink:0;opacity:.72;stroke-width:1.7}

/* Clean menu rows — like reference */
.stuSideItem{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:11px 14px;
  border-radius:12px;
  font-size:13.5px;font-weight:600;
  color:rgba(203,213,225,.88);
  border:1px solid transparent;
  background:transparent;
  text-align:left;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .15s;
}
.stuSideItem:hover{
  color:#f8fafc;
  background:rgba(255,255,255,.05);
  border-color:transparent;
  transform:none;
}
.stuSideItem:hover .stuNavIcon{opacity:1}

/* Active = solid colored pill (reference style) */
.stuSideItem.active{
  color:#fff !important;
  background:linear-gradient(135deg,#3b82f6,#2563eb) !important;
  border-color:transparent !important;
  box-shadow:0 6px 18px rgba(37,99,235,.35);
  font-weight:700;
}
.stuSideItem.active .stuNavIcon{
  opacity:1;
  stroke:#fff;
}
.stuSideItem.active:hover{
  background:linear-gradient(135deg,#60a5fa,#3b82f6) !important;
}

.stuSideToggle{position:relative}
.stuChevron{
  margin-left:auto;
  font-style:normal;
  font-size:15px;
  opacity:.45;
  transition:transform .25s ease, opacity .2s;
}
.stuSideGroup.open > .stuSideToggle .stuChevron{transform:rotate(90deg);opacity:.9}
.stuSideGroup.open > .stuSideToggle{
  color:#f1f5f9;
  background:rgba(255,255,255,.05);
  border-color:transparent;
}
.stuSideGroup.open > .stuSideToggle.active{
  background:linear-gradient(135deg,#3b82f6,#2563eb) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(37,99,235,.35);
}

.stuSideSub{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:4px 0 6px 6px;
  margin-left:6px;
  border-left:1px solid rgba(255,255,255,.08);
}
.stuSideGroup.open > .stuSideSub{display:flex}

.stuSideSubItem{
  position:relative;z-index:1;
  text-align:left;
  width:100%;
  padding:10px 12px 10px 14px;
  border-radius:10px;
  font-size:13px;font-weight:550;
  color:rgba(148,163,184,.95);
  border:1px solid transparent;
  background:transparent;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
}
.stuSideSubItem:hover{
  color:#f1f5f9;
  background:rgba(255,255,255,.05);
  border-color:transparent;
}
.stuSideSubItem.active{
  color:#fff !important;
  background:linear-gradient(135deg,#22c55e,#16a34a) !important;
  border-color:transparent !important;
  box-shadow:0 4px 14px rgba(22,163,74,.3);
  font-weight:700;
}

/* Footer — user card only (Chiqish yo‘q, faqat Profil ichida) */

/* ===== Sidebar social card — desktop hover + mobile always ===== */
.stuSideSocialWrap{
  padding:8px 12px 4px;
  min-width:0;
  width:100%;
  box-sizing:border-box;
  margin-top:auto;
}
.stuSocialCard{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  height:48px;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  transition:box-shadow .3s cubic-bezier(.25,.8,.25,1), border-color .25s;
  box-sizing:border-box;
}
.stuSocialLink{
  flex:1 1 0;
  min-width:0;
  max-width:100%;
}

/* Brand colors — desktop + mobile */
#stuSocTelegram{ color:#2AABEE; }
#stuSocInstagram{ color:#E1306C; }
#stuSocYoutube{ color:#FF0000; }
#stuSocPhone{ color:#22C55E; }
#stuSocTelegram:hover{ color:#7dd3fc; background:rgba(42,171,238,.12); }
#stuSocInstagram:hover{ color:#f472b6; background:rgba(225,48,108,.12); }
#stuSocYoutube:hover{ color:#ff6b6b; background:rgba(255,0,0,.12); }
#stuSocPhone:hover{ color:#4ade80; background:rgba(34,197,94,.12); }

/* ---- Desktop: hover ochiladi ---- */
@media (hover:hover) and (pointer:fine){
  .stuSocialCard:hover{
    box-shadow:0 10px 28px rgba(0,0,0,.35);
    border-color:rgba(77,184,255,.25);
  }
  .stuSocialCard::before,
  .stuSocialCard::after{
    position:absolute;
    display:flex;
    align-items:center;
    width:50%;
    height:100%;
    transition:transform .28s ease, opacity .28s ease;
    z-index:1;
    content:"";
  }
  .stuSocialCard::before{
    left:0;
    background:linear-gradient(135deg,#3b82f6,#2563eb);
  }
  .stuSocialCard::after{
    right:0;
    background:linear-gradient(135deg,#1d4ed8,#1e3a8a);
  }
  .stuSocialCard:hover::before{
    opacity:.5;
    transform:translateY(-100%);
  }
  .stuSocialCard:hover::after{
    opacity:.5;
    transform:translateY(100%);
  }
  .stuSocialLabel{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#f1f5f9;
    font-size:13.5px;
    font-weight:700;
    letter-spacing:.04em;
    z-index:2;
    transition:opacity .25s ease;
    pointer-events:none;
  }
  .stuSocialCard:hover .stuSocialLabel{
    opacity:0;
    z-index:-1;
  }
  .stuSocialLink{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    height:100%;
    text-decoration:none;
    opacity:0;
    transition:opacity .2s ease .05s, background .2s, color .2s, transform .2s;
    pointer-events:none;
  }
  .stuSocialCard:hover .stuSocialLink:not([hidden]){
    opacity:1;
    pointer-events:auto;
  }
  .stuSocialLink:hover{
    animation:stuSocBounce .4s linear;
  }
}

/* ---- Mobile / touch: ikonkalar doim ko‘rinadi ---- */
@media (hover:none), (pointer:coarse){
  .stuSocialCard{
    height:52px;
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.1);
  }
  .stuSocialCard::before,
  .stuSocialCard::after{
    display:none !important;
    content:none !important;
  }
  .stuSocialLabel{
    display:none !important;
  }
  .stuSocialLink{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    height:100%;
    text-decoration:none;
    opacity:1 !important;
    pointer-events:auto !important;
    transition:background .2s, transform .15s;
  }
  .stuSocialLink:active{
    transform:scale(1.12);
  }
}

.stuSocialLink svg{
  display:block;
  width:20px;height:20px;
}
@keyframes stuSocBounce{
  40%{ transform:scale(1.35); }
  60%{ transform:scale(.85); }
  80%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}

.stuSidebarFoot{
  padding:12px 12px 16px;
  border-top:1px solid rgba(255,255,255,.07);
  min-width:0;
  width:100%;
  box-sizing:border-box;
  background:rgba(0,0,0,.12);
}
.stuSideUser{
  display:flex;align-items:center;gap:11px;
  width:100%;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  cursor:pointer;
  text-align:left;
  color:inherit;
  transition:background .2s, border-color .2s;
}
.stuSideUser:hover{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.25);
}
.stuSideAvatar{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff;
  flex-shrink:0;
  box-shadow:0 4px 14px rgba(37,99,235,.4);
  letter-spacing:-.02em;
}
.stuSideUserMeta{
  min-width:0;display:flex;flex-direction:column;gap:2px;
}
.stuSideUserMeta strong{
  font-size:13px;font-weight:700;color:#f1f5f9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stuSideUserMeta .muted{font-size:11.5px;color:#94a3b8}

/* Eski Chiqish stillari (agar qayta qo‘shilsa) */
.stuSidebarFoot .stuLogoutLink{
  display:none !important;
}

.stuSidebarOverlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:4;
}
.studentCabinet.sidebar-open .stuSidebarOverlay{display:block}

.stuShell{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  background:var(--bg);
  overflow:hidden;
}
.stuShell > .stuTopbar{flex-shrink:0}
.stuShell > .stuPillNavWrap{flex-shrink:0}
.stuShell > .stuCabMain{
  flex:1;
  min-width:0;
  min-height:0;
}
.stuShell > .stuRightRail{
  display:none !important;
}
.stuTopbar{
  flex-shrink:0;
  height:52px;
  display:flex;align-items:center;gap:10px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(5,13,22,.88);
  backdrop-filter:blur(14px);
}
.stuMenuBtn{
  display:inline-flex;
  width:40px;height:40px;border-radius:11px;
  color:#fff;align-items:center;justify-content:center;
  background:rgba(77,184,255,.1);border:1px solid rgba(77,184,255,.25);
  transition:background .2s,border-color .2s;
}
.stuMenuBtn:hover{
  background:rgba(77,184,255,.18);
  border-color:rgba(77,184,255,.4);
}
.stuTopbarTitle{flex:1;min-width:0}
.stuTopbarEyebrow{
  display:block;font-size:11px;font-weight:600;
  color:var(--muted);letter-spacing:.04em;
}
.stuTopbarTitle strong{font-size:15px;font-weight:750}
.stuCabBtn{padding:8px 14px;font-size:13px}

.stuCabMain{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 0 16px;
}
.stuCabMainInner{
  width:min(1280px,100%);
  margin:0 auto;
}

/* Horizontal pill tabs (group sub-sections) */
.stuPillNavWrap{
  flex-shrink:0;
  padding:0 12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(5,13,22,.65);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  max-width:100%;
  min-width:0;
  overflow:hidden; /* ota kengaymasin — scroll faqat ichki nav da */
  box-sizing:border-box;
}
.stuPillNav{
  position:relative;
  display:flex;
  gap:0;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:10px 0 12px;
  padding:4px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  box-sizing:border-box;
}
.stuPillNav::-webkit-scrollbar{display:none}
.stuPill{
  position:absolute;
  top:4px;bottom:4px;left:4px;
  width:0;
  border-radius:11px;
  background:linear-gradient(135deg, rgba(59,130,246,.4), rgba(14,165,233,.28));
  border:1px solid rgba(94,197,255,.45);
  box-shadow:0 4px 16px rgba(59,130,246,.22), inset 0 1px 0 rgba(255,255,255,.12);
  transition:left .4s cubic-bezier(0.65, 0, 0.35, 1),
             width .4s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events:none;
  z-index:0;
}
.stuPillTab{
  position:relative;z-index:1;
  flex:0 0 auto;
  padding:10px 16px;
  border:none;background:transparent;
  border-radius:11px;
  font-size:13px;font-weight:700;
  color:rgba(243,247,252,.65);
  white-space:nowrap;
  cursor:pointer;
  transition:color .25s;
}
.stuPillTab:hover{color:#fff}
.stuPillTab.active{color:#fff}

.stuSection{
  display:none;
  opacity:0;
  padding:0; /* global section{padding:100px 0} ni bekor qilish — kabinetda bo'sh joy qolmasin */
}
.stuSection.active{
  display:block;
  animation:stuSectionIn .28s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes stuSectionIn{
  from{opacity:0}
  to{opacity:1}
}

@media (max-width:899px){
  .stuSidebar{
    position:fixed;left:0;top:0;bottom:0;
    width:min(288px,86vw);
    transform:translateX(-105%);
    opacity:1;
    pointer-events:auto;
    box-shadow:24px 0 60px rgba(0,0,0,.45);
    transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .studentCabinet.sidebar-collapsed .stuSidebar{
    width:min(288px,86vw);
    opacity:1;
    pointer-events:auto;
  }
  .studentCabinet.sidebar-open .stuSidebar{transform:translateX(0)}
  .studentCabinet:not(.sidebar-open) .stuSidebar{transform:translateX(-105%)}
  .stuSidebarTop,.stuSidebarNav,.stuSidebarFoot{min-width:0}
}

.stuNavTab{display:none}
.stuCabNav,.stuSubNav{display:none !important}
.stuCabHeader{display:none}

.stuCard{
  background:linear-gradient(180deg,#0c1828 0%,#08121e 100%);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px 14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)
}
.stuCardHead{margin-bottom:10px}
.stuCardHead h2{
  font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:2px
}
.stuCardHead p{font-size:14.5px;line-height:1.6;max-width:520px}

.booking-controls{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px
}
.booking-controls label{font-size:13.5px;font-weight:600;color:#c8d7e8}
.booking-controls input[type=date]{
  background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:12px;
  color:#fff;padding:10px 14px;font-size:14px;outline:none;
  transition:border-color .25s
}
.booking-controls input[type=date]:focus{border-color:rgba(77,184,255,.5)}

.slots-container,.my-bookings{margin-top:8px}
.slots-container h3,.my-bookings h3{
  font-size:14px;font-weight:700;margin-bottom:12px;color:#e8f0f8
}
.my-bookings{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}

.slots-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px
}
.slot-btn{
  padding:14px 12px;border-radius:12px;border:1px solid rgba(74,222,128,.35);
  background:rgba(74,222,128,.08);color:var(--green);font-weight:700;font-size:13.5px;
  text-align:center;transition:.2s;line-height:1.35;white-space:pre-line
}
.slot-btn:hover:not(.booked):not(:disabled){
  background:var(--green);color:#03101d;border-color:var(--green);transform:translateY(-2px)
}
.slot-btn.booked{
  border-color:rgba(220,80,100,.4);background:rgba(220,80,100,.08);
  color:#f08090;cursor:not-allowed;opacity:.7
}
.my-bookings-list{display:grid;gap:8px}
.my-booking-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:13.5px
}
.my-booking-item .mb-meta{color:#c8d7e8}
.my-booking-item .mb-cancel{
  font-size:12px;font-weight:700;color:#f08090;padding:6px 10px;
  border-radius:8px;border:1px solid rgba(220,80,100,.3);
  background:rgba(220,80,100,.08);transition:.2s
}
.my-booking-item .mb-cancel:hover{background:rgba(220,80,100,.18)}

/* Avtodrom admin — yuklama boshqaruvi */
.adAdminLoadRow{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  margin-top:8px
}
.adAdminLoadPreview{flex:0 0 auto;min-width:140px}
.adAdminLoadControls{flex:1;min-width:200px;display:flex;flex-direction:column;gap:10px}
.adAdminLoadControls label{font-size:13.5px;color:#e2e8f0;font-weight:600}
.adAdminLoadControls input[type=range]{
  width:100%;accent-color:#38bdf8;height:8px;cursor:pointer
}
.adAdminLoadHints{
  display:flex;justify-content:space-between;font-size:11.5px;color:rgba(148,163,184,.9)
}
.adAdminLoadControls .btn{align-self:flex-start;margin-top:4px}

/* —— Avtodrom Bento Grid —— */
.adBentoWrap{overflow:visible}
.adBento{
  display:grid;gap:14px;
  grid-template-columns:1fr;
}
@media (min-width:720px){
  .adBento{
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:auto auto auto;
  }
  .adBentoHero{grid-column:1 / span 3;grid-row:1}
  .adBentoLoad{grid-column:4;grid-row:1}
  .adBentoBook{grid-column:1 / span 4;grid-row:2}
  .adBentoList{grid-column:1 / span 4;grid-row:3}
}
.adBentoHero,.adBentoLoad,.adBentoBook,.adBentoList{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05);
  padding:18px 18px 16px
}
.adBentoHero{
  min-height:160px;
  background:
    radial-gradient(ellipse 70% 80% at 10% 0%, rgba(56,189,248,.14), transparent 55%),
    rgba(15,23,42,.5)
}
.adHeroEyebrow{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#7dd3fc;margin:0 0 8px
}
.adHeroTitle{font-size:20px;font-weight:800;color:#f8fafc;margin:0 0 6px;letter-spacing:-.02em}
.adHeroMeta{font-size:13.5px;color:rgba(203,213,225,.9);margin:0 0 12px}
.adHeroCountdown{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:12px;
  background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);
  font-size:14px;font-weight:700;color:#bae6fd;margin-bottom:14px
}
.adHeroCountdown strong{font-variant-numeric:tabular-nums;font-size:16px;color:#fff}
.adHeroActions{display:flex;flex-wrap:wrap;gap:10px}
.adHeroEmpty{color:rgba(203,213,225,.85);margin:8px 0 14px;line-height:1.45}

/* Yuklama gauge */
.adLoadEyebrow{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(148,163,184,.9);margin:0 0 8px
}
.adLoadGauge{position:relative;display:flex;justify-content:center;margin:4px 0}
.adLoadSvg{width:100%;max-width:140px;height:auto}
.adLoadTrack{stroke:rgba(255,255,255,.08)}
.adLoadArc{transition:stroke-dashoffset .5s ease,stroke .3s}
.adLoadArc--low{stroke:#34d399}
.adLoadArc--mid{stroke:#fbbf24}
.adLoadArc--high{stroke:#f87171}
.adLoadValue{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  font-size:18px;font-weight:800;color:#f1f5f9
}
.adLoadLabel{text-align:center;font-size:12.5px;color:rgba(148,163,184,.95);margin:6px 0 0}

/* Bron zonasi */
.adBookHead{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px
}
.adBookTitle{font-size:15px;font-weight:750;color:#f1f5f9;margin:0}
.adBookDate{display:flex;align-items:center;gap:10px}
.adBookDate label{font-size:12.5px;color:rgba(148,163,184,.9);font-weight:600}
.adBookDate input[type=date]{
  padding:8px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:#e2e8f0;font-size:13.5px
}

/* Slot time chunks */
.adSlotsBoard{display:flex;flex-direction:column;gap:16px}
.adChunk{margin:0}
.adChunkTitle{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue2,#5ec5ff);margin:0 0 10px;
  display:flex;align-items:center;gap:8px
}
.adChunkTitle span{font-size:16px}
.adChunkGrid{
  display:grid;gap:8px;
  grid-template-columns:repeat(2,minmax(0,1fr))
}
@media (min-width:480px){
  .adChunkGrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
}
.adSlot{
  position:relative;isolation:isolate;overflow:visible;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:12px 10px;border-radius:14px;text-align:left;cursor:pointer;
  border:1px solid rgba(148,163,184,.2);
  background:rgba(15,23,42,.4);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#e2e8f0;
  min-width:0;width:100%;box-sizing:border-box;
  transition:transform .25s,border-color .25s,background .25s,box-shadow .25s
}
.adSlot::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 20% 0%, rgba(56,189,248,.12), transparent 55%);
  opacity:0;transition:opacity .25s
}
.adSlot:hover:not(:disabled):not(.is-booked){
  transform:translateY(-3px);
  border-color:rgba(56,189,248,.45);
  background:rgba(30,41,59,.55);
  box-shadow:0 12px 28px rgba(0,0,0,.22)
}
.adSlot:hover:not(:disabled):not(.is-booked)::before{opacity:1}
.adSlotTime{font-size:13px;font-weight:750;color:#f8fafc;position:relative;white-space:nowrap;letter-spacing:-.02em}
.adSlotFree{font-size:11.5px;color:#6ee7b7;font-weight:600;position:relative}
.adSlot.is-booked{
  opacity:.55;cursor:not-allowed;
  border-color:rgba(248,113,113,.25);background:rgba(127,29,29,.12)
}
.adSlot.is-past{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.35);
}
.adSlot.is-past .adSlotFree{color:#94a3b8}

.adSlot.is-booked .adSlotFree{color:#fca5a5}
.adSlot.is-selected{
  border-color:rgba(56,189,248,.55);
  box-shadow:0 0 0 2px rgba(56,189,248,.2)
}

/* Confirm modal */
.adConfirmModal{
  position:fixed;inset:0;z-index:12000;
  display:flex;align-items:center;justify-content:center;padding:20px
}
.adConfirmModal[hidden]{display:none!important}
.adConfirmBackdrop{
  position:absolute;inset:0;background:rgba(2,8,20,.72);backdrop-filter:blur(6px)
}
.adConfirmCard{
  position:relative;z-index:1;width:100%;max-width:400px;
  padding:28px 24px 22px;border-radius:22px;text-align:center;
  border:1px solid rgba(148,163,184,.2);
  background:linear-gradient(160deg,rgba(30,41,59,.95),rgba(15,23,42,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:adConfirmIn .25s ease
}
@keyframes adConfirmIn{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}
.adConfirmIcon{font-size:36px;margin-bottom:10px}
.adConfirmTitle{font-size:18px;font-weight:800;color:#f8fafc;margin:0 0 8px}
.adConfirmTime{
  font-size:15px;font-weight:700;color:#7dd3fc;margin:0 0 12px;
  padding:8px 12px;border-radius:12px;display:inline-block;
  background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.2)
}
.adConfirmMsg{
  font-size:13.5px;line-height:1.5;color:rgba(203,213,225,.88);margin:0 0 20px
}
.adConfirmActions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Avtodrom admin slot cards */
.ad-admin-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px
}
.ad-slot{
  border-radius:14px;padding:14px 14px 12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:10px
}
.ad-slot.free{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.06)}
.ad-slot.booked{border-color:rgba(77,184,255,.35);background:rgba(77,184,255,.08)}
.ad-slot.blocked{border-color:rgba(220,80,100,.35);background:rgba(220,80,100,.08)}
.ad-slot-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ad-slot-top strong{font-size:14px}
.ad-badge{
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.25)
}
.ad-slot.free .ad-badge{color:var(--green)}
.ad-slot.booked .ad-badge{color:var(--blue2)}
.ad-slot.blocked .ad-badge{color:#f08090}
.ad-who{display:flex;flex-direction:column;gap:2px;font-size:13px;color:#c8d7e8}
.ad-who b{color:#fff;font-size:13.5px}
.ad-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}

@media(max-width:640px){
  .premium-card{padding:24px 20px}
  .stuCabHeaderInner{height:auto;padding:12px 0;flex-wrap:wrap}
  .stuCabUser{width:100%;justify-content:space-between}
  .stuCabUserInfo{align-items:flex-start}
  .stuCabBadge{display:none}
  .stuCard{padding:14px 12px 16px}
  .slots-grid{grid-template-columns:repeat(2,1fr)}
  .stuCabMain{padding:0 0 12px}
  .ad-admin-grid{grid-template-columns:1fr}
}

.ad-schedule-list{display:grid;gap:8px;margin-top:8px}
.ad-schedule-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:13.5px
}

/* ========== THEORY TESTS (v2.5) ========== */
.theoryGroup{
  margin:0 0 22px;
  padding:16px 16px 4px;
  border-radius:16px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
}
.theoryGroupTitle{
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue2,#5ec5ff);
  margin:0 0 4px;
  padding:0 2px;
}
.theory-actions{
  display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 16px
}
.theory-exam-btn,.theory-mistakes-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:14px 18px;border-radius:14px;text-align:left;min-width:200px
}
.theory-exam-btn small,.theory-mistakes-btn small,
.theory-actions .btn small{
  font-size:12px;opacity:.75;font-weight:400
}

/* —— Biletlar / Imtihon — butun taxta glass kartalar —— */
.examBoard{display:flex;flex-direction:column;gap:4px}
.examBoardGroup{margin-bottom:6px}
.examBoardNote{
  margin:10px 2px 0;font-size:12px;color:rgba(148,163,184,.85);line-height:1.4
}
.examGlassGrid{
  display:grid;gap:12px;margin:10px 0 4px
}
.examGlassGrid--2{grid-template-columns:1fr}
.examGlassGrid--3{grid-template-columns:1fr}
.examGlassGrid--4{grid-template-columns:1fr}
@media (min-width:560px){
  .examGlassGrid--2{grid-template-columns:repeat(2,1fr)}
  .examGlassGrid--3{grid-template-columns:repeat(2,1fr)}
  .examGlassGrid--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:960px){
  .examGlassGrid--3{grid-template-columns:repeat(3,1fr)}
  .examGlassGrid--4{grid-template-columns:repeat(4,1fr)}
}
.examGlassCard{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  width:100%;min-height:148px;text-align:left;cursor:pointer;
  padding:18px 18px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
  color:#e2e8f0;
  transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease
}
button.examGlassCard:hover{
  transform:translateY(-4px);
  background:rgba(30,41,59,.55);
  border-color:rgba(148,163,184,.4);
  box-shadow:0 14px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08)
}
button.examGlassCard:active{transform:translateY(-1px) scale(.99)}
.examGlassGlow{
  position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background:radial-gradient(ellipse 80% 60% at 15% 10%, rgba(94,197,255,.14), transparent 55%)
}
.examGlassCard--blue .examGlassGlow{
  background:radial-gradient(ellipse 85% 65% at 18% 8%, rgba(59,130,246,.22), transparent 58%)
}
.examGlassCard--indigo .examGlassGlow{
  background:radial-gradient(ellipse 85% 65% at 18% 8%, rgba(99,102,241,.22), transparent 58%)
}
.examGlassCard--violet .examGlassGlow{
  background:radial-gradient(ellipse 85% 65% at 18% 8%, rgba(139,92,246,.24), transparent 58%)
}
.examGlassCard--pink .examGlassGlow{
  background:radial-gradient(ellipse 85% 65% at 18% 8%, rgba(236,72,153,.22), transparent 58%)
}
.examGlassCard--accent-amber .examGlassGlow{
  background:radial-gradient(ellipse 85% 65% at 18% 8%, rgba(251,191,36,.2), transparent 58%)
}
.examGlassCard--accent-cyan .examGlassGlow{
  background:radial-gradient(ellipse 85% 65% at 18% 8%, rgba(34,211,238,.2), transparent 58%)
}
.examGlassCard--accent-rose .examGlassGlow{
  background:radial-gradient(ellipse 85% 65% at 18% 8%, rgba(251,113,133,.2), transparent 58%)
}
.examGlassCard--accent-yellow .examGlassGlow{
  background:radial-gradient(ellipse 85% 65% at 18% 8%, rgba(250,204,21,.18), transparent 58%)
}
.examGlassCard--accent-green .examGlassGlow{
  background:radial-gradient(ellipse 85% 65% at 18% 8%, rgba(52,211,153,.2), transparent 58%)
}
.examGlassCard--accent-sky .examGlassGlow{
  background:radial-gradient(ellipse 85% 65% at 18% 8%, rgba(56,189,248,.22), transparent 58%)
}
.examGlassCard > *:not(.examGlassGlow){position:relative;z-index:1}
.examGlassIcon{
  font-size:24px;line-height:1;
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08)
}
.examGlassBody{display:flex;flex-direction:column;gap:4px;width:100%;flex:1}
.examGlassTitle{font-size:15.5px;font-weight:750;color:#f8fafc;letter-spacing:-.02em}
.examGlassMeta{font-size:12.5px;color:rgba(148,163,184,.95);font-weight:500}
.examGlassHint{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:rgba(203,213,225,.78)}
.examGlassBar{
  width:100%;height:4px;border-radius:99px;
  background:rgba(255,255,255,.08);overflow:hidden;margin-top:2px
}
.examGlassBar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,rgba(94,197,255,.85),rgba(56,189,248,.55))
}
.examGlassCard--indigo .examGlassBar i{background:linear-gradient(90deg,#818cf8,#6366f1)}
.examGlassCard--violet .examGlassBar i{background:linear-gradient(90deg,#a78bfa,#8b5cf6)}
.examGlassCard--pink .examGlassBar i{background:linear-gradient(90deg,#f472b6,#ec4899)}
.examGlassCta{
  font-size:12.5px;font-weight:700;color:#7dd3fc;margin-top:auto;padding-top:6px
}
button.examGlassCard:hover .examGlassCta{color:#bae6fd}
.examGlassCard--accent-amber:hover{border-color:rgba(251,191,36,.4)}
.examGlassCard--accent-cyan:hover{border-color:rgba(34,211,238,.4)}
.examGlassCard--accent-rose:hover{border-color:rgba(251,113,133,.4)}
.examGlassCard--accent-yellow:hover{border-color:rgba(250,204,21,.4)}
.examGlassCard--accent-green:hover{border-color:rgba(52,211,153,.4)}
.examGlassCard--accent-sky:hover{border-color:rgba(56,189,248,.4)}
.examGlassCard--blue:hover{border-color:rgba(59,130,246,.45)}
.examGlassCard--indigo:hover{border-color:rgba(99,102,241,.45)}
.examGlassCard--violet:hover{border-color:rgba(139,92,246,.45)}
.examGlassCard--pink:hover{border-color:rgba(236,72,153,.45)}

.theory-sections-title{font-size:15px;margin:8px 0 12px;color:var(--muted);font-weight:700}
.theory-sections-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px
}
@media (min-width:520px){
  .theory-sections-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
}
.theory-sec-card{
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:14px;padding:16px;cursor:pointer;transition:.2s;
  display:flex;flex-direction:column;gap:8px;text-align:left
}
.theory-sec-card:hover{
  border-color:var(--blue);background:rgba(56,132,255,.08);transform:translateY(-2px)
}
.theory-sec-card .sec-icon{font-size:28px;line-height:1}
.theory-sec-card .sec-title{font-size:15px;font-weight:600;color:#fff}
.theory-sec-card .sec-count{font-size:12px;color:var(--muted)}
.theory-sec-card.empty{opacity:.55;cursor:default}
.theory-sec-card.empty:hover{transform:none;border-color:var(--line);background:rgba(255,255,255,.03)}

/* —— Mavzular board: uniform grid + glass + search —— */
.mvToolbar{margin:0 0 18px}
.mvSearchWrap{
  position:relative;margin:0 0 12px
}
.mvSearchIcon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:rgba(148,163,184,.85);pointer-events:none
}
.mvSearch{
  width:100%;box-sizing:border-box;
  padding:12px 14px 12px 42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#f1f5f9;font-size:14px;font-weight:500;
  outline:none;transition:border-color .2s,background .2s,box-shadow .2s
}
.mvSearch::placeholder{color:rgba(148,163,184,.75)}
.mvSearch:focus{
  border-color:rgba(94,197,255,.45);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(94,197,255,.12)
}
.mvChips{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px
}
.mvChip{
  padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:rgba(203,213,225,.9);cursor:pointer;transition:.18s
}
.mvChip:hover{border-color:rgba(94,197,255,.35);color:#fff}
.mvChip.active{
  background:rgba(94,197,255,.16);
  border-color:rgba(94,197,255,.45);
  color:#7dd3fc
}
.mvMeta{
  font-size:12px;color:rgba(148,163,184,.85);min-height:18px
}

.mvBoard{display:flex;flex-direction:column;gap:22px}
.mvGroup{margin:0}
.mvGroupTitle{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue2,#5ec5ff);margin:0 0 10px;padding:0 2px;
  display:flex;align-items:center;gap:10px
}
.mvGroupTitle::after{
  content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(94,197,255,.25),transparent)
}
.mvGroupCount{
  font-size:11px;font-weight:600;letter-spacing:0;
  color:rgba(148,163,184,.8);text-transform:none
}

.mvGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px
}
@media (min-width:520px){
  .mvGrid{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media (min-width:900px){
  .mvGrid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1200px){
  .mvGrid{grid-template-columns:repeat(4,1fr)}
}

/* Mobile compact — 2 ustun, ~6 karta bitta ekranga sig‘adi */
@media (max-width:519px){
  .mvCard{
    min-height:86px;
    padding:10px 10px 8px;
    gap:5px;
    border-radius:12px;
  }
  .mvCardTitle{
    font-size:12.5px;
    line-height:1.3;
  }
  .mvCardCount{font-size:10.5px}
  .mvRing{
    width:28px;height:28px;
  }
  .mvRing::before{
    width:20px;height:20px;
  }
  .mvRing span{font-size:8px}
  .mvRing.is-done span{font-size:11px}
  .mvCardFoot{gap:6px}
  .mvToolbar{margin:0 0 12px}
  .mvSearch{padding:10px 12px 10px 38px;font-size:13.5px}
  .mvChip{padding:6px 11px;font-size:12px}
}

.mvCard{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;flex-direction:column;gap:8px;
  min-height:108px;
  padding:14px 14px 12px;
  border-radius:16px;
  text-align:left;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s,border-color .18s,background .18s,box-shadow .18s
}
/* Soft radial glow — glass chuqurligi (opacity ~15–20%) */
.mvCard::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 85% 65% at 18% 8%, rgba(94,197,255,.18), transparent 58%),
    radial-gradient(ellipse 70% 55% at 92% 95%, rgba(56,189,248,.12), transparent 52%);
  opacity:1;
  transition:opacity .2s,background .2s
}
.mvCard > *{position:relative;z-index:1}
.mvCard:hover{
  transform:translateY(-2px);
  border-color:rgba(94,197,255,.4);
  background:linear-gradient(145deg,rgba(94,197,255,.1),rgba(255,255,255,.04));
  box-shadow:0 10px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08)
}
.mvCard:hover::before{
  background:
    radial-gradient(ellipse 90% 70% at 16% 6%, rgba(94,197,255,.22), transparent 60%),
    radial-gradient(ellipse 75% 55% at 90% 95%, rgba(125,211,252,.14), transparent 54%)
}
.mvCard:active{transform:scale(.98)}
.mvCard.is-empty{opacity:.5;cursor:default}
.mvCard.is-empty:hover{transform:none;border-color:rgba(255,255,255,.1);box-shadow:0 4px 20px rgba(0,0,0,.12)}
.mvCard.is-empty:hover::before{
  background:
    radial-gradient(ellipse 85% 65% at 18% 8%, rgba(94,197,255,.18), transparent 58%),
    radial-gradient(ellipse 70% 55% at 92% 95%, rgba(56,189,248,.12), transparent 52%)
}
.mvCard.is-done{
  border-color:rgba(52,211,153,.28)
}
.mvCard.is-done::before{
  background:
    radial-gradient(ellipse 85% 65% at 18% 8%, rgba(52,211,153,.16), transparent 58%),
    radial-gradient(ellipse 70% 55% at 92% 95%, rgba(16,185,129,.1), transparent 52%)
}
.mvCard.is-done:hover::before{
  background:
    radial-gradient(ellipse 90% 70% at 16% 6%, rgba(52,211,153,.2), transparent 60%),
    radial-gradient(ellipse 75% 55% at 90% 95%, rgba(110,231,183,.12), transparent 54%)
}
.mvCardTop{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px
}
.mvCardTitle{
  font-size:13.5px;font-weight:650;line-height:1.35;color:#f1f5f9;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.mvCardFoot{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px
}
.mvCardCount{font-size:11.5px;color:rgba(148,163,184,.9);font-weight:500}

/* Mini circular progress */
.mvRing{
  --p:0;
  flex-shrink:0;
  width:34px;height:34px;border-radius:50%;
  background:conic-gradient(#38bdf8 calc(var(--p) * 1%), rgba(255,255,255,.08) 0);
  display:grid;place-items:center;
  position:relative
}
.mvRing::before{
  content:'';
  width:24px;height:24px;border-radius:50%;
  background:rgba(11,18,32,.92);
  border:1px solid rgba(255,255,255,.06)
}
.mvRing span{
  position:absolute;font-size:9px;font-weight:800;color:#e2e8f0;letter-spacing:-.02em
}
.mvRing.is-done{
  background:conic-gradient(#34d399 100%, transparent 0)
}
.mvRing.is-done span{color:#6ee7b7;font-size:12px}
.mvDoneBadge{display:none} /* eski ustma-ust badge */
.mvDoneInline{
  font-size:11px;font-weight:700;color:#6ee7b7;letter-spacing:.02em
}
.mvEmptyState{
  padding:28px 16px;text-align:center;color:rgba(148,163,184,.9);font-size:14px
}

/* Skeleton — birinchi yuklash */
.mvSkel{pointer-events:none;cursor:default}
.mvSkel:hover{transform:none;border-color:rgba(255,255,255,.1);box-shadow:0 4px 20px rgba(0,0,0,.12)}
.mvSkel::before{opacity:.35}
.mvSkelLine,.mvSkelCircle,.mvSkelTitle{
  display:block;border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.12),rgba(255,255,255,.06));
  background-size:200% 100%;
  animation:mvShimmer 1.2s ease-in-out infinite
}
.mvSkelLine{height:12px}
.mvSkelCircle{width:34px;height:34px;border-radius:50%;flex-shrink:0}
.mvSkelTitle{height:12px;width:28%;margin:0 0 10px}
@keyframes mvShimmer{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

.theory-quiz-top{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)
}
.theory-quiz-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px}
.theory-timer{
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--blue2);
  background:rgba(56,132,255,.12);padding:4px 10px;border-radius:8px
}
.theory-timer.warn{color:#ff8a8a;background:rgba(255,80,100,.15)}
.theory-quiz-body{min-height:0}
.theory-q-card{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.theory-q-layout{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch
}
.theory-q-media{width:100%}
.theory-q-img{
  width:100%;max-height:min(42vh,320px);object-fit:contain;border-radius:12px;
  background:#0a1624;border:1px solid var(--line);display:block;margin:0 auto
}
.theory-q-content{min-width:0}
.theory-q-text{
  font-size:15px;line-height:1.45;color:#fff;margin:0 0 10px;font-weight:500
}
.theory-options{display:flex;flex-direction:column;gap:8px}
.theory-opt{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  border-radius:12px;border:1.5px solid var(--line);background:rgba(255,255,255,.03);
  cursor:pointer;transition:border-color .2s, background .2s, transform .15s, box-shadow .2s;
  text-align:left;width:100%;color:inherit;font:inherit;position:relative
}
.theory-opt:hover{
  border-color:rgba(56,132,255,.55);background:rgba(56,132,255,.08);
  transform:translateY(-1px)
}
.theory-opt:active{transform:scale(.985)}
.theory-opt.selected{
  border-color:var(--blue);
  background:linear-gradient(135deg,rgba(56,132,255,.22),rgba(56,132,255,.1));
  box-shadow:0 0 0 1px rgba(56,132,255,.35), 0 8px 24px rgba(56,132,255,.12)
}
.theory-opt.selected .theory-opt-letter{
  background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(56,132,255,.4)
}
.theory-opt.selected .theory-opt-check{opacity:1;transform:scale(1)}
.theory-opt-pop{animation:theoryOptPop .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes theoryOptPop{
  0%{transform:scale(1)}
  40%{transform:scale(1.03)}
  100%{transform:scale(1)}
}
.theory-opt.correct{border-color:#3dd68c;background:rgba(61,214,140,.12)}
.theory-opt.wrong{border-color:#ff6b7a;background:rgba(255,80,100,.12)}
.theory-opt-letter{
  flex-shrink:0;width:30px;height:30px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);font-size:13px;font-weight:700;
  transition:background .2s, color .2s, box-shadow .2s
}
.theory-opt-text{flex:1;line-height:1.45;padding-top:4px}
.theory-opt-check{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;font-size:13px;font-weight:700;
  opacity:0;transform:scale(.5);transition:opacity .2s, transform .25s cubic-bezier(.2,1.2,.4,1);
  margin-top:3px
}
.theory-admin-empty{
  text-align:center;padding:36px 16px;border:1px dashed var(--line);
  border-radius:14px;background:rgba(255,255,255,.02)
}
.theory-admin-sec-item.active{
  border-color:var(--blue)!important;
  background:rgba(56,132,255,.14)!important;
  box-shadow:inset 3px 0 0 var(--blue)
}
.theory-quiz-nav{
  display:flex;justify-content:space-between;gap:10px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap
}
.theory-result-box{text-align:center;padding:24px 12px 12px}
.theory-result-icon{font-size:48px;margin-bottom:8px}
.theory-result-score{font-size:28px;font-weight:700;color:#fff;margin:8px 0}
.theory-result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.theory-review-list{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.theory-review-item{
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:13px
}
.theory-review-item.ok{border-color:rgba(61,214,140,.35)}
.theory-review-item.bad{border-color:rgba(255,80,100,.35)}

/* Admin theory */
.theory-admin-layout{
  display:flex;gap:16px;margin-top:16px;flex-wrap:wrap;align-items:flex-start
}
.theory-admin-sections{min-width:240px;max-width:300px;flex:0 0 260px}
.theory-admin-sec-item{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 12px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;margin-bottom:6px;font-size:13px
}
.theory-admin-sec-item:hover{background:rgba(255,255,255,.04)}
.theory-admin-sec-item.active{border-color:var(--blue);background:rgba(56,132,255,.1)}
.theory-admin-sec-item .sec-actions{display:flex;gap:4px;opacity:.7}
.theory-admin-q-row{
  display:flex;gap:12px;align-items:flex-start;padding:12px;
  border-bottom:1px solid var(--line);font-size:13px
}
.theory-admin-q-row img{width:64px;height:48px;object-fit:cover;border-radius:8px;flex-shrink:0}
.theory-opt-row{
  display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap
}
.theory-opt-row input[type=text]{flex:1;min-width:160px}
.theory-opt-row label{display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap}


.theory-opt.wrong{
  border-color:#ff6b7a!important;
  background:rgba(255,80,100,.14)!important;
  box-shadow:0 0 0 1px rgba(255,80,100,.25)
}
.theory-opt.correct{
  border-color:#3dd68c!important;
  background:rgba(61,214,140,.14)!important;
  box-shadow:0 0 0 1px rgba(61,214,140,.3)
}
.theory-opt.correct .theory-opt-letter{
  background:#3dd68c!important;color:#0a1624!important
}
.theory-opt.wrong .theory-opt-letter{
  background:#ff6b7a!important;color:#fff!important
}
.theory-opt-shake{animation:theoryOptShake .4s ease}
@keyframes theoryOptShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.theory-explain-card{
  margin-top:16px;padding:14px 16px;border-radius:14px;
  animation:theoryExplainIn .3s ease
}
@keyframes theoryExplainIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.theory-explain-ok{
  background:rgba(61,214,140,.12);border:1px solid rgba(61,214,140,.35)
}
.theory-explain-wrong{
  background:rgba(255,80,100,.1);border:1px solid rgba(255,120,140,.35)
}
.theory-explain-title{font-weight:700;font-size:15px;margin-bottom:6px;color:#fff}
.theory-explain-body{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.theory-opt[disabled]{cursor:default;opacity:1}
.theory-admin-sec-item{cursor:pointer;user-select:none}
.theory-admin-sec-item .sec-main{flex:1;min-width:0}

@media (max-width:700px){
  .theory-admin-layout{flex-direction:column}
  .theory-admin-sections{max-width:none;flex:1}
  .theory-q-img{max-height:min(38vh,260px)}
  .theory-q-text{font-size:14.5px;margin-bottom:10px}
  .theory-opt{padding:9px 11px}
  .theory-opt-letter{width:26px;height:26px;font-size:12px}
}

.theory-actions .btn{min-width:160px}
.theory-catalog-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px
}
@media (min-width:520px){
  .theory-catalog-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
}
.theory-catalog-card{
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:14px;padding:14px;text-align:left
}
.theory-catalog-card-title{font-weight:600;color:#fff;font-size:14.5px}
.theory-catalog-amount{
  margin-top:8px;display:inline-block;padding:4px 10px;border-radius:8px;
  background:rgba(56,132,255,.15);color:var(--blue2);font-weight:700;font-size:13px
}
.theory-sign-card{display:flex;gap:12px;align-items:flex-start}
.theory-sign-card img{
  width:72px;height:72px;object-fit:contain;border-radius:10px;
  background:#0a1624;border:1px solid var(--line);flex-shrink:0
}
.theory-admin-tabs .theory-atab.active{
  border-color:var(--blue);background:rgba(56,132,255,.15);color:#fff
}

/* ========== REFERRAL ========== */
.referral-section{padding:48px 0 20px}
.referral-card{
  position:relative;overflow:hidden;cursor:pointer;
  border-radius:24px;padding:32px 28px 28px;
  border:1px solid rgba(56,132,255,.35);
  background:linear-gradient(145deg,rgba(12,28,52,.95),rgba(8,18,36,.98));
  text-align:center;max-width:720px;margin:0 auto;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  box-shadow:0 16px 48px rgba(0,0,0,.25)
}
.referral-card:hover{
  transform:translateY(-3px);
  border-color:rgba(56,132,255,.55);
  box-shadow:0 20px 56px rgba(56,132,255,.15)
}
.referral-glow{
  position:absolute;inset:-40% -20% auto;height:120%;
  background:radial-gradient(ellipse at center,rgba(56,132,255,.22),transparent 65%);
  pointer-events:none;animation:referralPulse 4s ease-in-out infinite
}
@keyframes referralPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
.referral-badge{
  display:inline-block;position:relative;z-index:1;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue2);background:rgba(56,132,255,.15);
  padding:5px 12px;border-radius:999px;margin-bottom:12px
}
.referral-title{
  position:relative;z-index:1;font-size:clamp(22px,4vw,30px);
  font-weight:800;color:#fff;margin:0 0 16px;line-height:1.25
}
.referral-amount-wrap{
  position:relative;z-index:1;margin:8px 0 14px
}
.referral-amount-label{
  display:block;font-size:12px;color:var(--muted);margin-bottom:6px;letter-spacing:.04em
}
.referral-amount{
  display:inline-block;font-size:clamp(28px,5vw,40px);font-weight:900;
  background:linear-gradient(90deg,#7eb6ff,#fff,#7eb6ff);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:referralShine 3s linear infinite
}
@keyframes referralShine{
  to{background-position:200% center}
}
.referral-teaser{
  position:relative;z-index:1;font-size:13px;margin:0
}
.referral-detail{
  position:relative;z-index:1;margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  animation:fadeIn .3s ease
}
.referral-text{
  font-size:15px;line-height:1.65;color:rgba(255,255,255,.88);margin:0;max-width:520px;margin-inline:auto
}
.referral-card.open .referral-teaser{display:none}
@media (max-width:600px){
  .referral-card{padding:24px 18px}
  .referral-amount{font-size:26px}
}

.referralAdminStats{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.referralAdminStats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.referralAdminStats{grid-template-columns:1fr}}

/* ========== v2.9 Dashboard / Progress / Achievements ========== */
.dashWelcome{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap;
}
.dashWelcomeText h2{font-size:clamp(22px,3vw,28px);font-weight:800;margin:0 0 4px;color:#fff}
.dashWelcomeText .muted{font-size:14px}
.dashStreakPill{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:16px;
  background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.25);
}
.dashStreakFire{font-size:22px}
.dashStreakPill strong{display:block;font-size:20px;font-weight:900;color:#fff;line-height:1.1}
.dashStreakPill small{font-size:11px;color:var(--muted)}

.dashPathCard{
  display:flex;align-items:center;gap:20px;
  margin-bottom:16px;padding:20px 22px !important;
}
.dashPathRing{
  width:72px;height:72px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:conic-gradient(#5ec5ff 0%, rgba(255,255,255,.08) 0%);
  position:relative;
}
.dashPathRing::before{
  content:'';position:absolute;inset:6px;border-radius:50%;
  background:var(--bg2,#0a1624);
}
.dashPathRing span{
  position:relative;z-index:1;
  font-size:15px;font-weight:900;color:#fff;
}
.dashPathBody{flex:1;min-width:0}
.dashPathTrack{
  display:flex;align-items:center;gap:0;
  overflow-x:auto;padding-bottom:4px;
}
.dashPathStep{
  flex:1;min-width:56px;text-align:center;position:relative;
  padding:0 4px;
}
.dashPathStep::before{
  content:'';display:block;width:10px;height:10px;border-radius:50%;
  margin:0 auto 8px;
  background:rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.2);
}
.dashPathStep span{
  font-size:9px;font-weight:800;letter-spacing:.06em;
  color:rgba(255,255,255,.35);text-transform:uppercase;
}
.dashPathStep.done::before{
  background:#5ec5ff;border-color:#5ec5ff;
  box-shadow:0 0 12px rgba(94,197,255,.45);
}
.dashPathStep.done span{color:#5ec5ff}
.dashPathStep.current::before{
  background:#fff;border-color:#5ec5ff;
  box-shadow:0 0 0 4px rgba(94,197,255,.25);
}
.dashPathStep.current span{color:#fff}
.dashPathHint{font-size:12px;margin:10px 0 0}

.dashTopRow{
  display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-bottom:14px;
  align-items:stretch;
}
@media(max-width:720px){.dashTopRow{grid-template-columns:1fr}}
.dashEqualCard{
  display:flex;flex-direction:column;
  min-height:180px;
  height:100%;
  margin:0 !important;
  padding:22px 20px !important;
  box-sizing:border-box;
}
.dashTipCard{margin:0}
.dashTipCard .dashTips{flex:1}
.dashDailyCard{
  justify-content:center;
}
.dashDailyCard h3{font-size:15px;margin:0 0 2px}
.dashDailyBox{margin-top:auto}
.dashQuickGrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0;
}
@media(max-width:560px){.dashQuickGrid{grid-template-columns:repeat(2,1fr)}}
.dashQuickBtn{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 10px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  color:#fff;font-size:12.5px;font-weight:700;
  transition:transform .2s,border-color .2s,background .2s;
}
.dashQuickBtn:hover{
  transform:translateY(-3px);
  border-color:rgba(94,197,255,.35);
  background:rgba(77,184,255,.08);
}
.dashQuickIcon{font-size:22px;line-height:1}

.dashHero { margin-bottom: 16px; }
.dashTips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}
.dashPrimaryCard {
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(77,184,255,.12), rgba(255,255,255,.03));
  border: 1px solid rgba(77,184,255,.28);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.dashPrimaryEyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue2, #5ec5ff);
  margin-bottom: 8px;
}
.dashPrimaryCard h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #fff;
  line-height: 1.35;
}
.dashPrimaryCard .muted { font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.dashPrimaryGoal {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #d7e6f5;
  margin-bottom: 14px;
}
.dashPrimaryBtn { margin-top: 4px; }
.dashTipCard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.dashTipIcon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.dashTipBody {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dashTipBody strong { font-size: 14px; font-weight: 600; }
.dashGrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .dashGrid { grid-template-columns: 1fr; }
}
.progressBars { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.progRow {
  display: grid;
  grid-template-columns: 72px 1fr 44px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.progRowRich {
  grid-template-columns: minmax(88px, 110px) 1fr 44px;
  align-items: center;
}
.progLabelCol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.progLabelCol span { font-weight: 650; }
.progMeta {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progTrack {
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.progFill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3b82f6, #22c55e);
  width: 0%;
  transition: none;
}
.progFill.prog-anim {
  transition: width 0.55s var(--anim-ease);
}
.dashStreakCard { text-align: center; }
.streakBig {
  font-size: 48px;
  font-weight: 900;
  line-height: 1.1;
  margin: 8px 0 4px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dashDailyBox { margin-top: 16px; }
.dashDailyDone {
  padding: 12px;
  border-radius: 12px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  color: #86efac;
}
.dashRecent { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dashRecentItem {
  display: grid;
  grid-template-columns: 80px 56px 48px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  font-size: 13px;
}
.dashRecentMode {
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.achievementsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.achCard {
  padding: 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
.achCard.unlocked {
  border-color: rgba(250,204,21,.35);
  background: rgba(250,204,21,.06);
}
.achCard.locked { opacity: .45; filter: grayscale(.4); }
.achIcon { font-size: 28px; margin-bottom: 8px; }
.achTitle { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.achDesc { font-size: 12px; line-height: 1.4; }
.achDate { font-size: 11px; margin-top: 8px; }
.theory-why-btn {
  margin-top: 8px;
  padding: 4px 12px !important;
  font-size: 13px !important;
}
.theory-why-body { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.theory-learn-loop { margin-top: 12px; }
.theory-similar-btn { font-size: 13px !important; padding: 6px 14px !important; }

/* Weak topics */
.weakTopicsCard {
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
}
.weakTopicsHead strong { font-size: 15px; color: #fff; }
.weakTopicsList { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.weakTopicRow { display: flex; flex-direction: column; gap: 6px; }
.weakTopicInfo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13px;
}
.weakTopicTitle { font-weight: 650; color: #e8f4ff; }
.weakTopicPct { font-weight: 800; color: #fbbf24; }
.weakTopicBar {
  height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden;
}
.weakTopicBar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

/* Journey timeline */
.journeyTimeline { margin-top: 8px; position: relative; padding-left: 4px; }
.journeyStep {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding-bottom: 22px;
  min-height: 48px;
}
.journeyStep:last-child { padding-bottom: 0; }
.journeyDot {
  width: 12px; height: 12px; border-radius: 50%;
  margin-top: 4px; margin-left: 4px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.25);
  z-index: 1;
}
.journeyStep.done .journeyDot {
  background: #22c55e;
  border-color: rgba(34,197,94,.5);
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}
.journeyLine {
  position: absolute;
  left: 9px; top: 18px; bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.1);
}
.journeyStep.done .journeyLine { background: rgba(34,197,94,.35); }
.journeyBody strong { font-size: 14px; color: #c5d5e5; }
.journeyStep.done .journeyBody strong { color: #fff; }

.stuCabNavInner {
  flex-wrap: nowrap;
  scrollbar-width: thin;
}
.stuCabNavInner::-webkit-scrollbar { height: 4px; }
.stuCabNavInner::-webkit-scrollbar-thumb { background: rgba(77,184,255,.35); border-radius: 4px; }

/* Mening amaliyotim */
.nextLessonCard {
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(77,184,255,.1), rgba(255,255,255,.03));
  border: 1px solid rgba(77,184,255,.25);
  margin-bottom: 8px;
}
.nextLessonEyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue2, #5ec5ff); margin-bottom: 12px;
}
.nextLessonGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.nextLessonItem { display: flex; flex-direction: column; gap: 4px; }
.nextLessonItem strong { font-size: 15px; color: #fff; }
.nextLessonActions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Instruktor */
.insHeroCard {
  padding: 20px; border-radius: 16px;
  background: rgba(77,184,255,.06); border: 1px solid rgba(77,184,255,.2);
}
.insHeroTop { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.insAvatar {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: #123; flex-shrink: 0;
}
.insAvatar img { width: 100%; height: 100%; object-fit: cover; }
.insAvatarFallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #5ec5ff;
  background: rgba(77,184,255,.15);
}
.insMetaRow { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 13px; color: #fbbf24; }
.insContactRow{
  display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap;
}
.insContactIcon{
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#e2e8f0; transition:background .2s, border-color .2s, transform .15s, color .2s;
}
.insContactIcon:hover{ transform:translateY(-2px); }
.insContactIcon--tel{ color:#4ade80; border-color:rgba(74,222,128,.3); background:rgba(74,222,128,.1); }
.insContactIcon--tel:hover{ background:rgba(74,222,128,.2); border-color:rgba(74,222,128,.5); }
.insContactIcon--tg{ color:#38bdf8; border-color:rgba(56,189,248,.3); background:rgba(56,189,248,.1); }
.insContactIcon--tg:hover{ background:rgba(56,189,248,.2); border-color:rgba(56,189,248,.5); }
.insContactIcon--ig{ color:#f472b6; border-color:rgba(244,114,182,.3); background:rgba(244,114,182,.1); }
.insContactIcon--ig:hover{ background:rgba(244,114,182,.2); border-color:rgba(244,114,182,.5); }
.insNextLesson {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04); margin-bottom: 14px;
}
.insProgressLabel {
  display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px;
}

/* Referal */
.refCodeBig {
  font-size: 20px; font-weight: 800; letter-spacing: .1em;
  background: rgba(255,255,255,.06); padding: 12px 18px; border-radius: 12px;
  border: 1px dashed rgba(94,197,255,.35); color: #fff;
}
.refStatsGrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 640px) {
  .refStatsGrid { grid-template-columns: repeat(4, 1fr); }
}
.refStatCard {
  padding: 14px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.refStatNum { font-size: 20px; font-weight: 800; margin-top: 4px; color: #fff; }
.refStatNum.green { color: var(--green, #22c55e); }
.refStatNum.blue { color: var(--blue2, #5ec5ff); }

/* Profil — Chiqish (pastda, qizil, animatsiya) */
.profileLogoutWrap {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.stuLogoutLink {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #ef4444;
  cursor: pointer;
  letter-spacing: .04em;
  animation: logoutPulse 2.2s ease-in-out infinite;
  transition: color 0.2s ease, transform 0.2s ease;
}
.stuLogoutLink:hover {
  color: #f87171;
  transform: scale(1.04);
}
@keyframes logoutPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; text-shadow: 0 0 12px rgba(239, 68, 68, 0.45); }
}

/* Referal naqdlashtirish */
.refCashoutBox {
  margin-top: 20px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}

/* ========== Falsafa — 3 premium karta (v2.9.9+) ========== */
.philSection { position: relative; }
.philGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  perspective: 1400px;
}
@media (min-width: 900px) {
  .philGrid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.philCard {
  --phil-glow-x: 0px;
  --phil-glow-y: 0px;
  --phil-glow-str: 0;
  --phil-glow-rgb: 56, 189, 248; /* default theory blue */
  position: relative;
  border-radius: 22px;
  padding: 26px 24px 22px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 55%, rgba(8,18,32,.4) 100%);
  border: 1px solid rgba(255,255,255,.11);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition:
    border-color 0.4s ease,
    box-shadow 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Ambient glow behind card (box-shadow is not clipped by overflow) */
  box-shadow:
    0 20px 40px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.06),
    calc(var(--phil-glow-x) * 0.6) calc(12px + var(--phil-glow-y) * 0.4)
      calc(28px + 40px * var(--phil-glow-str))
      rgba(var(--phil-glow-rgb), calc(0.08 + 0.22 * var(--phil-glow-str))),
    calc(var(--phil-glow-x) * 1.1) calc(18px + var(--phil-glow-y) * 0.7)
      calc(56px + 70px * var(--phil-glow-str))
      rgba(var(--phil-glow-rgb), calc(0.05 + 0.18 * var(--phil-glow-str))),
    calc(var(--phil-glow-x) * 1.4) calc(28px + var(--phil-glow-y))
      calc(90px + 100px * var(--phil-glow-str))
      rgba(var(--phil-glow-rgb), calc(0.03 + 0.12 * var(--phil-glow-str)));
}
.philCard--theory { --phil-glow-rgb: 56, 189, 248; }
.philCard--auto   { --phil-glow-rgb: 245, 158, 11; }
.philCard--video  { --phil-glow-rgb: 167, 139, 250; }

/* Hover border accent */
.philCard:hover {
  border-color: rgba(56,189,248,.42);
}
.philCard--auto:hover {
  border-color: rgba(245,158,11,.45);
}
.philCard--video:hover {
  border-color: rgba(167,139,250,.45);
}

/* Smooth transform return when JS clears inline transform */
.philCard.is-leaving {
  transition:
    transform 0.55s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.4s ease,
    box-shadow 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
.philCard .philCardTop,
.philCard .philTitle,
.philCard .philSub,
.philCard .philScene,
.philCard .philFeatures,
.philCard .philVideoWrap,
.philCard .philCardBtn {
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
.philCard.is-tilting .philCardTop,
.philCard.is-tilting .philTitle,
.philCard.is-tilting .philSub,
.philCard.is-tilting .philScene,
.philCard.is-tilting .philFeatures,
.philCard.is-tilting .philVideoWrap,
.philCard.is-tilting .philCardBtn {
  transition: none;
}

/* ========== Phil mini-sahneler (2D, premium) ========== */
.philScene{
  position:relative;
  margin:14px 0 16px;
  border-radius:16px;
  border:1px solid rgba(125,211,252,.14);
  background:
    linear-gradient(165deg, rgba(8,18,32,.9) 0%, rgba(5,13,22,.95) 100%);
  overflow:hidden;
  min-height:132px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.philCardBtn{margin-top:auto}

/* --- 1. Nazariya: mini test --- */
.philScene--theory{padding:12px 12px 10px}
.tqScreen{position:relative}
.tqHead{
  display:flex;align-items:center;gap:8px;
  margin-bottom:8px;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(186,230,253,.65)
}
.tqDot{
  width:6px;height:6px;border-radius:50%;
  background:#38bdf8;box-shadow:0 0 8px rgba(56,189,248,.7);
  animation:tqPulse 2.4s ease-in-out infinite
}
.tqProgNum{
  margin-left:auto;font-variant-numeric:tabular-nums;color:#7dd3fc;
  position:relative;display:inline-flex;align-items:center;gap:0
}
.tqProgNum .tqFrom,.tqProgNum .tqTo{
  font-style:normal;min-width:1.1em;text-align:right
}
.tqProgNum .tqTo{position:absolute;left:0;opacity:0}
.tqProgNum .tqFrom{animation:tqFromHide 7s cubic-bezier(.22,.61,.36,1) infinite}
.tqProgNum .tqTo{animation:tqToShow 7s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes tqFromHide{
  0%,32%{opacity:1}
  40%,78%{opacity:0}
  88%,100%{opacity:1}
}
@keyframes tqToShow{
  0%,32%{opacity:0}
  40%,78%{opacity:1}
  88%,100%{opacity:0}
}
.tqQuestion{
  font-size:12.5px;font-weight:650;line-height:1.35;
  color:#e8f4ff;margin:0 0 10px;min-height:2.6em;
  animation:tqFloat 5s ease-in-out infinite
}
.tqOpts{display:flex;flex-direction:column;gap:5px}
.tqOpt{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:10px;
  font-size:11.5px;font-weight:600;color:rgba(226,240,255,.78);
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  transition:border-color .35s,background .35s,color .35s,box-shadow .35s
}
.tqOpt span{
  width:18px;height:18px;border-radius:6px;
  display:grid;place-items:center;flex-shrink:0;
  font-size:10px;font-weight:800;color:#7dd3fc;
  background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.2)
}
.tqOpt--correct{
  animation:tqPick 7s cubic-bezier(.22,.61,.36,1) infinite
}
.tqFooter{display:flex;align-items:center;gap:10px;margin-top:10px}
.tqBar{
  flex:1;height:4px;border-radius:99px;
  background:rgba(255,255,255,.06);overflow:hidden
}
.tqFill{
  display:block;height:100%;width:70%;border-radius:99px;
  background:linear-gradient(90deg,#0ea5e9,#7dd3fc);
  animation:tqBar 7s cubic-bezier(.22,.61,.36,1) infinite
}
.tqCheck{
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#0ea5e9,#38bdf8);
  box-shadow:0 0 12px rgba(56,189,248,.4);
  opacity:0;transform:scale(.5);
  animation:tqCheck 7s cubic-bezier(.22,.61,.36,1) infinite
}
@keyframes tqPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes tqFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes tqPick{
  0%,22%{border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.03);box-shadow:none;color:rgba(226,240,255,.78)}
  32%,78%{border-color:rgba(56,189,248,.45);background:rgba(14,165,233,.14);box-shadow:0 0 16px rgba(56,189,248,.12);color:#fff}
  88%,100%{border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.03);box-shadow:none;color:rgba(226,240,255,.78)}
}
@keyframes tqBar{
  0%,28%{width:70%}
  40%,78%{width:75%}
  90%,100%{width:70%}
}
@keyframes tqCheck{
  0%,30%{opacity:0;transform:scale(.5)}
  38%,75%{opacity:1;transform:scale(1)}
  88%,100%{opacity:0;transform:scale(.5)}
}

/* --- 2. Amaliyot: avtodrom surati (ixcham + yumshoq harakat) --- */
.philScene--drive{
  height:140px;
  padding:0;
  overflow:hidden;
  background:#0a1a2e;
}
.dvImgWrap{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
.dvImgWrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,20,34,.15) 0%, transparent 35%, rgba(7,20,34,.25) 100%);
  pointer-events:none;
  z-index:1;
}
.dvImg{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  animation:dvFloat 5s ease-in-out infinite;
  will-change:transform;
  user-select:none;
  pointer-events:none;
}
@keyframes dvFloat{
  0%,100%{transform:scale(1.06) translateY(0)}
  50%{transform:scale(1.12) translateY(-4px)}
}

/* --- 3. Video: mini player --- */
.philScene--player{padding:10px}
.vpFrame{
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(186,230,253,.12);
  background:#050d16
}
.vpScreen{
  position:relative;height:78px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(56,189,248,.12), transparent 55%),
    linear-gradient(160deg,#0a1628 0%,#071018 100%);
  display:grid;place-items:center
}
.vpPlayBtn{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,rgba(14,165,233,.9),rgba(56,189,248,.75));
  box-shadow:0 0 0 6px rgba(56,189,248,.12), 0 8px 20px rgba(0,0,0,.35);
  animation:vpPlayPulse 3.2s ease-in-out infinite;
  z-index:1
}
.vpTitles{
  position:absolute;left:12px;right:12px;bottom:8px;
  height:16px;overflow:hidden;text-align:center
}
.vpTitle{
  position:absolute;left:0;right:0;
  font-size:11px;font-weight:700;color:rgba(226,240,255,.85);
  opacity:0;transform:translateY(8px)
}
.vpTitle--1{animation:vpTitleCycle 9s ease-in-out infinite}
.vpTitle--2{animation:vpTitleCycle 9s ease-in-out 3s infinite}
.vpTitle--3{animation:vpTitleCycle 9s ease-in-out 6s infinite}
.vpControls{padding:8px 10px 9px;background:rgba(5,13,22,.9)}
.vpTrack{
  position:relative;height:3px;border-radius:99px;
  background:rgba(255,255,255,.08);margin-bottom:6px
}
.vpFill{
  display:block;height:100%;width:28%;border-radius:99px;
  background:linear-gradient(90deg,#0ea5e9,#7dd3fc);
  animation:vpFill 9s linear infinite
}
.vpKnob{
  position:absolute;top:50%;left:28%;
  width:9px;height:9px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px rgba(125,211,252,.5);
  transform:translate(-50%,-50%);
  animation:vpKnob 9s linear infinite
}
.vpTime{
  display:flex;justify-content:space-between;
  font-size:10px;font-weight:650;color:rgba(186,230,253,.55);
  font-variant-numeric:tabular-nums
}
@keyframes vpPlayPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 6px rgba(56,189,248,.1),0 8px 20px rgba(0,0,0,.35)}
  50%{transform:scale(1.06);box-shadow:0 0 0 10px rgba(56,189,248,.16),0 8px 20px rgba(0,0,0,.35)}
}
@keyframes vpTitleCycle{
  0%,8%{opacity:0;transform:translateY(8px)}
  14%,28%{opacity:1;transform:translateY(0)}
  34%,100%{opacity:0;transform:translateY(-6px)}
}
@keyframes vpFill{0%{width:12%}100%{width:88%}}
@keyframes vpKnob{0%{left:12%}100%{left:88%}}

@media (prefers-reduced-motion:reduce){
  .tqDot,.tqQuestion,.tqOpt--correct,.tqFill,.tqCheck,
  .dvImg,
  .vpPlayBtn,.vpTitle,.vpFill,.vpKnob,
  .philCardGlow{animation:none !important}
  .tqOpt--correct{border-color:rgba(56,189,248,.45);background:rgba(14,165,233,.14);color:#fff}
  .tqFill{width:75%}
  .tqCheck{opacity:1;transform:scale(1)}
  .vpFill{width:40%}
  .vpKnob{left:40%}
  .vpTitle--1{opacity:1;transform:none}
  .philCard{transform:none !important;transition:border-color .3s ease,box-shadow .3s ease}
  .philCard .philCardTop,
  .philCard .philTitle,
  .philCard .philSub,
  .philCard .philScene,
  .philCard .philCardBtn,
  .philCard .philFeatures,
  .philCard .philVideoWrap{transform:none !important;transition:none}
}

/* Soft top glow — har bir karta o‘z neon rangi */
.philCardGlow {
  position: absolute;
  inset: -45% -25% auto;
  height: 130%;
  background: radial-gradient(ellipse at 50% 0%, rgba(56,189,248,.22), transparent 62%);
  pointer-events: none;
  opacity: 0.75;
  animation: philGlow 7s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.philCard--theory:hover .philCardGlow {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 0%, rgba(56,189,248,.32), transparent 58%);
}
.philCard--auto .philCardGlow {
  background: radial-gradient(ellipse at 50% 0%, rgba(245,158,11,.18), transparent 62%);
}
.philCard--auto:hover .philCardGlow {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 0%, rgba(245,158,11,.34), transparent 58%);
}
.philCard--video .philCardGlow {
  background: radial-gradient(ellipse at 50% 0%, rgba(167,139,250,.16), transparent 62%);
}
.philCard--video:hover .philCardGlow {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 0%, rgba(167,139,250,.32), transparent 58%);
}
@keyframes philGlow {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 0.95; transform: translateY(10px); }
}

/* Top row: label + floating glass badge */
.philCardTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.philLabel {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5ec5ff;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(94,197,255,.1);
  border: 1px solid rgba(94,197,255,.22);
}
.philCard--auto .philLabel {
  color: #fbbf24;
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.28);
}
.philCard--video .philLabel {
  color: #c4b5fd;
  background: rgba(167,139,250,.12);
  border-color: rgba(167,139,250,.26);
}

/* 3D tilt parallax layers */
.philCard .philCardTop,
.philCard .philTitle,
.philCard .philSub,
.philCard .philScene,
.philCard .philCardBtn,
.philCard .philFeatures,
.philCard .philVideoWrap {
  transition: transform 0.12s ease-out;
  transform: translateZ(0);
}
.philCard .philTitle { transform: translateZ(18px); }
.philCard .philSub { transform: translateZ(10px); }
.philCard .philScene { transform: translateZ(28px); }
.philCard .philCardBtn { transform: translateZ(36px); }
.philCard .philFeatures { transform: translateZ(14px); }
.philCard .philVideoWrap { transform: translateZ(22px); }

/* Glassmorphism floating badge */
.philBadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 8px 10px 7px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 8px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  line-height: 1.15;
}
.philBadgeNum {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #fff;
}
.philBadgeTxt {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  color: rgba(255,255,255,.55);
  margin-top: 1px;
}
.philBadgePlay {
  font-size: 12px;
  color: #5ec5ff;
  line-height: 1;
  margin-bottom: 2px;
}
.philBadge--theory {
  box-shadow:
    0 8px 24px rgba(0,0,0,.25),
    0 0 20px rgba(56,189,248,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.philBadge--auto {
  box-shadow:
    0 8px 24px rgba(0,0,0,.25),
    0 0 18px rgba(245,158,11,.2),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.philBadge--video {
  box-shadow:
    0 8px 24px rgba(0,0,0,.25),
    0 0 18px rgba(167,139,250,.2),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Title + subtitle hierarchy */
.philTitle {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}
.philSub {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted, #8fa3b8);
  position: relative;
  z-index: 1;
}

/* Feature checklist — premium mini-product feel */
.philFeatures {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  z-index: 1;
  flex: 1;
}
.philFeatures li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(243,247,252,.88);
}
.philFeatIcon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(94,197,255,.12);
  border: 1px solid rgba(94,197,255,.25);
  color: #5ec5ff;
}
.philCard--auto .philFeatIcon {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.28);
  color: #fbbf24;
}
.philCard--video .philFeatIcon {
  background: rgba(167,139,250,.12);
  border-color: rgba(167,139,250,.26);
  color: #c4b5fd;
}

/* CTA button */
.philCardBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 13px 18px;
  border: none;
  border-radius: 13px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow: 0 10px 28px rgba(59,130,246,.32);
}
.philCardBtn--accent {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 10px 28px rgba(245,158,11,.32);
}
.philCardBtn:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
}
.philBtnArrow {
  display: inline-block;
  font-style: normal;
  transition: transform 0.25s ease;
}
.philCardBtn:hover .philBtnArrow { transform: translateX(5px); }

/* Video karta — feature list + compact preview + CTA (1–2 bilan bir oila) */
.philVideoWrap {
  margin: 0 0 14px;
  border-radius: 12px;
  overflow: hidden;
  background: #071018;
  border: 1px solid rgba(255,255,255,.09);
  aspect-ratio: 16 / 9;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  flex-shrink: 0;
}
.philVideoWrap--compact {
  aspect-ratio: 16 / 9;
  max-height: 120px;
}
.philVideoFrame {
  width: 100%; height: 100%;
}
.philVideoFrame iframe,
.philVideoFrame video {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: #000;
}
.philVideoPlaceholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8aa0b5;
  font-size: 12px;
  font-weight: 600;
}
.philPlayPulse {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(94,197,255,.14);
  border: 1.5px solid rgba(94,197,255,.4);
  position: relative;
  animation: philPlayPulse 2.2s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(94,197,255,.12);
}
.philPlayPulse::after {
  content: '';
  position: absolute;
  left: 15px; top: 12px;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #5ec5ff;
}
@keyframes philPlayPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(94,197,255,.3); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(94,197,255,0); }
}

/* Video CTA — soft cinematic blue, still in family */
.philCardBtn--video {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 10px 28px rgba(139,92,246,.32);
}

/* Video card: features compact, video preview, button at bottom */
.philCard--video .philFeatures {
  flex: 0;
  margin-bottom: 14px;
}
.philCard--video {
  min-height: 320px;
}


/* ========== Instructor pick + Fine severity ========== */
.insSearchWrap{margin:16px 0 8px}
.insSearchInput{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:#fff;font-size:14px;
}
.insSearchInput:focus{outline:none;border-color:rgba(94,197,255,.45)}
.insEmptyPick{
  padding:16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12);
}
.insPickGrid{display:flex;flex-direction:column;gap:10px}
.insPickCard{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  transition:border-color .2s,background .2s;
}
.insPickCard.selected{
  border-color:rgba(94,197,255,.4);
  background:rgba(59,130,246,.1);
}
.insPickPhoto{
  width:48px;height:48px;border-radius:12px;overflow:hidden;flex-shrink:0;
  background:#123;
}
.insPickPhoto img{width:100%;height:100%;object-fit:cover}
.insPickPhotoFallback{
  display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#3b82f6,#0ea5e9);
}
.insPickBody{flex:1;min-width:0}
.insPickBtn{flex-shrink:0;padding:8px 14px;font-size:13px}

.fineBadge{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.02em;
  margin-bottom:8px;
}
.fine-card{position:relative;border-left:3px solid transparent}
.fine-sev-5{
  border-left-color:#fbbf24 !important;
}
.fine-sev-5 .fineBadge,.fineBadge.fine-sev-5{
  background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.35);
}
.fine-sev-15{
  border-left-color:#fb923c !important;
}
.fine-sev-15 .fineBadge,.fineBadge.fine-sev-15{
  background:rgba(251,146,60,.18);color:#fb923c;border:1px solid rgba(251,146,60,.4);
}
.fine-sev-20{
  border-left-color:#f87171 !important;
}
.fine-sev-20 .fineBadge,.fineBadge.fine-sev-20{
  background:rgba(248,113,113,.18);color:#f87171;border:1px solid rgba(248,113,113,.4);
}
.fine-sev-100{
  border-left-color:#ef4444 !important;
  background:rgba(239,68,68,.08) !important;
  box-shadow:0 0 24px rgba(239,68,68,.12);
}
.fine-sev-100 .fineBadge,.fineBadge.fine-sev-100{
  background:rgba(239,68,68,.25);color:#fecaca;border:1px solid rgba(239,68,68,.5);
  box-shadow:0 0 12px rgba(239,68,68,.25);
}
/* Qonundagi qoidabuzarlik (BHM/so‘m) — avtodrom balllaridan ajratilgan */
.fine-sev-law{
  border-left-color:#38bdf8 !important;
}
.fine-sev-law .fineBadge,.fineBadge.fine-sev-law{
  background:rgba(56,189,248,.14);color:#7dd3fc;border:1px solid rgba(56,189,248,.4);
  font-weight:700;letter-spacing:0;
  max-width:100%;white-space:normal;text-align:center;line-height:1.25;
}


/* —— Bugungi reys —— */
.dashReysCard{
  padding:22px 20px 16px !important;
  margin-bottom:14px;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(180deg,#0c1828 0%,#08121e 100%);
  border:1px solid rgba(94,197,255,.18);
}
.dashReysLabel{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#5ec5ff;margin-bottom:10px;
}
.dashReysTitle{font-size:clamp(17px,2.4vw,20px);font-weight:800;margin:0 0 6px;color:#fff;line-height:1.3}
.dashPrimaryCard .muted{font-size:13px;line-height:1.45;margin:0 0 12px}
.dashPrimaryGoal{
  display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
  background:rgba(94,197,255,.12);color:#8bd5ff;border:1px solid rgba(94,197,255,.25);
  margin-bottom:12px;
}
.dashPrimaryBtn{width:100%;justify-content:center;margin-top:4px}
.dashReysExtra{
  margin-top:16px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:4px;
}
.dashReysRow{
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;
  padding:10px 8px;border-radius:12px;
  background:transparent;border:none;color:inherit;
  transition:background .2s;
}
.dashReysRow:hover{background:rgba(255,255,255,.04)}
.dashReysDot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  border:2px solid rgba(255,255,255,.25);
  background:transparent;
}
.dashReysDot.done{
  background:#34d399;border-color:#34d399;
  box-shadow:0 0 8px rgba(52,211,153,.4);
}
.dashReysRowText{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dashReysRowText strong{font-size:13.5px;font-weight:700}
.dashReysRowText small{font-size:12px}
.dashReysChevron{opacity:.4;font-size:18px}
.dashProgressCompact{padding:16px 18px !important}
.dashProgressCompact h3{font-size:14px;margin:0 0 10px}

/* —— Kabinet kurslar (image-first product cards) —— */

/* Intro above the card frame — title + slogan */
.stuCoursesIntro{
  margin:0 0 16px;
  padding:0 2px;
}
.stuCoursesIntroTitle{
  margin:0 0 10px;
  font-size:clamp(22px,2.8vw,28px);
  font-weight:800;
  letter-spacing:-.03em;
  color:#fff;
  line-height:1.2;
}

/* Spotlight sweep — letters mostly dim, a soft beam travels across */
.stuCoursesIntroTitle.fx-spotlight{
  --ink: #ffffff;
  font-weight: 700;
  letter-spacing: .02em;
  background: radial-gradient(3.5ch 100% at 50% 50%,
      var(--ink) 18%,
      color-mix(in srgb, var(--ink) 16%, transparent) 72%
    ) 0 0 / 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fx-spotlight 3.4s ease-in-out infinite alternate;
}
@keyframes fx-spotlight {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

.stuCoursesEmotion{
  margin:0;
  max-width:38em;
  font-size:clamp(14.5px,1.9vw,17px);
  font-weight:500;
  line-height:1.55;
  letter-spacing:-.01em;
  color:rgba(203,213,225,.92);
}
.stuCoursesEmotion::before{
  content:'';
  display:block;
  width:32px;height:2.5px;
  margin-bottom:12px;
  border-radius:2px;
  background:linear-gradient(90deg,#4DA3FF,#34D399);
}

.stuCoursesPromo{display:none}

/* Kurslar — kategoriya filter tugmalari */
.stuCoursesCats{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0 2px;
}
.stuCoursesCat{
  padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:rgba(243,247,252,.7);
  transition:background .2s,border-color .2s,color .2s,transform .15s;
}
.stuCoursesCat:hover{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;
}
.stuCoursesCat.active{
  background:rgba(77,184,255,.18);border-color:rgba(77,184,255,.4);color:#fff;
  box-shadow:0 4px 14px rgba(37,99,235,.15);
}
.stuCoursesCat .stuCatCount{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-size:11px;font-weight:800;
  background:rgba(255,255,255,.08);color:rgba(243,247,252,.75);
}
.stuCoursesCat.active .stuCatCount{
  background:rgba(77,184,255,.25);color:#8bd5ff;
}

.stuCoursesGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:720px){
  .stuCoursesGrid{grid-template-columns:1fr 1fr;gap:16px}
}
@media (min-width:1100px){
  .stuCoursesGrid{grid-template-columns:1fr 1fr 1fr;gap:18px}
}

/* Mobile: KATTA kartalar — 1 ustun, premium o'qish uchun qulay */
@media (max-width:719px){
  .stuCoursesGrid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .stuCourseCard{
    border-radius:20px;
    max-width:100%;
  }
  .stuCourseMedia{
    aspect-ratio:16/10;
    min-height:180px;
  }
  .stuCourseBody{
    padding:18px 16px 16px;
  }
  .stuCourseName{
    font-size:18px;
    margin:0 0 8px;
    line-height:1.3;
  }
  .stuCourseLead{
    font-size:14px;
    margin:0 0 12px;
    -webkit-line-clamp:3;
    line-height:1.5;
  }
  .stuCourseTags{
    gap:6px;
    margin:0 0 14px;
  }
  .stuCourseTag{
    font-size:12px;
    padding:5px 10px;
  }
  .stuCourseActionsRow{
    gap:10px;
  }
  .stuCourseCta{
    padding:14px 16px;
    font-size:15px;
    border-radius:12px;
    flex:1.2;
  }
  .stuCourseActionsRow .stuCourseCtaGhost{
    padding:14px 14px;
    font-size:14px;
    border-radius:12px;
    flex:0.8;
  }
  .stuCourseTab{
    padding:8px 14px 10px 12px;
    font-size:12px;
    border-radius:0 0 14px 0;
  }
  .stuCoursePricePill{
    bottom:12px;
    right:12px;
    padding:7px 14px;
    font-size:14px;
  }
  .stuCoursePricePill small{font-size:11px}
  .stuCourseMediaPlaceholder span{font-size:40px}
  .stuCoursesCats{
    gap:8px;
    margin-bottom:16px;
    flex-wrap:wrap;
  }
  .stuCoursesCat{
    padding:8px 14px;
    font-size:13px;
  }
  .stuCoursesIntroTitle{font-size:clamp(20px,5.5vw,26px)}
  .stuCoursesEmotion{font-size:14px;line-height:1.55}
}

/* Juda kichik telefon — hali ham 1 katta karta */
@media (max-width:380px){
  .stuCourseMedia{min-height:160px;aspect-ratio:16/11}
  .stuCourseName{font-size:17px}
  .stuCourseBody{padding:16px 14px 14px}
  .stuCourseCta{padding:13px 12px;font-size:14px}
}

/* Promo card variant (same shell, gold accent) */
.stuCourseCard--promo{
  border-color:rgba(251,191,36,.28);
  background:linear-gradient(165deg,rgba(251,191,36,.08) 0%,#121a26 42%);
}
.stuCourseCard--promo:hover{
  border-color:rgba(251,191,36,.5);
  box-shadow:0 18px 40px rgba(251,191,36,.08),0 18px 40px rgba(0,0,0,.3);
}
.stuCourseTab--promo{
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#0b0f17;
}
.stuCourseCta--promo{
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#0b0f17;
}
.stuCourseMedia--promo{
  background:linear-gradient(145deg,#1c1408 0%,#2a1f0e 50%,#121a26 100%);
}

/* Product-style card */
.stuCourseCard{
  display:flex;flex-direction:column;
  border-radius:22px;
  background:#121a26;
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position:relative;
}
.stuCourseCard:hover{
  transform:translateY(-4px);
  border-color:rgba(77,163,255,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

/* Image area */
.stuCourseMedia{
  position:relative;
  aspect-ratio:16/11;
  overflow:hidden;
  background:linear-gradient(145deg,#0f172a 0%,#1e293b 50%,#0b1220 100%);
}
.stuCourseMedia img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.stuCourseCard:hover .stuCourseMedia img{transform:scale(1.04)}
.stuCourseMediaPlaceholder{
  width:100%;height:100%;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 20%,rgba(77,163,255,.2),transparent 55%),
    radial-gradient(circle at 80% 80%,rgba(52,211,153,.1),transparent 50%),
    linear-gradient(160deg,#0f172a,#1a2332);
}
.stuCourseMediaPlaceholder span{
  font-size:42px;opacity:.55;filter:grayscale(.2);
}

/* Category tab — overlaps image top-left like CodePen */
.stuCourseTab{
  position:absolute;top:0;left:0;z-index:2;
  padding:8px 16px 10px 14px;
  font-size:12px;font-weight:800;letter-spacing:.03em;
  color:#fff;
  background:#121a26;
  border-radius:0 0 16px 0;
  box-shadow:4px 4px 0 rgba(0,0,0,.15);
}
.stuCourseTab--b{background:linear-gradient(135deg,#1e3a5f,#121a26);color:#93c5fd}
.stuCourseTab--bc{background:linear-gradient(135deg,#14532d,#121a26);color:#6ee7b7}

/* Price pill on image */
.stuCoursePricePill{
  position:absolute;bottom:12px;right:12px;z-index:2;
  padding:6px 12px;border-radius:999px;
  font-size:13px;font-weight:800;color:#fff;
  background:rgba(15,23,42,.82);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}
.stuCoursePricePill small{font-weight:600;font-size:11px;opacity:.75;margin-left:2px}
.stuCoursePricePill--sale{background:rgba(251,191,36,.9);color:#0b0f17;border-color:transparent}
.stuCoursePricePill--sale small{color:rgba(11,15,23,.7)}

/* Body */
.stuCourseBody{
  padding:16px 16px 14px;
  display:flex;flex-direction:column;flex:1;
}
.stuCourseName{
  font-size:17px;font-weight:800;color:#fff;letter-spacing:-.02em;
  margin:0 0 6px;line-height:1.25;
}
.stuCourseLead{
  font-size:13px;line-height:1.5;color:var(--apple-muted,#94a3b8);
  margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Tags */
.stuCourseTags{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 14px;
}
.stuCourseTag{
  font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--apple-muted,#94a3b8);
  border:1px solid rgba(255,255,255,.06);
}
.stuCourseTag--accent{
  background:rgba(77,163,255,.12);
  color:#93c5fd;
  border-color:rgba(77,163,255,.2);
}
.stuCourseTag--green{
  background:rgba(52,211,153,.1);
  color:#6ee7b7;
  border-color:rgba(52,211,153,.2);
}

/* CTA */
.stuCourseCta{
  margin-top:auto;
  width:100%;
  padding:12px 16px;
  border:0;border-radius:14px;
  font-size:14px;font-weight:700;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:#fff;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  transition:filter .15s, transform .15s;
}
.stuCourseCta:hover{filter:brightness(1.08)}
.stuCourseCta:active{transform:scale(.98)}
.stuCourseCta--featured{
  background:linear-gradient(135deg,#f59e0b,#ea580c);
}
.stuCourseCta secondary,
.stuCourseCta .stuCourseCtaGhost{
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:#e2e8f0;
}
.stuCourseActionsRow{
  display:flex;gap:8px;margin-top:auto;
}
.stuCourseActionsRow .stuCourseCta{flex:1}
.stuCourseActionsRow .stuCourseCtaGhost{
  flex:0 0 auto;
  padding:12px 14px;
  border-radius:14px;
  font-size:13px;font-weight:700;
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  color:#e2e8f0;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.stuCourseActionsRow .stuCourseCtaGhost:hover{
  border-color:rgba(77,163,255,.4);
  background:rgba(77,163,255,.08);
}

.stuCoursesEmpty{
  text-align:center;padding:40px 20px;
  color:var(--apple-muted,#94a3b8);font-size:14px;
  grid-column:1 / -1;
}


/* ========== Apple Learning Dashboard (student home) ========== */
.studentCabinet{
  --apple-bg:#0B0F17;
  --apple-card:#161F2C;
  --apple-text:#FFFFFF;
  --apple-muted:#94a3b8;
  --apple-blue:#4DA3FF;
  --apple-success:#34D399;
  --apple-warn:#FBBF24;
  --amber:#F59E0B;
}
.studentCabinet,
.studentCabinet .stuShell,
.studentCabinet .stuCabMain{
  background:var(--apple-bg) !important;
}
.studentCabinet .stuCard{
  background:var(--apple-card) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  box-shadow:0 4px 20px rgba(0,0,0,.2) !important;
  border-radius:18px !important;
}
.studentCabinet .stuSidebar{
  background:linear-gradient(180deg, rgba(8,16,28,.98) 0%, rgba(5,12,22,.99) 100%) !important;
  border-right:1px solid rgba(255,255,255,.07) !important;
}
.studentCabinet .stuTopbar{
  background:rgba(7,17,31,.92) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.studentCabinet .muted{color:var(--apple-muted) !important}
.studentCabinet .stuCabMainInner{
  width:min(1280px,100%);
  padding:4px 16px 12px;
  box-sizing:border-box;
  max-width:100%;
  overflow-x:hidden;
}
@media (max-width:720px){
  .studentCabinet .stuCabMainInner{
    padding:4px 8px 16px !important;
  }
}

.appleWelcome{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:20px;
}
.appleWelcome h2{
  font-size:clamp(24px,3.2vw,30px);font-weight:700;margin:0 0 4px;
  color:#fff;letter-spacing:-.02em;
}
.appleWelcome .muted{font-size:15px;margin:0}
.appleStreak{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;
  background:var(--apple-card);border:1px solid rgba(255,255,255,.08);
  font-size:14px;font-weight:700;color:#fff;
}

.appleHeroCard{
  background:var(--apple-card);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:22px 22px 20px;
  margin-bottom:16px;
}
.appleHeroLabel{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--apple-muted);margin-bottom:14px;
}
.appleHeroStats{
  display:flex;align-items:flex-end;gap:16px;margin-bottom:14px;flex-wrap:wrap;
}
.appleHeroPct{
  font-size:clamp(36px,5vw,48px);font-weight:700;letter-spacing:-.03em;
  color:#fff;line-height:1;
}
.appleHeroMeta{
  display:flex;flex-direction:column;gap:2px;padding-bottom:4px;
  font-size:14px;font-weight:600;color:#fff;
}
.appleHeroTrack{
  height:8px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;margin-bottom:18px;
}
.appleHeroFill{
  height:100%;border-radius:999px;
  background:var(--apple-blue);
  transition:width .6s cubic-bezier(.16,1,.3,1);
}
.appleHeroCta{margin-top:4px}
.applePrimaryBtn{
  width:100%;justify-content:center;
  background:var(--apple-blue) !important;
  border:none !important;
  color:#fff !important;
  font-weight:700;
  border-radius:14px !important;
  padding:14px 18px !important;
  box-shadow:none !important;
}
.applePrimaryBtn:hover{filter:brightness(1.08)}

.appleActionGrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:22px;
}
@media(max-width:520px){.appleActionGrid{grid-template-columns:1fr}}
.appleActionCard{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:16px 14px;border-radius:16px;text-align:left;
  background:var(--apple-card);border:1px solid rgba(255,255,255,.07);
  color:#fff;transition:border-color .2s,background .2s;
}
.appleActionCard:hover{
  border-color:rgba(77,163,255,.35);
  background:#102033;
}
.appleActionIcon{font-size:20px;line-height:1}
.appleActionCard strong{font-size:14px;font-weight:700}
.appleActionCard small{font-size:12px}

.appleTopicsBlock{margin-bottom:8px}
.appleTopicsHead{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px;
}
.appleTopicsHead h3{margin:0;font-size:15px;font-weight:700;color:#fff}
.appleLinkBtn{padding:6px 10px !important;font-size:12px !important}
.appleTopicsGrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
@media(max-width:560px){.appleTopicsGrid{grid-template-columns:1fr 1fr}}
.appleTopicCard{
  display:flex;flex-direction:column;gap:4px;text-align:left;
  padding:14px 12px;border-radius:14px;
  background:var(--apple-card);border:1px solid rgba(255,255,255,.07);
  color:#fff;transition:border-color .2s;
}
.appleTopicCard:hover{border-color:rgba(77,163,255,.3)}
.appleTopicCard strong{font-size:13px;font-weight:650;line-height:1.35}
.appleTopicCard small{font-size:11px}

/* Kabinet ichidagi agressiv gradient tugmalarni yumshatish */
.studentCabinet .theory-exam-btn,
.studentCabinet .btn:not(.ghost):not(.applePrimaryBtn):not(.bentoBtn--green):not(.bentoBtn--outline){
  background:var(--apple-blue) !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
}
.studentCabinet .progFill{
  background:var(--apple-blue) !important;
  background-image:none !important;
}


/* ========== TEST-FIRST Home ========== */
.tfWelcome{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:24px;
}
.tfWelcome h2{
  font-size:clamp(26px,3vw,32px);font-weight:700;margin:0 0 4px;
  color:#fff;letter-spacing:-.02em;
}
.tfWelcome .muted{font-size:15px;margin:0}
.tfStreak{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  background:#0D1B2A;border:1px solid rgba(255,255,255,.08);
  font-weight:700;color:#fff;font-size:14px;
}

.tfHero{
  background:#0D1B2A;border:1px solid rgba(255,255,255,.07);
  border-radius:20px;padding:28px 28px 22px;margin-bottom:28px;
}
.tfHeroLabel{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#8FA3B8;margin-bottom:20px;
}
.tfHeroMetrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-bottom:18px;
}
@media(max-width:640px){.tfHeroMetrics{grid-template-columns:1fr}}
.tfMetric strong{
  display:block;font-size:clamp(28px,3.5vw,40px);font-weight:700;
  letter-spacing:-.03em;color:#fff;line-height:1.1;margin-bottom:4px;
}
.tfMetric .muted{font-size:13px}
.tfHeroTrack{
  height:8px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;margin-bottom:20px;
}
.tfHeroFill{
  height:100%;border-radius:999px;background:#4DA3FF;
  transition:width .55s cubic-bezier(.16,1,.3,1);
}
.tfHeroCta{margin-bottom:8px}
.tfExamBtn{
  width:100%;justify-content:center;
  background:#4DA3FF !important;border:none !important;
  color:#fff !important;font-weight:700;font-size:15px;
  border-radius:14px !important;padding:16px 20px !important;
  box-shadow:none !important;background-image:none !important;
}
.tfExamBtn:hover{filter:brightness(1.07)}
.tfHint{font-size:13px;margin:0;text-align:center}

.tfSectionTitle{
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#8FA3B8;margin:0 0 12px;
}
.tfQuickGrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:28px;
}
@media(max-width:900px){.tfQuickGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tfQuickGrid{grid-template-columns:1fr}}
.tfQuickCard{
  background:#0D1B2A;border:1px solid rgba(255,255,255,.07);
  border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;
  min-height:120px;
}
.tfQuickTop{display:flex;align-items:flex-start;gap:10px}
.tfQuickIcon{font-size:20px;line-height:1}
.tfQuickTop strong{display:block;font-size:14px;font-weight:700;color:#fff}
.tfQuickTop small{font-size:12px}
.tfQuickBtn{
  margin-top:auto;width:100%;justify-content:center;
  padding:10px 12px !important;font-size:13px !important;border-radius:10px !important;
}

.tfTopicsHead{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:10px;
}
.tfTopicsList{display:flex;flex-direction:column;gap:6px}
.tfTopicRow{
  display:grid;grid-template-columns:minmax(120px,1.2fr) 1fr auto;
  align-items:center;gap:14px;
  width:100%;text-align:left;
  padding:14px 16px;border-radius:12px;
  background:#0D1B2A;border:1px solid rgba(255,255,255,.06);
  color:#fff;transition:border-color .2s,background .2s;
}
.tfTopicRow:hover{border-color:rgba(77,163,255,.35);background:#102033}
.tfTopicName{font-size:14px;font-weight:650}
.tfTopicBar{
  height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;
}
.tfTopicBar i{
  display:block;height:100%;border-radius:999px;background:#4DA3FF;
  width:0;
}
.tfTopicPct{font-size:13px;font-weight:700;color:#8FA3B8;min-width:52px;text-align:right}
@media(max-width:560px){
  .tfTopicRow{grid-template-columns:1fr auto;gap:8px}
  .tfTopicBar{display:none}
}

@media(max-width:700px){
  .studentCabinet .stuCabMainInner{padding:2px 10px 10px}
  .tfHero{padding:20px 16px}
}


/* ========== 3-ustun: o‘ng «Bugun» paneli ========== */
.stuShell{
  display:grid !important;
  /* Bugun paneli olib tashlandi — faqat asosiy kontent */
  grid-template-columns:1fr;
  grid-template-rows:52px auto 1fr;
  grid-template-areas:
    "top"
    "pills"
    "main";
  transition:none;
}
.stuPillNavWrap[hidden]{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  overflow:hidden !important;
}
.stuShell.rail-collapsed{
  grid-template-columns:1fr;
}
.stuShell > .stuTopbar{grid-area:top}
.stuShell > .stuPillNavWrap{grid-area:pills}
.stuShell > .stuCabMain{grid-area:main; min-height:0}
.stuShell > .stuRightRail{ display:none !important; }

.stuRightRail{
  display:none !important;
}
.stuShell.rail-collapsed > .stuRightRail{
  display:none !important;
}
.stuRailToggle{
  display:none !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:36px;
  padding:0 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  color:#c5d6e8;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  transition:background .2s,border-color .2s,color .2s;
  flex-shrink:0;
}
.stuRailToggle:hover{
  background:rgba(77,163,255,.12);
  border-color:rgba(77,163,255,.3);
  color:#fff;
}
.stuRailToggle.is-open{
  background:rgba(77,163,255,.16);
  border-color:rgba(77,163,255,.4);
  color:#fff;
}
.stuRailToggle svg{width:16px;height:16px;flex-shrink:0}
.stuRailInner{display:flex;flex-direction:column;gap:10px}
.stuRailLabel{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:4px 0 6px;padding:0 4px;
}
.stuRailCard{
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;
  padding:12px 12px;border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  color:#fff;
  transition:background .2s ease, border-color .2s ease;
  box-shadow:none;
}
button.stuRailCard:hover{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
}
.stuRailCardStatic{cursor:default}
.stuRailIcon{font-size:18px;line-height:1;flex-shrink:0;filter:grayscale(.4) opacity(.85)}
.stuRailIcon--accent{filter:none} /* 🔥 keeps full color */
.stuRailBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stuRailBody strong{font-size:13px;font-weight:700}
.stuRailBody small{font-size:12px;line-height:1.3;color:#94a3b8}
.stuRailGo{opacity:.35;font-size:18px;flex-shrink:0}

/* Bugun paneli olib tashlangan — mobil ham faqat asosiy kontent */
@media (max-width:999px){
  .stuShell{
    grid-template-columns:1fr !important;
    grid-template-rows:52px auto 1fr !important;
    grid-template-areas:
      "top"
      "pills"
      "main" !important;
  }
  .stuRightRail,
  .stuShell.rail-collapsed > .stuRightRail{
    display:none !important;
  }
}


/* ========== GAMIFICATION / PROGRESS Home ========== */
.gpWelcome{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin:0 0 8px;
}
.gpWelcome h2{
  font-size:clamp(20px,2.6vw,26px);font-weight:700;margin:0 0 2px;
  color:#fff;letter-spacing:-.02em;
}
.gpWelcome .muted{font-size:15px;margin:0}
.gpStreak{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:14px;
  background:rgba(22,31,44,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.gpStreakFire{font-size:18px}
.gpStreak strong{display:block;font-size:18px;font-weight:800;color:#fff;line-height:1}
.gpStreak small{font-size:11px;color:var(--muted)}

.gpHero{
  background:#12283C;border:1px solid rgba(94,197,255,.18);
  border-radius:16px;padding:14px 14px 12px;margin-bottom:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.gpHeroTop{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
}
.gpHeroLabel{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8FA3B8;
}
.gpHeroPct{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.02em}
.gpHeroTrack{
  height:10px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;margin-bottom:12px;
}
.gpHeroFill{
  height:100%;border-radius:999px;background:#4DA3FF;
  transition:width .55s cubic-bezier(.16,1,.3,1);
}
.gpHeroHint{font-size:13px;margin:0 0 14px}
.gpPrimaryBtn{
  width:100%;justify-content:center;
  background:#4DA3FF !important;border:none !important;
  color:#fff !important;font-weight:700;
  border-radius:12px !important;padding:14px 18px !important;
  box-shadow:none !important;background-image:none !important;
}

.gpBlock{margin-bottom:10px}
.gpBlockTitle{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#8FA3B8;margin:0 0 12px;
}
.gpBlockHead{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px;
}

.gpCheckList{display:flex;flex-direction:column;gap:8px}
.gpCheckRow{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 14px;border-radius:14px;
  background:#12283C;border:1px solid rgba(94,197,255,.16);
  color:#fff;transition:border-color .2s;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.gpCheckRow:hover{border-color:rgba(77,163,255,.3)}
.gpCheckDot{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  border:2px solid rgba(255,255,255,.25);background:transparent;
}
.gpCheckDot.done{
  background:#65D6A2;border-color:#65D6A2;
  box-shadow:0 0 0 3px rgba(101,214,162,.15);
}
.gpCheckText{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gpCheckText strong{font-size:14px;font-weight:700}
.gpCheckText small{font-size:12px}
.gpCheckGo{opacity:.35;font-size:18px}

.gpStatsRow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;
}
@media(max-width:560px){.gpStatsRow{grid-template-columns:1fr}}
.gpStatCard{
  background:#0D1B2A;border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:16px 14px;text-align:center;
}
.gpStatCard strong{
  display:block;font-size:24px;font-weight:800;color:#fff;
  letter-spacing:-.02em;margin-bottom:4px;
}
.gpStatCard .muted{font-size:12px}
.gpStatCard strong.gpUp,.gpUp{color:#65D6A2 !important}
.gpStatCard strong.gpDown,.gpDown{color:#FFB84D !important}
.gpMotivate{font-size:13px;margin:0;line-height:1.45}

.gpAchRow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
@media(max-width:560px){.gpAchRow{grid-template-columns:repeat(2,1fr)}}
.gpAch{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 10px;border-radius:14px;text-align:center;
  background:#0D1B2A;border:1px solid rgba(255,255,255,.07);
}
.gpAch.locked{opacity:.45}
.gpAch.unlocked{border-color:rgba(77,163,255,.25)}
.gpAchIcon{font-size:22px;line-height:1}
.gpAchTitle{font-size:12px;font-weight:650;color:#fff;line-height:1.3}

/* ========== Kabinet bosh sahifa — minimal yangilanish ========== */

/* Scrollbar — ixcham va ko‘rinmasroq */
.stuCabMain{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.stuCabMain::-webkit-scrollbar{
  width: 5px;
}
.stuCabMain::-webkit-scrollbar-track{
  background: transparent;
}
.stuCabMain::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.stuCabMain::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.22);
}

/* Sidebar ochiq bo‘lganda hamburger yo‘qoladi (X tugmasi bor) */
.stuMenuBtn{
  transition: opacity .2s, transform .2s, background .2s, border-color .2s;
}
/* Desktop: sidebar ochiq (collapsed emas) */
@media (min-width: 900px) {
  .studentCabinet:not(.sidebar-collapsed) .stuMenuBtn{
    opacity: 0;
    pointer-events: none;
    transform: scale(.85);
  }
}
/* Mobil: sidebar-open */
@media (max-width: 899px) {
  .studentCabinet.sidebar-open .stuMenuBtn{
    opacity: 0;
    pointer-events: none;
    transform: scale(.85);
  }
}

/* Tepa banner — eng yuqorida, to‘liq kenglik, siqilmagan */
.cabHeroBanner{
  position: relative;
  width: calc(100% + 48px);
  max-width: none;
  height: clamp(140px, 26vw, 200px);
  border-radius: 0;
  overflow: hidden;
  margin: -16px -24px 16px;
  background: #0D1B2A;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cabHeroBanner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: .9;
}
.cabHeroBanner:not(.has-img){
  height: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden;
}
.cabHeroBanner:not(.has-img) img{ display: none; }
@media (max-width: 899px) {
  .cabHeroBanner{
    width: calc(100% + 28px);
    margin: -12px -14px 14px;
    height: clamp(120px, 36vw, 170px);
  }
}
.cabHeroBannerFade{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(5,13,22,.8) 100%);
  pointer-events: none;
}

/* O‘rganishning yangicha usuli — bitta jozibali karta */
.cabLearnCard{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(77,163,255,.14) 0%, rgba(13,27,42,.95) 60%);
  border: 1px solid rgba(77,163,255,.28);
  color: #fff;
  cursor: pointer;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.cabLearnCard:hover{
  border-color: rgba(77,163,255,.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(77,163,255,.12);
}
.cabLearnCardIcon{
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 24px;
  background: rgba(77,163,255,.15);
  flex-shrink: 0;
}
.cabLearnCardBody{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cabLearnCardBody strong{
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.cabLearnCardBody span{
  font-size: 13px;
  color: #8FA3B8;
}
.cabLearnCardGo{
  font-size: 22px;
  opacity: .4;
  flex-shrink: 0;
}
.cabAutodromeBtn{
  background: linear-gradient(135deg, rgba(101,214,162,.12) 0%, rgba(18,40,60,.95) 55%) !important;
  border-color: rgba(101,214,162,.32) !important;
}
.cabAutodromeBtn:hover{
  border-color: rgba(101,214,162,.55) !important;
  box-shadow: 0 12px 32px rgba(101,214,162,.12) !important;
}

/* Qiynayotgan mavzular — jozibali, yumshoq "hali ishlash kerak" ranglari */
.cabWeakWrap:empty{ display: none; }
.weakTopicsCard{
  background: linear-gradient(160deg, rgba(255,160,60,.1) 0%, #12283C 45%);
  border: 1px solid rgba(255,160,60,.28);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.weakTopicsHead strong{
  font-size: 15px;
  font-weight: 750;
  color: #FFC978;
}
.weakTopicsHead .muted{
  color: #A89070 !important;
}
.weakTopicsList{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.weakTopicRow{
  padding: 0;
}
.weakTopicInfo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.weakTopicTitle{
  font-size: 13px;
  font-weight: 600;
  color: #E8E0D5;
}
.weakTopicPct{
  font-size: 12px;
  font-weight: 700;
  color: #FFB347;
  flex-shrink: 0;
}
.weakTopicBar{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.weakTopicBar i{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #E89A3C, #FFB347);
  transition: width .5s ease;
}
.weakTopicsCard .btn{
  width: 100%;
  justify-content: center;
  background: rgba(255,160,60,.12) !important;
  border: 1px solid rgba(255,160,60,.3) !important;
  color: #FFC978 !important;
  font-weight: 650;
}
.weakTopicsCard .btn:hover{
  background: rgba(255,160,60,.2) !important;
  border-color: rgba(255,160,60,.45) !important;
}

/* Progress label biroz uzunroq bo‘lishi mumkin */
.gpHeroLabel{
  max-width: 70%;
  line-height: 1.35;
}

/* ========== BENTO HOME GRID — Glassmorphism ========== */
.bento{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-template-rows:auto auto;
  gap:10px;
  margin:0 0 4px;
}
.bentoCard{
  position:relative;
  border-radius:18px;
  padding:16px 16px 14px;
  /* Glass */
  background:rgba(22, 31, 44, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 4px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
}
/* Subtle top highlight for glass depth */
.bentoCard::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  pointer-events:none;
}
.bentoCard--exam{
  grid-row:1 / span 2;
  background:linear-gradient(160deg, rgba(59,130,246,.14) 0%, rgba(22,31,44,.5) 55%);
  border-color:rgba(77,163,255,.2);
}
.bentoCard--weak{
  background:rgba(22, 31, 44, 0.55);
  border-color:rgba(255,255,255,.08);
}
.bentoCard--auto{
  background:linear-gradient(160deg, rgba(52,211,153,.1) 0%, rgba(22,31,44,.5) 55%);
  border-color:rgba(52,211,153,.18);
}

/* Spotlight: hover one → focus, others fade */
.bento:has(.bentoCard:hover) .bentoCard:not(:hover){
  opacity:.45;
  transform:scale(.97);
}
.bentoCard:hover{
  transform:scale(1.02);
  z-index:2;
  background:rgba(28, 38, 54, 0.65);
  border-color:rgba(255,255,255,.14);
  box-shadow:
    0 12px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.bentoCard--exam:hover{
  border-color:rgba(77,163,255,.4);
  background:linear-gradient(160deg, rgba(59,130,246,.2) 0%, rgba(28,38,54,.6) 55%);
}
.bentoCard--weak:hover{ border-color:rgba(255,255,255,.14); }
.bentoCard--auto:hover{
  border-color:rgba(52,211,153,.4);
  background:linear-gradient(160deg, rgba(52,211,153,.16) 0%, rgba(28,38,54,.6) 55%);
}

.bentoCardLabel{
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}

/* === Continue Learning card (replaces big ring) === */
.bentoContinueBody{
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
  justify-content:space-between;
}
.bentoContinueHead{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.bentoContinueIcon{
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(59,130,246,.15);
  border:1px solid rgba(59,130,246,.25);
  display:grid;
  place-items:center;
  font-size:20px;
  line-height:1;
}
.bentoContinueText{
  flex:1;
  min-width:0;
}
.bentoContinueText strong{
  display:block;
  font-size:15px;
  font-weight:700;
  color:#fff;
  line-height:1.35;
  margin-bottom:4px;
}
.bentoContinueText .muted{
  font-size:12.5px;
  line-height:1.45;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.bentoContinueProgress{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.bentoProgTrack{
  height:6px;
  border-radius:99px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.bentoProgFill{
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg, #06B6D4, #3B82F6);
  width:0%;
  transition:width .7s cubic-bezier(.16,1,.3,1), background .4s ease;
}
.bentoProgFill.is-mid{
  background:linear-gradient(90deg, #F59E0B, #FBBF24);
}
.bentoProgFill.is-high{
  background:linear-gradient(90deg, #10B981, #34D399);
}
.bentoProgMeta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  font-weight:600;
  color:#E2E8F0;
}
.bentoProgMeta .muted{
  font-weight:500;
  font-size:11.5px;
}
.bentoCard--exam{
  background:linear-gradient(160deg, rgba(59,130,246,.14) 0%, rgba(22,31,44,.5) 55%) !important;
}
.bentoCard--continue .bentoBtn{
  margin-top:2px;
}

.bentoBtn{
  width:100%;
  justify-content:center;
  border-radius:12px !important;
  padding:12px 16px !important;
  font-weight:700 !important;
  font-size:14px !important;
  box-shadow:none !important;
  background-image:none !important;
}
/* Primary */
.bentoBtn--blue{
  border:none !important;
  background:#3B82F6 !important;
  color:#fff !important;
}
.bentoBtn--blue:hover{ background:#2563EB !important; }
/* Secondary / Outline */
.bentoBtn--green,
.bentoBtn--outline{
  background:transparent !important;
  border:1px solid rgba(94,197,255,.35) !important;
  color:#7dd3fc !important;
}
.bentoBtn--green:hover,
.bentoBtn--outline:hover{
  background:rgba(59,130,246,.1) !important;
  border-color:rgba(94,197,255,.55) !important;
  color:#bae6fd !important;
}

.bentoWeakList{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:0;
}
.bentoWeakRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.05);
}
.bentoWeakTitle{
  font-size:13px;
  font-weight:600;
  color:#E8E0D5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.bentoWeakPct{
  font-size:12px;
  font-weight:800;
  color:#FBBF24;
  flex-shrink:0;
}
.bentoEmpty{ font-size:13px; margin:0; }

.bentoLink{
  align-self:flex-start;
  background:none;
  border:none;
  padding:0;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  color:#FBBF24;
}
.bentoLink--warn:hover{ color:#FCD34D; text-decoration:underline; }

.bentoAutoBody{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  justify-content:space-between;
}
.bentoAutoTime{
  display:flex;
  align-items:center;
  gap:12px;
}
.bentoAutoIcon{ font-size:28px; line-height:1; }
.bentoAutoTime strong{
  display:block;
  font-size:15px;
  font-weight:750;
  color:#fff;
}
.bentoAutoTime small{
  display:block;
  font-size:12px;
  margin-top:2px;
}

@media (max-width:720px){
  .bento{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .bentoCard--exam{ grid-row:auto; }
  .bentoContinueIcon{ width:38px; height:38px; font-size:18px; }
  .bentoContinueText strong{ font-size:14.5px; }
  .bento:has(.bentoCard:hover) .bentoCard:not(:hover){
    opacity:1;
    transform:none;
  }
  .bentoCard:hover{ transform:none; }
}

/* ========== PRACTICE BENTO GRID (v2.9.38) ========== */
.practiceBento{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  grid-template-rows:auto auto;
  gap:12px;
  margin-top:4px;
}
.practiceBentoCard{
  position:relative;
  text-align:left;
  border-radius:18px;
  padding:16px 16px 14px;
  background:rgba(22,31,44,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
  color:inherit;
  cursor:pointer;
  min-height:0;
}
.practiceBentoCard::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  pointer-events:none;
}
.practiceBentoCard--fines{
  grid-row:1 / span 2;
  background:linear-gradient(160deg,rgba(248,113,113,.12) 0%,rgba(22,31,44,.55) 50%);
  border-color:rgba(248,113,113,.22);
  min-height:280px;
}
.practiceBentoCard--ex{
  background:linear-gradient(160deg,rgba(77,184,255,.12) 0%,rgba(22,31,44,.55) 55%);
  border-color:rgba(77,184,255,.2);
  min-height:140px;
}
.practiceBentoCard--tips{
  background:linear-gradient(160deg,rgba(74,222,128,.1) 0%,rgba(22,31,44,.55) 55%);
  border-color:rgba(74,222,128,.2);
  min-height:120px;
}
.practiceBento:has(.practiceBentoCard:hover) .practiceBentoCard:not(:hover){
  opacity:.5;
  transform:scale(.975);
}
.practiceBentoCard:hover{
  transform:scale(1.02);
  z-index:2;
  box-shadow:0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
}
.practiceBentoCard--fines:hover{
  border-color:rgba(248,113,113,.45);
  background:linear-gradient(160deg,rgba(248,113,113,.18) 0%,rgba(28,38,54,.6) 50%);
}
.practiceBentoCard--ex:hover{
  border-color:rgba(77,184,255,.45);
  background:linear-gradient(160deg,rgba(77,184,255,.18) 0%,rgba(28,38,54,.6) 55%);
}
.practiceBentoCard--tips:hover{
  border-color:rgba(74,222,128,.45);
  background:linear-gradient(160deg,rgba(74,222,128,.16) 0%,rgba(28,38,54,.6) 55%);
}
.practiceBentoLabel{
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.practiceBentoTitle{
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  color:#f3f7fc;
}
.practiceBentoCta{
  margin-top:auto;
  font-size:12.5px;
  font-weight:700;
  color:var(--blue2);
  opacity:.85;
}
.practiceBentoPreview{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}
.practiceFineChips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.pfChip{
  font-size:11px;
  font-weight:700;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2);
}
.pfChip--hard{ border-color:rgba(248,113,113,.35); color:#fca5a5; }
.pfChip--mid{ border-color:rgba(251,191,36,.35); color:#fcd34d; }
.pfChip--soft{ border-color:rgba(96,165,250,.35); color:#93c5fd; }
.pfChip.is-active{
  background:rgba(255,255,255,.1);
  box-shadow:0 0 0 1px rgba(255,255,255,.15);
}
.practiceExMini{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin-top:2px;
}
.practiceExThumb{
  aspect-ratio:1;
  border-radius:10px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
}
.practiceExThumb svg{ width:100%; height:100%; }
.practiceTipsProgress{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.practiceTipsTrack{
  flex:1;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.practiceTipsFill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#4ade80,#22c55e);
  transition:width .4s cubic-bezier(.16,1,.3,1);
}

/* Expand overlay */
.practiceExpandOverlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 14px;
  background:rgba(5,13,22,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  animation:pfOverlayIn .28s cubic-bezier(.16,1,.3,1);
}
.practiceExpandOverlay[hidden]{ display:none !important; }
@keyframes pfOverlayIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
.practiceExpandPanel{
  width:min(640px,100%);
  max-height:min(86vh,720px);
  overflow:auto;
  border-radius:22px;
  background:rgba(18,28,42,.82);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  padding:18px 18px 20px;
  animation:pfPanelIn .32s cubic-bezier(.16,1,.3,1);
}
@keyframes pfPanelIn{
  from{ opacity:0; transform:scale(.92) translateY(12px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.practiceExpandHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  position:sticky;
  top:0;
  background:rgba(18,28,42,.9);
  backdrop-filter:blur(8px);
  z-index:1;
  padding-bottom:8px;
}
.practiceExpandHead h3{
  font-size:17px;
  font-weight:800;
  margin:0;
}
.practiceExpandClose{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s, transform .2s;
}
.practiceExpandClose:hover{
  background:rgba(255,255,255,.12);
  transform:scale(1.05);
}
.practiceExpandBody{ min-height:80px; }

/* Fines expand: filters + calc + list */
.pfFilterRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.pfCalcBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(248,113,113,.1);
  border:1px solid rgba(248,113,113,.25);
  margin-bottom:14px;
}
.pfCalcBar strong{
  font-size:22px;
  font-weight:900;
  color:#fca5a5;
}
.pfCalcBar .muted{ font-size:12px; }
.pfFineList{ display:flex; flex-direction:column; gap:8px; }
.pfFineItem{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .2s;
  text-align:left;
  color:inherit;
  width:100%;
}
.pfFineItem:hover{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
.pfFineItem.is-picked{
  border-color:rgba(248,113,113,.45);
  background:rgba(248,113,113,.1);
}
.pfFineItem .fineBadge{ flex-shrink:0; }
.pfFineItemBody{ flex:1; min-width:0; }
.pfFineItemBody strong{ display:block; font-size:14px; }
.pfFineItemBody p{ margin:4px 0 0; font-size:12.5px; color:var(--muted); line-height:1.4; }
.pfFineCheck{
  width:22px; height:22px; border-radius:7px;
  border:1.5px solid rgba(255,255,255,.2);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:transparent;
  transition:background .2s, border-color .2s, color .2s;
}
.pfFineItem.is-picked .pfFineCheck{
  background:rgba(248,113,113,.35);
  border-color:rgba(248,113,113,.7);
  color:#fff;
}

/* Exercises expand */
.pfExGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width:520px){
  .pfExGrid{ grid-template-columns:1fr 1fr; }
}
.pfExCard{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:border-color .25s, background .25s;
}
.pfExCard.is-active{
  border-color:rgba(77,184,255,.4);
  background:rgba(77,184,255,.08);
}
.pfExSvgWrap{
  aspect-ratio:1.4;
  border-radius:12px;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}
.pfExSvgWrap svg{ width:100%; height:100%; max-height:140px; }
.pfExCard h4{ margin:0; font-size:14px; font-weight:800; }
.pfExCard p{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.45; }
.pfExToggle{
  align-self:flex-start;
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(77,184,255,.3);
  background:rgba(77,184,255,.1);
  color:var(--blue2);
  transition:background .2s;
}
.pfExCard.is-active .pfExToggle{
  background:rgba(77,184,255,.25);
  border-color:rgba(77,184,255,.5);
}

/* Tips checklist */
.pfTipList{ display:flex; flex-direction:column; gap:8px; }
.pfTipItem{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  text-align:left;
  color:inherit;
  width:100%;
  transition:border-color .2s, background .2s;
}
.pfTipItem:hover{ border-color:rgba(74,222,128,.3); background:rgba(74,222,128,.06); }
.pfTipItem.is-done{
  border-color:rgba(74,222,128,.35);
  background:rgba(74,222,128,.1);
}
.pfTipItem.is-done .pfTipText{ text-decoration:line-through; opacity:.65; }
.pfTipBox{
  width:24px; height:24px; border-radius:8px;
  border:1.5px solid rgba(255,255,255,.2);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:transparent;
  transition:all .2s;
  margin-top:1px;
}
.pfTipItem.is-done .pfTipBox{
  background:rgba(74,222,128,.35);
  border-color:rgba(74,222,128,.7);
  color:#fff;
}
.pfTipText{ font-size:14px; font-weight:600; line-height:1.4; }
.pfTipSub{ font-size:12px; color:var(--muted); margin-top:3px; font-weight:400; }

@media(max-width:640px){
  .practiceBento{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .practiceBentoCard--fines{
    grid-row:auto;
    min-height:0;
  }
  .practiceExMini{ grid-template-columns:repeat(5,1fr); }
}
@media(prefers-reduced-motion:reduce){
  .practiceBentoCard,
  .practiceExpandOverlay,
  .practiceExpandPanel{ animation:none; transition:none; }
  .practiceBento:has(.practiceBentoCard:hover) .practiceBentoCard:not(:hover){
    opacity:1; transform:none;
  }
  .practiceBentoCard:hover{ transform:none; }
}

/* Practice fines polish v2.9.39 */
.pfChip--warn{ border-color:rgba(251,146,60,.4); color:#fdba74; }
.pfCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  margin-left:4px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.75);
}
.pfChip.is-active .pfCount{ background:rgba(255,255,255,.18); color:#fff; }
.pfSearchWrap{ margin-bottom:14px; }
.pfSearch{
  width:100%;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.25);
  color:#f3f7fc;
  font-size:14px;
  outline:none;
  transition:border-color .2s;
}
.pfSearch:focus{ border-color:rgba(77,184,255,.45); }
.pfSearch::placeholder{ color:var(--muted); }
.pfGroupHead{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0 8px;
  font-size:13px;
  font-weight:700;
}
.pfGroupHead:first-of-type{ margin-top:4px; }
.pfEmpty{
  text-align:center;
  padding:28px 16px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
}
.pfFineItem--static{
  cursor:default;
  pointer-events:none;
}
.pfFineItem--static:hover{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

/* Practice fines card bg + clean closed state v2.9.40 */
.practiceBentoCard--fines{
  position:relative;
  isolation:isolate;
}
.practiceBentoBg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .35s ease;
  z-index:0;
  pointer-events:none;
}
.practiceBentoCard--fines.has-bg .practiceBentoBg{ opacity:1; }
.practiceBentoShade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(165deg, rgba(12,18,28,.55) 0%, rgba(12,18,28,.78) 55%, rgba(12,18,28,.88) 100%);
  opacity:0;
  transition:opacity .35s ease;
}
.practiceBentoCard--fines.has-bg .practiceBentoShade{ opacity:1; }
.practiceBentoContent{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
}
.practiceBentoMeta{
  font-size:12.5px;
  font-weight:600;
  color:rgba(243,247,252,.72);
  letter-spacing:.01em;
  margin-top:2px;
}
.practiceBentoCard--fines.has-bg{
  border-color:rgba(248,113,113,.28);
}
.practiceBentoCard--fines.has-bg:hover{
  border-color:rgba(248,113,113,.5);
}

/* Practice exercises images — ramkani to‘ldiradi + zoom */
.practiceExThumb img,
.pfExSvgWrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.pfExSvgWrap{
  padding:0 !important;
  overflow:hidden;
  cursor:zoom-in;
  position:relative;
}
.pfExSvgWrap img{
  border-radius:12px;
  max-height:none;
  object-fit:cover;
  background:rgba(0,0,0,.25);
  cursor:zoom-in;
  transition:transform .25s ease;
}
.pfExSvgWrap:hover img{ transform:scale(1.03); }
.pfExSvgWrap.has-img{ background:#0a121c; }
.pfExSvgWrap:not(.has-img){ padding:10px !important; }

/* Lightbox — rasm kattalashtirish */
.imgLightbox{
  position:fixed; inset:0; z-index:400;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.88); backdrop-filter:blur(10px);
  padding:20px; cursor:zoom-out;
}
.imgLightbox.show{ display:flex; }
.imgLightbox img{
  max-width:min(960px,94vw); max-height:88vh;
  object-fit:contain; border-radius:14px;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  cursor:default;
}
.imgLightboxClose{
  position:absolute; top:16px; right:16px;
  width:42px; height:42px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:22px; display:grid; place-items:center;
  cursor:pointer; transition:background .2s;
}
.imgLightboxClose:hover{ background:rgba(255,255,255,.22); }


/* Profile language switch */
.profileLangSwitch{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:4px;
}
.profileLangBtn{
  flex:1; min-width:120px;
  padding:12px 16px; border-radius:12px;
  font-size:14px; font-weight:700;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04); color:rgba(243,247,252,.7);
  transition:background .2s, border-color .2s, color .2s;
}
.profileLangBtn:hover{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff;
}
.profileLangBtn.active{
  background:rgba(77,184,255,.18); border-color:rgba(77,184,255,.4); color:#fff;
  box-shadow:0 4px 14px rgba(37,99,235,.15);
}

/* Philosophy exam fishka card */
.philCard--exam .philBadge--exam{
  background:linear-gradient(135deg, rgba(74,222,128,.2), rgba(59,130,246,.15));
  border-color:rgba(74,222,128,.35);
}
.philScene--exam{
  display:flex; flex-direction:column; gap:12px;
  padding:4px 0 8px;
}
.examFishkaRow{ display:flex; flex-wrap:wrap; gap:8px; }
.examFishka{
  font-size:11px; font-weight:800; letter-spacing:.04em;
  padding:5px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
}
.examFishka--blue{ background:rgba(77,184,255,.12); color:#7dd3fc; border-color:rgba(77,184,255,.28); }
.examFishka--green{ background:rgba(74,222,128,.1); color:#4ade80; border-color:rgba(74,222,128,.28); }
.examFishka--amber{ background:rgba(251,191,36,.1); color:#fbbf24; border-color:rgba(251,191,36,.28); }
.examFishkaList{ display:flex; flex-direction:column; gap:8px; }
.examFishkaItem{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:#c8d7e8; font-weight:600;
}
.examFishkaItem i{
  width:20px; height:20px; border-radius:6px;
  display:grid; place-items:center;
  font-style:normal; font-size:11px; font-weight:900;
  background:rgba(74,222,128,.15); color:#4ade80;
  flex-shrink:0;
}

/* ========== PROFILE v2.9.42 ========== */
.profileHero{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
  padding:4px 2px;
}
.profileAvatar{
  width:64px;height:64px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:900;color:#03101d;
  background:linear-gradient(135deg,#5ec5ff,#2f8fe0);
  box-shadow:0 10px 28px rgba(47,143,224,.35);
  flex-shrink:0;
}
.profileHeroText h2{
  margin:0;font-size:22px;font-weight:900;letter-spacing:-.02em;
}
.profileHeroText .muted{ margin:4px 0 0;font-size:13.5px; }
.profileStats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.profileStat{
  position:relative;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(22,31,44,.55);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  display:flex;flex-direction:column;gap:4px;
}
.profileStatLabel{
  font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.profileStat strong{ font-size:16px;font-weight:800; }
.profileRefCode{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;font-size:14px !important;
}
.profileCopyBtn{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#fff;
  font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.profileCopyBtn:hover{ background:rgba(255,255,255,.12); transform:scale(1.05); }
.profileGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.profilePanel{
  margin:0 !important;
  display:flex;flex-direction:column;gap:12px;
}
.profilePanelHead{
  display:flex;align-items:flex-start;gap:12px;margin-bottom:4px;
}
.profilePanelHead h3{ margin:0;font-size:15px;font-weight:800; }
.profilePanelHead .muted{ margin:2px 0 0;font-size:12.5px; }
.profilePanelIcon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(77,184,255,.12);font-size:18px;flex-shrink:0;
}
.profileLocked{
  opacity:.65 !important;
  cursor:not-allowed;
}
.profilePassWrap{
  position:relative;
}
.profilePassWrap input{ padding-right:44px; }
.profileEye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:10px;
  border:0;background:transparent;color:var(--muted);
  font-size:15px;display:flex;align-items:center;justify-content:center;
}
.profileEye:hover{ color:#fff; background:rgba(255,255,255,.06); }
.profilePassMeter{
  display:flex;gap:5px;margin-top:8px;
}
.profilePassMeter span{
  flex:1;height:4px;border-radius:99px;
  background:rgba(255,255,255,.08);
  transition:background .25s;
}
.profilePassMeter span.on{ background:#f87171; }
.profilePassMeter[data-level="2"] span.on{ background:#fbbf24; }
.profilePassMeter[data-level="3"] span.on{ background:#4ade80; }
.profilePassHint{
  font-size:12px;margin-top:6px;min-height:1.2em;
}
.profileSaveBtn{
  width:100%;margin-top:4px;
}
.profileLogoutWrap{
  margin-top:18px;
  text-align:center;
}
.stuLogoutLink{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;border-radius:999px;
  border:1px solid rgba(248,113,113,.25);
  background:rgba(248,113,113,.08);
  color:#fca5a5;font-size:13.5px;font-weight:700;
  transition:background .2s,border-color .2s,transform .2s;
}
.stuLogoutLink:hover{
  background:rgba(248,113,113,.16);
  border-color:rgba(248,113,113,.4);
  transform:translateY(-1px);
}
@media(max-width:720px){
  .profileGrid{ grid-template-columns:1fr; }
  .profileStats{ grid-template-columns:1fr 1fr; }
}

/* ========== HOME ACTIONS — full-bleed image cards ========== */
.homeActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:12px;
}
/* Planşet / keng telefon: 2 ustun saqlanadi */
@media(max-width:720px) and (min-width:481px){
  .homeActions{ gap:12px; }
  .homeAct{ min-height:148px; border-radius:18px; }
  .homeActBody{ max-width:58%; padding:16px 14px 14px; }
  .homeActBody strong{ font-size:15px; }
  .homeActBody small{ font-size:12px; }
}

/* Oddiy telefon: 1 ustun — chiroyli to‘liq kenglik */
@media(max-width:480px){
  .homeActions{ grid-template-columns:1fr; gap:10px; }
  .homeAct{ min-height:132px; border-radius:16px; }
  .homeActBody{ max-width:72%; padding:14px 14px 14px; }
  .homeActBody strong{ font-size:15px; }
  .homeActBody small{ font-size:12px; }
  .homeActOverlay{
    background:linear-gradient(100deg,
      rgba(5,13,22,.94) 0%,
      rgba(5,13,22,.82) 42%,
      rgba(5,13,22,.4) 68%,
      rgba(5,13,22,.18) 100%);
  }
}

.homeAct{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:168px;
  padding:0;
  border-radius:20px;
  overflow:hidden;
  background:#0b1520;
  border:1px solid rgba(255,255,255,.08);
  text-align:left;
  color:inherit;
  cursor:pointer;
  transition:
    transform .25s cubic-bezier(.16,1,.3,1),
    border-color .25s ease,
    box-shadow .25s ease;
  box-shadow:0 12px 36px rgba(0,0,0,.32);
}
.homeAct:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 20px 48px rgba(0,0,0,.4);
}
.homeAct:active{ transform:translateY(0) scale(.985); }

/* Background image layer — fills entire card */
.homeActBg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  z-index:0;
}
.homeAct:hover .homeActBg{
  transform:scale(1.06);
}

/* Dark gradient so text is readable */
.homeActOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(105deg,
      rgba(5,13,22,.92) 0%,
      rgba(5,13,22,.78) 38%,
      rgba(5,13,22,.35) 62%,
      rgba(5,13,22,.15) 100%);
  z-index:1;
  pointer-events:none;
}

.homeActBody{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:5px;
  padding:20px 18px 18px;
  width:100%;
  max-width:62%;
}
.homeActBody strong{
  font-size:16.5px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#f8fafc;
  line-height:1.25;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.homeActBody small{
  font-size:12.5px;
  color:rgba(226,232,240,.78);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Fallback placeholder gradients when no custom image set */
.homeAct--learn .homeActBg{
  background-image:linear-gradient(145deg,#1e3a5f 0%,#0f2744 45%,#0a1a2e 100%);
  background-color:#0f2744;
}
.homeAct--exam .homeActBg{
  background-image:linear-gradient(160deg,#1e1b4b 0%,#0f172a 100%);
  background-color:#0f172a;
}
.homeAct--auto .homeActBg{
  background-image:linear-gradient(150deg,#0f2922 0%,#0a1f1a 50%,#061412 100%);
  background-color:#0a1f1a;
}
.homeAct--practice .homeActBg{
  background-image:linear-gradient(145deg,#0c1929,#07111c);
  background-color:#07111c;
}
.homeAct--earn .homeActBg{
  background-image:linear-gradient(155deg,#14532d 0%,#052e16 60%,#022c22 100%);
  background-color:#052e16;
}
.homeAct--daily .homeActBg{
  background-image:linear-gradient(150deg,#1c1917,#0c0a09);
  background-color:#0c0a09;
}

/* When JS sets background-image via style, it overrides fallback */
.homeActBg[style*="background-image"]{
  background-size:cover !important;
  background-position:center right !important;
}



@media(prefers-reduced-motion:reduce){
  .homeAct,.homeActBg{ transition:none; }
  .homeAct:hover{ transform:none; }
  .homeAct:hover .homeActBg{ transform:none; }
}

/* Weak topics note under home cards */
.homeWeakNote{
  margin-top:16px;
  padding:0 2px;
}
.homeWeakNote:empty{ display:none; }
.homeWeakNote .bentoEmpty{
  font-size:13.5px;
  color:var(--muted);
  margin:0;
  opacity:.85;
}
.homeWeakNote .bentoWeakRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:6px;
}
.homeWeakNote .bentoWeakTitle{ font-size:13.5px; font-weight:600; color:#e2e8f0; }
.homeWeakNote .bentoWeakPct{ font-size:13px; font-weight:700; color:#fbbf24; }

/* Footer — avtodrom xodim kirishi (ixcham, e’tiborsiz) */
.footAdDesk{
  opacity:.35;font-size:12px!important;font-weight:500!important;
  letter-spacing:.02em;
}
.footAdDesk:hover{opacity:.7}



/* ============================================================
   IMTIHON kartalari — mobil (rasmga yaqin, ixcham 2 ustun)
   ============================================================ */
@media (max-width:719px){
  /* Tashqi stuCard o'ramini olib tashlash — faqat Imtihon bo'limida */
  #stuSection-tests > .stuCard{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    padding:0 !important;
    border-radius:0 !important;
  }
  #stuSection-tests .stuCardHead{
    margin-bottom:14px !important;
    padding:0 2px;
  }
  #stuSection-tests .stuCardHead h2{
    font-size:22px !important;
  }
  #stuSection-tests .stuCardHead p{
    font-size:13px !important;
    margin-top:4px !important;
  }

  /* Guruh sarlavhalari */
  #stuSection-tests .theoryGroupTitle{
    font-size:12px !important;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(148,163,184,.75) !important;
    margin:16px 2px 8px !important;
    font-weight:800 !important;
  }
  #stuSection-tests .examBoardGroup:first-child .theoryGroupTitle{
    margin-top:4px !important;
  }

  /* 2 ustun grid, ekranga yaqinroq */
  #stuSection-tests .examGlassGrid,
  #stuSection-tests .examGlassGrid--2,
  #stuSection-tests .examGlassGrid--3,
  #stuSection-tests .examGlassGrid--4{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin:0 0 8px !important;
  }

  /* Asosiy kartalar — muallaq, ixcham */
  #stuSection-tests .examGlassCard{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    min-height:64px !important;
    max-height:none !important;
    height:auto !important;
    padding:12px 12px !important;
    border-radius:18px !important;
    border:1px solid rgba(148,163,184,.2) !important;
    background:rgba(15,23,42,.55) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
    box-shadow:
      0 6px 20px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.07) !important;
    text-align:left !important;
  }

  #stuSection-tests .examGlassIcon{
    font-size:20px !important;
    width:40px !important;
    height:40px !important;
    border-radius:14px !important;
    display:grid !important;
    place-items:center !important;
    flex-shrink:0 !important;
    background:rgba(255,255,255,.06);
  }

  #stuSection-tests .examGlassBody{
    flex:1 !important;
    min-width:0 !important;
    gap:2px !important;
  }

  #stuSection-tests .examGlassTitle{
    font-size:13.5px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    white-space:normal !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }

  #stuSection-tests .examGlassMeta{
    font-size:11px !important;
    opacity:.8;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #stuSection-tests .examGlassHint,
  #stuSection-tests .examGlassBar,
  #stuSection-tests .examGlassCta{
    display:none !important;
  }

  /* Kabinet asosiy padding — kartalar ekranga yaqinroq */
  #stuSection-tests .stuCard{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    padding:0 !important;
  }
  #stuSection-tests .stuCardHead{
    margin-bottom:8px !important;
    padding:0 2px !important;
  }
  #stuSection-tests .stuCardHead h2{
    font-size:20px !important;
  }
  #stuSection-tests .stuCardHead p{
    font-size:12.5px !important;
  }
  #stuSection-tests .stuCabMainInner,
  .studentCabinet .stuCabMainInner{
    padding-left:4px !important;
    padding-right:4px !important;
  }
}

@media (max-width:380px){
  .examGlassTitle{font-size:12px !important}
  .examGlassCard{padding:11px 9px !important}
}

/* ============================================================
   AVTODROM — mobil ixcham + 3 turma (ertalab/kunduz/kech)
   ============================================================ */
@media (max-width:719px){
  /* Tashqi o'ram — kamroq joy */
  #stuSection-autodrome .adBentoWrap.stuCard,
  #stuSection-autodrome .stuCard.adBentoWrap{
    padding:12px 10px 14px !important;
  }
  #stuSection-autodrome .stuCardHead{
    margin-bottom:10px !important;
  }
  #stuSection-autodrome .stuCardHead h2{
    font-size:18px !important;
  }
  #stuSection-autodrome .stuCardHead p{
    font-size:12.5px !important;
  }

  .adBento{
    gap:10px !important;
  }
  .adBentoHero,
  .adBentoLoad,
  .adBentoBook,
  .adBentoList{
    padding:14px 12px 12px !important;
    border-radius:16px !important;
    overflow:visible !important; /* matn kesilmasin */
  }
  .adBentoHero{
    min-height:0 !important;
  }
  .adHeroTitle{font-size:16px !important;margin:0 0 4px !important}
  .adHeroMeta{font-size:12.5px !important;margin:0 0 8px !important}
  .adHeroCountdown{
    padding:6px 10px !important;
    font-size:12.5px !important;
    margin-bottom:10px !important;
  }
  .adHeroCountdown strong{font-size:14px !important}
  .adHeroActions{gap:8px !important}
  .adHeroActions .btn{
    padding:10px 12px !important;
    font-size:12.5px !important;
  }

  .adLoadSvg{max-width:110px !important}
  .adLoadValue{font-size:15px !important}
  .adLoadLabel{font-size:12px !important;margin-top:4px !important}

  .adBookHead{
    flex-direction:column;
    align-items:stretch !important;
    gap:8px !important;
    margin-bottom:10px !important;
  }
  .adBookTitle{font-size:14px !important}
  .adBookDate{
    flex-wrap:wrap;
    gap:8px !important;
  }
  .adBookDate input[type=date]{
    flex:1;
    min-width:0;
    font-size:14px !important;
  }

  /* 3 turma tugmalari */
  .adPeriodTabs{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:0 0 12px !important;
  }
  .adPeriodTab{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    padding:10px 6px !important;
    border-radius:14px !important;
    border:1px solid rgba(148,163,184,.22) !important;
    background:rgba(15,23,42,.45) !important;
    color:#e2e8f0 !important;
    cursor:pointer;
    text-align:center !important;
    transition:border-color .2s, background .2s, box-shadow .2s;
  }
  .adPeriodTab.is-active{
    border-color:rgba(56,189,248,.55) !important;
    background:rgba(56,189,248,.12) !important;
    box-shadow:0 0 0 1px rgba(56,189,248,.2), 0 8px 20px rgba(0,0,0,.2);
  }
  .adPeriodIcon{font-size:18px;line-height:1}
  .adPeriodLabel{
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
  }
  .adPeriodCount{
    font-size:10.5px !important;
    font-weight:600 !important;
    color:#7dd3fc !important;
  }
  .adPeriodTab.is-active .adPeriodCount{color:#bae6fd !important}

  .adChunkGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .adSlot{
    padding:12px 10px !important;
    border-radius:14px !important;
    gap:4px !important;
  }
  .adSlotTime{font-size:13.5px !important}
  .adSlotFree{font-size:11px !important}
  .adChunkEmpty{margin:8px 2px;font-size:13px}

  /* Amaliy imtihon (practice) taxtalari */
  #stuSection-practice .stuCard{
    padding:12px 10px 14px !important;
  }
  #stuSection-practice .stuCardHead h2{font-size:18px !important}
  #stuSection-practice .stuCardHead p{font-size:12.5px !important}
  .practiceBento{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .practiceBentoCard{
    min-height:0 !important;
    padding:14px 12px !important;
    border-radius:16px !important;
  }
  .practiceBentoCard--fines{grid-row:auto !important}
  .practiceBentoLabel{font-size:11px !important}
  .practiceBentoTitle{font-size:15px !important}
  .practiceBentoCta{font-size:12.5px !important}
  .practiceExMini{max-height:72px;overflow:hidden}
}

/* Desktop/tablet: period tabs ham chiroyli */
.adPeriodTabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 14px;
}
.adPeriodTab{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:12px 10px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.2);
  background:rgba(15,23,42,.4);
  color:#e2e8f0;
  cursor:pointer;
  text-align:center;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.adPeriodTab:hover{
  border-color:rgba(56,189,248,.35);
  background:rgba(30,41,59,.5);
}
.adPeriodTab.is-active{
  border-color:rgba(56,189,248,.55);
  background:rgba(56,189,248,.12);
  box-shadow:0 0 0 1px rgba(56,189,248,.18);
}
.adPeriodIcon{font-size:18px;line-height:1}
.adPeriodLabel{font-size:12.5px;font-weight:700;line-height:1.25}
.adPeriodCount{font-size:11px;font-weight:600;color:#7dd3fc}
.adChunkEmpty{margin:6px 2px;font-size:13.5px}

/* ============================================================
   AVTODROM — tor ekran (≤360px) kesilishni bartaraf etish
   ============================================================ */
@media (max-width:720px){
  #stuSection-autodrome .stuCabMain,
  #stuSection-autodrome .stuCabMainInner{
    padding-left:8px !important;
    padding-right:8px !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  #stuSection-autodrome .adBentoWrap,
  #stuSection-autodrome .stuCard.adBentoWrap,
  #stuSection-autodrome .adBentoBook{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  .adPeriodTabs{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
  }
  .adPeriodTab{
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:8px 4px !important;
    gap:2px !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }
  .adPeriodIcon{font-size:15px !important}
  .adPeriodLabel{
    font-size:10px !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
  }
  .adPeriodCount{
    font-size:10px !important;
    white-space:nowrap !important;
  }

  .adChunkGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
  }
  .adSlot{
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:10px 8px !important;
    overflow:visible !important;
    gap:3px !important;
    border-radius:12px !important;
  }
  .adSlotTime{
    font-size:12px !important;
    font-weight:750 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    letter-spacing:-0.02em !important;
  }
  .adSlotFree{
    font-size:10.5px !important;
  }
}

@media (max-width:340px){
  .adChunkGrid{
    grid-template-columns:1fr 1fr !important;
    gap:5px !important;
  }
  .adSlotTime{font-size:11px !important}
  .adPeriodLabel{font-size:9.5px !important}
}

/* ============================================================
   AVTODROM FINAL — tor telefon: hech narsa kesilmasin
   ============================================================ */
@media (max-width:720px){
  #stuSection-autodrome,
  #stuSection-autodrome *{
    max-width:100%;
  }
  #stuSection-autodrome .adBento,
  #stuSection-autodrome .adBentoBook,
  #stuSection-autodrome .adSlotsBoard,
  #stuSection-autodrome #slots-grid{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }
  #stuSection-autodrome .adBentoBook{
    padding:12px 10px !important;
  }

  .adPeriodTabs{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    gap:5px !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .adPeriodTab{
    min-width:0 !important;
    max-width:100% !important;
    width:auto !important;
    padding:8px 2px !important;
    box-sizing:border-box !important;
  }
  .adPeriodLabel{
    font-size:10px !important;
    white-space:nowrap !important;
  }
  .adPeriodCount{font-size:9.5px !important}

  .adChunkGrid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .adSlot{
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    padding:10px 6px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  .adSlotTime{
    font-size:11.5px !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }
  .adSlotFree{font-size:10px !important}

  /* Yuklama panelini mobil uchun qisqaroq */
  .adBentoLoad{
    padding:10px 12px !important;
  }
  .adLoadSvg{max-width:96px !important}
  .adLoadValue{font-size:14px !important}
  .adLoadLabel{font-size:11px !important}
}

@media (max-width:320px){
  .adSlotTime{font-size:10.5px !important}
  .adPeriodLabel{font-size:9px !important}
}

/* ============================================================
   PRACTICE / AMALIYOT — mobil moslashuv (v2.9.55 fix)
   Expand panel, filter chips, fine list, exercises grid
   ============================================================ */
@media (max-width:640px){
  /* Overlay va panel — deyarli to‘liq ekran, kam padding */
  .practiceExpandOverlay{
    padding:8px 6px !important;
    align-items:flex-end !important; /* pastga yopishtirish (sheet uslubi) */
  }
  .practiceExpandPanel{
    width:100% !important;
    max-width:100% !important;
    max-height:min(92vh, 100%) !important;
    border-radius:18px 18px 12px 12px !important;
    padding:12px 12px 16px !important;
    box-sizing:border-box !important;
  }
  .practiceExpandHead{
    margin-bottom:10px !important;
    padding-bottom:6px !important;
    gap:8px !important;
  }
  .practiceExpandHead h3{
    font-size:15px !important;
    line-height:1.3 !important;
  }
  .practiceExpandClose{
    width:32px !important;
    height:32px !important;
    font-size:14px !important;
    flex-shrink:0 !important;
  }

  /* Filter chips — kichikroq, yaxshi o‘raladi */
  .pfFilterRow{
    gap:6px !important;
    margin-bottom:10px !important;
  }
  .pfChip{
    font-size:11.5px !important;
    padding:6px 8px !important;
    white-space:nowrap !important;
  }
  .pfCount{
    min-width:16px !important;
    height:16px !important;
    font-size:9.5px !important;
    margin-left:3px !important;
  }

  /* Qidiruv */
  .pfSearch{
    padding:10px 12px !important;
    font-size:14px !important;
  }
  .pfSearchWrap{ margin-bottom:10px !important; }

  /* Guruh sarlavhasi */
  .pfGroupHead{
    margin:12px 0 6px !important;
    font-size:12.5px !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }

  /* Jarima kartochkalari — matn to‘liq o‘raladi, hech narsa kesilmaydi */
  .pfFineList{ gap:6px !important; }
  .pfFineItem,
  .pfFineItem--static{
    padding:10px 10px !important;
    gap:10px !important;
    align-items:flex-start !important;
  }
  .pfFineItemBody{
    min-width:0 !important;
    flex:1 1 auto !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
  .pfFineItemBody strong{
    font-size:13px !important;
    line-height:1.35 !important;
  }
  .pfFineItemBody p{
    font-size:12px !important;
    margin-top:3px !important;
  }
  .fineBadge{
    font-size:11px !important;
    padding:4px 7px !important;
    flex-shrink:0 !important;
  }

  /* Mashqlar paneli — 1 ustun */
  .pfExGrid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .pfExCard{
    padding:12px !important;
  }
  .pfExCard h4{ font-size:13.5px !important; }
  .pfExCard p{ font-size:12px !important; }
  .pfExSvgWrap{
    max-height:160px !important;
  }
  .pfExSvgWrap svg{ max-height:120px !important; }

  /* Maslahatlar */
  .pfTipItem{
    padding:10px 12px !important;
    gap:10px !important;
  }
  .pfTipText{ font-size:13px !important; }
  .pfTipSub{ font-size:11.5px !important; }
}

/* Juda tor telefonlar (≤380px) */
@media (max-width:380px){
  .practiceExpandPanel{
    padding:10px 8px 14px !important;
  }
  .pfChip{
    font-size:11px !important;
    padding:5px 6px !important;
  }
  .pfFilterRow{ gap:5px !important; }
  .pfFineItemBody strong{ font-size:12.5px !important; }
  .fineBadge{ font-size:10.5px !important; padding:3px 6px !important; }
}

/* Amaliyot bo‘limi (autodrome + practice + instructor) — horizontal scroll yo‘q */
@media (max-width:720px){
  #stuSection-practice,
  #stuSection-practice *,
  #stuSection-autodrome,
  #stuSection-instructor{
    max-width:100%;
    box-sizing:border-box;
  }
  #stuSection-practice .stuCard,
  #stuSection-practice .practiceBento,
  #stuSection-practice .practiceExpandBody{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  /* Bento kartalar mobil */
  .practiceBento{
    gap:10px !important;
  }
  .practiceBentoCard{
    min-height:0 !important;
    padding:14px 12px !important;
  }
  .practiceBentoTitle{ font-size:15px !important; }
  .practiceBentoLabel{ font-size:11px !important; }
  .practiceFineChips{
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .practiceExMini{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:4px !important;
  }

  /* Instruktor grid */
  .insPickGrid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}

/* ============================================================
   AVTODROM — 349px va undan tor: hech narsa kesilmasin (final)
   ============================================================ */
@media (max-width:400px){
  /* Yuqori pill navigatsiya — kamroq yon padding */
  .stuPillNavWrap{
    padding:0 6px !important;
  }
  .stuPillNav{
    margin:8px 0 10px !important;
    padding:3px !important;
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .stuPillTab{
    padding:8px 10px !important;
    font-size:12px !important;
  }

  /* Asosiy kontent padding */
  .studentCabinet .stuCabMainInner{
    padding:2px 6px 12px !important;
  }
  #stuSection-autodrome .adBentoWrap.stuCard,
  #stuSection-autodrome .stuCard.adBentoWrap{
    padding:10px 8px 12px !important;
  }
  #stuSection-autodrome .adBentoBook{
    padding:10px 8px !important;
  }

  /* 3 ta period tugmasi — majburiy sig‘ish */
  .adPeriodTabs{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    margin:0 0 10px !important;
  }
  .adPeriodTab{
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    padding:7px 2px !important;
    gap:2px !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .adPeriodIcon{
    font-size:14px !important;
  }
  .adPeriodLabel{
    font-size:9.5px !important;
    font-weight:700 !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
  }
  .adPeriodCount{
    font-size:9px !important;
  }

  /* Slot kartochkalari */
  .adChunkGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
  }
  .adSlot{
    padding:8px 4px !important;
    border-radius:10px !important;
  }
  .adSlotTime{
    font-size:11px !important;
  }
  .adSlotFree{
    font-size:9.5px !important;
  }
}

@media (max-width:340px){
  .stuPillNavWrap{ padding:0 4px !important; }
  .stuPillTab{ padding:7px 8px !important; font-size:11.5px !important; }
  .studentCabinet .stuCabMainInner{ padding:2px 4px 10px !important; }
  #stuSection-autodrome .adBentoBook{ padding:8px 6px !important; }
  .adPeriodTabs{ gap:3px !important; }
  .adPeriodTab{ padding:6px 1px !important; }
  .adPeriodLabel{ font-size:9px !important; }
  .adPeriodIcon{ font-size:13px !important; }
  .adSlotTime{ font-size:10.5px !important; }
}

/* ============================================================
   AVTODROM — ekstremal tor (≤280px, 245px ham)
   ============================================================ */
@media (max-width:280px){
  .stuTopbar{
    padding:0 6px !important;
    height:46px !important;
  }
  .stuMenuBtn{
    width:34px !important;
    height:34px !important;
  }
  .stuTopbarTitle strong{ font-size:13px !important; }
  .stuCabBtn{
    padding:6px 8px !important;
    font-size:11px !important;
  }

  .stuPillNavWrap{ padding:0 3px !important; }
  .stuPillNav{
    margin:6px 0 8px !important;
    padding:2px !important;
    border-radius:10px !important;
  }
  .stuPillTab{
    padding:6px 6px !important;
    font-size:10.5px !important;
  }

  .studentCabinet .stuCabMainInner{
    padding:2px 3px 8px !important;
  }
  #stuSection-autodrome .adBentoWrap.stuCard,
  #stuSection-autodrome .stuCard.adBentoWrap{
    padding:8px 5px 10px !important;
    border-radius:12px !important;
  }
  #stuSection-autodrome .adBentoBook{
    padding:8px 5px !important;
  }
  #stuSection-autodrome .stuCardHead h2{
    font-size:15px !important;
  }
  #stuSection-autodrome .stuCardHead p{
    font-size:11px !important;
  }

  .adBookHead{
    gap:6px !important;
  }
  .adBookTitle{ font-size:12.5px !important; }
  .adBookDate input[type=date]{
    font-size:12px !important;
    padding:6px 8px !important;
  }

  .adPeriodTabs{
    gap:2px !important;
    margin:0 0 8px !important;
  }
  .adPeriodTab{
    padding:5px 1px !important;
    border-radius:8px !important;
    gap:1px !important;
  }
  .adPeriodIcon{ font-size:12px !important; }
  .adPeriodLabel{
    font-size:8px !important;
    letter-spacing:-0.02em !important;
  }
  .adPeriodCount{ font-size:8px !important; }

  .adChunkGrid{
    gap:4px !important;
  }
  .adSlot{
    padding:6px 3px !important;
    border-radius:8px !important;
  }
  .adSlotTime{ font-size:9.5px !important; }
  .adSlotFree{ font-size:8.5px !important; }

  /* Boshqa amaliyot elementlari */
  .adBentoHero,
  .adBentoLoad,
  .adBentoList{
    padding:10px 8px !important;
    border-radius:12px !important;
  }
  .adHeroTitle{ font-size:14px !important; }
  .adHeroMeta{ font-size:11px !important; }
  .adLoadValue{ font-size:12px !important; }
  .adLoadLabel{ font-size:10px !important; }
}

/* 245px va undan kichik — eng oxirgi himoya */
@media (max-width:250px){
  .adPeriodLabel{ font-size:7.5px !important; }
  .adPeriodIcon{ font-size:11px !important; }
  .adSlotTime{ font-size:9px !important; }
  .stuPillTab{ font-size:9.5px !important; padding:5px 4px !important; }
  .studentCabinet .stuCabMainInner{ padding:1px 2px 6px !important; }
}

/* ============================================================
   RESPONSIVE SYSTEM — barcha qurilmalar (phone → tablet)
   Breakpoints:
     ≤360  kichik telefon (SE, eski Android)
     ≤400  o'rtacha telefon
     ≤480  katta telefon
     ≤720  katta telefon / kichik planshet
     ≤899  planshet portrait (sidebar collapse)
     ≥900  desktop / iPad landscape
   ============================================================ */

/* --- Umumiy kabinet himoya (har qanday kenglik) --- */
.studentCabinet,
.studentCabinet .stuShell,
.studentCabinet .stuCabMain,
.studentCabinet .stuCabMainInner {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.studentCabinet .stuCabMain {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.studentCabinet .stuCabMainInner {
  width: 100%;
  max-width: min(1280px, 100%);
  box-sizing: border-box;
}

/* Avtodrom / Practice ildiz */
#stuSection-autodrome,
#stuSection-practice {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
#stuSection-autodrome .adBento,
#stuSection-autodrome .adBentoWrap,
#stuSection-autodrome .adBentoHero,
#stuSection-autodrome .adBentoLoad,
#stuSection-autodrome .adBentoBook,
#stuSection-autodrome .adBentoList,
#stuSection-autodrome .adSlotsBoard,
#stuSection-autodrome #slots-grid,
#stuSection-autodrome .adPeriodTabs,
#stuSection-autodrome .adChunkGrid,
#stuSection-autodrome .adPeriodTab,
#stuSection-autodrome .adSlot {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ========== TABLET / iPad portrait (≤899) — sidebar allaqachon overlay ========== */
@media (max-width: 899px) {
  .studentCabinet .stuCabMainInner {
    padding: 6px 12px 20px !important;
  }
  .stuPillTab {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ========== Katta telefon + kichik planshet (≤720) ========== */
@media (max-width: 720px) {
  .studentCabinet .stuCabMainInner {
    padding: 4px 10px 18px !important;
  }

  #stuSection-autodrome .adBentoWrap.stuCard,
  #stuSection-autodrome .stuCard.adBentoWrap {
    padding: 12px 10px 14px !important;
    overflow: hidden !important;
  }
  #stuSection-autodrome .adBento {
    gap: 12px !important;
    grid-template-columns: 1fr !important;
  }
  #stuSection-autodrome .adBentoHero,
  #stuSection-autodrome .adBentoLoad,
  #stuSection-autodrome .adBentoBook,
  #stuSection-autodrome .adBentoList {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 14px 12px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* Sana maydoni */
  #stuSection-autodrome .adBookHead {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #stuSection-autodrome .adBookDate {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #stuSection-autodrome .adBookDate input[type=date] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  /* 3 turma — teng ulush */
  #stuSection-autodrome .adPeriodTabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #stuSection-autodrome .adPeriodTab {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 4px !important;
    overflow: hidden !important;
  }
  #stuSection-autodrome .adPeriodLabel {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #stuSection-autodrome .adChunkGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #stuSection-autodrome .adSlot {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 8px !important;
  }
  #stuSection-autodrome .adSlotTime {
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  #stuSection-autodrome .adHeroActions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #stuSection-autodrome .adHeroActions .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  /* Amaliy imtihon */
  #stuSection-practice .stuCard {
    padding: 12px 10px !important;
    overflow: hidden !important;
  }
  #stuSection-practice .practiceBento {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #stuSection-practice .practiceBentoCard {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ========== O'rtacha telefon (≤480) — iPhone 12/13/14, ko'p Android ========== */
@media (max-width: 480px) {
  .studentCabinet .stuCabMainInner {
    padding: 4px 8px 16px !important;
  }
  #stuSection-autodrome .adBentoWrap.stuCard,
  #stuSection-autodrome .stuCard.adBentoWrap {
    padding: 10px 8px 12px !important;
  }
  #stuSection-autodrome .adBentoHero,
  #stuSection-autodrome .adBentoLoad,
  #stuSection-autodrome .adBentoBook,
  #stuSection-autodrome .adBentoList {
    padding: 12px 10px !important;
  }
  #stuSection-autodrome .adPeriodTabs {
    gap: 6px !important;
  }
  #stuSection-autodrome .adPeriodTab {
    padding: 8px 3px !important;
  }
  #stuSection-autodrome .adPeriodLabel {
    font-size: 10.5px !important;
  }
  #stuSection-autodrome .adPeriodIcon {
    font-size: 15px !important;
  }
  #stuSection-autodrome .adSlotTime {
    font-size: 12px !important;
  }
  #stuSection-autodrome .adHeroActions {
    flex-direction: column !important;
  }
  #stuSection-autodrome .adHeroActions .btn {
    width: 100% !important;
  }
  #stuSection-autodrome .adBookDate {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #stuSection-autodrome .adBookDate input[type=date] {
    width: 100% !important;
  }
}

/* ========== Kichik telefon (≤360) — SE, eski Android ========== */
@media (max-width: 360px) {
  .studentCabinet .stuCabMainInner {
    padding: 4px 6px 14px !important;
  }
  .stuPillTab {
    font-size: 11.5px !important;
    padding: 7px 8px !important;
    max-width: 40vw !important;
  }
  #stuSection-autodrome .adBentoWrap.stuCard,
  #stuSection-autodrome .stuCard.adBentoWrap {
    padding: 8px 6px 10px !important;
  }
  #stuSection-autodrome .adBentoHero,
  #stuSection-autodrome .adBentoLoad,
  #stuSection-autodrome .adBentoBook,
  #stuSection-autodrome .adBentoList {
    padding: 10px 8px !important;
    border-radius: 14px !important;
  }
  #stuSection-autodrome .adPeriodTabs {
    gap: 4px !important;
  }
  #stuSection-autodrome .adPeriodTab {
    padding: 7px 2px !important;
  }
  #stuSection-autodrome .adPeriodLabel {
    font-size: 9.5px !important;
  }
  #stuSection-autodrome .adPeriodCount {
    font-size: 9px !important;
  }
  #stuSection-autodrome .adPeriodIcon {
    font-size: 13px !important;
  }
  #stuSection-autodrome .adChunkGrid {
    gap: 5px !important;
  }
  #stuSection-autodrome .adSlot {
    padding: 8px 5px !important;
  }
  #stuSection-autodrome .adSlotTime {
    font-size: 11px !important;
  }
  #stuSection-autodrome .adSlotFree {
    font-size: 9.5px !important;
  }
  #stuSection-autodrome .adHeroTitle {
    font-size: 15px !important;
  }
  #stuSection-autodrome .stuCardHead h2 {
    font-size: 16px !important;
  }
  #stuSection-autodrome .stuCardHead p {
    font-size: 12px !important;
  }
}

/* ========== Juda tor (≤320) — eng kichik telefonlar ========== */
@media (max-width: 320px) {
  .studentCabinet .stuCabMainInner {
    padding: 2px 4px 12px !important;
  }
  #stuSection-autodrome .adPeriodIcon {
    display: none !important; /* matn uchun joy */
  }
  #stuSection-autodrome .adPeriodLabel {
    font-size: 9px !important;
  }
  #stuSection-autodrome .adPeriodCount {
    font-size: 8.5px !important;
  }
  #stuSection-autodrome .adSlotTime {
    font-size: 10px !important;
  }
  #stuSection-autodrome .adSlotFree {
    font-size: 9px !important;
  }
}

/* ========== Desktop / iPad landscape (≥720) — bento 4 ustun saqlanadi ========== */
@media (min-width: 720px) {
  #stuSection-autodrome .adBento {
    /* asosiy qoida allaqachon 4-ustunli */
  }
  #stuSection-autodrome .adPeriodTabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  #stuSection-autodrome .adChunkGrid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* ========== iPad / planshet landscape (900–1100) ========== */
@media (min-width: 900px) and (max-width: 1100px) {
  .studentCabinet .stuCabMainInner {
    padding: 8px 18px 24px;
  }
  #stuSection-autodrome .adSlotTime {
    font-size: 13px;
  }
}

/* ============================================================
   AVTODROM — sidebar dan mustaqil, hech qachon kesilmasin
   ============================================================ */
#stuSection-autodrome {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
#stuSection-autodrome .adBentoWrap,
#stuSection-autodrome .adBento,
#stuSection-autodrome .adBentoBook,
#stuSection-autodrome .adSlotsBoard,
#stuSection-autodrome #slots-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#stuSection-autodrome .adPeriodTabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}
#stuSection-autodrome .adPeriodTab {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#stuSection-autodrome .adChunkGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 6px !important;
}
#stuSection-autodrome .adSlot {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#stuSection-autodrome .adBookDate input[type=date] {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 720px) {
  #stuSection-autodrome .adChunkGrid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  }
}

/* ============================================================
   ROOT FIX: 521px kesilish — pill nav + sidebar flex
   Ruscha tablar fit-content bilan ~520px talab qilgan
   ============================================================ */
@media (max-width: 899px) {
  .studentCabinet.show {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .studentCabinet.show > .stuSidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 30 !important;
    width: min(288px, 86vw) !important;
    max-width: 86vw !important;
  }
  .studentCabinet.show > .stuSidebarOverlay {
    position: fixed !important;
  }
  .studentCabinet.show > .stuShell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  .stuPillNavWrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .stuPillNav {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .stuPillTab {
    flex: 0 0 auto !important;
    max-width: none !important; /* ellipsis o'rniga gorizontal scroll */
  }
  .stuCabMain,
  .stuCabMainInner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  #stuSection-autodrome {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  #stuSection-autodrome .adBentoWrap,
  #stuSection-autodrome .adBento,
  #stuSection-autodrome .adBentoHero,
  #stuSection-autodrome .adBentoLoad,
  #stuSection-autodrome .adBentoBook,
  #stuSection-autodrome .adBentoList {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Universal selector max-width ni bekor qilish — SVG/absolute ni buzardi */
@media (max-width: 720px) {
  #stuSection-autodrome * {
    max-width: none;
  }
  #stuSection-autodrome,
  #stuSection-autodrome .adBentoWrap,
  #stuSection-autodrome .adBento,
  #stuSection-autodrome .adBentoBook,
  #stuSection-autodrome .adSlotsBoard,
  #stuSection-autodrome #slots-grid,
  #stuSection-autodrome .adPeriodTabs,
  #stuSection-autodrome .adChunkGrid,
  #stuSection-autodrome .adPeriodTab,
  #stuSection-autodrome .adSlot {
    max-width: 100% !important;
  }
}


/* Parol ko‘rsatish / yashirish */
.passField{
  position:relative;
  display:flex;
  align-items:center;
}
.passField input{
  width:100%;
  padding-right:44px;
}
.passToggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:6px 8px;
  opacity:.75;
  color:inherit;
}
.passToggle:hover{ opacity:1; }