/* ===== Yorug' rejim ===== */
:root {
  --blue: #4ea2f6;
  --blue-btn: linear-gradient(180deg, #74b8fa 0%, #4d9ff4 55%, #4597ef 100%);
  --blue-glow: 0 10px 26px rgba(78, 162, 246, .42), inset 0 1px 0 rgba(255, 255, 255, .35);
  --blue-text: #3b8fe6;
  --blue-soft: #e7f1fd;
  --navy: #2a2840;
  --green: #5aa860;
  --green-soft: rgba(110, 185, 115, .16);
  --gold: #e9a23b;
  --gold-soft: #fff3df;

  --page: #f1f1f4;
  --text: #2a2840;
  --muted: #8e8d99;
  --card: #ffffff;
  --card-2: #f3f3f6;
  --line: #ececf0;
  --soft-btn: #f0f0f3;
  --strong-btn: #2a2840;
  --strong-btn-text: #ffffff;
  --nav: #ffffff;
  --nav-haze: radial-gradient(70% 120% at 55% 0%, rgba(160, 205, 245, .35) 0%, transparent 70%);
  --nav-icon: #2a2840;
  --nav-icon-off: #2a2840;
  --nav-active: #e9e9ee;
  --shadow: 0 2px 10px rgba(30, 30, 50, .05);
  --overlay: rgba(20, 20, 28, .4);

  --radius: 26px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

/* ===== Qorong'i rejim ===== */
:root[data-theme="dark"] {
  --blue-text: #6db4fa;
  --blue-soft: rgba(78, 162, 246, .16);
  --green: #84c98a;
  --green-soft: rgba(110, 185, 115, .18);
  --gold-soft: rgba(233, 162, 59, .16);

  --page: #1e1e20;
  --text: #f4f4f6;
  --muted: #9c9ba6;
  --card: #2a2a2e;
  --card-2: #36363b;
  --line: #36363b;
  --soft-btn: #36363b;
  --strong-btn: #f4f4f6;
  --strong-btn-text: #2a2840;
  --nav: #2a2a2e;
  --nav-haze: radial-gradient(70% 120% at 55% 0%, rgba(78, 162, 246, .14) 0%, transparent 70%);
  --nav-icon: #f4f4f6;
  --nav-icon-off: #f4f4f6;
  --nav-active: #3a3a40;
  --shadow: none;
  --overlay: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  color: var(--text); font-size: 16px; line-height: 1.5; min-height: 100vh;
  background: var(--page); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
h1, h2, h3, p { margin: 0; }
svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.f { width: 24px; height: 24px; fill: currentColor; flex: none; }

.bg { display: none; }

.view { padding: 0 16px calc(126px + var(--safe-bottom)); max-width: 520px; margin: 0 auto; }
.view.fade { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- yuqori panel ---------- */
.appbar { display: flex; align-items: center; gap: 10px; padding: 16px 2px 16px; }
.appbar .logo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue); }
.appbar .logo svg { width: 20px; height: 20px; }
.appbar b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }

.headline { font-size: 38px; font-weight: 800; letter-spacing: -.045em; line-height: 1.05; margin: 8px 2px 20px; }
.headline em { font-style: normal; color: var(--green); }

.title { margin: 6px 2px 18px; }
.title h1 { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.title p { color: var(--muted); font-size: 16px; margin-top: 6px; }

.label { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin: 28px 2px 12px; }

.back {
  display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 16px 0 10px;
  margin: 16px 0; border-radius: 999px; font-weight: 700; font-size: 15px;
}
.back svg { width: 20px; height: 20px; }

/* ---------- doira ikonka ---------- */
.circle {
  width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--card-2); color: var(--text); font-size: 25px;
}
.circle.blue { background: var(--blue); color: #fff; }
.circle svg { width: 26px; height: 26px; }

/* ---------- kapsula qator ---------- */
.pill { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; margin-bottom: 10px; border-radius: 30px; transition: transform .15s; }
.pill:active, .row:active { transform: scale(.98); }
.pill .pb { flex: 1; min-width: 0; }
.pill .pb b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.pill .pb small { display: block; color: var(--muted); font-size: 15px; line-height: 1.4; margin-top: 1px; }
.pill .price { color: var(--text); font-weight: 800; }
.chev { width: 20px; height: 20px; color: var(--muted); }

.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 8px; margin-top: 4px; background: var(--green-soft); color: var(--green); }
.bar { height: 6px; border-radius: 6px; background: var(--card-2); overflow: hidden; margin-top: 8px; }
.bar > i { display: block; height: 100%; border-radius: 6px; background: var(--blue); transition: width .4s; }

/* ---------- bosh sahifa: bento ---------- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.b-photo { grid-column: span 2; position: relative; overflow: hidden; border-radius: 30px; aspect-ratio: 1 / 1.05; background: var(--blue); }
.b-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.b-initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: 80px; font-weight: 800; color: #fff; }
.b-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .7) 100%); }
.b-photo-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px; color: #fff; }
.b-photo-info h1 { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin-top: 10px; }
.b-photo-info p { font-size: 15px; opacity: .85; margin-top: 3px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--card-2); }
.chip svg { width: 16px; height: 16px; }
.glass-chip { background: #fff; color: var(--navy); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.b-tile { padding: 16px 18px; border-radius: 26px; display: flex; flex-direction: column; min-height: 120px; }
.b-tile svg { width: 24px; height: 24px; color: var(--blue-text); }
.b-tile small { color: var(--muted); font-size: 14px; font-weight: 500; margin-top: auto; padding-top: 12px; }
.b-tile b { font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.b-tile.accent { background: var(--blue-btn); color: #fff; box-shadow: var(--blue-glow); }
.b-tile.accent svg, .b-tile.accent small { color: rgba(255, 255, 255, .9); }

.b-wide { grid-column: span 2; padding: 20px; }
.b-wide h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.b-wide p { font-size: 15.5px; line-height: 1.55; color: var(--muted); white-space: pre-line; }

/* ---------- ko'rsatkich plitkalari ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.tile { text-align: center; padding: 18px 6px 16px; border-radius: 26px; }
.tile svg { width: 22px; height: 22px; color: var(--muted); }
.tile b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; margin-top: 6px; }
.tile small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.tile.blue svg, .tile.blue b { color: var(--blue-text); }

/* ---------- kurs sahifasi ---------- */
.hero { padding: 26px 20px; text-align: center; }
.hero .circle { width: 78px; height: 78px; font-size: 38px; margin: 0 auto 14px; }
.hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.hero p { color: var(--muted); margin-top: 8px; font-size: 15.5px; }
.facts { display: flex; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.fact { font-size: 14px; font-weight: 600; background: var(--card-2); padding: 7px 14px; border-radius: 999px; }

.box { padding: 20px; margin-top: 10px; }
.box h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.box .text { white-space: pre-line; font-size: 15.5px; color: var(--muted); }
.lesson-body .text { color: var(--text); }

.status { display: flex; gap: 12px; align-items: center; padding: 16px 18px; margin-top: 10px; border-radius: 24px; font-size: 15px; }
.status .si { font-size: 22px; }
.status > div { flex: 1; }
.status small { color: var(--muted); }
.status.ok { background: var(--green-soft); }
.status.wait { background: var(--gold-soft); }

/* darslar ro'yxati */
.list { overflow: hidden; padding: 2px 0; }
.row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; transition: transform .15s; }
.row + .row { border-top: 1px solid var(--line); }
.row .num {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; background: var(--blue-soft); color: var(--blue-text);
}
.row .num svg { width: 17px; height: 17px; }
.row.locked .num { background: var(--card-2); color: var(--muted); }
.row.done .num { background: var(--blue); color: #fff; }
.row .rt { flex: 1; min-width: 0; }
.row .rt b { display: block; font-weight: 600; font-size: 16px; letter-spacing: -.01em; line-height: 1.35; }
.row .rt small { color: var(--muted); font-size: 14px; }
.row.locked .rt b { opacity: .55; }

/* ---------- tugmalar ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 60px; padding: 14px 22px; border-radius: 24px; font-weight: 600; font-size: 18px; letter-spacing: -.01em;
  color: #fff; background: var(--blue-btn); box-shadow: var(--blue-glow); transition: transform .15s, opacity .2s;
}
.btn svg { width: 22px; height: 22px; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .45; box-shadow: none; pointer-events: none; }
.btn.soft { background: var(--soft-btn); color: var(--text); box-shadow: none; font-size: 16px; min-height: 54px; border-radius: 18px; }
.btn.dark { background: var(--strong-btn); color: var(--strong-btn-text); box-shadow: none; font-size: 16px; min-height: 54px; border-radius: 18px; }
.btn.ok { background: var(--green-soft); color: var(--green); box-shadow: none; }

.bottom {
  position: fixed; left: 0; right: 0; bottom: calc(100px + var(--safe-bottom)); z-index: 5;
  padding: 14px 16px 6px; max-width: 520px; margin: 0 auto;
}
.view.with-bottom { padding-bottom: calc(210px + var(--safe-bottom)); }

/* ---------- segment ---------- */
.segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.segment button {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border-radius: 17px;
  font-weight: 600; font-size: 14.5px; color: var(--muted); white-space: nowrap; transition: background .2s, color .2s;
}
.segment button svg { width: 18px; height: 18px; }
.segment button.on { background: var(--nav-active); color: var(--text); }

/* ---------- profil ---------- */
.me { display: flex; align-items: center; gap: 16px; margin: 4px 2px 4px; }
.me .ava {
  width: 72px; height: 72px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 26px; font-weight: 800; color: #fff; background: var(--blue); background-size: cover; background-position: center;
}
.me h2 { font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.me small { color: var(--muted); font-size: 15.5px; }

.dashed { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 40px 20px; text-align: center; color: var(--muted); margin-top: 10px; }

/* ---------- pastki menyu ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-bottom)); z-index: 10;
  width: calc(100% - 24px); max-width: 496px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  padding: 7px; border-radius: 30px; background: var(--nav-haze), var(--nav);
  box-shadow: 0 10px 30px rgba(20, 20, 40, .14);
}
.tabbar a {
  --cut: var(--nav);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 8px; border-radius: 22px;
  font-size: 12.5px; font-weight: 500; color: var(--muted); transition: background .2s, color .2s;
}
.tabbar a svg { width: 26px; height: 26px; color: var(--nav-icon-off); }
.tabbar a.active { --cut: var(--nav-active); background: var(--nav-active); color: var(--text); font-weight: 700; }
.tabbar a.active svg { color: var(--nav-icon); }

/* ---------- oyna (modal) ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: var(--overlay); animation: fadeIn .2s; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-width: 520px; margin: 0 auto;
  padding: 10px 20px calc(24px + var(--safe-bottom)); border-radius: 32px 32px 0 0; background: var(--card);
  max-height: 90vh; overflow-y: auto; animation: up .28s cubic-bezier(.2, .8, .2, 1);
}
.sheet .grip { width: 40px; height: 5px; border-radius: 5px; background: var(--line); margin: 0 auto 18px; }
.sheet h2 { font-size: 28px; font-weight: 800; letter-spacing: -.045em; line-height: 1.15; text-align: center; }
.sheet .sub { color: var(--muted); text-align: center; margin-top: 6px; font-size: 15.5px; }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } }

.amount { text-align: center; margin: 14px 0 4px; }
.amount span { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.step { display: flex; gap: 14px; padding: 14px 0; }
.step + .step { border-top: 1px solid var(--line); }
.step .n { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: var(--blue); }
.step .sb { flex: 1; min-width: 0; }
.step .sb b { display: block; font-weight: 700; letter-spacing: -.01em; }
.step .sb small { color: var(--muted); font-size: 14px; }
.cardnum {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; width: 100%; text-align: left;
  padding: 12px 12px 12px 18px; border-radius: 18px; background: var(--card-2);
}
.cardnum > div { min-width: 0; }
.cardnum.copied { background: var(--green-soft); }
.cardnum.copied small { color: var(--green); font-weight: 700; }
.cardnum .num { font-size: 16px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cardnum small { display: block; color: var(--muted); font-size: 13px; }
.copy { width: 40px; height: 40px; border-radius: 12px; background: var(--card); color: var(--blue-text); display: grid; place-items: center; flex: none; }
.copy svg { width: 18px; height: 18px; }
.upload {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; min-height: 64px;
  border-radius: 18px; background: var(--card-2); color: var(--muted); font-weight: 600; cursor: pointer;
}
.upload input { display: none; }
.upload.has { color: var(--green); background: var(--green-soft); }
.done-big { text-align: center; padding: 10px 0 4px; }
.done-big .circle { width: 76px; height: 76px; margin: 0 auto 16px; }
.done-big p { color: var(--muted); margin: 8px 0 20px; }

/* ---------- dars sahifasi ---------- */
.lesson-top { color: var(--muted); font-size: 14.5px; font-weight: 500; margin: 0 2px 6px; }
.lesson-title { font-size: 30px; font-weight: 800; letter-spacing: -.045em; line-height: 1.1; margin: 0 2px 18px; }
.video { width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; background: var(--blue-btn); color: #fff; box-shadow: var(--blue-glow); }
.video .circle { margin: 0 auto 10px; background: #fff; color: var(--blue); }
.video small { opacity: .85; }
.locked-box { text-align: center; padding: 28px 20px; }
.locked-box .circle { margin: 0 auto 12px; }
.locked-box p { color: var(--muted); margin: 6px 0 18px; }

/* ---------- boshqa ---------- */
.empty { text-align: center; padding: 34px 20px; }
.empty .circle { margin: 0 auto 12px; }
.empty b { display: block; font-size: 18px; letter-spacing: -.02em; }
.empty p { color: var(--muted); margin: 6px 0 18px; }
.skeleton { height: 84px; border-radius: 30px; margin-bottom: 10px; background: var(--card); animation: pulse 1.2s ease-in-out infinite; }
.skeleton:first-child { margin-top: 70px; }
@keyframes pulse { 50% { opacity: .5; } }
.toast {
  position: fixed; left: 50%; bottom: calc(190px + var(--safe-bottom)); transform: translateX(-50%); z-index: 30;
  width: max-content; max-width: calc(100% - 40px); padding: 13px 20px; border-radius: 18px; text-align: center;
  background: var(--strong-btn); color: var(--strong-btn-text); font-size: 15px; font-weight: 600; animation: fadeIn .2s;
}

/* ===== Darslar va materiallar (05-darslar-materiallar referensi) ===== */
:root { --g: #66bb6a; --g-text: #4f9f54; --o: #e9a23b; --r: #d9483b; }
:root[data-theme="dark"] { --g-text: #7fcf84; }

/* kurs sarlavha kartasi */
.course-head { padding: 18px 18px 16px; }
.ch-meta { color: var(--muted); font-size: 14.5px; font-weight: 500; }
.ch-title { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; }
.ch-emoji { font-size: 28px; line-height: 1; flex: none; }
.ch-title h1 { font-size: 26px; font-weight: 800; letter-spacing: -.045em; line-height: 1.12; }

/* segment tablar */
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 4px; border-radius: 16px; background: var(--card-2); }
.tabs a { text-align: center; padding: 10px 4px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background .2s, color .2s; }
.tabs a.on { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(20, 20, 40, .08); }
.tab-body { margin-top: 12px; }

/* natija kartasi */
.progress-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; margin-top: 10px; }
.progress-card b { display: block; font-weight: 700; letter-spacing: -.01em; }
.progress-card small { color: var(--muted); font-size: 14px; }
.pct { font-size: 18px; font-weight: 700; color: var(--muted); flex: none; }
.pct.g { color: var(--g-text); }
.pct.o { color: var(--o); }
.pct.r { color: var(--r); }
.progress-card .pct { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }

/* yashil papka ikonka */
.folder { width: 50px; height: 43px; flex: none; display: block; }
.folder.off { filter: grayscale(1); opacity: .45; }

/* dars kartasi (har biri alohida) */
.lcard { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 16px; margin-bottom: 10px; border-radius: 22px; transition: transform .15s; }
.lcard:active, .fcard:active, .grow:active { transform: scale(.98); }
.lcard .lt { flex: 1; min-width: 0; }
.lcard .lt b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }
.lcard .lt small { display: block; color: var(--muted); font-size: 14.5px; margin-top: 1px; }
.lcard.locked .lt b { opacity: .6; }
.done-mark { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--g); color: #fff; }
.done-mark svg { width: 15px; height: 15px; }

/* papka shaklidagi material kartalari */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fcard { position: relative; display: block; overflow: hidden; border-radius: 26px; transition: transform .15s; }
.fback {
  position: absolute; left: 12px; right: 12px; top: 10px; height: 64px; border-radius: 16px;
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-bottom: 0;
}
.ffront { position: absolute; left: 0; top: 28px; width: 100%; height: 40px; filter: drop-shadow(0 -3px 5px rgba(20, 20, 40, .06)); }
.ffront .fill { fill: var(--card); }
.ffront .edge { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fbody { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 58px 16px 16px; }
.gicon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--g); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.gicon svg { width: 21px; height: 21px; }
.fbody b { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-top: 18px; }
.fbody small { color: var(--muted); font-size: 14.5px; }

/* papka ichi sarlavhasi */
.back-plain { display: inline-flex; align-items: center; gap: 8px; margin: 18px 2px 16px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.back-plain svg { width: 22px; height: 22px; }

/* profil: Kurslarim — guruhlangan ro'yxat + foiz */
.glist { padding: 4px 18px; }
.grow { display: flex; align-items: center; gap: 12px; padding: 12px 0; transition: transform .15s; }
.grow + .grow { border-top: 1px solid var(--line); }
.grow .folder { width: 34px; height: 29px; }
.grow b { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }

/* ===== Orqaga tugmasi (har bir ichki sahifada, telefon uchun) ===== */
.back-bar { position: sticky; top: 0; z-index: 8; padding: 12px 0 6px; margin: 0 -16px 8px; padding-left: 16px; padding-right: 16px;
  background: linear-gradient(180deg, var(--page) 70%, transparent); }
.back-bar .back { margin: 0; height: 44px; box-shadow: 0 2px 10px rgba(20, 20, 40, .08); }
.sheet-top { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: 14px; }
.sheet-top .grip { margin: 0; }
.sheet-top .back { position: absolute; left: 0; top: 0; margin: 0; height: 40px; background: var(--card-2); box-shadow: none; }

/* =====================================================================
   ADMIN / USTOZ PANELI (06-admin-panel referensi, bizning ko'k uslubda)
   ===================================================================== */
:root { --red: #e5484d; --red-soft: rgba(229, 72, 77, .12); }
[hidden] { display: none !important; }
.tabbar-admin a { position: relative; }
.tabbar-admin svg.i { width: 24px; height: 24px; }
.nbadge, .tbadge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
}
.nbadge { position: absolute; top: 4px; right: calc(50% - 24px); }
.tbadge { margin-left: 5px; }
.muted { color: var(--muted); font-size: 14px; }

/* rol belgisi */
.role-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; flex: none; }
.role-chip svg { width: 15px; height: 15px; }
.role-chip.admin { background: var(--blue); color: #fff; }
.role-chip.teacher { background: var(--green-soft); color: var(--green); }

/* panel tanlash */
.chooser { padding-top: 6vh; }
.chooser-head { text-align: center; margin-bottom: 26px; }
.logo-big { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: var(--blue-btn); color: #fff; box-shadow: var(--blue-glow); }
.logo-big svg { width: 34px; height: 34px; }
.chooser-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }
.chooser-head p { color: var(--muted); margin-top: 8px; font-size: 15.5px; }
.pill.choose { width: 100%; text-align: left; padding: 18px 20px 18px 16px; border-radius: 34px; margin-bottom: 12px; }
.pill.choose .circle { width: 60px; height: 60px; }
.pill.choose .circle svg { width: 28px; height: 28px; }

/* admin kartalari */
.a-card { padding: 18px; margin-bottom: 10px; }
.a-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.a-head svg { width: 18px; height: 18px; }
.a-title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.a-big { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; margin-bottom: 4px; }
.a-grid2 { display: grid; grid-template-columns: 1fr; gap: 10px; }
.a-grid2 .a-card { margin-bottom: 0; }
.a-grid2 + .a-grid4 { margin-top: 10px; }
.a-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.a-tile { padding: 16px; display: flex; flex-direction: column; gap: 2px; min-height: 112px; }
.a-tile svg { width: 22px; height: 22px; color: var(--blue-text); margin-bottom: auto; }
.a-tile b { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; margin-top: 10px; }
.a-tile small { color: var(--muted); font-size: 13.5px; }
.a-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.a-stats b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.04em; }
.a-stats small { color: var(--muted); font-size: 13px; line-height: 1.3; display: block; }
.c-g { color: var(--g-text); } .c-r { color: var(--red); } .c-o { color: var(--o); }
.a-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--blue-text); font-weight: 600; font-size: 14.5px; }
.a-link svg { width: 17px; height: 17px; }
.goal-form { display: flex; gap: 8px; }
.goal-form .input { flex: 1; min-width: 0; }
.small-btn { width: auto; min-height: 50px; padding: 0 18px; font-size: 15.5px; border-radius: 16px; flex: none; }
.switch-pill { margin-top: 18px; }

/* forma elementlari */
.input {
  width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid transparent; border-radius: 16px;
  background: var(--card-2); color: var(--text); font: inherit; font-size: 16px; outline: none; transition: border-color .2s;
}
textarea.input { resize: vertical; line-height: 1.45; }
.input:focus { border-color: var(--blue); }
.input:disabled { opacity: .55; }
.form { display: grid; gap: 12px; margin-top: 16px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 14px; font-weight: 600; color: var(--muted); }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card-2); }
.field-row b { display: block; font-size: 15.5px; }
.field-row small { color: var(--muted); font-size: 13px; }
.search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); margin-bottom: 10px; }
.search svg { width: 20px; height: 20px; color: var(--muted); }
.search input { flex: 1; min-width: 0; min-height: 50px; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; outline: none; }

/* toggle */
.switch { position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--card-2); flex: none; transition: background .2s; border: 1px solid var(--line); }
.switch i { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .2s; }
.switch.on { background: var(--blue); border-color: var(--blue); }
.switch.on i { transform: translateX(20px); }

/* kichik tugmalar */
.btn.sm { min-height: 46px; font-size: 15.5px; border-radius: 15px; }
.mini { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mini svg { width: 16px; height: 16px; }
.mini.soft { background: var(--card-2); color: var(--text); }
.mini.blue { background: var(--blue); color: #fff; }
.mini.danger, .icon-btn.danger, .p-link.danger { color: var(--red); }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--muted); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:active, .mini:active { transform: scale(.94); }

/* segment tablar (2 va 4 ta) */
.tabs.tabs2 { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.tabs.tabs4 { display: flex; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.tabs.tabs4::-webkit-scrollbar { display: none; }
.tabs.tabs4 a { flex: 1 0 auto; padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; }

/* o'quvchi kartalari */
.p-list { display: grid; gap: 10px; }
.p-card { padding: 16px; display: grid; gap: 12px; }
.p-top { display: flex; align-items: center; gap: 12px; }
.p-ava { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--card-2); color: var(--muted); font-weight: 700; font-size: 15px; }
.p-info { flex: 1; min-width: 0; }
.p-info b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-info small { color: var(--muted); font-size: 14px; }
.p-phone { display: inline-flex; align-items: center; gap: 5px; color: var(--blue-text); font-size: 14px; font-weight: 500; }
.p-phone svg { width: 14px; height: 14px; }
.coin-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-weight: 800; font-size: 15px; flex: none; }
.coin-chip.sm { padding: 4px 10px; font-size: 13px; }
.p-order { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--card-2); font-size: 14.5px; }
.p-order span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-receipt { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-text); font-weight: 600; font-size: 14.5px; justify-self: start; }
.p-receipt svg { width: 17px; height: 17px; }
.p-status { font-size: 13.5px; font-weight: 600; }
.p-status.good { color: var(--g-text); } .p-status.bad { color: var(--red); }
.p-course > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.p-course span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-course .bar { margin-top: 6px; }
.p-link { justify-self: start; font-size: 14px; font-weight: 600; }
.tag.red { background: var(--red-soft); color: var(--red); flex: none; }
.receipt-box { margin-top: 14px; }
.receipt-box img { width: 100%; border-radius: 18px; display: block; }

/* xodimlar */
.s-row { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; margin-bottom: 8px; border-radius: 22px; flex-wrap: wrap; }
.s-row .role-chip { margin-left: 0; }
.s-actions { display: flex; gap: 6px; margin-left: auto; }

/* texnik bo'lim: modul + darslar */
.add-wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin-bottom: 12px; border-radius: 18px; border: 1.5px dashed var(--blue); color: var(--blue-text); font-weight: 700; font-size: 15.5px; }
.add-wide svg { width: 20px; height: 20px; }
.mod { padding: 14px; margin-bottom: 12px; display: grid; gap: 8px; }
.mod.off { opacity: .7; }
.mod-head { display: flex; align-items: center; gap: 10px; }
.mod-title { flex: 1; min-width: 0; }
.mod-title b { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.mod-title small { color: var(--muted); font-size: 13px; }
.mod-actions { display: flex; gap: 6px; padding-left: 38px; }
.arrows { display: grid; gap: 0; flex: none; }
.arrows button { width: 28px; height: 20px; display: grid; place-items: center; color: var(--muted); }
.arrows button svg { width: 18px; height: 18px; }
.arrows button:disabled { opacity: .25; }
.lrow { display: flex; align-items: center; gap: 8px; padding: 10px 6px 10px 8px; border-radius: 18px; background: var(--card-2); }
.lrow.off .lrow-t { opacity: .5; }
.lrow-t { flex: 1; min-width: 0; }
.lrow-t b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.lrow-t small { color: var(--muted); font-size: 12.5px; }
.lrow .icon-btn { width: 32px; height: 32px; }
.add-lesson { justify-self: start; margin-top: 2px; }

/* tasdiqlash oynasi */
.confirm { text-align: center; padding: 4px 0 6px; }
.confirm-ico { font-size: 44px; line-height: 1; margin-bottom: 10px; }

/* =====================================================================
   O'QUVCHI: dars tugatildi — tabrik va coin (06 referensi)
   ===================================================================== */
.celebrate { text-align: center; padding-bottom: 4px; }
.confetti { font-size: 74px; line-height: 1; margin: 2px 0 10px; animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.celebrate h2 { font-size: 34px; font-weight: 800; letter-spacing: -.05em; line-height: 1.05; }
.win-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 14px; }
.win { position: relative; overflow: hidden; text-align: left; padding: 16px; min-height: 112px; border-radius: 22px; background: var(--card-2); }
.win b { display: block; position: relative; z-index: 1; font-size: 30px; font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }
.win span { position: relative; z-index: 1; font-size: 15px; font-weight: 600; }
.win.coin span { color: var(--gold); }
.win.check span { color: var(--g-text); }
.win .c1, .win .c2 { position: absolute; font-style: normal; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
.win .c1 { font-size: 46px; right: 20px; bottom: -8px; transform: rotate(-12deg); }
.win .c2 { font-size: 30px; right: 4px; top: 10px; transform: rotate(18deg); opacity: .9; }
.win .blob {
  position: absolute; right: -14px; bottom: -14px; width: 84px; height: 84px; display: grid; place-items: center;
  border-radius: 42% 58% 46% 54% / 52% 44% 56% 48%; background: linear-gradient(160deg, #8fd694, #4aa851); color: #fff;
}
.win .blob svg { width: 36px; height: 36px; stroke-width: 3; margin: -6px -6px 0 0; }
.coin-total { color: var(--muted); font-size: 15px; margin-bottom: 16px; }
.coin-total b { color: var(--gold); }
.tile-coin { font-size: 21px; line-height: 1; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-card > *, .mod > *, .a-card > * { min-width: 0; }
.p-order b { white-space: nowrap; flex: none; }
.s-row.stack .s-actions { width: 100%; margin-left: 0; padding-left: 56px; }
.s-row.stack .mini { flex: 1; justify-content: center; height: 40px; }

/* oltin tanga (emoji o'rniga — hamma qurilmada bir xil) */
.gc {
  display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.14em; font-style: normal;
  background: radial-gradient(circle at 35% 30%, #fff1b0 0 12%, #ffd257 30%, #f2a91f 62%, #d4820a 100%);
  box-shadow: inset 0 0 0 .08em rgba(180, 100, 0, .45), inset .06em .08em 0 rgba(255, 255, 255, .5);
}
.win .gc.c1, .win .gc.c2 { position: absolute; filter: drop-shadow(0 4px 6px rgba(160, 90, 0, .3)); }
.win .gc.c1 { width: 54px; height: 54px; right: 10px; bottom: -14px; }
.win .gc.c2 { width: 28px; height: 28px; right: 10px; top: 12px; }
.win.coin b, .win.coin span { max-width: 70%; }
.tile-coin .gc { width: 22px; height: 22px; }

/* ===== Ilova ichida: ro'yxatdan o'tish, video pleyer ===== */
.field .hint { color: var(--g-text); font-size: 13px; font-weight: 500; }
.link-btn { justify-self: start; color: var(--blue-text); font-weight: 600; font-size: 14.5px; padding: 4px 2px; }
.shared-phone { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--green-soft); }
.shared-phone b { color: var(--green); font-size: 17px; letter-spacing: .02em; }
.shared-phone small { color: var(--muted); font-size: 13px; }
.player { border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.player video { display: block; width: 100%; max-height: 70vh; background: #000; }
.audio-box { display: flex; align-items: center; gap: 14px; padding: 16px; }
.audio-box audio { flex: 1; min-width: 0; height: 44px; }
.status.bad { background: var(--red-soft); }

/* ===== Ko'rish rejimi belgisi ===== */
.preview-bar {
  position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 14px; border-radius: 999px;
  background: var(--strong-btn); color: var(--strong-btn-text); font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.preview-bar b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(127, 127, 127, .25); font-size: 11px; }

/* ===== Xabar yuborish: Telegram xabari ko'rinishi ===== */
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.msg-preview { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--card-2); font-size: 15px; white-space: pre-line; max-width: 92%; }
.msg-preview .msg-btn { justify-self: stretch; text-align: center; padding: 8px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-text); font-weight: 600; font-size: 14px; }

/* ===== Avatarka: ustoz rasmi (logo o'rnida) ===== */
.logo, .logo-big { position: relative; overflow: hidden; }
.logo .ava-img, .logo-big .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: 50%; }
.logo-big { width: 76px; height: 76px; box-shadow: 0 10px 26px rgba(26, 60, 120, .28); }

/* ===== Yordam chat ===== */
.chat { display: grid; gap: 8px; padding-bottom: 8px; }
.msg { max-width: 82%; padding: 10px 14px 6px; border-radius: 20px; font-size: 15.5px; line-height: 1.4; display: grid; gap: 4px; }
.msg.out { justify-self: end; background: var(--blue-btn); color: #fff; border-bottom-right-radius: 6px; }
.msg.in { justify-self: start; background: var(--card); border-bottom-left-radius: 6px; box-shadow: var(--shadow); }
.msg img { max-width: 100%; border-radius: 14px; display: block; }
.msg-text { white-space: pre-wrap; word-break: break-word; }
.msg-who { font-size: 12.5px; font-weight: 700; color: var(--blue-text); }
.msg time { font-size: 11.5px; opacity: .65; justify-self: end; }
.chat-empty { text-align: center; color: var(--muted); padding: 40px 16px; }
.chat-empty svg { width: 40px; height: 40px; opacity: .6; }
.chat-empty p { margin-top: 10px; font-size: 15px; }
.composer { position: fixed; left: 0; right: 0; bottom: calc(96px + var(--safe-bottom)); z-index: 6; max-width: 520px; margin: 0 auto; padding: 8px 16px; }
.composer-row { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border-radius: 26px; background: var(--card); box-shadow: 0 6px 22px rgba(20, 20, 40, .12); }
.composer textarea { flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: none; color: var(--text); font: inherit; font-size: 16px; line-height: 1.4; padding: 9px 4px; max-height: 120px; }
.composer-btn, .composer-send { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; cursor: pointer; }
.composer-btn { color: var(--muted); }
.composer-send { background: var(--blue-btn); color: #fff; }
.composer-send:disabled { opacity: .5; }
.composer-btn svg, .composer-send svg { width: 21px; height: 21px; }
.composer-file { margin: 0 8px 6px; padding: 8px 12px; border-radius: 14px; background: var(--card-2); font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.composer-file button { color: var(--muted); }

/* ===== Ustoz paneli ===== */
.t-group { display: grid; gap: 12px; padding: 14px 16px; margin-bottom: 10px; transition: transform .15s; }
.t-group:active { transform: scale(.98); }
.t-group-top { display: flex; align-items: center; gap: 12px; }
.t-group-top .pb { flex: 1; min-width: 0; }
.t-group-top .pb b { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.t-group-top .pb small { color: var(--muted); font-size: 14px; }
.t-group-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.t-group-meta .chip { font-size: 13px; padding: 5px 11px; }
.t-remind .t-next { display: grid; gap: 2px; }
.t-remind .t-next b { font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: var(--blue-text); }
.t-remind .t-next span { color: var(--muted); font-size: 15px; }
.row .num.today { background: var(--blue); color: #fff; }
.day-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day-pick button { height: 44px; border-radius: 14px; background: var(--card-2); font-weight: 700; font-size: 14px; color: var(--muted); transition: background .15s, color .15s; }
.day-pick button.on { background: var(--blue); color: #fff; }
.danger-text { color: var(--red) !important; }
.all-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.all-meta small { color: var(--muted); font-size: 13px; width: 100%; }
.tag.blue-tag { background: var(--blue-soft); color: var(--blue-text); }
.p-card[hidden] { display: none !important; }
.p-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.p-foot small { color: var(--muted); font-size: 12.5px; }
.p-foot .p-link { flex: none; font-size: 13.5px; }
.tabs.tabs3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
.tabs.tabs3 a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 2px; font-size: 13.5px; line-height: 1.25; }
.tabs.tabs3 .tcount { font-size: 15px; font-weight: 800; }
.tabs.tabs3 .tbadge { position: absolute; top: -6px; right: -2px; margin: 0; }
.grow .g-emoji { font-size: 24px; width: 34px; text-align: center; flex: none; }
.grow .g-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.grow .g-body b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grow .g-body small { color: var(--muted); font-size: 13px; }
.grow .g-body .bar { margin-top: 4px; display: block; }

/* ===== Bepul darslar aniq ajralib tursin ===== */
.free-tag { display: inline-block; padding: 1px 8px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-weight: 700; font-size: 12.5px; }
.lcard.free { box-shadow: inset 0 0 0 1.5px var(--green-soft), var(--shadow); }
.free-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 10px 0 0; border-radius: 18px; background: var(--green-soft); font-size: 14.5px; line-height: 1.4; }
.free-note b { color: var(--green); }

/* ===== Ranglar: qizil + ko'k asosiy, yashil — muvaffaqiyat ===== */
:root {
  --red: #e5484d;
  --red-btn: linear-gradient(180deg, #f2767a 0%, #e5484d 60%, #dc3c41 100%);
  --red-glow: 0 10px 26px rgba(229, 72, 77, .36), inset 0 1px 0 rgba(255, 255, 255, .3);
  --red-text: #d93a40;
  --red-soft: #fdeaea;
}
:root[data-theme="dark"] { --red-text: #ff7a7e; --red-soft: rgba(229, 72, 77, .18); }
.headline em { color: var(--red); }
.circle.red { background: var(--red); color: #fff; }
.circle.green { background: var(--green); color: #fff; }
.btn.red { background: var(--red-btn); box-shadow: var(--red-glow); color: #fff; }
.b-tile.accent.red { background: var(--red-btn); box-shadow: var(--red-glow); }
.tabbar a.active svg { color: var(--blue); }
.tabbar-admin a.active svg { color: var(--blue); }
.tile.red svg, .tile.red b { color: var(--red-text); }
.muted-note { display: block; margin-top: 14px; color: var(--muted); font-size: 13px; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* Yo'riqnoma (pin) */
.pill.pinned { position: relative; box-shadow: inset 0 0 0 1.5px var(--red-soft), var(--shadow); }
.pin-ic { color: var(--red); transform: rotate(35deg); display: inline-flex; }
.pin-ic svg { width: 20px; height: 20px; }
.guide-ic { width: 76px; height: 76px; margin: 4px auto 14px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red-btn); box-shadow: var(--red-glow); color: #fff; }
.guide-ic svg { width: 34px; height: 34px; }
.steps-list { padding: 6px 16px; }
.steps-list .sl { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.steps-list .sl:last-child { border-bottom: 0; }
.steps-list .n { flex: none; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-text); font-weight: 800; font-size: 14px; }
.steps-list p { font-size: 15px; line-height: 1.45; padding-top: 4px; }

/* Daraja kartasi */
.level-card { display: block; padding: 16px 18px; margin-bottom: 10px; }
.lv-top { display: flex; align-items: center; gap: 12px; }
.lv-num { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; font-weight: 800; font-size: 20px;
  color: #fff; background: var(--blue-btn); box-shadow: var(--blue-glow); }
.lv-top .pb { flex: 1; min-width: 0; }
.lv-top .pb small { display: block; color: var(--muted); font-size: 13px; }
.lv-top .pb b { font-size: 17px; }
.streak { display: inline-flex; align-items: center; gap: 3px; padding: 6px 11px; border-radius: 999px; font-weight: 800; font-size: 15px;
  background: var(--card-2); color: var(--muted); }
.streak svg { width: 18px; height: 18px; }
.streak.on { background: var(--red-soft); color: var(--red-text); }
.streak.on svg { fill: var(--red); stroke: var(--red); }
.lv-bar { height: 10px; border-radius: 99px; background: var(--card-2); overflow: hidden; margin: 14px 0 10px; }
.lv-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--red)); }
.lv-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 600; }
.lv-foot .gc { width: 14px; height: 14px; vertical-align: -2px; }

/* Jonli dars */
.live-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--red-text); background: var(--red-soft); padding: 3px 9px; border-radius: 8px; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.live-card { display: block; padding: 15px 18px; margin-bottom: 10px; }
.live-card .lc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-card .lc-top small, .live-card .lc-foot small { color: var(--muted); font-size: 13px; }
.live-card > b { display: block; font-size: 17px; margin: 8px 0; }
.live-card .lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.live-card.off { opacity: .85; }
.tk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 9px; }
.tk svg { width: 16px; height: 16px; }
.tk.ok { background: var(--green-soft); color: var(--green); }
.tk.no { background: var(--red-soft); color: var(--red-text); }
.ticket { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-top: 8px; }
.ticket .t-ic { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; color: #fff; flex: none; }
.ticket.ok .t-ic { background: var(--green); }
.ticket.no .t-ic { background: var(--red); }
.ticket .pb small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.4; margin-top: 2px; }
.tk-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 4px; }
.tk-dot.ok { background: var(--green); }
.tk-dot.no { background: var(--red); }

/* Vazifa (test) */
.quiz { padding: 16px; margin-bottom: 10px; }
.quiz > b { display: block; margin-bottom: 10px; font-size: 16px; }
.opt { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--card-2); margin-top: 8px; font-size: 15px; }
.opt.on { background: var(--blue-soft); color: var(--blue-text); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--blue); }
.opt.right { background: var(--green-soft); color: var(--green); font-weight: 700; box-shadow: none; }
.opt.wrong { background: var(--red-soft); color: var(--red-text); box-shadow: none; }
.q-edit { padding: 14px; margin-bottom: 10px; display: grid; gap: 8px; }
.q-head { display: flex; align-items: center; justify-content: space-between; }
.q-opt { display: flex; gap: 8px; align-items: center; }
.q-opt .input { flex: 1; }
.q-ok { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--card-2); color: var(--muted); font-weight: 800; }
.q-ok.on { background: var(--green); color: #fff; }

/* Reyting va nishonlar */
.my-place { text-align: center; margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.my-place b { color: var(--red-text); font-size: 17px; }
.rank .rk { width: 34px; text-align: center; font-weight: 800; font-size: 17px; flex: none; color: var(--muted); }
.rank.me { background: var(--blue-soft); border-radius: 14px; }
.badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bdg { padding: 14px; text-align: center; opacity: .45; filter: grayscale(1); }
.bdg.on { opacity: 1; filter: none; box-shadow: inset 0 0 0 1.5px var(--blue-soft), var(--shadow); }
.bdg .bi { font-size: 30px; display: block; line-height: 1.2; }
.bdg b { display: block; font-size: 14.5px; margin-top: 6px; }
.bdg small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.rank.me { padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.done-line { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--green); font-size: 13.5px; font-weight: 600;
  margin-bottom: 8px; text-align: center; line-height: 1.35; }
.done-line svg { width: 16px; height: 16px; flex: none; }
.next-ask { text-align: center; margin: 16px 0 14px; }
.next-ask b { display: block; font-size: 18px; }
.next-ask small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.done-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-weight: 700; font-size: 12.5px; vertical-align: 1px; }
.done-chip svg { width: 13px; height: 13px; }

/* =====================================================================
   KATTA EKRAN (noutbuk / kompyuter / ochilgan oyna)
   Telefon ko'rinishi o'zgarmaydi — faqat keng oynada menyu chapga o'tadi
   ===================================================================== */
@media (min-width: 640px) {
  .view { max-width: 640px; }
  .bottom, .composer, .sheet { max-width: 600px; }
  .tabbar { max-width: 560px; }
  .badges { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  :root { --side: 248px; }
  /* Menyu — chap tomonda, ekran balandligi bo'ylab */
  .tabbar {
    top: 16px; bottom: 16px; left: 16px; transform: none; width: calc(var(--side) - 16px); max-width: none;
    display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 28px;
    grid-template-columns: none !important;
  }
  .tabbar::after {
    content: "Nodir ona tili"; order: -1; display: flex; align-items: center; height: 44px; padding: 0 8px 0 56px; margin: 2px 0 14px;
    font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text);
  }
  .tabbar::before {
    content: ""; position: absolute; top: 20px; left: 20px; width: 38px; height: 38px; border-radius: 50%;
    background: var(--blue) url("teacher.webp") center 20% / cover no-repeat;
  }
  .tabbar a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; font-size: 15px; }
  .tabbar a:hover:not(.active) { background: var(--card-2); }
  .tabbar a svg, .tabbar-admin svg.i { width: 22px; height: 22px; }
  .tabbar-admin .nbadge { top: 50%; right: 12px; transform: translateY(-50%); }

  /* Kontent — menyudan o'ngda, markazda */
  body:has(.tabbar:not([hidden])) { padding-left: var(--side); }
  body:has(.tabbar:not([hidden])) .appbar > .logo,
  body:has(.tabbar:not([hidden])) .appbar > b { display: none; } /* logo menyuda turadi */
  body:has(.tabbar:not([hidden])) .appbar { min-height: 20px; padding: 14px 2px 0; }
  .view { max-width: 820px; padding: 8px 36px 60px; }
  .view.with-bottom { padding-bottom: 130px; }
  .back-bar { margin: 0 -36px 8px; padding: 16px 36px 8px; }
  .headline { font-size: 46px; margin-top: 22px; }
  .title h1 { font-size: 36px; }

  /* Pastdagi tugma va chat maydoni — kontent ustunida */
  body:has(.tabbar:not([hidden])) .bottom,
  body:has(.tabbar:not([hidden])) .composer { left: var(--side); }
  .bottom { bottom: 18px; max-width: 560px; padding: 0 16px; }
  .composer { bottom: 14px; max-width: 760px; }
  .toast { bottom: 110px; }
  body:has(.tabbar:not([hidden])) .toast { left: calc(50% + var(--side) / 2); }

  /* Oyna (modal) — pastdan emas, ekran o'rtasida */
  .sheet {
    top: 0; bottom: 0; margin: auto; height: fit-content; max-height: 86vh; max-width: 560px;
    border-radius: 32px; padding-bottom: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); animation: pop .22s ease;
  }
  .sheet .grip { visibility: hidden; }
  @keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

  /* Kengroq to'rlar */
  .bento { grid-template-columns: repeat(4, 1fr); }
  .b-photo { grid-row: span 2; aspect-ratio: auto; min-height: 340px; }
  .b-wide { grid-column: span 2; }
  .fgrid { grid-template-columns: repeat(4, 1fr); }
  .badges { grid-template-columns: repeat(4, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .p-list { grid-template-columns: 1fr 1fr; }
  .player video { max-height: 62vh; }
  .chooser { max-width: 520px; margin: 0 auto; padding-top: 10vh; }
}

@media (min-width: 1300px) {
  :root { --side: 270px; }
  .view { max-width: 960px; }
}

/* Sichqoncha bilan ishlaganda kichik qulayliklar */
@media (hover: hover) {
  .card.pill:hover, .lcard:hover, .live-card:hover, .grow:hover { filter: brightness(.98); }
  :root[data-theme="dark"] .card.pill:hover, :root[data-theme="dark"] .lcard:hover, :root[data-theme="dark"] .live-card:hover { filter: brightness(1.08); }
  .btn:hover { filter: brightness(1.04); }
}

/* =====================================================================
   O'QUVCHI PANELI — rangliroq: qizil + ko'k aralash, yashil — muvaffaqiyat
   ===================================================================== */
body.student {
  background:
    radial-gradient(60% 38% at 0% 0%, rgba(78, 162, 246, .16) 0%, transparent 70%),
    radial-gradient(55% 34% at 100% 0%, rgba(229, 72, 77, .13) 0%, transparent 70%),
    var(--page);
  background-attachment: fixed;
}
body.student .title h1 { background: linear-gradient(90deg, var(--text) 55%, var(--red) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Kulrang doiralar o'rniga rangli */
body.student .card.pill .circle:not(.blue):not(.red):not(.green) { background: var(--blue-soft); color: var(--blue-text); }
body.student a.card.pill:nth-of-type(even) .circle:not(.blue):not(.red):not(.green) { background: var(--red-soft); color: var(--red-text); }
body.student .circle.tint { font-size: 24px; }

/* Plitkalar: ikonalar rangli, bento kartalari aralash */
body.student .b-tile:not(.accent) svg { color: var(--blue-text); }
body.student .bento > .b-tile:nth-child(4) { background: var(--blue-btn); color: #fff; box-shadow: var(--blue-glow); }
body.student .bento > .b-tile:nth-child(4) svg, body.student .bento > .b-tile:nth-child(4) small { color: rgba(255, 255, 255, .9); }
body.student .bento > .b-tile:nth-child(5) svg { color: var(--red-text); }
body.student .tile svg { color: var(--blue-text); }
body.student .tile:nth-child(2) svg, body.student .tile:nth-child(2) b { color: var(--red-text); }

/* Progress chiziqlari: ko'kdan qizilga */
body.student .bar > i { background: linear-gradient(90deg, var(--blue), var(--red)); }

/* Profil avatari va kurs sarlavhasi */
body.student .me .ava:not([style]) { background: linear-gradient(135deg, var(--blue) 0%, var(--red) 100%); }
body.student .course-head { position: relative; overflow: hidden; }
body.student .course-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--red)); }
body.student .tabs a.on { color: var(--blue-text); }

/* Dars kartalari: bepul — qizil belgi, tugatilgan — yashil */
body.student .free-tag { background: var(--red-soft); color: var(--red-text); }
body.student .lcard.locked { opacity: .8; }

/* Pastki menyu: faol bo'lim ko'k fon, ikonka ko'k */
/* --cut — ikonka ichidagi o'yiq (uchburchak, tabassum) rangi: fon bilan bir xil va shaffof emas bo'lishi shart */
body.student { --tab-on: #e7f1fd; }
:root[data-theme="dark"] body.student { --tab-on: #303d4e; }
body.student .tabbar a.active { background: var(--tab-on); color: var(--blue-text); --cut: var(--tab-on); }
body.student .tabbar a.active svg { color: var(--blue); }

/* Profil: elementlar orasida joy (tiqilib qolmasin) */
.me { margin-bottom: 20px; }
.me .coin-chip { align-self: center; }
.pill.pinned { margin-bottom: 4px; }
.level-card { margin-bottom: 4px; }
.glist + .label, .level-card + .label, .pill + .label { margin-top: 30px; }
.segment { margin-bottom: 4px; }

/* Reyting bo'limi ichidagi tablar */
.tabs.page-tabs { margin: 0 0 16px; }

/* O'quvchi menyusi — 5 ta bo'lim */
#tabbar { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 899px) { #tabbar a { font-size: 11.5px; padding: 9px 0 7px; white-space: nowrap; } #tabbar a svg { width: 24px; height: 24px; } }
.tabs.page-tabs a { font-size: 13.5px; padding: 10px 2px; }

/* Do'kon: coin evaziga sovg'alar (07-dokon referensi — kartalar to'ri, quvnoq ranglar) */
.shop-balance { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px 2px; padding: 8px 14px; border-radius: 999px;
  background: var(--gold-soft); }
.shop-balance span { color: var(--muted); font-weight: 600; font-size: 14px; }
.shop-balance b { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-size: 16px; }
.shop-balance .gc { width: 18px; height: 18px; }
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop-item { display: flex; flex-direction: column; padding: 8px 8px 10px; border-radius: 24px; }
.shop-item .s-pic { aspect-ratio: 1 / .8; border-radius: 18px; display: grid; place-items: center; font-size: 54px; line-height: 1; margin-bottom: 10px; }
.shop-item.t0 .s-pic { background: linear-gradient(145deg, #ffd9da, #ffb3b6); }
.shop-item.t1 .s-pic { background: linear-gradient(145deg, #d6e9ff, #a9d0ff); }
.shop-item.t2 .s-pic { background: linear-gradient(145deg, #d9f3db, #ade3b2); }
.shop-item.t3 .s-pic { background: linear-gradient(145deg, #fff0cc, #ffd98a); }
.shop-item b { font-size: 15px; line-height: 1.3; padding: 0 6px; letter-spacing: -.01em; }
.shop-item small { color: var(--muted); font-size: 13px; padding: 2px 6px 0; }
.shop-item.can small { color: var(--green); font-weight: 600; }
/* Narx — har doim kartaning eng pastida, hammasi bir tekisda; oq tugma */
.shop-item .s-price { margin-top: auto; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; color: #2a2840; font-weight: 800; font-size: 15.5px; box-shadow: 0 2px 8px rgba(20, 20, 40, .08); }
.shop-item small { margin-bottom: 10px; }
.shop-item .s-price .gc { width: 17px; height: 17px; }
.shop-item.can .s-price { background: var(--blue-btn); color: #fff; box-shadow: var(--blue-glow); }
@media (min-width: 900px) { .shop { grid-template-columns: repeat(4, 1fr); } }

.badge.free { background: var(--red-soft); color: var(--red-text); margin-top: 0; padding: 1px 8px; }

/* ===== Sinov imtihoni (08-sinov-imtihoni referensi) ===== */
.btn.green { background: var(--green); color: #fff; box-shadow: none; }
.ex-task { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; margin-bottom: 10px; }
.ex-ic { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-text); }
.ex-ic svg { width: 22px; height: 22px; }
.ex-ic.sm { width: 32px; height: 32px; border-radius: 10px; background: var(--card-2); color: var(--muted); }
.ex-ic.sm svg { width: 18px; height: 18px; }
.ex-task .pb { flex: 1; min-width: 0; }
.ex-task .pb b { display: block; font-size: 16px; line-height: 1.3; }
.ex-task .pb small { color: var(--muted); font-size: 13.5px; }
.ex-coin { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 800; flex: none; }
.ex-coin .gc { width: 17px; height: 17px; }
.ex-play { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; }
.ex-done { padding: 4px 16px; }
.ex-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.ex-row + .ex-row { border-top: 1px solid var(--line); }
.ex-row b { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; }
.ex-row .pct { font-size: 17px; }

/* Savol oynasi */
.ex-top { display: flex; align-items: center; gap: 14px; padding: 16px 2px 14px; position: sticky; top: 0; z-index: 5; background: var(--page); }
.ex-x { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font-size: 19px; }
.ex-bars { flex: 1; display: flex; gap: 5px; }
.ex-bars i { flex: 1; height: 7px; border-radius: 6px; background: var(--card-2); transition: background .3s; }
.ex-bars i.on { background: var(--blue); }
.ex-n { color: var(--muted); font-size: 13px; font-weight: 700; flex: none; }
.ex-card { padding: 22px 18px 20px; border: 1.5px solid transparent; transition: border-color .25s; }
.ex-card.ok { border-color: var(--green); }
.ex-card.bad { border-color: var(--red); }
.ex-topic { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ex-q { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; margin: 8px 0 18px; }
.ex-opts { display: grid; gap: 10px; }
.ex-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; min-height: 54px;
  padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); font-size: 16px; transition: border-color .15s, background .15s; }
.ex-opt.sel { border-color: var(--blue); background: var(--blue-soft); }
.ex-opt.right { border-color: var(--green); background: var(--green-soft); }
.ex-opt.right em::after { content: "✓"; color: var(--green); font-style: normal; font-weight: 800; font-size: 18px; }
.ex-opt.wrong { border-color: var(--red); background: var(--red-soft); }
.ex-opt.wrong em::after { content: "✕"; color: var(--red); font-style: normal; font-weight: 800; }
.ex-opt:disabled { cursor: default; color: var(--text); }
.ex-why { margin-top: 14px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; }
.ex-why.ok { background: var(--green-soft); }
.ex-why.bad { background: var(--red-soft); }
.ex-why b { display: block; margin-bottom: 2px; }
.ex-why.ok b { color: var(--green); }
.ex-why.bad b { color: var(--red-text); }
.ex-why p { color: var(--text); }
.ex-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.ex-actions .btn { width: 100%; }
.ex-actions.col { flex-direction: column; gap: 10px; }
.btn.dark[disabled] { background: var(--card-2); color: var(--muted); opacity: 1; }
@media (min-width: 640px) { .ex-actions:not(.col) .btn { width: 240px; } .ex-card { padding: 30px 32px 28px; } }

/* Natija */
.ex-result { text-align: center; }
.ex-result h2 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin-top: 14px; }
.ex-ring { --c: var(--blue); width: 120px; height: 120px; margin: 6px auto 0; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--card-2) 0); }
.ex-ring b { width: 94px; height: 94px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-size: 26px; font-weight: 800; }
.ex-ring.g { --c: var(--green); } .ex-ring.o { --c: var(--gold); } .ex-ring.r { --c: var(--red); }
body:has(#preview-bar) .ex-top { padding-right: 150px; }

.tabs.course-filter { margin: 0 0 12px; }
.tabs.course-filter a { cursor: pointer; }

/* ===== Kurslar ro'yxati — quvnoq ranglar (har karta o'z rangida) ===== */
#c-list .card.pill { --tint: 229, 72, 77; --pic: linear-gradient(145deg, #ffd9da, #ff9fa3);
  background: linear-gradient(120deg, rgba(var(--tint), .20) 0%, rgba(var(--tint), .06) 55%, var(--card) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--tint), .22), var(--shadow); }
#c-list .card.pill:nth-child(4n+2) { --tint: 78, 162, 246; --pic: linear-gradient(145deg, #d6e9ff, #8fc2ff); }
#c-list .card.pill:nth-child(4n+3) { --tint: 90, 168, 96; --pic: linear-gradient(145deg, #d9f3db, #93d99a); }
#c-list .card.pill:nth-child(4n+4) { --tint: 233, 162, 59; --pic: linear-gradient(145deg, #fff0cc, #ffcf6b); }
body.student #c-list .card.pill .circle { background: var(--pic) !important; font-size: 26px; box-shadow: 0 6px 16px rgba(var(--tint), .35); }
#c-list .card.pill .chev { color: rgb(var(--tint)); }
#c-list .badge.free { background: #fff; color: var(--red); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }

/* Filtr: tanlangan tugma rangli */
.tabs.course-filter a.on[data-f="paid"] { background: var(--blue-btn); color: #fff; box-shadow: var(--blue-glow); }
.tabs.course-filter a.on[data-f="free"] { background: var(--red-btn); color: #fff; box-shadow: var(--red-glow); }

/* ===== Himoya ===== */
/* Matn va rasmlarni belgilab nusxalab, rasmni bosib turib saqlab bo'lmaydi */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
img, video { -webkit-user-drag: none; -webkit-touch-callout: none; }
#c-list .pill .pb small.free-sub { color: var(--red-text); font-weight: 600; font-size: 14px; margin-top: 3px; }
#c-list .pill { padding-top: 16px; padding-bottom: 16px; }

/* ===== Material papkasi ichi — fayl plitkalari (darslar ro'yxatidan farqli) ===== */
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mtile { display: flex; flex-direction: column; padding: 10px 10px 14px; border-radius: 24px; }
.mtile .m-doc { position: relative; aspect-ratio: 1 / .78; border-radius: 18px; display: grid; place-items: center; margin-bottom: 12px;
  background: linear-gradient(145deg, #d6e9ff, #9cc8ff); color: #2f7fe0; }
.mtile.k-text .m-doc { background: linear-gradient(145deg, #d9f3db, #9fdca6); color: #3f8f47; }
.mtile.k-video .m-doc { background: linear-gradient(145deg, #ffd9da, #ffa6a9); color: #d93a40; }
.mtile.k-audio .m-doc { background: linear-gradient(145deg, #fff0cc, #ffd27a); color: #c47d10; }
.mtile .m-doc > svg { width: 46px; height: 46px; --g: rgba(255, 255, 255, .9); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12)); }
.mtile .m-done, .mtile .m-lock { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--green); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.mtile .m-lock { color: var(--muted); }
.mtile .m-done svg, .mtile .m-lock svg { width: 15px; height: 15px; }
.mtile b { font-size: 15px; line-height: 1.3; padding: 0 4px; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mtile small { color: var(--muted); font-size: 13px; padding: 4px 4px 0; margin-top: auto; }
.mtile.locked { opacity: .65; }
@media (min-width: 900px) { .mgrid { grid-template-columns: repeat(3, 1fr); } }
button.s-price { width: 100%; border: 0; font: inherit; font-weight: 800; cursor: pointer; }
button.s-price:disabled { cursor: default; opacity: 1; }
.tag.ok { background: var(--green-soft); color: var(--green); }
.grow .tag:not(.ok) { background: var(--gold-soft); color: var(--gold); flex: none; }

/* Yordam chat: ovozli xabar */
.composer-row.rec { align-items: center; padding: 6px 6px 6px 16px; gap: 10px; }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red); animation: pulse 1.2s ease-in-out infinite; flex: none; }
.composer-row.rec b { font-variant-numeric: tabular-nums; font-size: 16px; }
.rec-hint { flex: 1; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-cancel { color: var(--red-text); font-weight: 600; font-size: 15px; padding: 0 6px; }
.msg-voice { display: block; width: 240px; max-width: 100%; height: 40px; margin: 2px 0; }
.tag.no { background: var(--red-soft); color: var(--red-text); }
.sg-t { font-weight: 500 !important; font-size: 15px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tabs.course-filter a.on[data-f="lib"] { background: var(--green); color: #fff; box-shadow: none; }
.tabs.course-filter a { font-size: 14px; }
#c-list .fgrid { margin-top: 2px; }
.composer.inline { position: static; max-width: none; padding: 0; margin: 0; }
.composer.inline .composer-row { box-shadow: var(--shadow); }
.ex-step { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: var(--blue-soft); color: var(--blue-text); }
.ex-step svg { width: 20px; height: 20px; }
.ex-task.done .ex-step { background: var(--green-soft); color: var(--green); }
.ex-task.locked { opacity: .6; }
.ex-task.locked .ex-step { background: var(--card-2); color: var(--muted); }
.ex-play.off { background: var(--card-2); color: var(--muted); }
.ex-play.off svg { width: 20px; height: 20px; }
.ex-task .pct { font-size: 17px; flex: none; }

/* Pastdagi asosiy tugma ("Darsni tugatdim" va h.k.) — kontent kartalari bilan bir xil kenglikda (bento) */
@media (min-width: 900px) {
  .bottom { max-width: 820px; padding: 0 36px; }
  .bottom .btn { border-radius: var(--radius); }
}
@media (min-width: 1300px) { .bottom { max-width: 960px; } }

/* Kurslar ro'yxati — to'liq rangli kartalar (oq matn), ikkala rejimda */
#c-list .card.pill {
  background: linear-gradient(120deg, rgb(var(--tint)) 0%, rgba(var(--tint), .82) 100%);
  box-shadow: 0 10px 24px rgba(var(--tint), .28);
}
#c-list .card.pill:nth-child(4n+1) { --tint: 229, 72, 77; }
#c-list .card.pill:nth-child(4n+2) { --tint: 61, 143, 232; }
#c-list .card.pill:nth-child(4n+3) { --tint: 72, 160, 82; }
#c-list .card.pill:nth-child(4n+4) { --tint: 226, 146, 30; }
#c-list .card.pill .pb b,
#c-list .card.pill .pb small,
#c-list .card.pill .price,
#c-list .card.pill .chev { color: #fff; }
#c-list .card.pill .pb small { opacity: .9; }
body.student #c-list .card.pill .circle { background: rgba(255, 255, 255, .95) !important; box-shadow: none; }
#c-list .card.pill .badge { background: rgba(255, 255, 255, .22); color: #fff; }
#c-list .pill .pb small.free-sub { color: #fff; }

/* Yorug' rejimda tablar ko'rinsin: fon to'qroq, tanlangani rangli */
:root:not([data-theme="dark"]) .tabs { background: #e4e4eb; }
:root:not([data-theme="dark"]) .tabs a { color: #6e6d7a; }
body.student .tabs.page-tabs a.on, body.student .course-head .tabs a.on { background: var(--blue-btn); color: #fff; box-shadow: var(--blue-glow); }

/* Bepul — yashil: filtr, bepul dars kartalari va belgilar */
.tabs.course-filter a.on[data-f="free"] { background: linear-gradient(180deg, #6cc474 0%, #4fae58 100%); color: #fff; box-shadow: 0 10px 24px rgba(79, 174, 88, .35); }
.tabs.course-filter a.on[data-f="lib"] { background: var(--red-btn); color: #fff; box-shadow: var(--red-glow); }
#c-list .card.pill.free-card { --tint: 72, 160, 82 !important; }
#c-list .card.pill.free-card:nth-child(even) { --tint: 52, 140, 66 !important; }
.free-tag, body.student .free-tag, .badge.free { background: var(--green-soft); color: var(--green); }

/* Telefonda 5 ta bo'lim: yozuvlar tiqilmasin */
@media (max-width: 899px) {
  #tabbar { padding: 6px; gap: 2px; }
  #tabbar a { font-size: 10.5px; letter-spacing: -.02em; padding: 9px 3px 7px; gap: 3px; }
  #tabbar a.active { font-weight: 600; }
}
@media (max-width: 360px) { #tabbar a { font-size: 9.5px; } }
/* Kurslar filtri: 4 ta tanlov — telefonda 2×2 */
.tabs.course-filter { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .tabs.course-filter { grid-template-columns: repeat(4, 1fr); } }
.tabs.course-filter a.on[data-f="mine"] { background: linear-gradient(180deg, #f5b84e 0%, #e2921e 100%); color: #fff; box-shadow: 0 10px 24px rgba(226, 146, 30, .35); }
#c-list .card.pill .bar { background: rgba(255, 255, 255, .3); }
body.student #c-list .card.pill .bar > i { background: #fff; }

/* ===== Profil — bento uslubi (ixcham kartalar to'ri) ===== */
.pbento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pbento .wide, .pb-me { grid-column: span 2; }
.pb-me { display: flex; align-items: center; gap: 14px; padding: 16px; }
.pb-me .ava { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 22px; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, var(--blue), var(--red)); background-size: cover; background-position: center; }
.pb-who { flex: 1; min-width: 0; }
.pb-who h2 { font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.pb-who small { color: var(--muted); font-size: 14px; }
.pb-coin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex: none;
  min-width: 74px; padding: 10px 12px; border-radius: 20px; background: var(--gold-soft); color: var(--gold); }
.pb-coin .gc { width: 22px; height: 22px; }
.pb-coin b { font-size: 18px; font-weight: 800; line-height: 1.1; }
.pb-coin small { font-size: 11.5px; font-weight: 600; opacity: .85; }

.pb-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 128px;
  padding: 14px 16px 16px; border-radius: var(--radius); color: #fff; overflow: hidden; transition: transform .15s; }
.pb-tile:active { transform: scale(.97); }
.pb-tile.tall { grid-row: span 2; min-height: 266px; }
.pb-tile.red { background: var(--red-btn); box-shadow: var(--red-glow); }
.pb-tile.blue { background: var(--blue-btn); box-shadow: var(--blue-glow); }
.pb-tile.gold { background: linear-gradient(135deg, #f7c35d 0%, #e9a23b 100%); box-shadow: 0 10px 24px rgba(233, 162, 59, .3); }
.pb-tile.light { color: var(--text); }
.pb-tile b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.pb-tile small { font-size: 13.5px; opacity: .88; line-height: 1.35; }
.pb-tile.light small { color: var(--muted); opacity: 1; }
.pb-ic { position: absolute; top: 14px; left: 14px; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); font-size: 22px; }
.pb-ic svg { width: 24px; height: 24px; }
.pb-ic.red { background: var(--red); color: #fff; }
.pb-ic.blue { background: var(--blue); color: #fff; }
.pb-tile.tall .pb-ic { width: 56px; height: 56px; border-radius: 18px; }
.pb-tile.tall .pb-ic svg { width: 30px; height: 30px; }
.pb-tile.tall b { font-size: 21px; }
.pb-pin { position: absolute; top: 16px; right: 16px; transform: rotate(35deg); opacity: .9; }
.pb-pin svg { width: 20px; height: 20px; }
/* keng qator kartalar: ikonka — matn — › */
.pb-tile.wide { flex-direction: row; align-items: center; min-height: 0; padding: 14px 16px; gap: 12px; }
.pb-tile.wide .pb-ic { position: static; flex: none; }
.pb-tile.wide .pb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pb-tile.wide .chev { color: currentColor; opacity: .8; }
.pb-theme { padding: 12px 12px 12px; }
.pb-theme > small { display: block; color: var(--muted); font-weight: 600; font-size: 13px; margin: 0 4px 8px; }
.pb-theme .segment { box-shadow: none; background: var(--card-2); }
@media (min-width: 900px) {
  .pbento { grid-template-columns: repeat(4, 1fr); }
  .pb-me { grid-column: span 4; }
  .pbento .wide { grid-column: span 2; }
}

/* Profil bento — kartalar to'liq to'r bo'lib, bo'sh joy qolmasin */
.pbento { grid-template-areas: "me me" "guide live" "guide chat" "sugg sugg" "theme theme" "switch switch"; }
.pa-me { grid-area: me !important; } .pa-guide { grid-area: guide !important; } .pa-live { grid-area: live !important; }
.pa-chat { grid-area: chat !important; } .pa-sugg { grid-area: sugg !important; } .pa-theme { grid-area: theme !important; }
.pa-switch { grid-area: switch !important; }
.pb-tile.tall { min-height: 0; }
@media (min-width: 900px) {
  .pbento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto;
    grid-template-areas: "me me me me" "guide live chat theme" "guide sugg sugg theme" "switch switch switch switch"; }
  .pa-live, .pa-chat { min-height: 150px; }
  .pa-theme { display: flex; flex-direction: column; }
  .pa-theme .segment { grid-template-columns: 1fr; flex: 1; align-content: center; }
  .pa-theme .segment button { justify-content: flex-start; padding: 0 14px; }
}
.pill-stack { display: grid; gap: 12px; } .pill-stack > .pill { margin: 0; }

/* Ustoz/admin menyusi (telefon): yozuvlar tugma chetiga tegmasin */
@media (max-width: 899px) {
  #tabbar-admin { padding: 6px; gap: 2px; }
  #tabbar-admin a { font-size: 11px; letter-spacing: -.02em; padding: 9px 4px 7px; gap: 3px; white-space: nowrap; }
  #tabbar-admin a.active { font-weight: 600; }
  #tabbar-admin svg.i { width: 22px; height: 22px; }
}
@media (max-width: 360px) { #tabbar-admin a { font-size: 10px; } }

/* ===== Ustoz chati — Telegram uslubida ===== */
.tg-list { padding: 4px 0; overflow: hidden; }
.tg-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; transition: background .15s; }
.tg-row:hover, .tg-row:active { background: var(--card-2); }
.tg-row + .tg-row .tg-mid { border-top: 1px solid var(--line); }
.tg-ava { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; }
.tg-ava.sm { width: 40px; height: 40px; font-size: 15px; }
.tg-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 4px 0; }
.tg-mid b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-mid small { color: var(--muted); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-mid small i { font-style: normal; color: var(--blue-text); }
.tg-end { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; align-self: flex-start; padding-top: 6px; }
.tg-end time { color: var(--muted); font-size: 12.5px; }
.tg-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: grid; place-items: center; background: var(--blue); color: #fff;
  font-style: normal; font-size: 12.5px; font-weight: 700; }
.tg-head { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 10px; margin: 0 -16px 10px; padding: 10px 16px;
  background: var(--card); box-shadow: 0 1px 0 var(--line); }
.tg-back { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--blue-text); }
.tg-head .tg-mid small { font-size: 13px; }
.tg-composer { bottom: calc(14px + var(--safe-bottom)); }
@media (min-width: 900px) { .tg-head { margin: 0 -36px 10px; padding: 12px 36px; } }