/* ============================================================
   ILM ACADEMY — ko'rinish.  Rang tamoyili: ko'k + tilla + oq
   (ILM-UI-Design-System.md asosida, to'q rejim)
   ============================================================ */
:root{
  --bg:#061527; --bg2:#0A1F3A;
  --card:#0F2A4A; --card2:#143761; --card3:#1A4478;
  --line:rgba(255,255,255,.09);
  --blue:#1A5A9E; --blue7:#123E73; --blue-l:#2E7DD6;
  --gold:#D4AF37; --gold2:#E9CB6A; --gold3:#F4DC8A; --on-gold:#2A2105;
  --text:#FFFFFF; --text2:#B7CBE3; --hint:#7F9BBC;
  --red:#E63946; --ok:#D4AF37;
  --g-blue:linear-gradient(150deg,#1F6BB8 0%,#0E3A6E 88%);
  --g-deep:linear-gradient(150deg,#164A85 0%,#071A33 100%);
  --g-gold:linear-gradient(135deg,#F4DC8A 0%,#D4AF37 58%,#B8921E 100%);
  --g-hero:radial-gradient(900px 620px at 88% 6%, #1F5FA6 0%, #0E3564 48%, #061527 100%);
  --r:22px; --r2:16px;
  --ui:-apple-system,"SF Pro Text","Segoe UI",Roboto,Inter,system-ui,sans-serif;
  --ar:"Sakkal Majalla","Traditional Arabic","Noto Naskh Arabic","Amiri",serif;
  --nav:82px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--ui); font-size:16px;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
#app{max-width:480px; margin:0 auto; min-height:100vh; position:relative; background:var(--g-hero)}
#view{padding:18px 14px calc(var(--nav) + 24px)}

/* Planshet va kompyuterda kengroq ochiladi — tor ustunda o'qish noqulay */
@media (min-width:620px){
  #app{max-width:660px}
  #view{padding:22px 22px calc(var(--nav) + 28px)}
  #nav{max-width:636px}
}
@media (min-width:900px){
  #app{max-width:840px}
  #view{padding:26px 28px calc(var(--nav) + 30px)}
  #nav{max-width:816px}
}
.ar{font-family:var(--ar); direction:rtl}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer}
a{color:var(--gold2)}

/* ---- sarlavha ---- */
.top{display:flex; align-items:center; gap:10px; margin:6px 0 18px; min-height:36px}
.top h1{font-size:30px; font-weight:600; letter-spacing:-.015em; margin:0; line-height:1.1; flex:1}
.top .sub{font-size:14px; color:var(--hint); margin-top:4px; font-weight:500}
.back{
  width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:var(--card);
  display:grid; place-items:center; font-size:20px; flex:none;
}
.kicker{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold2); font-weight:600}
h2.sec{font-size:17px; font-weight:600; color:var(--text2); margin:26px 0 10px}

/* ---- kartalar ---- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.25); margin-bottom:12px; position:relative; overflow:hidden;
}
.card.blue{background:var(--g-blue); border-color:rgba(255,255,255,.12)}
.card.deep{background:var(--g-deep)}
.card.gold{background:var(--g-gold); color:var(--on-gold); border-color:transparent}
.card.gold .kicker,.card.gold .hint{color:rgba(42,33,5,.7)}
.card.tap{cursor:pointer; transition:transform .12s}
.card.tap:active{transform:scale(.985)}
.card .big{font-size:56px; font-weight:700; letter-spacing:-.02em; line-height:1}
.card .t{font-size:21px; font-weight:600; line-height:1.2; margin:4px 0}
.card .d{font-size:14.5px; color:var(--text2); line-height:1.35}
.card.gold .d{color:rgba(42,33,5,.75)}
.hint{color:var(--hint); font-size:13.5px}
.row{display:flex; align-items:center; gap:12px}
.grow{flex:1; min-width:0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.chev{color:var(--hint); font-size:22px; flex:none}
.card.gold .chev{color:rgba(42,33,5,.6)}

/* ---- profil ---- */
.avatar{
  width:64px; height:64px; border-radius:50%; background:var(--card3); display:grid; place-items:center;
  font-size:26px; font-weight:700; color:var(--gold2); flex:none; position:relative;
}
.avatar::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:3px solid var(--gold); opacity:.85}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:20px; font-size:13px;
  font-weight:600; background:rgba(255,255,255,.12); border:1px solid var(--line); margin:4px 6px 0 0;
}
.pill.gold{background:var(--gold); color:var(--on-gold); border-color:transparent}
.pill.blue{background:var(--blue-l); color:#fff}
.stats{display:flex; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.stats div{flex:1; text-align:center}
.stats div+div{border-left:1px solid var(--line)}
.stats b{display:block; font-size:22px; font-weight:700}
.stats span{font-size:12.5px; color:var(--text2)}

/* ---- progress ---- */
.bar{height:8px; background:rgba(255,255,255,.12); border-radius:6px; overflow:hidden; margin-top:10px}
.bar i{display:block; height:100%; background:var(--g-gold); border-radius:6px; transition:width .5s}
.card.gold .bar{background:rgba(42,33,5,.18)} .card.gold .bar i{background:#2A2105}

/* ---- tugmalar ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 22px;
  border-radius:26px; border:none; font-weight:600; font-size:16px; transition:.12s;
}
.btn:active{transform:scale(.97)}
.btn.gold{background:var(--g-gold); color:var(--on-gold); box-shadow:0 4px 14px rgba(212,175,55,.3)}
.btn.blue{background:var(--blue-l); color:#fff}
.btn.ghost{background:rgba(255,255,255,.1); border:1px solid var(--line)}
.btn.red{background:var(--red); color:#fff}
.btn.wide{width:100%}
.btn.sm{height:40px; padding:0 16px; font-size:14px}
.btn:disabled{opacity:.4; cursor:default; transform:none}

/* ---- tablar (Fonetika | Grammatika) ---- */
.tabs{display:flex; background:rgba(255,255,255,.08); border:1px solid var(--line); border-radius:16px; padding:4px; margin:0 0 18px}
.tabs button{flex:1; height:42px; border-radius:12px; border:none; background:none; font-weight:600; font-size:15px; color:var(--text2)}
.tabs button.on{background:var(--card3); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* ---- dars ro'yxati ---- */
.lesson{
  display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r2); padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:.12s;
}
.lesson:active{transform:scale(.985)}
.lesson .num{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:17px;
  background:var(--card3); color:var(--gold2); flex:none;
}
.lesson.done .num{background:var(--g-gold); color:var(--on-gold)}
.lesson.current{border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.lesson.current .num{background:var(--blue-l); color:#fff; box-shadow:0 0 0 2px var(--gold)}
.lesson.locked{opacity:.55}
.lesson.locked .num{background:rgba(255,255,255,.08); color:var(--hint)}
.lesson .ttl{flex:1; min-width:0}
.lesson .ttl .ar{font-size:22px; line-height:1.25; text-align:right; color:#fff}
.lesson .ttl .ar.empty{color:var(--hint); font-family:var(--ui); font-size:15px; text-align:left; font-weight:600; direction:ltr}
.cic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--card3); font-size:22px; flex:none}
.lesson .ttl .uz{font-size:13.5px; color:var(--text2); margin-top:2px}
.lesson .st{flex:none; font-size:14px; font-weight:600; color:var(--hint); text-align:right}
.lesson.done .st{color:var(--gold2)}
.lesson.current .st{color:var(--gold2)}
.lesson.exam{background:var(--g-deep); border-color:rgba(212,175,55,.35)}
.lesson.exam .num{background:transparent; border:2px solid var(--gold); color:var(--gold2); border-radius:50%}
.blockhead{display:flex; align-items:baseline; gap:10px; margin:24px 0 10px}
.blockhead b{font-size:16px; color:var(--text)}
.blockhead span{font-size:13px; color:var(--hint)}

/* ---- dars ichi ---- */
.part{
  display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:18px; margin-bottom:12px; cursor:pointer;
}
.part .ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:24px; background:var(--card3); flex:none}
.part.ok .ic{background:var(--g-gold); color:var(--on-gold)}
.part .t{font-size:18px; font-weight:600}
.part .d{font-size:13.5px; color:var(--text2); margin-top:2px}
.part .mark{flex:none; font-size:20px; color:var(--gold2)}
.part.dis{opacity:.5; cursor:default}

/* ---- bo'sh holat ---- */
.placeholder{
  border:2px dashed rgba(255,255,255,.18); border-radius:var(--r); padding:34px 20px; text-align:center;
  color:var(--hint); font-size:15px; line-height:1.5;
}
.placeholder b{display:block; color:var(--text2); font-size:17px; margin-bottom:6px}

/* ---- video ---- */
.video{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:16px; overflow:hidden; margin-bottom:14px}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---- test ---- */
.qhead{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; color:var(--hint); margin-bottom:8px; font-weight:600}
.qtext{font-size:21px; font-weight:600; line-height:1.3; margin:14px 0 20px}
.opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:15px 16px; margin-bottom:10px; font-size:16.5px; font-weight:500; transition:.12s;
}
.opt .l{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); font-weight:700; font-size:14px; flex:none}
.opt.pick{border-color:var(--gold); background:var(--card3)}
.opt.pick .l{background:var(--gold); color:var(--on-gold)}
.opt.right{border-color:var(--gold); background:rgba(212,175,55,.18)}
.opt.wrong{border-color:var(--red); background:rgba(230,57,70,.18)}
.audiobox{display:flex; align-items:center; gap:12px; background:var(--card2); border-radius:16px; padding:14px; margin-bottom:16px}
.audiobox button{width:52px; height:52px; border-radius:50%; background:var(--g-gold); color:var(--on-gold); border:none; font-size:20px}
.result .big{font-size:64px}
.ring{width:150px; height:150px; border-radius:50%; margin:10px auto 18px; display:grid; place-items:center; position:relative}
.ring b{font-size:34px; font-weight:700}
.ring small{display:block; font-size:12px; color:var(--text2); font-weight:500}

/* ---- pastki menyu ---- */
#nav{
  position:fixed; bottom:12px; left:50%; transform:translateX(-50%); width:calc(100% - 24px); max-width:456px;
  height:var(--nav); background:rgba(10,31,58,.92); backdrop-filter:blur(16px); border:1px solid var(--line);
  border-radius:30px; display:flex; align-items:center; justify-content:space-around; padding:0 6px; z-index:50;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
#nav button{
  flex:1; height:64px; border:none; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; font-size:12px; font-weight:600; color:var(--text2); border-radius:22px;
}
#nav button i{font-style:normal; font-size:22px; line-height:1}
#nav button.on{background:var(--card3); color:#fff}
#nav button.on i{color:var(--gold2)}

/* ---- kichik narsalar ---- */
.badge{display:inline-block; padding:3px 9px; border-radius:10px; font-size:12px; font-weight:700; background:rgba(255,255,255,.12)}
.badge.gold{background:var(--gold); color:var(--on-gold)}
.badge.red{background:var(--red); color:#fff}
.soon{
  text-align:center; padding:50px 20px; color:var(--hint); font-size:15px;
}
.soon b{display:block; font-size:22px; color:var(--gold2); margin-bottom:8px}
.toast{
  position:fixed; left:50%; bottom:calc(var(--nav) + 26px); transform:translateX(-50%); background:var(--gold); color:var(--on-gold);
  padding:10px 18px; border-radius:20px; font-weight:600; font-size:14px; z-index:60; opacity:0; transition:.25s; pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.toast.on{opacity:1}
.switch{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line)}
.switch:first-child{border-top:none}
.switch .k{font-weight:600} .switch .v{color:var(--hint); font-size:13.5px; margin-top:2px}
.tog{width:52px; height:30px; border-radius:16px; background:rgba(255,255,255,.15); position:relative; border:none; flex:none}
.tog::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:.2s}
.tog.on{background:var(--gold)} .tog.on::after{left:25px}
.inp{
  width:100%; height:54px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.08);
  color:#fff; font-size:20px; font-weight:600; letter-spacing:.08em; text-align:center; padding:0 14px; margin:14px 0 10px;
  outline:none; font-family:inherit; text-transform:uppercase;
}
.inp:focus{border-color:var(--gold)}
.inp::placeholder{color:var(--hint); font-weight:500; letter-spacing:0; text-transform:none}
#err{position:fixed; left:0; right:0; top:0; z-index:999; background:#c0392b; color:#fff; padding:10px 14px; font:12px/1.5 monospace; white-space:pre-wrap; display:none}

/* ---- joriy daraja kartasi ---- */
.card .big small{font-size:22px; font-weight:600; margin-left:4px}
.lvl{font-size:30px; font-weight:700; letter-spacing:-.02em; text-align:right; flex:none}
.lvl small{font-size:14px; font-weight:600; opacity:.7}
.path{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(42,33,5,.15)}
.path span{font-size:12px; font-weight:600; padding:4px 9px; border-radius:12px; background:rgba(42,33,5,.1); color:rgba(42,33,5,.6)}
.path span.on{background:#2A2105; color:#F4DC8A}
.path i{font-style:normal; color:rgba(42,33,5,.4); font-size:12px}

/* ---- dars eslatmasi (bitta qator) ---- */
.remind{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid var(--line); margin-bottom:12px; font-weight:600; font-size:15px; color:var(--text2)}
.remind i{font-style:normal; font-size:18px; flex:none}
.remind.on{background:rgba(212,175,55,.16); border-color:rgba(212,175,55,.45); color:var(--gold3)}
.card.late{border-color:var(--red)} .card.late .kicker{color:var(--red)}

/* ---- havola qatorlari ---- */
.link{display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line); cursor:pointer}
.link:first-child{border-top:none; padding-top:2px}
.link:last-child{padding-bottom:2px}
.lic{width:44px; height:44px; border-radius:13px; background:var(--card3); display:grid; place-items:center; font-size:20px; flex:none}
.link .t{font-size:16.5px; font-weight:600}
.link .d{font-size:13.5px; color:var(--text2); margin-top:2px}

/* ---- akkordeon ---- */
.acclist{padding:4px 18px}
.acc{border-top:1px solid var(--line); cursor:pointer}
.acc:first-child{border-top:none}
.acc .q{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; font-weight:600; font-size:16px}
.acc .q i{width:28px; height:28px; border-radius:50%; background:var(--card3); display:grid; place-items:center; font-style:normal; color:var(--gold2); flex:none}
.acc.open .q{color:var(--gold2)}
.acc .a{padding:0 0 16px; color:var(--text2); font-size:15px; line-height:1.5}

/* ---- bo'sh holat ---- */
.empty{text-align:center; padding:40px 20px 30px; color:var(--hint); font-size:14.5px; line-height:1.5}
.empty .eic{width:76px; height:76px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:grid; place-items:center; font-size:32px; margin:0 auto 14px}
.empty b{display:block; color:var(--text2); font-size:18px; margin-bottom:6px}
.empty span{display:block; max-width:300px; margin:0 auto}

/* ---- tanlov, natija halqasi, ilova haqida ---- */
.sel{width:100%; height:48px; border-radius:14px; border:1px solid var(--line); background:var(--card2); color:#fff; font-size:15px; font-weight:600; padding:0 12px; font-family:inherit; outline:none}
.ring .rin{width:122px; height:122px; border-radius:50%; display:grid; place-items:center}
.logo{width:84px; height:84px; border-radius:26px; background:var(--g-gold); display:grid; place-items:center; font-size:40px; margin:6px auto 14px}
.chg{padding:8px 0; border-top:1px solid var(--line); color:var(--text2); font-size:14.5px}
.chg:first-of-type{border-top:none}
/* ============================================================
   DARSLIK — kitob matni (serverdan keladi)
   ============================================================ */
.lhead{
  position:relative; background:var(--g-blue); border:1px solid rgba(255,255,255,.12); border-radius:var(--r);
  padding:18px 20px; margin-bottom:14px; overflow:hidden;
}
.lhead .lar{
  position:absolute; right:16px; top:50%; transform:translateY(-50%); font-family:var(--ar); direction:rtl;
  font-size:64px; line-height:1; color:var(--gold2); opacity:.9; text-shadow:0 2px 12px rgba(0,0,0,.35);
  max-width:48%; text-align:right; pointer-events:none;
}
.lhead .lno{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold3); font-weight:700}
.lhead .luz{font-size:23px; font-weight:600; line-height:1.15; margin:4px 0 6px; max-width:60%}
.lhead .lmeta{font-size:13px; color:rgba(255,255,255,.72); max-width:60%}

.book{
  --fs:1;
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 12px; margin-bottom:14px; overflow:hidden;
  font-size:calc(16px * var(--fs)); line-height:1.55;
}
@media (min-width:620px){ .book{padding:22px 20px} }
.book h3{font-size:1.25em; font-weight:600; color:var(--gold2); margin:1.3em 0 .55em; line-height:1.25}
.book h3:first-child{margin-top:0}
.book h4{font-size:1.03em; font-weight:600; color:var(--text2); margin:1.1em 0 .45em; letter-spacing:.02em}
.book p{margin:.6em 0}
.book b{color:#fff}
.book i{font-style:italic; color:var(--text2)}
.book ul{margin:.6em 0; padding-right:0; padding-left:1.2em}
.book li{margin:.3em 0}
.book code{background:rgba(255,255,255,.1); padding:1px 6px; border-radius:6px; font-size:.88em}
.book .ar{font-family:var(--ar); direction:rtl; text-align:right; font-size:1.55em; line-height:1.9}
.book p.ar{margin:.7em 0}

/* jadvallar — surishga hojat qolmasin: kataklar o'zi qatorga bo'linadi */
.book .tw{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.7em -2px; padding:0 2px}
.book table{border-collapse:collapse; width:100%; table-layout:auto; font-size:.86em}
.book th,.book td{
  border:1px solid var(--line); padding:6px 7px; vertical-align:middle; text-align:center;
  word-break:break-word; overflow-wrap:anywhere; hyphens:auto;
}
.book th{background:rgba(255,255,255,.07); font-weight:600; color:var(--text2); font-size:.95em}
.book td.ar{font-size:1.45em; line-height:1.75; white-space:normal; overflow-wrap:normal; word-break:normal}
.book tr:nth-child(even) td{background:rgba(255,255,255,.03)}
@media (min-width:620px){ .book th,.book td{padding:9px 11px} }

/* shrift kattaligi boshqaruvi — o'ng pastda, menyu tepasida */
.fsctl{
  position:fixed; right:14px; bottom:calc(var(--nav) + 22px); z-index:55; display:flex; align-items:center; gap:2px;
  background:rgba(10,31,58,.94); backdrop-filter:blur(14px); border:1px solid var(--line);
  border-radius:22px; padding:4px; box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.fsctl button{
  width:40px; height:36px; border:none; border-radius:18px; background:none; color:var(--gold2);
  font-weight:700; line-height:1;
}
.fsctl button:active{background:var(--card3)}
.fsctl button:disabled{opacity:.35}
.fsctl .s{font-size:15px} .fsctl .l{font-size:21px}
.fsctl b{font-size:11.5px; color:var(--text2); min-width:38px; text-align:center; font-weight:600}
@media (min-width:620px){ .fsctl{right:calc(50% - 318px)} }
@media (min-width:900px){ .fsctl{right:calc(50% - 408px)} }

/* bet raqami, izoh */
.book .pagemark{
  display:flex; align-items:center; gap:10px; margin:1.6em 0 .85em; color:var(--hint); font-size:.75em; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.book .pagemark::before,.book .pagemark::after{content:""; flex:1; height:1px; background:var(--line)}
.book .note{
  background:rgba(212,175,55,.1); border-left:3px solid var(--gold); border-radius:10px;
  padding:.6em .75em; margin:.75em 0; font-size:.87em; color:var(--text2); line-height:1.45;
}
.book .unread{color:var(--red); font-size:.75em; font-style:italic}

/* matn ichidagi video — kitobda QR kod turgan joyda */
.book .vidbox{
  display:block; margin:.9em 0; border-radius:14px; overflow:hidden;
  border:1px solid rgba(212,175,55,.4); background:rgba(212,175,55,.09);
}
.book .vidbox .play{
  display:flex; align-items:center; gap:10px; width:100%; padding:.6em .7em;
  background:none; border:none; color:var(--gold2); font-weight:600; font-size:.92em; text-align:left;
}
.book .vidbox .play i{
  width:32px; height:32px; border-radius:50%; background:var(--g-gold); color:var(--on-gold);
  display:grid; place-items:center; font-style:normal; font-size:13px; flex:none; padding-left:2px;
}
.book .vidbox .ext{
  display:block; padding:0 .8em .6em 3.3em; font-size:.75em; color:var(--hint); text-decoration:none;
}
.book .vidbox.tg{border-color:rgba(46,125,214,.45); background:rgba(46,125,214,.1)}
.book .vidbox.tg .play{color:#8FC2F2}
.book .vidbox.tg .play i{background:var(--blue-l); color:#fff}
.book .vidbox.on{background:#000; border-color:rgba(255,255,255,.14)}
.book .vidbox .slot{display:block; position:relative; width:100%; aspect-ratio:16/9; background:#000}
.book .vidbox .slot iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.book .vidbox .vfoot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:.5em .8em; font-size:.78em; color:var(--text2); background:rgba(212,175,55,.09);
}
.book .vidbox .vfoot a{color:var(--gold2); text-decoration:none}

/* kitobdagi ranglar — ayni tus, to'q fonda o'qilishi uchun yorug'roq */
.book .c-r{color:#FF6B6B}            /* qizil */
.book .c-b{color:#6FB6FF}            /* ko'k */
.book .c-g{color:#63D98A}            /* yashil */
.book .c-y{color:#F4DC8A}            /* sariq */
.book .c-p{color:#FF9EC4}            /* pushti */
.book .c-v{color:#C89BFF}            /* binafsha */
.book .c-s{color:#93A9C0}            /* kulrang */
.book .c-k{color:#FFFFFF}            /* qora → to'q fonda oq */
.book td .c-r,.book td .c-b,.book td .c-g{font-weight:600}

/* alifbo tasmasi */
.book p.strip{
  font-family:var(--ar); direction:rtl; text-align:center; font-size:1.35em; line-height:1.9;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:14px;
  padding:.5em .6em; margin:.8em 0;
}

/* rasm / QR / husnixat joylari — rasm chizilgach shu qutilar o'rniga qo'yiladi */
/* haqiqiy chizma (maxraj va h.k.) — matn ichida, o'rtada, o'zining ranglari bilan */
.book .imgw{
  max-width:260px; margin:.9em auto; padding:10px 6px 6px;
  background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:16px;
}
.book .imgw svg{display:block; width:100%; height:auto}
.book .imgw.imgw-lg{max-width:100%; padding:12px 10px; background:rgba(255,255,255,.03)}

.book .imgbox,.book .qrbox,.book .writebox{
  display:inline-flex; align-items:center; gap:7px; max-width:100%; text-align:left;
  background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.22); border-radius:12px;
  padding:.45em .6em; margin:3px 0; font-size:.78em; color:var(--hint); line-height:1.35;
}
.book .imgbox i,.book .qrbox i,.book .writebox i{font-style:normal; font-size:1.2em; flex:none}
/* jadval ichida — faqat belgi, ustiga bosilsa tavsifi chiqadi */
.book .only{padding:.3em .45em; gap:0; border-radius:10px}
.book td .only{margin:0 auto; display:inline-flex}
.book .writebox{border-color:rgba(212,175,55,.35); color:var(--gold2)}
.book .qrbox{border-color:rgba(46,125,214,.45); color:#8FC2F2}
.book .raw table{border-collapse:collapse; width:100%}
.book .raw th,.book .raw td{border:1px solid var(--line); padding:8px 10px; text-align:center}

/* ---- tanlangan guruh: tahrirlash / o'chirish ---- */
.selbar{
  display:flex; align-items:center; gap:8px; padding:12px 14px; margin-bottom:12px; border-radius:var(--r);
  background:var(--card3); border:1px solid rgba(212,175,55,.5); box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.selbar .t{font-size:15.5px; font-weight:600; line-height:1.25}
.selbar .kicker{font-size:11px}
.sb{
  width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.08);
  font-size:19px; flex:none; display:grid; place-items:center;
}
.sb:active{transform:scale(.94)}
.sb.red{background:rgba(230,57,70,.2); border-color:rgba(230,57,70,.6)}
.card.sel{box-shadow:0 0 0 2px var(--gold); border-color:var(--gold)}

/* ---- davomat (ustoz) ---- */
.att{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; margin-bottom:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); cursor:pointer; transition:.12s;
}
.att:active{transform:scale(.99)}
.att .box{
  width:30px; height:30px; border-radius:9px; border:2px solid var(--line); flex:none;
  display:grid; place-items:center; font-size:16px; font-weight:700; color:transparent;
}
.att .nm{flex:1; font-weight:600; font-size:15.5px}
.att.on{background:rgba(61,220,132,.13); border-color:rgba(61,220,132,.5)}
.att.on .box{background:#3DDC84; border-color:#3DDC84; color:#06301A}
.att.lock{cursor:default; opacity:.85}

/* dars ochish katakchalari */
.lgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:6px; margin-top:12px}
.lc{
  height:38px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--text2); font-weight:600; font-size:14px;
}
.lc.on{background:var(--g-gold); color:var(--on-gold); border-color:transparent}
.lc.edge{box-shadow:0 0 0 2px var(--gold2)}

/* davomat ko'rinishi (o'quvchi) */
.dgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); gap:5px; margin:14px 0 10px}
.dc{
  height:32px; border-radius:9px; display:grid; place-items:center; font-size:13px; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--text2);
}
.dc.bor{background:rgba(61,220,132,.16); border-color:rgba(61,220,132,.45); color:#8FEFB6}
.dc.yoq{background:rgba(230,57,70,.18); border-color:rgba(230,57,70,.55); color:#FF9AA2}
.dc.xom{box-shadow:inset 0 -3px 0 var(--gold)}
.dleg{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text2); margin-top:6px; line-height:1.4}
.dleg i{width:12px; height:12px; border-radius:4px; flex:none}
.dleg i.yoq{background:rgba(230,57,70,.7)} .dleg i.bor{background:#3DDC84} .dleg i.xom{background:var(--gold)}
.dleg b{color:#fff}

/* shakl maydonlari */
.fld{margin-bottom:12px}
.fld label{display:block; font-size:12.5px; color:var(--hint); font-weight:600; margin-bottom:5px}
.inp2{
  width:100%; height:46px; border-radius:13px; border:1px solid var(--line); background:rgba(255,255,255,.07);
  color:#fff; font-size:15.5px; padding:0 13px; outline:none; font-family:inherit;
}
.inp2:focus{border-color:var(--gold)}
.dsel{display:flex; gap:6px; flex-wrap:wrap}
.dsel button{
  flex:1; min-width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.06); color:var(--text2); font-weight:600;
}
.dsel button.on{background:var(--g-gold); color:var(--on-gold); border-color:transparent}

/* ---- foydalanuvchilar ro'yxati ---- */
.ustd{padding:14px 16px}
.dot{width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.22); flex:none; margin-top:4px; align-self:flex-start}
.dot.on{background:#3DDC84; box-shadow:0 0 0 4px rgba(61,220,132,.18)}
.ustd .hint{font-size:12.5px; margin-top:2px}

.tabs.big{margin-bottom:10px}
.tabs.big button.on{background:var(--g-gold); color:var(--on-gold)}
#nav button{font-size:11.5px; padding:0 2px}

/* ---- kichik dumaloq tugma (‹ › ℹ️ 🗑️) ---- */
.wbtn{
  width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.08);
  font-size:16px; flex:none; display:grid; place-items:center; margin-left:8px;
}
.wbtn:active{transform:scale(.93)}
.att .wbtn{margin-left:auto}

/* ---- davomat/uy vazifa qatorida ikkinchi qatorli matn ---- */
.att .grow{flex:1; min-width:0}
.att .grow .nm{font-weight:600; font-size:15.5px}
.att .grow .hint{display:block; margin-top:2px}

/* ---- katta matn maydoni ---- */
.inp2.ta{height:auto; min-height:78px; padding:10px 13px; line-height:1.45; resize:vertical; font-family:inherit}
.inp2[type="date"]{color-scheme:dark}

/* ---- izoh/taklif kartasidagi holat va sarlavha ---- */
.card .row .pill{margin:0; flex:none; align-self:flex-start}