/* ================= Self Study — asosiy uslublar ================= */
:root{
  --bg:#f5f7fb; --card:#ffffff; --ink:#16202e; --muted:#5f6d80;
  --line:#e2e8f2; --brand:#2f6df6; --brand-d:#1f52c9; --brand-soft:#e8f0ff;
  --ok:#12a150; --ok-soft:#e3f8ec; --bad:#e5484d; --bad-soft:#fdeaea;
  --warn:#c98a00; --warn-soft:#fff6e0; --shadow:0 2px 10px rgba(20,35,70,.07);
  --r:14px;
}
[data-theme="dark"]{
  --bg:#0e1420; --card:#161e2c; --ink:#e7ecf5; --muted:#9aa8bd;
  --line:#26314419; --line:#273043; --brand:#5b8cff; --brand-d:#7ea6ff; --brand-soft:#1b2740;
  --ok:#2ecc71; --ok-soft:#12301f; --bad:#ff6b6f; --bad-soft:#331a1c;
  --warn:#e8b93a; --warn-soft:#332a12;
  --shadow:0 2px 12px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Matn kattaligi (kattalar / ko'zi xira foydalanuvchilar uchun) */
html[data-size="lg"] body{font-size:18.5px}
html[data-size="xl"] body{font-size:21px}
html[data-size="lg"] .small,html[data-size="xl"] .small{font-size:.95rem}
html[data-size="xl"] .btn{padding:13px 22px}
html[data-size="xl"] .opt{padding:16px 18px}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em}
h1{font-size:1.9rem} h2{font-size:1.35rem} h3{font-size:1.1rem}
p{margin:0 0 .8em}
a{color:var(--brand)}
button{font:inherit;cursor:pointer}
.hidden{display:none !important}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-size:1.15rem;cursor:pointer;user-select:none}
.brand b{color:var(--brand)}
.logo{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-weight:700
}
.mainnav{display:flex;gap:4px;margin-left:10px;flex:1;flex-wrap:wrap}
.mainnav button{
  background:none;border:0;padding:8px 13px;border-radius:9px;color:var(--muted);font-weight:500
}
.mainnav button:hover{background:var(--brand-soft);color:var(--brand)}
.mainnav button.active{background:var(--brand-soft);color:var(--brand);font-weight:600}
.topright{display:flex;align-items:center;gap:8px}
.stat{display:flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--line);
  padding:5px 10px;border-radius:20px;font-size:.87rem}
.stat.lvl b{color:var(--brand)}
.icon-btn{background:var(--bg);border:1px solid var(--line);border-radius:9px;width:34px;height:34px;color:var(--ink)}
.icon-btn:hover{background:var(--brand-soft)}
.burger{display:none}

/* ---------- Layout ---------- */
main{max-width:1080px;margin:0 auto;padding:26px 20px 90px}
.foot{max-width:1080px;margin:0 auto;padding:0 20px 40px;color:var(--muted);font-size:.85rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:.87rem}

/* ---------- Tugmalar ---------- */
.btn{
  background:var(--brand);color:#fff;border:0;padding:11px 20px;border-radius:10px;
  font-weight:600;transition:.15s
}
.btn:hover{background:var(--brand-d)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.grey{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.btn.grey:hover{background:var(--brand-soft)}
.btn.sm{padding:7px 13px;font-size:.87rem;border-radius:8px}
.btn.wide{width:100%}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--brand),#7b4dff);color:#fff;border-radius:20px;
  padding:38px 32px;margin-bottom:24px
}
.hero h1{color:#fff;font-size:2.1rem;margin-bottom:10px}
.hero p{opacity:.93;max-width:640px}
.hero .btn{background:#fff;color:var(--brand)}
.hero .btn:hover{background:#eef2ff}
.hero .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5)}

/* ---------- Daraja kartalari ---------- */
.lvlcard{position:relative;overflow:hidden;cursor:pointer;transition:.15s}
.lvlcard:hover{transform:translateY(-3px);border-color:var(--brand)}
.lvlcard .tag{
  display:inline-block;font-weight:700;font-size:.8rem;padding:3px 10px;border-radius:20px;
  background:var(--brand-soft);color:var(--brand);margin-bottom:8px
}
.lvlcard.locked{opacity:.72}
.bar{height:8px;background:var(--bg);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:10px}
.bar>i{display:block;height:100%;background:var(--brand);transition:width .4s}
.bar.ok>i{background:var(--ok)}

/* ---------- Dars ro'yxati ---------- */
.lesson-item{
  display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);cursor:pointer;transition:.15s;margin-bottom:10px
}
.lesson-item:hover{border-color:var(--brand);transform:translateX(3px)}
.lesson-item .num{
  width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-weight:700
}
.lesson-item.done .num{background:var(--ok-soft);color:var(--ok)}
.lesson-item h4{margin:0}
.lesson-item .meta{color:var(--muted);font-size:.85rem}

/* ---------- Dars ichi ---------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:18px 0;flex-wrap:wrap}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;
  color:var(--muted);font-weight:600
}
.tabs button.active{color:var(--brand);border-bottom-color:var(--brand)}

.vocab-list{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.vocab{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);
  border-radius:11px;background:var(--card)
}
.vocab .en{font-weight:600}
.vocab .uz{color:var(--muted);font-size:.9rem}
.vocab .ipa{color:var(--brand);font-size:.82rem;font-family:ui-monospace,monospace}
.speak-btn{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--brand-soft);color:var(--brand);font-size:.95rem
}
.speak-btn:hover{background:var(--brand);color:#fff}

.dialog-line{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}
.dialog-line .who{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:.85rem
}
.dialog-line.b .who{background:#ffe9d6;color:#c2600b}
.dialog-line .bubble{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 13px;flex:1}
.dialog-line .tr{color:var(--muted);font-size:.86rem;margin-top:3px}

.gram{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.gram table{border-collapse:collapse;width:100%;margin:10px 0;font-size:.93rem}
.gram th,.gram td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.gram th{background:var(--brand-soft);color:var(--brand)}
.gram code{background:var(--brand-soft);color:var(--brand-d);padding:1px 6px;border-radius:5px;font-size:.92em}
.gram ul{margin:.4em 0 .4em 1.1em;padding:0}
.gram li{margin-bottom:.3em}

.videobox{background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-bottom:12px}
.videobox iframe{width:100%;height:100%;border:0;display:block}
.video-ph{
  aspect-ratio:16/9;border:2px dashed var(--line);border-radius:12px;display:grid;place-items:center;
  text-align:center;padding:20px;background:var(--bg);margin-bottom:12px
}

/* ---------- Mashqlar ---------- */
.ex-wrap{max-width:720px;margin:0 auto}
.ex-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ex-q{font-size:1.15rem;font-weight:600;margin:14px 0 18px;line-height:1.5}
.ex-q .blank{display:inline-block;min-width:90px;border-bottom:2px solid var(--brand);text-align:center}
.opts{display:grid;gap:10px}
.opt{
  text-align:left;padding:13px 16px;border:2px solid var(--line);border-radius:11px;
  background:var(--card);color:var(--ink);transition:.12s
}
.opt:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft)}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt.good{border-color:var(--ok);background:var(--ok-soft)}
.opt.bad{border-color:var(--bad);background:var(--bad-soft)}
.ex-input{
  width:100%;padding:13px 16px;border:2px solid var(--line);border-radius:11px;
  background:var(--card);color:var(--ink);font:inherit
}
.ex-input:focus{outline:0;border-color:var(--brand)}
/* Klaviatura bilan yurganda fokus KO'RINISHI shart — aks holda foydalanuvchi
   qayerdaligini bilmaydi. Sichqoncha bilan bosganda chiqmaydi (:focus-visible). */
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
[role="button"]{cursor:pointer}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.ex-input.good{border-color:var(--ok);background:var(--ok-soft)}
.ex-input.bad{border-color:var(--bad);background:var(--bad-soft)}
.feedback{padding:13px 16px;border-radius:11px;margin-top:14px}
.feedback.good{background:var(--ok-soft);border:1px solid var(--ok)}
.feedback.bad{background:var(--bad-soft);border:1px solid var(--bad)}
.feedback b{display:block;margin-bottom:3px}

.chips{display:flex;flex-wrap:wrap;gap:8px;min-height:52px;padding:10px;border:2px dashed var(--line);border-radius:11px}
.chip{padding:8px 14px;border:1px solid var(--brand);background:var(--brand-soft);color:var(--brand);
  border-radius:9px;font-weight:500}
.chip:hover{background:var(--brand);color:#fff}
.chips.answer{border-style:solid;background:var(--bg)}

.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.match-grid .opt{text-align:center;padding:11px}
.match-grid .opt.done{opacity:.35;pointer-events:none;border-color:var(--ok)}

.progress-line{height:6px;background:var(--line);border-radius:20px;overflow:hidden;margin-bottom:6px}
.progress-line>i{display:block;height:100%;background:var(--brand);transition:width .3s}

.mic-btn{
  width:88px;height:88px;border-radius:50%;border:3px solid var(--brand);background:var(--brand-soft);
  color:var(--brand);font-size:2rem;display:grid;place-items:center;margin:0 auto
}
.mic-btn.rec{background:var(--bad);border-color:var(--bad);color:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ---------- Audiobar ---------- */
.audiobar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:60;
  display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:40px;padding:8px 14px;box-shadow:0 6px 24px rgba(20,35,70,.16);max-width:94vw
}
.ab-main{width:40px;height:40px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:1rem}
.ab-text{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem}
.ab-speed{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.ab-speed input{width:80px}
.ab-voice{max-width:130px;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:5px;font-size:.8rem}

/* ---------- Modal ---------- */
.modal-back{
  position:fixed;inset:0;z-index:120;background:rgba(10,18,34,.55);
  display:grid;place-items:center;padding:18px;overflow:auto
}
.modal{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;max-width:620px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.28)
}
.modal h2{margin-top:0}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:99;
  background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:24px;font-size:.9rem;
  box-shadow:var(--shadow)
}

/* ---------- Nutq tahlili (speaking) ---------- */
.sp-live{margin-top:12px;min-height:24px}
.sp-partial{
  text-align:center;font-size:1.05rem;color:var(--muted);font-style:italic;
  padding:8px 12px;border:1px dashed var(--line);border-radius:10px;background:var(--bg)
}
.sp-report{margin-top:6px;text-align:center;line-height:2}
.sw{
  display:inline-block;padding:3px 9px;border-radius:8px;margin:2px 1px;
  font-size:1.02rem;border:1px solid transparent
}
.sw.ok  {background:var(--ok-soft);  color:var(--ok);  border-color:var(--ok)}
.sw.near{background:var(--warn-soft);color:var(--warn);border-color:var(--warn);cursor:pointer}
.sw.miss{background:var(--bad-soft); color:var(--bad); border-color:var(--bad);cursor:pointer}
.sw.near:hover,.sw.miss:hover{filter:brightness(.94)}
.sp-legend{margin-top:10px;line-height:1.9}
.sp-legend .sw{font-size:.8rem;padding:2px 7px;cursor:default}

/* ---------- Mikrofon diagnostikasi ---------- */
.mic-log{
  display:none;margin-top:12px;max-height:300px;overflow:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;
  font-size:.86rem;line-height:1.5
}
.mic-line{padding:4px 0;border-bottom:1px solid var(--line)}
.mic-line:last-child{border-bottom:0}
.mic-line.ok{color:var(--ok)}
.mic-line.err{color:var(--bad)}
.mic-line.info{color:var(--muted)}
.mic-t{opacity:.55;font-size:.78rem;margin-right:6px}
.mic-step{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* Mikrofon ishlamasligining sababi — ko'zga tashlanadigan, lekin xato emas:
   o'quvchi mashqni davom ettira oladi, faqat sababni ko'radi. */
.mic-warn, .warn-box{
  display:block;text-align:left;line-height:1.5;
  margin:10px auto;max-width:520px;padding:12px 14px;border-radius:12px;
  background:var(--warn-soft);border:1px solid var(--warn);
  color:var(--ink);font-size:.92rem
}
.mic-warn code{background:var(--bg);padding:1px 5px;border-radius:5px;font-size:.88em}
.mic-meter{
  height:14px;border-radius:8px;background:var(--bg);
  border:1px solid var(--line);overflow:hidden;margin-top:10px
}
.mic-meter i{display:block;height:100%;width:0;background:var(--muted);transition:width .06s linear}
.mic-meter i.ok{background:var(--ok)}
.mic-meter i.hot{background:var(--warn)}

/* ---------- Yangilanish xabari ---------- */
.updbar{
  position:fixed;left:50%;transform:translateX(-50%);z-index:120;
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background:var(--brand);color:#fff;padding:10px 12px 10px 18px;border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 24px);font-size:.92rem
}
.updbar i{opacity:.85;font-style:normal}
.updbar .btn{background:#fff;color:var(--brand);border:0;font-weight:700}
.updbar .btn:hover{background:#f1f5ff}
.updbar .icon-btn{background:rgba(255,255,255,.18);border-color:transparent;color:#fff}
@media(max-width:640px){
  .updbar{bottom:calc(78px + env(safe-area-inset-bottom));font-size:.86rem;gap:10px;padding:10px 12px}
}

/* ---------- Natijalar ---------- */
.kpi{text-align:center;padding:18px}
.kpi b{display:block;font-size:2rem;color:var(--brand);line-height:1.2}
.kpi span{color:var(--muted);font-size:.87rem}
.heat{display:flex;gap:3px;flex-wrap:wrap}
.heat i{width:13px;height:13px;border-radius:3px;background:var(--line);display:block}
.heat i.on{background:var(--ok)}
.badge-list{display:flex;gap:10px;flex-wrap:wrap}
.badge{
  display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);
  border-radius:24px;background:var(--card);font-size:.88rem
}
.badge.off{opacity:.4}

.result-ring{
  width:140px;height:140px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  background:conic-gradient(var(--brand) var(--p),var(--line) 0)
}
.result-ring>div{
  width:112px;height:112px;border-radius:50%;background:var(--card);display:grid;place-items:center;
  font-size:1.7rem;font-weight:700
}

/* ---------- Profil, jadval, tanlash ---------- */
.stat.prof{border-color:var(--brand);color:var(--brand);font-weight:600;max-width:140px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.stat.prof:hover{background:var(--brand-soft)}
.role-card{cursor:pointer;text-align:center;transition:.15s}
.role-card:hover,.role-card.sel{border-color:var(--brand);transform:translateY(-3px)}
.card.cur{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.tag{display:inline-block;font-weight:700;font-size:.78rem;padding:3px 9px;border-radius:20px;
  background:var(--brand-soft);color:var(--brand)}
.bad-t{color:var(--bad);font-weight:600}
.ok-t{color:var(--ok);font-weight:600}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card)}
.tbl{border-collapse:collapse;width:100%;min-width:720px;font-size:.9rem}
.tbl th,.tbl td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{background:var(--bg);color:var(--muted);font-weight:600;font-size:.82rem;white-space:nowrap}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--brand-soft)}
.tbl .bar{margin-top:4px;height:5px}
.pick{display:flex;gap:10px;align-items:center;padding:8px 6px;border-radius:8px;cursor:pointer}
.pick:hover{background:var(--brand-soft)}
.pick input{width:18px;height:18px;accent-color:var(--brand)}
textarea.ex-input{resize:vertical;min-height:70px}

/* ---------- Ko'nikmalar ---------- */
.readtext{font-size:1.06rem;line-height:1.85;max-width:66ch}
.readtext p{margin:0 0 1em}
.flash{
  min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--card);border:2px solid var(--brand);border-radius:16px;padding:24px;
  cursor:pointer;text-align:center;user-select:none;transition:.15s
}
.flash:hover{background:var(--brand-soft)}
.flash-in{font-size:1.7rem;font-weight:600;line-height:1.4}
.biglink{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;
  font-family:ui-monospace,monospace;font-size:.95rem;word-break:break-all;line-height:1.6
}
details summary::-webkit-details-marker{color:var(--brand)}

/* ---------- Ulanish sxemasi ---------- */
.flow{margin-top:14px}
.flow-row{display:flex;gap:14px;align-items:flex-start;padding:13px 15px;background:var(--bg);
  border:1px solid var(--line);border-radius:12px}
.flow-ic{font-size:1.8rem;line-height:1;flex:none}
.flow-arrow{text-align:center;color:var(--brand);font-size:.85rem;padding:7px 0;font-weight:600}

/* ---------- Mobil pastki panel ---------- */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--card);border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content:space-around
}
.tabbar button{
  background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:5px 6px;border-radius:10px;flex:1;min-width:0
}
.tabbar button span{font-size:1.25rem;line-height:1}
.tabbar button i{font-style:normal;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tabbar button.active{color:var(--brand);background:var(--brand-soft)}

/* ---------- Mobil ---------- */
@media(max-width:820px){
  .mainnav{
    position:absolute;top:100%;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);
    flex-direction:column;padding:8px;display:none;box-shadow:var(--shadow)
  }
  .mainnav.open{display:flex}
  .mainnav button{text-align:left;width:100%;padding:12px 14px}
  .burger{display:block}
  .tabbar{display:flex}
  .hide-sm{display:none}
  .topbar{padding:8px 12px;gap:8px}
  .brand{font-size:1.02rem}
  .hero{padding:24px 18px;border-radius:16px}
  .hero h1{font-size:1.55rem}
  main{padding:16px 12px 96px}
  .foot{padding-bottom:90px}
  .audiobar{bottom:calc(70px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .ab-text{max-width:110px}
  .ab-speed,.ab-voice{display:none}
  .card{padding:16px}
  .modal{padding:18px;border-radius:16px}
  .g2,.g3{grid-template-columns:1fr}
  .kpi{padding:14px}
  .kpi b{font-size:1.6rem}
  .ex-q{font-size:1.08rem}
  /* Barmoq uchun kattaroq nishonlar */
  .opt{padding:15px 16px;font-size:1rem}
  .btn{padding:12px 20px}
  .speak-btn{width:40px;height:40px}
  .chip{padding:11px 15px}
  .lesson-item{padding:13px}
  .mic-btn{width:96px;height:96px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tabs button{white-space:nowrap}
}
@media(max-width:420px){
  .brand span:last-child{display:none}
  .match-grid{gap:7px}
  .match-grid .opt{padding:12px 6px;font-size:.92rem}
  .g3{grid-template-columns:1fr 1fr}
  .stat{padding:4px 8px;font-size:.8rem}
}

/* ===== Tarif cheklovlari: yopiq kartochkalar ===== */
.card.locked{opacity:.72}
.card.locked h3{color:var(--muted)}
.lock-tag{background:#c98a0022;color:#c98a00;margin-left:6px}
.btn.lock-btn{opacity:.65;border-style:dashed}

/* ===== Sozlash sehrgari ===== */
.setup-bar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.setup-step{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.setup-step b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--line);color:var(--ink);font-size:.75rem}
.setup-step.cur{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-d);font-weight:600}
.setup-step.cur b{background:var(--brand);color:#fff}

/* ===== Telegram Mini App ichida =====
   Telegramning o'z sarlavhasi va pastki paneli bor, shuning uchun ilova
   pastdan qo'shimcha joy oladi va o'z «o'rnatish» taklifini ko'rsatmaydi. */
html.in-telegram .tabbar{padding-bottom:calc(6px + var(--tg-safe-bottom, env(safe-area-inset-bottom)))}
html.in-telegram .foot{padding-bottom:calc(90px + var(--tg-safe-bottom, 0px))}
html.in-telegram #theme-btn{display:none}

/* ===== Ilova sifatida o'rnatish taklifi ===== */
.install-card{border-color:var(--brand);margin-bottom:22px}
.install-card[hidden]{display:none}

/* ===== Bosh ekrandan ochilgan holat (PWA) =====
   Manzil satri yo'q, shuning uchun ilova "haqiqiy dastur"dek tuyulishi
   kerak: brauzerdagi matn tanlash, uzun bosishdagi menyu va rezina
   silkinish o'chiriladi. Dars matnini nusxalash imkoni saqlanadi. */
html.app-mode, html.in-telegram{overscroll-behavior-y:none}
html.app-mode body, html.in-telegram body{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
html.app-mode .topbar, html.app-mode .tabbar, html.app-mode .mainnav,
html.in-telegram .topbar, html.in-telegram .tabbar, html.in-telegram .mainnav{
  -webkit-user-select:none; user-select:none;
}
/* Yuqori panel qurilmaning "tirnog'i" (notch) ostiga kirib ketmasin */
html.app-mode .topbar{padding-top:calc(8px + env(safe-area-inset-top))}

/* ===== Sertifikat (chop etishga mo'ljallangan) ===== */
.cert{
  background:#fff;color:#16202e;border:2px solid #2f6df6;border-radius:14px;
  padding:38px 42px;max-width:820px;margin:0 auto;
  box-shadow:0 2px 18px rgba(20,35,70,.08);
}
.cert-head{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.cert-logo{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2f6df6,#7b4dff);color:#fff;font-weight:700;font-size:1.4rem;
}
.cert-brand{font-size:1.15rem;font-weight:600;color:#16202e}
.cert-brand b{color:#2f6df6}
.cert-sub{font-size:.82rem;color:#5f6d80}
.cert-title{font-size:1.35rem;margin:0 0 26px;text-align:center;color:#16202e;font-weight:600}
.cert-name{
  font-size:2rem;font-weight:700;text-align:center;margin:0;color:#16202e;
  border-bottom:2px solid #e2e8f2;padding-bottom:10px;
}
.cert-group{text-align:center;color:#5f6d80;margin:8px 0 26px;font-size:.95rem}
.cert-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:#e2e8f2;border:1px solid #e2e8f2;border-radius:10px;overflow:hidden;margin-bottom:24px;
}
.cert-grid div{background:#fff;padding:14px 12px;text-align:center}
.cert-grid b{display:block;font-size:1.5rem;color:#2f6df6;line-height:1.2}
.cert-grid span{font-size:.78rem;color:#5f6d80}
.cert-tbl{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:.92rem}
.cert-tbl th,.cert-tbl td{border:1px solid #e2e8f2;padding:7px 11px;text-align:left;color:#16202e}
.cert-tbl th{background:#f5f7fb;color:#5f6d80;font-weight:600}
.cert-note{font-size:.8rem;color:#5f6d80;line-height:1.5;margin-bottom:30px}
.cert-sign{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:22px}
.cert-sign div{flex:1;min-width:190px;font-size:.85rem;color:#5f6d80}
.cert-sign .line{display:block;border-bottom:1px solid #16202e;height:32px;margin-bottom:6px}
.cert-foot{text-align:center;font-size:.75rem;color:#8a97a8;border-top:1px solid #e2e8f2;padding-top:12px}

@media print{
  .topbar,.tabbar,.foot,.audiobar,.toast,.updbar,.no-print{display:none !important}
  body{background:#fff;padding:0}
  main#view{padding:0}
  .cert{border:none;box-shadow:none;max-width:100%;padding:0}
  @page{margin:16mm}
}