:root{
  --brand:#16705f; --brand-deep:#0f4a40; --brand-light:#2f8f7c; --brand-soft:#e3f2ee;
  --bg:#f3f5fa; --surface:#ffffff; --surface-2:#f8f9fc; --line:#e0e5ef; --line-strong:#cdd5e4;
  --ink:#121826; --ink-2:#39435a; --muted:#69738a;
  --ok:#1c7a4f; --ok-soft:#e4f3ec;
  --warn:#9a6210; --warn-soft:#fbf0dd;
  --bad:#ad2f2a; --bad-soft:#fbe8e7;
  --info:#2a5d9e; --info-soft:#e7effa;
  /* Yon panel uchun alohida ranglar — mavzu almashganda ham mos turadi */
  --side-bg:#0f4a40; --side-ink:#eef2fa; --side-ink-2:#c9d4ea;
  --side-hover:rgba(255,255,255,.10); --side-line:rgba(255,255,255,.12);
  --side-active-bg:#ffffff; --side-active-ink:#0f4a40;
  --shadow:0 1px 2px rgba(18,24,38,.05), 0 8px 24px -12px rgba(18,24,38,.18);
  --shadow-lg:0 12px 40px -12px rgba(18,24,38,.30);
  --r:10px; --r-lg:16px;
  --sans:'Manrope',system-ui,'Segoe UI',sans-serif;
  --display:'Archivo','Manrope',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Sakura fon ranglari */
  --leaf-1:#f2a9c7; --leaf-2:#ffd8e6; --leaf-3:#e585ac; --leaf-core:#f3dc9b; --leaf-stem:#6d4b3c; --leaf-op:.62;
  --site-bg:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#5fc7ad; --brand-deep:#86d6c2; --brand-light:#7ccfba; --brand-soft:#173a33;
    --bg:#151b27; --surface:#1d2533; --surface-2:#232c3c; --line:#2f3a4c; --line-strong:#42506a;
    --ink:#eef2f9; --ink-2:#cbd4e2; --muted:#9aa6bb;
    --side-bg:#111823; --side-ink:#edf1f8; --side-ink-2:#aab7cc;
    --side-hover:rgba(255,255,255,.07); --side-line:rgba(255,255,255,.08);
    --side-active-bg:#1d4f45; --side-active-ink:#ffffff;
    --ok:#4cc38a; --ok-soft:#14301f;
    --warn:#dfa34a; --warn-soft:#332413;
    --bad:#f07a72; --bad-soft:#3a1a18;
    --info:#7aa7e6; --info-soft:#14243c;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 12px 40px -12px rgba(0,0,0,.7);
    --leaf-1:#c17a9c; --leaf-2:#e3abc7; --leaf-3:#a85f82; --leaf-core:#c9a55f; --leaf-stem:#4a3931; --leaf-op:.5;
    --site-bg:#151b27;
  }
}
:root[data-theme="dark"]{
  --brand:#5fc7ad; --brand-deep:#86d6c2; --brand-light:#7ccfba; --brand-soft:#173a33;
  --bg:#151b27; --surface:#1d2533; --surface-2:#232c3c; --line:#2f3a4c; --line-strong:#42506a;
  --ink:#eef2f9; --ink-2:#cbd4e2; --muted:#9aa6bb;
  --side-bg:#111823; --side-ink:#edf1f8; --side-ink-2:#aab7cc;
  --side-hover:rgba(255,255,255,.07); --side-line:rgba(255,255,255,.08);
  --side-active-bg:#1d4f45; --side-active-ink:#ffffff;
  --ok:#4cc38a; --ok-soft:#14301f;
  --warn:#dfa34a; --warn-soft:#332413;
  --bad:#f07a72; --bad-soft:#3a1a18;
  --info:#7aa7e6; --info-soft:#14243c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 12px 40px -12px rgba(0,0,0,.7);
  --leaf-1:#c17a9c; --leaf-2:#e3abc7; --leaf-3:#a85f82; --leaf-core:#c9a55f; --leaf-stem:#4a3931; --leaf-op:.5;
  --site-bg:#151b27;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kirish ekrani ---------- */
.screen{min-height:100%;display:grid;place-items:center;padding:24px 16px;
  background:linear-gradient(160deg,var(--side-bg),#0a1714 75%)}
.login{width:100%;max-width:400px;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.login .brandline{display:flex;align-items:center;gap:12px}
.login h1{font-size:22px}
.login .sub{color:var(--muted);font-size:13px;margin-top:2px}
.logo{width:44px;height:44px;border-radius:14px;flex:none;display:block}
.logo-sm{width:30px;height:30px;border-radius:8px;flex:none}

/* ---------- Kirish sahifasi: saytning ko'rinishida ----------
   To'q ko'k fon, tilla naqsh, oq karta. Sayt bilan bir uslubda bo'lsin —
   odam "boshqa dasturga tushib qoldim" demasin.                        */
.login-screen{position:relative;overflow:hidden;
  background:
    radial-gradient(90% 70% at 15% 0%, #136152, transparent 60%),
    linear-gradient(160deg,#0a352e 10%,#04150f 85%)}
.login-art{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.login-art .khatam{position:absolute;inset:-10%;width:120%;height:120%;
  color:#f0d48a;opacity:.09}
.login-ar{position:absolute;inset-inline-end:6%;bottom:6%;
  font-family:var(--st-ar,'Amiri',serif);font-size:clamp(70px,15vw,190px);line-height:1;
  color:#f0d48a;opacity:.07;user-select:none}
.login-screen .login{position:relative;z-index:1;max-width:420px;
  border-radius:24px;padding:30px 26px;
  box-shadow:0 0 0 1px rgba(216,174,67,.34), 0 40px 80px -40px rgba(0,0,0,.95);
  animation:loginIn .55s cubic-bezier(.22,.9,.28,1)}
@keyframes loginIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.login-screen .login h1{font-family:var(--st-serif,Georgia,serif);font-weight:600;
  font-size:24px;letter-spacing:-.02em}
.login-screen .login .logo{box-shadow:0 0 0 1px rgba(216,174,67,.45)}
.login-screen .login .btn.primary{background:linear-gradient(160deg,#0f4a40,#0a352e);
  border-color:transparent;box-shadow:0 16px 34px -18px rgba(7,31,27,.95)}
.login-screen .login .btn.primary:hover{background:linear-gradient(160deg,#136152,#0f4a40)}
.login-screen .field input:focus{outline:none;border-color:#b8901f;
  box-shadow:0 0 0 3px rgba(216,174,67,.22)}
.login-back{align-self:center;color:var(--muted)}
.login-back .ico{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){ .login-screen .login{animation:none} }
@media (max-width:560px){
  .login-screen .login{padding:24px 18px;border-radius:20px}
  .login-ar{display:none}
}

/* ---------- Karkas ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100%}
.sidebar{background:var(--side-bg);color:var(--side-ink);display:flex;flex-direction:column;
  position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100dvh}
.sidebar .head{padding:18px 16px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--side-line)}
.sidebar .head b{font-family:var(--display);font-size:16px;letter-spacing:.01em;display:block}
.sidebar .head span{font-size:11px;opacity:.7;letter-spacing:.06em;text-transform:uppercase}
.nav{padding:10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  color:var(--side-ink-2);padding:9px 11px;border-radius:9px;cursor:pointer;font-weight:500;font-size:13.5px}
.nav button:hover{background:var(--side-hover);color:var(--side-ink)}
.nav button[aria-current="page"]{background:var(--side-active-bg);color:var(--side-active-ink);font-weight:700}
.nav .ico{width:18px;height:18px;flex:none;opacity:.9}
.nav button[aria-current="page"] .ico{opacity:1}
.nav .group-label{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.55;padding:12px 11px 4px}
.sidebar .foot{padding:10px;border-top:1px solid var(--side-line);display:flex;gap:8px;align-items:center}
.sidebar .foot .who{flex:1;min-width:0}
.sidebar .foot .who b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .foot .who span{font-size:11px;opacity:.7}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topbar .search{flex:1;min-width:150px;max-width:420px;position:relative}
.topbar .search input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line-strong);border-radius:9px;
  background:var(--surface-2)}
.topbar .search svg{position:absolute;left:10px;top:9px;width:16px;height:16px;color:var(--muted)}
.view{padding:20px;flex:1;min-width:0}
.tabbar{display:none}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .view{padding:16px 16px 84px}
  .topbar{padding:10px 16px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar button{background:none;border:0;padding:8px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--muted);font-size:10.5px;cursor:pointer}
  .tabbar button[aria-current="page"]{color:var(--brand);font-weight:700}
  .tabbar .ico{width:20px;height:20px}
}

/* ---------- Sahifa sarlavhasi ---------- */
.page-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.page-head .t{flex:1;min-width:200px}
.page-head h1{font-size:21px}
.page-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Tugmalar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:9px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-weight:600;font-size:13.5px;
  cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,transform .06s}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-light)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn.danger:hover{background:var(--bad-soft)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:8px}
.btn.block{width:100%}
.btn .ico{width:16px;height:16px}

/* ---------- Kartalar ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card>.card-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card>.card-head h2{font-size:15px;flex:1;min-width:120px}
.card>.card-body{padding:16px}
.card>.card-body.tight{padding:0}
.grid{display:grid;gap:14px}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

/* ---------- Ko'rsatkich plitkalari ---------- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 15px;
  text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);
  transition:border-color .12s,transform .08s}
.tile:hover{border-color:var(--brand);transform:translateY(-1px)}
.tile .lbl{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.tile .val{font-family:var(--display);font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.tile .hint{font-size:11.5px;color:var(--muted)}
.tile.alert{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.tile.alert .val{color:var(--bad)}
.tile.money .val{color:var(--brand)}
.tile:not([data-clickable]){cursor:default}
.tile:not([data-clickable]):hover{transform:none;border-color:var(--line)}

/* ---------- Jadvallar ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
table.tbl th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
table.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl td.r,table.tbl th.r{text-align:right}
table.tbl .strong{font-weight:600}
.row-link{cursor:pointer}

/* ---------- Nishonlar ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  border:1px solid transparent;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.pill.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.pill.mute{background:var(--surface-2);color:var(--muted);border-color:var(--line)}

/* ---------- Shakllar ---------- */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field .req{color:var(--bad)}
.field input,.field select,.field textarea{padding:9px 11px;border:1px solid var(--line-strong);border-radius:9px;
  background:var(--surface);width:100%}
.field input:disabled,.field select:disabled{background:var(--surface-2);color:var(--muted)}
.field textarea{min-height:68px;resize:vertical}
.field .help{font-size:11.5px;color:var(--muted)}
.field.err input,.field.err select{border-color:var(--bad)}
.field .err-msg{font-size:11.5px;color:var(--bad);font-weight:600}
.form-grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.form-grid .full{grid-column:1/-1}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:0}
legend{font-size:12px;font-weight:700;color:var(--muted);padding:0 6px}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--brand)}
.daypick{display:flex;gap:6px;flex-wrap:wrap}
.daypick label{border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:12.5px;font-weight:600}
.daypick input{position:absolute;opacity:0;width:0;height:0}
.daypick input:checked + span{color:#fff}
.daypick label:has(input:checked){background:var(--brand);border-color:var(--brand);color:#fff}
.daypick label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Filtr paneli ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;box-shadow:var(--shadow)}
.filters .field{flex:0 1 180px}
.filters .spacer{flex:1}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:7px 12px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--brand);color:#fff}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(9,14,26,.55);backdrop-filter:blur(2px);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-width:560px;
  margin:auto;animation:pop .14s ease-out}
.modal.wide{max-width:860px}
@keyframes pop{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}
.modal .m-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal .m-head h2{font-size:17px;flex:1}
.modal .m-body{padding:18px;display:flex;flex-direction:column;gap:14px}
.modal .m-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.x-btn{border:0;background:none;cursor:pointer;color:var(--muted);padding:6px;border-radius:8px;line-height:0}
.x-btn:hover{background:var(--surface-2);color:var(--ink)}

/* ---------- Xabarlar ---------- */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:200;display:flex;flex-direction:column;gap:8px;width:min(420px,92vw)}
.toast{padding:11px 14px;border-radius:10px;box-shadow:var(--shadow-lg);font-weight:600;font-size:13.5px;
  background:var(--ink);color:var(--bg);display:flex;gap:9px;align-items:center}
.toast.ok{background:var(--ok);color:#fff}
.toast.bad{background:var(--bad);color:#fff}
.banner{padding:11px 14px;border-radius:var(--r);font-size:13px;display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.banner.warn{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.banner.info{background:var(--info-soft);color:var(--info);border:1px solid color-mix(in srgb,var(--info) 30%,transparent)}
.banner b{font-weight:700}
.banner .btn{margin-left:auto}

/* ---------- Bo'sh holat ---------- */
.empty{text-align:center;padding:38px 18px;color:var(--muted)}
.empty h3{font-size:16px;color:var(--ink);margin-bottom:6px}
.empty p{margin:0 auto 14px;max-width:44ch;font-size:13.5px}

/* ================= SAYT (ochiq sahifa) =================
   Ranglar logotipdan olingan: to'q ko'k gradient (#3F5A8F → #1E355F) va oq.
   Unga arab qo'lyozmalari bezagidan kelgan tilla rang qo'shilgan — ko'k va
   tilla juftligi mushaf bezaklarining klassik juftligi.
   Fon naqshi: sakkiz burchakli "xatam" yulduzi — arab-islom geometriyasi.  */

.site{
  /* Logotip gradienti */
  --st-n9:#071f1b; --st-n8:#0a2b25; --st-n7:#0e3a32; --st-n6:#134a40;
  --st-n5:#1a5e51; --st-n4:#2c7a6a; --st-n3:#5fa597; --st-n2:#a3cfc5;
  /* Qo'lyozma tillasi */
  --st-gold:#b8901f; --st-gold-2:#d8ae43; --st-gold-3:#efd08a; --st-gold-soft:#f7edd6;
  /* Qog'oz */
  --st-paper:#fbf8f3; --st-paper-2:#f4efe5; --st-card:#ffffff;
  --st-ink:#10241f; --st-ink-2:#3a4f4a; --st-mut:#6c7d78;
  --st-line:#e6dfd1; --st-line-2:#d6cdb9;
  --st-shadow:0 1px 2px rgba(10,40,35,.05), 0 14px 34px -18px rgba(10,40,35,.30);
  --st-shadow-lg:0 26px 60px -26px rgba(10,40,35,.45);
  --st-glow:0 0 0 1px rgba(216,174,67,.28), 0 20px 60px -24px rgba(7,31,27,.65);
  --st-serif:'Fraunces','Archivo',Georgia,serif;
  --st-ar:'Amiri','Times New Roman',serif;
  /* Xatam yulduzi naqshi — to'q panellar ustida tilla chiziqlar */
  --st-khatam:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22132%22%20height%3D%22132%22%20viewBox%3D%220%200%20132%20132%22%3E%3Cpath%20d%3D%22M66.00%2026.00L72.34%2050.69L94.28%2037.72L81.31%2059.66L106.00%2066.00L81.31%2072.34L94.28%2094.28L72.34%2081.31L66.00%20106.00L59.66%2081.31L37.72%2094.28L50.69%2072.34L26.00%2066.00L50.69%2059.66L37.72%2037.72L59.66%2050.69ZM0.00%20-40.00L6.34%20-15.31L28.28%20-28.28L15.31%20-6.34L40.00%200.00L15.31%206.34L28.28%2028.28L6.34%2015.31L0.00%2040.00L-6.34%2015.31L-28.28%2028.28L-15.31%206.34L-40.00%200.00L-15.31%20-6.34L-28.28%20-28.28L-6.34%20-15.31ZM132.00%20-40.00L138.34%20-15.31L160.28%20-28.28L147.31%20-6.34L172.00%200.00L147.31%206.34L160.28%2028.28L138.34%2015.31L132.00%2040.00L125.66%2015.31L103.72%2028.28L116.69%206.34L92.00%200.00L116.69%20-6.34L103.72%20-28.28L125.66%20-15.31ZM0.00%2092.00L6.34%20116.69L28.28%20103.72L15.31%20125.66L40.00%20132.00L15.31%20138.34L28.28%20160.28L6.34%20147.31L0.00%20172.00L-6.34%20147.31L-28.28%20160.28L-15.31%20138.34L-40.00%20132.00L-15.31%20125.66L-28.28%20103.72L-6.34%20116.69ZM132.00%2092.00L138.34%20116.69L160.28%20103.72L147.31%20125.66L172.00%20132.00L147.31%20138.34L160.28%20160.28L138.34%20147.31L132.00%20172.00L125.66%20147.31L103.72%20160.28L116.69%20138.34L92.00%20132.00L116.69%20125.66L103.72%20103.72L125.66%20116.69ZM72.47%2050.39L81.61%2059.53L81.61%2072.47L72.47%2081.61L59.53%2081.61L50.39%2072.47L50.39%2059.53L59.53%2050.39ZM5.71%2052.22L13.78%2060.29L13.78%2071.71L5.71%2079.78L-5.71%2079.78L-13.78%2071.71L-13.78%2060.29L-5.71%2052.22ZM137.71%2052.22L145.78%2060.29L145.78%2071.71L137.71%2079.78L126.29%2079.78L118.22%2071.71L118.22%2060.29L126.29%2052.22ZM71.71%20-13.78L79.78%20-5.71L79.78%205.71L71.71%2013.78L60.29%2013.78L52.22%205.71L52.22%20-5.71L60.29%20-13.78ZM71.71%20118.22L79.78%20126.29L79.78%20137.71L71.71%20145.78L60.29%20145.78L52.22%20137.71L52.22%20126.29L60.29%20118.22Z%22%20fill%3D%22none%22%20stroke%3D%22%23d8ae43%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");

  position:relative;min-height:100%;overflow-x:hidden;isolation:isolate;
  color:var(--st-ink);background:var(--st-paper);
  font-feature-settings:"ss01";
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .site{
    --st-paper:#0b1513; --st-paper-2:#0f1d1a; --st-card:#132622;
    --st-ink:#eaf0fa; --st-ink-2:#c3cee1; --st-mut:#93a0b8;
    --st-line:#213834; --st-line-2:#24493f;
    --st-gold:#e0bb5c; --st-gold-2:#efd08a; --st-gold-soft:#2a2313;
    --st-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.8);
    --st-shadow-lg:0 26px 60px -26px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"] .site{
  --st-paper:#0b1513; --st-paper-2:#0f1d1a; --st-card:#132622;
  --st-ink:#eaf0fa; --st-ink-2:#c3cee1; --st-mut:#93a0b8;
  --st-line:#213834; --st-line-2:#24493f;
  --st-gold:#e0bb5c; --st-gold-2:#efd08a; --st-gold-soft:#2a2313;
  --st-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.8);
  --st-shadow-lg:0 26px 60px -26px rgba(0,0,0,.9);
}

/* --- Fon: qog'oz rangi, xatam naqshi va sekin suzuvchi yorug'lik --- */
.site-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--st-n4) 9%, transparent), transparent 60%),
    var(--st-paper)}
.site-bg .khatam{position:absolute;inset:-4%;width:108%;height:108%;
  color:var(--st-n4);opacity:.055}
.site-bg .glow{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform}
.site-bg .glow.g1{width:44vw;height:44vw;left:-8vw;top:-10vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--st-n4) 17%,transparent),transparent 70%);
  animation:stDrift1 26s ease-in-out infinite}
.site-bg .glow.g2{width:38vw;height:38vw;right:-6vw;top:22vh;
  background:radial-gradient(circle,color-mix(in srgb,var(--st-gold) 11%,transparent),transparent 70%);
  animation:stDrift2 31s ease-in-out infinite}
.site-bg .glow.g3{width:40vw;height:40vw;left:24vw;bottom:-14vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--st-n5) 12%,transparent),transparent 70%);
  animation:stDrift1 37s ease-in-out infinite reverse}
@keyframes stDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5vw,4vh,0) scale(1.12)}}
@keyframes stDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-6vw,-3vh,0) scale(.92)}}

/* --- Ochilishda ko'rinish (JS ishlasa) --- */
.js-reveal .site .reveal{opacity:0;transform:translateY(18px)}
.js-reveal .site .reveal.seen{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1)}

@media (prefers-reduced-motion:reduce){
  .site-bg .glow{animation:none}
  .js-reveal .site .reveal{opacity:1;transform:none}
  .site-medal::before{animation:none}
}

.site-wrap{max-width:1140px;margin:0 auto;padding:0 20px 52px}

/* --- Tepa panel --- */
.site-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:color-mix(in srgb,var(--st-paper) 80%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-top-in{max-width:1140px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.site-top.stuck{border-bottom-color:color-mix(in srgb,var(--st-line) 80%,transparent);
  box-shadow:0 10px 30px -22px rgba(10,40,35,.55)}
.site-brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.site-brand .logo{width:44px;height:44px;border-radius:15px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--st-gold) 42%,transparent), var(--st-shadow)}
.site-brand b{display:block;font-family:var(--st-serif);font-weight:600;
  font-size:17px;line-height:1.12;letter-spacing:-.015em;color:var(--st-ink)}
.site-brand span{font-size:11.5px;color:var(--st-mut);letter-spacing:.01em}
.site-nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.site-nav .btn{border-radius:11px}
.site-nav .btn.ghost{color:var(--st-ink-2)}
.site-nav .btn.ghost:hover{background:color-mix(in srgb,var(--st-n4) 10%,transparent);color:var(--st-n6)}
.btn.ghost{border-color:transparent;background:none}
.btn.ghost:hover{background:var(--surface-2)}
.btn.lg{padding:13px 22px;font-size:15px;border-radius:13px}
.btn.xl{padding:18px 32px;font-size:17.5px;font-weight:800;border-radius:16px;letter-spacing:.01em}
.site .btn.xl .ico{width:20px;height:20px}
@media (max-width:560px){
  .btn.xl{width:100%;padding:17px 22px;font-size:16.5px}
}
.site .btn.primary{background:linear-gradient(160deg,var(--st-n5),var(--st-n7));border-color:var(--st-n7);
  color:#fff;box-shadow:0 10px 26px -14px rgba(7,31,27,.8)}
.site .btn.primary:hover{background:linear-gradient(160deg,var(--st-n4),var(--st-n6))}

/* --- Hero: to'q ko'k panel, tilla hoshiya, xatam naqshi --- */
.site-hero{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:34px;
  align-items:center;margin:22px 0 10px;padding:44px 44px 46px;
  border-radius:30px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(90% 120% at 12% 0%, var(--st-n5), transparent 58%),
    radial-gradient(70% 100% at 98% 100%, color-mix(in srgb,var(--st-gold) 18%,transparent), transparent 60%),
    linear-gradient(155deg, var(--st-n7), var(--st-n9));
  box-shadow:var(--st-glow), var(--st-shadow-lg);
  color:#fff}
.site-hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background-image:var(--st-khatam);background-size:132px 132px;opacity:.16}
.site-hero::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(216,174,67,.20)}
.hero-text{position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--st-gold-3);
  background:rgba(216,174,67,.10);border:1px solid rgba(216,174,67,.34);
  border-radius:999px;padding:6px 15px;margin-bottom:18px}
.hero-eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--st-gold-2);box-shadow:0 0 10px var(--st-gold-2)}
.site-hero h1{font-family:var(--st-serif);font-weight:600;
  font-size:clamp(34px,6.2vw,62px);line-height:1.02;margin:0 0 16px;letter-spacing:-.025em;
  color:#fff;text-wrap:balance}
.site-hero h1 .gold{background:linear-gradient(104deg,var(--st-gold) 2%,var(--st-gold-3) 34%,#fff6dd 56%,var(--st-gold-2) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{font-size:16.5px;color:#d7e0f2;max-width:52ch;margin:0 0 26px;line-height:1.62}
.hero-rule{width:64px;height:2px;margin:0 0 20px;border-radius:2px;
  background:linear-gradient(90deg,var(--st-gold-2),transparent)}

/* --- Hero'da yozilib turadigan qator ---
   Matn harf-harf yoziladi. Balandlik oldindan band qilinadi, shuning uchun
   ibora almashganda sahifa sakramaydi.                                    */
.hero-type{display:flex;align-items:center;gap:4px;min-height:54px;margin:2px 0 18px;
  font-family:var(--st-serif);font-weight:600;font-size:clamp(22px,3.5vw,38px);
  line-height:1.2;letter-spacing:-.02em;color:var(--st-gold-3);
  text-shadow:0 0 28px color-mix(in srgb,var(--st-gold) 30%,transparent)}
.hero-type-txt{white-space:pre-wrap}
.hero-type-cur{display:inline-block;width:3px;height:1.05em;flex:none;
  background:linear-gradient(180deg,var(--st-gold-3),var(--st-gold));border-radius:2px;
  box-shadow:0 0 12px color-mix(in srgb,var(--st-gold) 70%,transparent);
  animation:stCaret 1.05s steps(1,end) infinite}
.hero-type.done .hero-type-cur{display:none}
@keyframes stCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Ibora to'liq yozilganda bir lahza porlaydi */
.hero-type-txt{display:inline-block;transition:text-shadow .5s ease,transform .5s cubic-bezier(.22,.9,.28,1)}
.hero-type.full .hero-type-txt{transform:translateY(-1px);
  text-shadow:0 0 22px color-mix(in srgb,var(--st-gold) 62%,transparent),
    0 0 46px color-mix(in srgb,var(--st-gold) 28%,transparent)}
@media (prefers-reduced-motion:reduce){
  .hero-type-txt{transition:none}
  .hero-type.full .hero-type-txt{transform:none;text-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-type-cur{animation:none;opacity:0}
}
@media (max-width:560px){
  .hero-type{min-height:74px;align-items:flex-start;font-size:clamp(20px,6.4vw,28px)}
  .hero-type-cur{margin-top:.18em}
}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:28px}
.hero-cta .btn.lg .ico{width:18px;height:18px}
.site .btn.gold{background:linear-gradient(160deg,var(--st-gold-2),var(--st-gold));
  border-color:rgba(255,255,255,.18);color:#1a1405;font-weight:700;
  box-shadow:0 14px 34px -16px rgba(216,174,67,.9)}
.site .btn.gold:hover{background:linear-gradient(160deg,var(--st-gold-3),var(--st-gold-2))}
.hero-cta .btn.on-dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fff}
.hero-cta .btn.on-dark:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.hero-stats{display:flex;gap:0;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);padding-top:20px}
.hero-stat{padding:0 26px 0 0;margin-right:26px;
  border-right:1px solid rgba(255,255,255,.12)}
.hero-stat:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-stat b{display:block;font-family:var(--st-serif);font-weight:600;font-size:30px;line-height:1.05;
  color:var(--st-gold-3);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hero-stat span{font-size:11.5px;color:#a9b8d6;letter-spacing:.02em}

/* Hero medalyoni: logotip tilla halqa ichida, sekin porlaydi */
.hero-art{position:relative;display:grid;place-items:center;min-height:250px;z-index:1;
  padding-inline-end:34px;padding-block:6px}
.site-medal{position:relative;display:grid;place-items:center;
  width:min(234px,58vw);aspect-ratio:1;border-radius:50%}
.site-medal::before{content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, var(--st-gold-2) 40deg,
    var(--st-gold-3) 72deg, transparent 130deg, transparent 220deg,
    var(--st-gold) 270deg, transparent 330deg);
  animation:stSpin 14s linear infinite;opacity:.95}
.site-medal::after{content:'';position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(circle at 34% 26%, var(--st-n5), var(--st-n9) 74%);
  box-shadow:inset 0 0 44px rgba(0,0,0,.55)}
@keyframes stSpin{to{transform:rotate(360deg)}}
.medal-in{position:relative;z-index:2;display:grid;place-items:center;
  width:100%;height:100%;border-radius:50%;overflow:hidden}
.medal-in .khatam-in{position:absolute;inset:0;width:100%;height:100%;color:#fff;opacity:.13}
.hero-art img{position:relative;width:44%;height:auto;border-radius:24px;
  box-shadow:0 0 0 1px rgba(216,174,67,.4), 0 22px 46px -18px rgba(0,0,0,.9)}
.hero-ar{position:absolute;left:0;right:0;bottom:12%;text-align:center;
  font-family:var(--st-ar);font-size:clamp(30px,7.4vw,46px);line-height:1;
  color:var(--st-gold-3);opacity:.34;pointer-events:none;user-select:none}
.hero-badge{position:absolute;inset-inline-end:0;bottom:14px;z-index:3;
  background:color-mix(in srgb,var(--st-card) 94%,transparent);backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb,var(--st-gold) 40%,transparent);
  border-radius:14px;padding:10px 15px;box-shadow:var(--st-shadow-lg);text-align:center}
.hero-badge b{display:block;font-family:var(--st-serif);font-weight:600;font-size:14.5px;color:var(--st-ink)}
.hero-badge span{font-size:10px;color:var(--st-gold);letter-spacing:.2em;text-transform:uppercase;font-weight:600}

/* --- Bo'limlar --- */
.site-sec{padding:52px 0 8px}
.sec-eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:12px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--st-gold)}
.sec-eyebrow::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--st-gold) 45%,transparent),transparent)}
.site-sec h2{font-family:var(--st-serif);font-weight:600;
  font-size:clamp(24px,3.8vw,38px);margin-bottom:8px;letter-spacing:-.025em;color:var(--st-ink)}
.site-sec>.muted{margin:0 0 22px;color:var(--st-mut);font-size:15px;max-width:62ch}

/* Kartalar — umumiy ko'rinish */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.feat{position:relative;background:var(--st-card);border:1px solid var(--st-line);
  border-radius:18px;padding:22px;overflow:hidden;
  transition:transform .2s cubic-bezier(.22,.8,.3,1),box-shadow .2s,border-color .2s}
.feat::before{content:'';position:absolute;inset:0 auto auto 0;height:2px;width:0;
  background:linear-gradient(90deg,var(--st-gold-2),var(--st-gold));transition:width .35s cubic-bezier(.22,.8,.3,1)}
.feat:hover{transform:translateY(-4px);box-shadow:var(--st-shadow);border-color:var(--st-line-2)}
.feat:hover::before{width:100%}
.feat-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(155deg,var(--st-n5),var(--st-n7));
  box-shadow:0 10px 22px -12px rgba(7,31,27,.8)}
.feat-ico .ico{width:20px;height:20px;color:var(--st-gold-3)}
.feat b{display:block;margin-bottom:6px;font-size:16px;font-family:var(--st-serif);font-weight:600;
  color:var(--st-ink);letter-spacing:-.01em}
.feat p{margin:0;font-size:13.5px;color:var(--st-mut);line-height:1.6}

/* Kurslar */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.course{position:relative;background:var(--st-card);border:1px solid var(--st-line);
  border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px;overflow:hidden;
  transition:transform .2s cubic-bezier(.22,.8,.3,1),box-shadow .2s,border-color .2s}
.course::after{content:'';position:absolute;top:0;inset-inline-end:0;width:54px;height:54px;
  border-top:2px solid color-mix(in srgb,var(--st-gold) 62%,transparent);
  border-inline-end:2px solid color-mix(in srgb,var(--st-gold) 62%,transparent);
  border-start-end-radius:18px;opacity:.55;transition:opacity .3s,width .3s,height .3s}
.course:hover{transform:translateY(-4px);box-shadow:var(--st-shadow);border-color:var(--st-line-2)}
.course:hover::after{opacity:1;width:74px;height:74px}
.course b{font-size:17.5px;font-family:var(--st-serif);font-weight:600;color:var(--st-ink);
  letter-spacing:-.015em;position:relative}
.course p{margin:0;font-size:13.5px;color:var(--st-mut);line-height:1.58;position:relative}
.course-fee{display:flex;align-items:baseline;gap:7px;margin-top:auto;position:relative}
.course-fee b{font-family:var(--st-serif);font-size:24px;color:var(--st-n6);font-variant-numeric:tabular-nums}
.course-fee span{font-size:12px;color:var(--st-mut)}
.course .btn{align-self:flex-start;position:relative}

/* Dars vaqtlari */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
.slot{background:var(--st-card);border:1px solid var(--st-line);border-radius:13px;
  padding:12px 14px;display:flex;flex-direction:column;gap:3px;
  transition:border-color .18s,transform .18s}
.slot:hover{border-color:color-mix(in srgb,var(--st-gold) 50%,transparent);transform:translateY(-2px)}
.slot b{font-family:var(--mono);font-size:14.5px;color:var(--st-ink);font-variant-numeric:tabular-nums}
.slot span{font-size:11.5px;color:var(--st-mut)}

/* --- Ariza --- */
.apply-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
.apply-card{background:var(--st-card);border:1px solid var(--st-line);
  border-radius:22px;padding:24px;box-shadow:var(--st-shadow)}
.lead-form{display:flex;flex-direction:column;gap:13px}
.lead-ok-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 0}
.lead-ok-in .ok-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-soft);color:var(--ok)}
.lead-ok-in .ok-ico .ico{width:28px;height:28px}
.lead-ok-in b{font-size:18px;font-family:var(--st-serif);font-weight:600}
.lead-ok-in p{margin:0;color:var(--st-mut);font-size:13.5px}
.site-contact{position:relative;overflow:hidden;
  border-radius:22px;padding:24px;color:#fff;
  background:
    radial-gradient(80% 110% at 100% 0%, color-mix(in srgb,var(--st-gold) 16%,transparent), transparent 58%),
    linear-gradient(160deg,var(--st-n6),var(--st-n9));
  box-shadow:var(--st-shadow-lg)}
.site-contact::before{content:'';position:absolute;inset:0;
  background-image:var(--st-khatam);background-size:118px 118px;opacity:.13;pointer-events:none}
.site-contact h3{position:relative;font-family:var(--st-serif);font-weight:600;
  font-size:17px;margin-bottom:14px;letter-spacing:-.01em;color:#fff}
.contact-row{position:relative;display:flex;align-items:center;gap:11px;padding:10px 0;font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.12);color:#dbe3f3}
.contact-row:last-child{border-bottom:0}
.contact-row .ico{width:18px;height:18px;flex:none;color:var(--st-gold-2)}
.contact-row a{font-weight:600;color:#fff}
.contact-row a:hover{color:var(--st-gold-3)}

/* --- Telegram guruhi (ERP) --- */
.tg-group{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tg-code{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line)}
.tg-code b{font-size:22px;letter-spacing:.14em}
.tg-info{flex:1 1 260px;display:flex;flex-direction:column;gap:5px}

/* --- Ustozlar --- */
.tch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
.tch-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  background:var(--st-card);border:1px solid var(--st-line);border-radius:20px;padding:22px 16px;
  cursor:pointer;color:inherit;font:inherit;position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.22,.8,.3,1),box-shadow .2s,border-color .2s}
.tch-card::before{content:'';position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,transparent,var(--st-gold-2),transparent);
  opacity:0;transition:opacity .25s}
.tch-card:hover{transform:translateY(-4px);box-shadow:var(--st-shadow);border-color:var(--st-line-2)}
.tch-card:hover::before{opacity:1}
.tch-card b{font-size:16px;font-family:var(--st-serif);font-weight:600;color:var(--st-ink)}
.tch-tag{font-size:12.5px;color:var(--st-gold);font-weight:700;letter-spacing:.02em}
.tch-aud{font-size:12.5px;color:var(--st-mut)}

.tch-ava{position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;overflow:hidden;flex:none;
  background:linear-gradient(150deg,var(--st-n5),var(--st-n8));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--st-gold) 46%,transparent),
    0 14px 30px -16px rgba(7,31,27,.8)}
.tch-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.tch-ini{font-family:var(--st-serif);font-weight:700;color:var(--st-gold-3);
  font-size:calc(min(34px, 1em + 12px));letter-spacing:.02em}

/* Ustoz profili */
.tch-page{display:flex;flex-direction:column;gap:28px;padding-top:10px}
.tch-hero{position:relative;overflow:hidden;display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;
  border-radius:26px;padding:28px;color:#fff;
  background:
    radial-gradient(80% 120% at 8% 0%, var(--st-n5), transparent 58%),
    linear-gradient(155deg,var(--st-n7),var(--st-n9));
  box-shadow:var(--st-glow),var(--st-shadow-lg)}
.tch-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--st-khatam);background-size:124px 124px;opacity:.14}
.tch-hero > div{position:relative;flex:1 1 320px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.tch-hero .tch-ava{position:relative}
.tch-hero h1{font-family:var(--st-serif);font-weight:600;font-size:clamp(27px,4vw,42px);
  color:#fff;letter-spacing:-.02em}
.tch-hero .tch-tag{color:var(--st-gold-3)}
.tch-hero .tch-aud,.tch-hero p{color:#c6d2e8}
.tch-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:10px;width:100%}
.tch-fact{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:10px 12px;color:#fff}
.tch-fact .ico{width:17px;height:17px;color:var(--st-gold-2);flex:none}
.tch-fact span{display:block;font-size:11.5px;color:#a9b8d6}
.tch-fact b{font-size:14px}
.tch-times h3,.tch-more h3{font-family:var(--st-serif);font-weight:600;font-size:18px;margin-bottom:11px;
  color:var(--st-ink)}
.tch-times > p{margin:0}
.tch-note{margin-top:10px !important}

/* ERP: saytdagi ustozlar ro'yxati */
.tch-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.tch-admin-item{display:flex;align-items:center;gap:11px;text-align:start;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;
  color:inherit;font:inherit}
.tch-admin-item:hover{border-color:var(--line-strong)}
.tch-photo-row{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.tch-photo-row .tch-ava{width:96px;height:96px}

/* --- Pastki qism --- */
.site-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--st-line);padding-top:22px;margin-top:44px;
  color:var(--st-mut);font-size:13px}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand .logo-sm{border-radius:9px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--st-gold) 36%,transparent)}
.site-foot .btn.ghost{color:var(--st-ink-2)}

/* --- Arab tili: sarlavhalar naskh yozuvida --- */
.site[dir="rtl"] h1,.site[dir="rtl"] h2,.site[dir="rtl"] h3,
[dir="rtl"] .site h1,[dir="rtl"] .site h2,[dir="rtl"] .site h3{font-family:var(--st-ar);letter-spacing:0}
[dir="rtl"] .hero-rule{background:linear-gradient(270deg,var(--st-gold-2),transparent)}
[dir="rtl"] .hero-stat{padding:0 0 0 26px;margin:0 0 0 26px;
  border-right:0;border-left:1px solid rgba(255,255,255,.12)}
[dir="rtl"] .hero-stat:last-child{border-left:0;margin-left:0;padding-left:0}
[dir="rtl"] .sec-eyebrow::after{background:linear-gradient(270deg,color-mix(in srgb,var(--st-gold) 45%,transparent),transparent)}

/* O'rta kenglikda (planshet, tor oyna) markaz nomi menyuga tegib ketmasin:
   menyu o'z qatoriga tushadi.                                              */
@media (max-width:1000px){
  .site-brand{flex:1 1 100%}
  .site-nav{width:100%;justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width:900px){
  .site-hero{grid-template-columns:1fr;gap:24px;padding:30px 24px 32px;border-radius:24px;margin-top:16px}
  .hero-art{order:-1;min-height:0}
  .site-medal{width:min(210px,56vw)}
  .hero-badge{right:0;bottom:6px;padding:8px 12px}
  .feat-grid,.course-grid{grid-template-columns:1fr 1fr}
  .apply-grid{grid-template-columns:1fr}
  .site-sec{padding:40px 0 6px}
}
@media (max-width:560px){
  .site-wrap{padding:0 16px 40px}
  .site-top-in{padding:10px 16px}
  .hero-art{padding-inline-end:0}
  .feat-grid,.course-grid{grid-template-columns:1fr}
  .site-nav{width:100%}
  .site-nav .btn{flex:1 1 auto;justify-content:center}
  .site-hero{padding:26px 18px 28px;border-radius:20px}
  .site-hero h1{font-size:clamp(29px,8.4vw,40px)}
  .hero-stats{gap:0;padding-top:16px}
  .hero-stat{padding-right:16px;margin-right:16px}
  .hero-stat b{font-size:25px}
  [dir="rtl"] .hero-stat{padding:0 0 0 16px;margin:0 0 0 16px}
  .site-medal{width:min(168px,44vw)}
  .hero-badge{display:none}
  .hero-art{min-height:0}
  .tch-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
  .tch-hero{padding:20px;gap:18px;border-radius:20px}
  .apply-card,.site-contact{padding:18px;border-radius:18px}
  /* Logotip birinchi ekranning yarmini egallab qolmasin — sarlavha va
     "Darsga yozilish" tugmasi darrov ko'rinsin.                       */
  .site-medal{width:min(126px,33vw)}
  .site-hero{padding-top:20px}
}

/* --- Telefonda pastda doim turadigan tasma: yozilish va qo'ng'iroq ---
   Odam sahifaning qaysi joyida bo'lishidan qat'i nazar bir bosishda
   ariza qoldirishi yoki qo'ng'iroq qilishi mumkin.                    */
.site-cta-bar{display:none}
@media (max-width:760px){
  .site .site-cta-bar,.site-cta-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:35;
    transform:translateY(105%);transition:transform .22s ease;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--st-paper) 94%,transparent);
    backdrop-filter:blur(10px);border-top:1px solid var(--st-line)}
  .site-cta-bar .cta-bar-go{flex:1;min-height:50px;font-size:15px}
  .cta-bar-tel{flex:none;width:50px;min-height:50px;border-radius:12px;
    display:grid;place-items:center;border:1px solid var(--st-line);
    background:var(--st-card);color:var(--st-ink)}
  .cta-bar-tel svg{width:22px;height:22px}
  .site-cta-bar.on{transform:none}
  /* Tasma sahifaning oxirini yopib qo'ymasin */
  .site .site-wrap{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){.site-cta-bar{backdrop-filter:none;transition:none}}


/* ================= SAYT: YANGI BO'LIMLAR =================
   Tuzilishi namunaga mos: hero ostida ko'rsatkichlar, ikki ustunli
   bo'lim sarlavhasi, bosqich (narx) kartalari, rasmli ustoz kartalari,
   ariza bloki va savol-javob.                                          */

/* --- Tepa paneldagi telefon --- */
.site-phone{display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;font-weight:700;font-size:13px;
  color:var(--st-ink);background:var(--st-card);
  border:1px solid color-mix(in srgb,var(--st-gold) 42%,transparent);
  box-shadow:var(--st-shadow);white-space:nowrap}
.site-phone:hover{border-color:var(--st-gold);color:var(--st-n6)}
.site-phone .ico{width:15px;height:15px;color:var(--st-gold)}
@media (max-width:1100px){ .site-phone{display:none} }

/* --- Hero: yorliq, telefon qatori, 4 ta ko'rsatkich --- */
.hero-pill{position:absolute;top:20px;inset-inline-end:24px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;color:var(--st-gold-3);
  background:rgba(216,174,67,.12);border:1px solid rgba(216,174,67,.4);
  backdrop-filter:blur(8px)}
.hero-pill .ico{width:14px;height:14px}
@media (max-width:640px){ .hero-pill{position:static;margin-bottom:14px;align-self:flex-start} }

.hero-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.hero-tel{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
  color:#fff;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.hero-tel:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);color:#fff}
.hero-tel .ico{width:16px;height:16px;color:var(--st-gold-2)}
.hero-hours{font-size:13px;color:#a9b8d6}
.hero-cta .btn .ico{width:17px;height:17px}

/* Ko'rsatkichlar: hero panelining pastida alohida qator */
.site-hero{position:relative;grid-template-areas:'text art';
  grid-template-columns:1.12fr .88fr;row-gap:30px}
.site-hero .hero-text{grid-area:text}
.site-hero .hero-art{grid-area:art}
.site-hero .hero-stats{grid-area:stats;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid rgba(255,255,255,.14);padding-top:22px;margin:0}
.site-hero .hero-stat{padding:0 22px;margin:0;
  border-right:1px solid rgba(255,255,255,.12);border-left:0}
.site-hero .hero-stat:first-child{padding-inline-start:0}
.site-hero .hero-stat:last-child{border-right:0}
[dir="rtl"] .site-hero .hero-stat{border-right:0;border-left:1px solid rgba(255,255,255,.12)}
[dir="rtl"] .site-hero .hero-stat:last-child{border-left:0}
@media (max-width:900px){
  .site-hero{grid-template-areas:'art' 'text';grid-template-columns:1fr}
}

/* --- Bo'lim sarlavhasi: ikki ustun va o'rtada --- */
.sec-split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:26px}
.sec-note{margin:0;color:var(--st-mut);font-size:15px;line-height:1.65;max-width:52ch}
.sec-mid{text-align:center;max-width:62ch;margin:0 auto 30px}
.sec-mid h2{margin-bottom:10px}
.sec-eyebrow.center{justify-content:center}
.sec-eyebrow.center::after{display:none}
.sec-note.center{margin:0 auto}
@media (max-width:820px){ .sec-split{grid-template-columns:1fr;gap:12px;align-items:start} }

/* --- Bosqichlar (narx kartalari) --- */
/* Kartalar bir xil balandlikda — tugmalar bir qatorga tushadi.
   O'rtadagi (tanlangan) karta bir oz chiqib turadi.                    */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--st-card);border:1px solid var(--st-line);border-radius:22px;padding:26px 24px;
  transition:transform .2s cubic-bezier(.22,.8,.3,1),box-shadow .2s,border-color .2s}
.tier:hover{transform:translateY(-4px);box-shadow:var(--st-shadow);border-color:var(--st-line-2)}
.tier-name{font-family:var(--st-serif);font-weight:600;font-size:21px;
  letter-spacing:-.02em;color:var(--st-ink)}
.tier-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.tier-list li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;
  color:var(--st-ink-2);line-height:1.5}
.tier-list .ico{width:15px;height:15px;flex:none;margin-top:2px;color:var(--st-gold)}
.tier-fee{display:flex;align-items:baseline;gap:7px;margin-top:auto;padding-top:6px;
  border-top:1px dashed var(--st-line)}
.tier-fee b{font-family:var(--st-serif);font-size:27px;color:var(--st-n6);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tier-fee span{font-size:12.5px;color:var(--st-mut)}
.tier .btn{border-radius:12px}

/* O'rtadagi karta — to'q va ajralib turadi */
.tier-hot{color:#fff;border-color:transparent;
  background:
    radial-gradient(80% 60% at 20% 0%, var(--st-n5), transparent 58%),
    linear-gradient(160deg,var(--st-n7),var(--st-n9));
  box-shadow:var(--st-glow), var(--st-shadow-lg);padding-top:34px}
.tier-hot::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:var(--st-khatam);background-size:118px 118px;opacity:.13}
.tier-hot > *{position:relative}
.tier-hot .tier-name{color:#fff}
.tier-hot .tier-list li{color:#d7e0f2}
.tier-hot .tier-list .ico{color:var(--st-gold-2)}
.tier-hot .tier-fee{border-top-color:rgba(255,255,255,.2)}
.tier-hot .tier-fee b{color:var(--st-gold-3)}
.tier-hot .tier-fee span{color:#a9b8d6}
.tier-ribbon{position:absolute;top:0;inset-inline-start:50%;transform:translate(-50%,-50%);
  padding:5px 14px;border-radius:999px;white-space:nowrap;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#1a1405;background:linear-gradient(160deg,var(--st-gold-2),var(--st-gold));
  box-shadow:0 10px 24px -12px rgba(216,174,67,.9)}
[dir="rtl"] .tier-ribbon{transform:translate(50%,-50%)}

/* Qo'shimcha takliflar */
.tier-extra{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  background:var(--st-paper-2);border:1px solid var(--st-line);border-radius:16px;padding:16px 20px}
.tier-extra b{display:block;font-family:var(--st-serif);font-weight:600;font-size:16px;color:var(--st-ink)}
.tier-extra span{font-size:13px;color:var(--st-mut)}
@media (min-width:901px){
  .tier-hot{margin-block:-12px;padding-top:42px;padding-bottom:34px}
}
@media (max-width:900px){ .tier-grid{grid-template-columns:1fr} .tier-hot{margin-top:10px} }

/* --- Ustozlar: rasmli kartalar --- */
/* Ustozlar bitta qatorda: ustunlar sonini JS beradi (--cols) */
.tch-grid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
@media (max-width:1180px){ .tch-grid{grid-template-columns:repeat(min(var(--cols,4),4),minmax(0,1fr))} }
@media (max-width:900px){ .tch-grid{grid-template-columns:repeat(min(var(--cols,3),3),minmax(0,1fr))} }
@media (max-width:680px){ .tch-grid{grid-template-columns:1fr 1fr} }
.tch-card{align-items:stretch;text-align:start;padding:0;overflow:hidden;gap:0}
.tch-photo{position:relative;display:block;width:100%;aspect-ratio:1.24;overflow:hidden;
  background:linear-gradient(150deg,var(--st-n5),var(--st-n8))}
.tch-photo .tch-ava{position:absolute;inset:0;width:100% !important;height:100% !important;
  border-radius:0 !important;box-shadow:none !important;background:none}
.tch-photo .tch-ava img{object-position:center 22%}
.tch-photo .tch-ini{font-size:46px}
.tch-ribbon{position:absolute;inset-inline-start:12px;bottom:12px;z-index:2;
  padding:5px 11px;border-radius:8px;font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#1a1405;
  background:linear-gradient(160deg,var(--st-gold-2),var(--st-gold));
  box-shadow:0 8px 20px -10px rgba(0,0,0,.7)}
.tch-card > b{padding:16px 18px 0;font-size:16.5px}
.tch-card .tch-aud{padding:2px 18px 0;text-align:start}
.tch-facts-mini{list-style:none;margin:10px 0 0;padding:0 18px;
  display:flex;flex-direction:column;gap:5px}
.tch-facts-mini li{position:relative;padding-inline-start:14px;font-size:12.5px;color:var(--st-ink-2)}
.tch-facts-mini li::before{content:'';position:absolute;inset-inline-start:0;top:7px;
  width:5px;height:5px;border-radius:50%;background:var(--st-gold)}
.tch-bio{margin:12px 0 18px;padding:0 18px;font-size:12.5px;color:var(--st-mut);line-height:1.6}

/* --- Ariza bloki --- */
.apply-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:26px;overflow:hidden;
  box-shadow:var(--st-glow), var(--st-shadow-lg)}
.apply-left{position:relative;padding:34px;color:#fff;
  background:
    radial-gradient(80% 60% at 10% 0%, var(--st-n5), transparent 58%),
    linear-gradient(160deg,var(--st-n7),var(--st-n9))}
.apply-left::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--st-khatam);background-size:118px 118px;opacity:.12}
.apply-left > *{position:relative}
.apply-left h2{color:#fff;font-size:clamp(23px,2.7vw,33px);margin:14px 0 10px}
.apply-left > p{color:#d7e0f2;margin:0 0 22px;font-size:15px;line-height:1.65}
.ben-list{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.ben-row{display:flex;align-items:center;gap:12px;font-size:14px;color:#e6ecf8}
.ben-ico{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(216,174,67,.15);border:1px solid rgba(216,174,67,.34)}
.ben-ico .ico{width:16px;height:16px;color:var(--st-gold-2)}
.apply-left .site-contact{background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 18px;
  box-shadow:none;margin:0}
.apply-left .site-contact::before{display:none}
.apply-card{background:var(--st-card);border:0;border-radius:0;padding:34px;box-shadow:none}
.form-title{display:block;font-family:var(--st-serif);font-weight:600;font-size:20px;
  letter-spacing:-.02em;color:var(--st-ink)}
.form-note{margin:4px 0 4px;font-size:13px;color:var(--st-mut)}
.form-fine{margin:2px 0 0;font-size:11.5px;color:var(--st-mut);line-height:1.5;text-align:center}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:9px 14px;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;
  font-weight:600;color:var(--st-ink-2);background:var(--st-paper-2);
  border:1px solid var(--st-line);transition:background .16s,border-color .16s,color .16s}
.chip:hover{border-color:var(--st-line-2)}
.chip.on{background:var(--st-n6);border-color:var(--st-n6);color:#fff}
@media (max-width:900px){
  .apply-wrap{grid-template-columns:1fr}
  .apply-left,.apply-card{padding:24px}
}

/* --- Savol-javob --- */
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:820px;margin:0 auto}
.faq-item{background:var(--st-card);border:1px solid var(--st-line);border-radius:16px;
  overflow:hidden;transition:border-color .18s}
.faq-item.open{border-color:color-mix(in srgb,var(--st-gold) 46%,transparent)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:17px 20px;cursor:pointer;font:inherit;font-size:15px;font-weight:600;
  text-align:start;color:var(--st-ink);background:none;border:0}
.faq-q:hover{color:var(--st-n6)}
.faq-ico{position:relative;width:16px;height:16px;flex:none}
.faq-ico::before,.faq-ico::after{content:'';position:absolute;inset-inline:0;top:7px;height:2px;
  border-radius:2px;background:var(--st-gold);transition:transform .25s}
.faq-ico::after{transform:rotate(90deg)}
.faq-item.open .faq-ico::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > p{overflow:hidden;margin:0;padding:0 20px;font-size:14px;line-height:1.7;
  color:var(--st-mut);transition:padding .3s ease}
.faq-item.open .faq-a > p{padding:0 20px 19px}
@media (prefers-reduced-motion:reduce){ .faq-a,.faq-a > p{transition:none} }

/* --- Pastki qism: 4 ustun --- */
.site-foot{flex-direction:column;align-items:stretch;gap:0;border-top:0;margin-top:56px;padding-top:0}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;
  border-top:1px solid var(--st-line);padding:34px 0 28px}
.foot-col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.foot-col > b{font-family:var(--st-serif);font-weight:600;font-size:14.5px;color:var(--st-ink);
  margin-bottom:3px}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.foot-brand b{font-family:var(--st-serif);font-weight:600;font-size:16px;color:var(--st-ink)}
.foot-about{margin:0;font-size:13px;color:var(--st-mut);line-height:1.6;max-width:36ch}
.foot-link{padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:13.5px;
  color:var(--st-ink-2);text-align:start}
.foot-link:hover{color:var(--st-gold)}
.foot-line{font-size:13.5px;color:var(--st-mut);line-height:1.5}
.foot-soc{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.soc-btn{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:10px;
  font-size:13px;font-weight:600;color:var(--st-ink-2);
  background:var(--st-paper-2);border:1px solid var(--st-line)}
.soc-btn:hover{border-color:var(--st-gold);color:var(--st-ink)}
.soc-btn .ico{width:15px;height:15px;color:var(--st-gold)}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--st-line);padding:16px 0 4px;font-size:12.5px;color:var(--st-mut)}
@media (max-width:900px){ .foot-cols{grid-template-columns:1fr 1fr;gap:22px} }
@media (max-width:560px){ .foot-cols{grid-template-columns:1fr} }

/* ================= SAYT: HARAKAT (motion) =================
   Qoida: JS ishlamasa ham hamma narsa ko'rinadi — harakat faqat
   "html.js-reveal" bo'lganda yoqiladi. prefers-reduced-motion bo'lsa
   hammasi to'xtaydi (pastdagi umumiy blokda).                          */

/* Tepadagi tilla o'qish chizig'i */
.site-scroll{position:fixed;top:0;left:0;height:2px;z-index:40;pointer-events:none;
  width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--st-gold),var(--st-gold-3),var(--st-gold-2));
  box-shadow:0 0 12px color-mix(in srgb,var(--st-gold) 60%,transparent)}
[dir="rtl"] .site-scroll{transform-origin:100% 50%}

/* --- Hero: ketma-ket chiqish --- */
.js-reveal .site-hero .hero-text > *,
.js-reveal .site-hero .hero-art{opacity:0;transform:translateY(22px)}
.js-reveal .site-hero.lit .hero-text > *,
.js-reveal .site-hero.lit .hero-art{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.22,.9,.28,1), transform .8s cubic-bezier(.22,.9,.28,1);
  transition-delay:calc(var(--d,0) * 95ms)}
.js-reveal .site-hero .hero-art{transform:translateY(22px) scale(.92)}
.js-reveal .site-hero.lit .hero-art{transform:none;transition-duration:1.05s}

/* Panelning o'zi ham yumshoq ochiladi */
.js-reveal .site-hero{opacity:0;transform:translateY(16px) scale(.985)}
.js-reveal .site-hero.lit{opacity:1;transform:none;
  transition:opacity .7s ease, transform .9s cubic-bezier(.22,.9,.28,1)}

/* Sarlavha bo'ylab sekin o'tuvchi tilla yorug'lik */
.site-hero h1 .gold{background-size:220% 100%;background-position:0% 50%}
.js-reveal .site-hero.lit h1 .gold{animation:stSheen 9s ease-in-out 1.2s infinite}
@keyframes stSheen{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Hoshiya chizig'i cho'ziladi */
.js-reveal .hero-rule{width:0}
.js-reveal .site-hero.lit .hero-rule{width:64px;
  transition:width .9s cubic-bezier(.22,.9,.28,1) .5s}

/* Medalyon: sekin suzadi, ichidagi naqsh aylanadi */
.js-reveal .site-hero.lit .site-medal{animation:stFloat 7.5s ease-in-out 1s infinite}
@keyframes stFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.medal-in .khatam-in{animation:stTurn 90s linear infinite}
@keyframes stTurn{to{transform:rotate(360deg)}}
.js-reveal .site-hero.lit .hero-ar{animation:stBreathe 6s ease-in-out 1.4s infinite}
@keyframes stBreathe{0%,100%{opacity:.26}50%{opacity:.46}}

/* Ko'rsatkichlar ketma-ket chiqadi */
.js-reveal .site-hero .hero-stats .hero-stat{opacity:0;transform:translateY(10px)}
.js-reveal .site-hero.lit .hero-stats .hero-stat{opacity:1;transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.9,.28,1);
  transition-delay:calc(700ms + var(--i,0) * 110ms)}

/* --- Tugmalar: ustiga kelganda yorug'lik o'tadi --- */
.site .btn{position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.22,.9,.28,1), box-shadow .22s, background .22s, border-color .22s}
.site .btn::after{content:'';position:absolute;top:0;bottom:0;width:42%;
  inset-inline-start:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);opacity:0}
.site .btn:hover{transform:translateY(-2px)}
.site .btn:active{transform:translateY(0)}
.js-reveal .site .btn:hover::after{opacity:1;animation:stShine .75s ease-out}
@keyframes stShine{from{inset-inline-start:-60%}to{inset-inline-start:120%}}
.hero-cta .btn.gold:hover{box-shadow:0 18px 40px -14px rgba(216,174,67,.95)}
.site .btn.primary:hover{box-shadow:0 16px 34px -14px rgba(7,31,27,.9)}

/* Menyu tugmalari ostida tilla chiziq */
.site-nav .btn.ghost{position:relative}
.site-nav .btn.ghost::before{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:1.5px;
  border-radius:2px;background:var(--st-gold);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .28s cubic-bezier(.22,.9,.28,1)}
.site-nav .btn.ghost:hover::before{transform:scaleX(1)}

/* --- Bo'lim sarlavhasi: chiziq cho'ziladi --- */
.js-reveal .sec-eyebrow::after{transform:scaleX(0);transform-origin:0 50%}
.js-reveal .reveal.seen .sec-eyebrow::after{transform:scaleX(1);
  transition:transform 1s cubic-bezier(.22,.9,.28,1) .15s}
[dir="rtl"] .js-reveal .sec-eyebrow::after{transform-origin:100% 50%}

/* Ko'rsatkichlar tasmasi ham ketma-ket chiqadi */
.js-reveal .stat-band .hero-stat{opacity:0;transform:translateY(12px)}
.js-reveal .reveal.seen .stat-band .hero-stat,
.js-reveal .stat-band.reveal.seen .hero-stat{opacity:1;transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.9,.28,1);
  transition-delay:calc(var(--i,0) * 90ms)}

/* --- Kartalar ketma-ket chiqadi ---

   MUHIM: yashirish FAQAT hali ko'rinmagan `.reveal` bo'limi ichida
   ishlaydi. Ilgari qoida butun sahifaga tegishli edi: bosh sahifa
   ochilgach html ga .js-reveal qo'yilardi va undan keyin chizilgan
   HAR QANDAY karta — masalan ustoz sahifasidagi "Dars vaqtlari" va
   "Boshqa ustozlar" — .reveal ichida bo'lmagani uchun opacity:0 da
   abadiy qolib ketardi: sarlavha ko'rinardi, ostida esa bo'sh joy. */
.js-reveal .reveal:not(.seen) .feat-grid > *,
.js-reveal .reveal:not(.seen) .course-grid > *,
.js-reveal .reveal:not(.seen) .tch-grid > *,
.js-reveal .reveal:not(.seen) .slot-grid > *,
.js-reveal .reveal:not(.seen) .lvl-grid > *{opacity:0;transform:translateY(16px)}
.js-reveal .reveal.seen .feat-grid > *,.js-reveal .reveal.seen .course-grid > *,
.js-reveal .reveal.seen .tch-grid > *,.js-reveal .reveal.seen .slot-grid > *,
.js-reveal .reveal.seen .lvl-grid > *{
  opacity:1;transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.9,.28,1);
  transition-delay:calc(var(--i,0) * 65ms)}

/* Karta ichidagi belgi ustiga kelganda jonlanadi */
.feat-ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s}
.feat:hover .feat-ico{transform:translateY(-3px) rotate(-6deg) scale(1.06);
  box-shadow:0 16px 30px -12px rgba(7,31,27,.9)}
.tch-ava{transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s}
.tch-card:hover .tch-ava{transform:scale(1.07);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--st-gold) 60%,transparent),
    0 18px 34px -16px rgba(7,31,27,.9)}

/* Aloqa kartasidagi qatorlar ketma-ket */
.js-reveal .site-contact .contact-row{opacity:0;transform:translateX(-10px)}
.js-reveal .reveal.seen .site-contact .contact-row{opacity:1;transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.9,.28,1);
  transition-delay:calc(200ms + var(--i,0) * 80ms)}
[dir="rtl"] .js-reveal .site-contact .contact-row{transform:translateX(10px)}

/* Ariza yuborilgandagi belgi */
.lead-ok-in .ok-ico{animation:stPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes stPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* Fon naqshi aylantirilganda sekin siljiydi (JS beradi) */
.site-bg .khatam{transition:transform .12s linear;will-change:transform}

/* --- Harakat kamaytirilgan rejim: hammasi to'xtaydi --- */
@media (prefers-reduced-motion:reduce){
  .site-scroll{display:none}
  .js-reveal .site-hero,.js-reveal .site-hero .hero-text > *,
  .js-reveal .site-hero .hero-art,.js-reveal .site-hero .hero-stats .hero-stat,
  .js-reveal .feat-grid > *,.js-reveal .course-grid > *,
  .js-reveal .tch-grid > *,.js-reveal .slot-grid > *,
  .js-reveal .site-contact .contact-row,
  .js-reveal .stat-band .hero-stat,
  .js-reveal .lvl-grid > *{opacity:1;transform:none;transition:none;animation:none}
  .js-reveal .hero-rule{width:64px}
  .js-reveal .sec-eyebrow::after{transform:none}
  .site-hero h1 .gold,.medal-in .khatam-in,.hero-ar,.site-medal{animation:none}
  .site .btn::after{display:none}
  .site .btn:hover,.feat:hover .feat-ico,.tch-card:hover .tch-ava{transform:none}
  .site-bg .khatam{transform:none !important}
}

/* ================= SAYT: DARAJALAR, NARX, NEGA BIZ =================
   Tuzilishi: hero → ko'rsatkichlar tasmasi → darajalar → bitta narx →
   nega biz → ustozlar → vaqt → ariza → savollar → chaqiruv tasmasi.
   Asosiy fikr: KURS bitta, DARAJA oltita, narx hamma daraja uchun bir
   xil.                                                                 */

/* --- Hero: ishonch qatori ---
   Doiralardagi siluetlar — chizma, haqiqiy odamning surati emas.
   Yuz chizilmaydi; silueti doiraning pastiga "botib" turadi, shuning
   uchun overflow yashiriladi.                                        */
.hero-proof{display:flex;align-items:center;gap:12px;margin-top:20px}
.proof-dots{display:flex}
.proof-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  overflow:hidden;
  background:linear-gradient(150deg,var(--st-n5),var(--st-n8));
  border:1.5px solid color-mix(in srgb,var(--st-gold) 55%,transparent);
  margin-inline-start:-10px;box-shadow:0 6px 16px -8px rgba(0,0,0,.8)}
.proof-dot:first-child{margin-inline-start:0}
/* Har bir silueti biroz boshqa rangda — bitta odam takrorlanmasin */
.proof-dot.d1{color:#e8cf95}
.proof-dot.d2{color:#b9c9e6}
.proof-dot.d3{color:#93a6c6}
.proof-person{width:100%;height:100%;display:block}
.proof-text{font-size:13.5px;font-weight:600;color:#c6d2e8}

/* --- Ko'rsatkichlar tasmasi (hero ostida, to'q rangli) --- */
.stat-band{position:relative;overflow:hidden;margin-top:22px;
  border-radius:20px;padding:22px 26px;color:#fff;
  background:linear-gradient(120deg,var(--st-n7),var(--st-n9));
  box-shadow:var(--st-shadow-lg)}
.stat-band::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--st-khatam);background-size:112px 112px;opacity:.11}
.stat-band .hero-stats{position:relative;display:grid;gap:18px;margin:0;padding:0;border:0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat-band .hero-stat{display:flex;align-items:center;gap:13px;
  padding:0 20px;margin:0;border:0;
  border-inline-end:1px solid rgba(255,255,255,.14)}
.stat-band .hero-stat:first-child{padding-inline-start:0}
.stat-band .hero-stat:last-child{border-inline-end:0}
.stat-ico{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(216,174,67,.14);border:1px solid rgba(216,174,67,.34)}
.stat-ico .ico{width:20px;height:20px;color:var(--st-gold-2)}
.stat-band .hero-stat b{font-size:26px}
@media (max-width:760px){
  .stat-band{padding:18px}
  .stat-band .hero-stats{grid-template-columns:1fr 1fr;gap:14px}
  .stat-band .hero-stat{padding:0;border-inline-end:0}
  .stat-band .hero-stat b{font-size:21px}
  .stat-ico{width:36px;height:36px}
}

/* --- Darajalar --- */
.lvl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lvl{position:relative;display:flex;flex-direction:column;gap:9px;text-align:start;
  background:var(--st-card);border:1px solid var(--st-line);border-radius:20px;
  padding:22px;cursor:pointer;font:inherit;color:inherit;overflow:hidden;
  transition:transform .2s cubic-bezier(.22,.8,.3,1),box-shadow .2s,border-color .2s}
.lvl::before{content:'';position:absolute;inset:0 auto auto 0;height:3px;width:0;
  background:linear-gradient(90deg,var(--st-gold-2),var(--st-gold));
  transition:width .38s cubic-bezier(.22,.8,.3,1)}
.lvl:hover{transform:translateY(-4px);box-shadow:var(--st-shadow);border-color:var(--st-line-2)}
.lvl:hover::before{width:100%}
.lvl.pressing{transform:translateY(-2px) scale(.985)}
.lvl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lvl-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(155deg,var(--st-n5),var(--st-n7));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--st-gold) 26%,transparent),
    0 10px 22px -12px rgba(7,31,27,.8);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.lvl-ico .ico{width:20px;height:20px;color:var(--st-gold-3)}
.lvl:hover .lvl-ico{transform:translateY(-3px) rotate(-6deg) scale(1.06);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--st-gold) 62%,transparent),
    0 16px 30px -12px rgba(7,31,27,.9)}
.lvl-code{font-family:var(--st-serif);font-weight:700;font-size:21px;letter-spacing:.02em;
  color:var(--st-gold);font-variant-numeric:tabular-nums}
.lvl > b{font-family:var(--st-serif);font-weight:600;font-size:18px;
  letter-spacing:-.015em;color:var(--st-ink)}
.lvl > p{margin:0;font-size:13.5px;color:var(--st-mut);line-height:1.6}
.lvl-go{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px;
  font-size:12.5px;font-weight:700;color:var(--st-gold)}
.lvl-go .ico{width:15px;height:15px;transition:transform .26s cubic-bezier(.34,1.56,.64,1)}
.lvl:hover .lvl-go .ico{transform:translateX(4px)}
[dir="rtl"] .lvl:hover .lvl-go .ico{transform:translateX(-4px)}
@media (max-width:1000px){ .lvl-grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .lvl-grid{grid-template-columns:1fr} }

/* --- Bitta narx --- */
.price-wrap{display:flex;flex-direction:column;gap:14px}
.price-card{position:relative;overflow:hidden;display:grid;gap:30px;
  grid-template-columns:1.05fr .95fr;align-items:center;
  border-radius:26px;padding:34px;color:#fff;
  background:
    radial-gradient(80% 60% at 8% 0%, var(--st-n5), transparent 58%),
    linear-gradient(155deg,var(--st-n7),var(--st-n9));
  box-shadow:var(--st-glow),var(--st-shadow-lg)}
.price-card::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--st-khatam);background-size:120px 120px;opacity:.12}
.price-card > *{position:relative}
.price-left{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.price-left h2{color:#fff;font-size:clamp(22px,2.6vw,31px);margin:0}
.price-big{display:flex;align-items:baseline;gap:9px}
.price-big b{font-family:var(--st-serif);font-weight:600;
  font-size:clamp(34px,5vw,52px);line-height:1;letter-spacing:-.03em;
  color:var(--st-gold-3);font-variant-numeric:tabular-nums}
.price-big span{font-size:14px;color:#a9b8d6}
.price-ask{margin:0;font-size:18px;color:var(--st-gold-3);font-weight:600}
.price-note{margin:0;font-size:13.5px;color:#c6d2e8}
.price-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.price-list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;
  color:#e6ecf8;line-height:1.55}
.price-list .ico{width:17px;height:17px;flex:none;margin-top:2px;color:var(--st-gold-2)}
@media (max-width:880px){
  .price-card{grid-template-columns:1fr;gap:22px;padding:24px;border-radius:20px}
}

/* --- Nega biz: chapda naqshli panel, o'ngda ro'yxat --- */
.why-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}
.why-art{position:relative;overflow:hidden;border-radius:26px;min-height:340px;
  display:grid;place-items:center;
  background:
    radial-gradient(80% 70% at 30% 10%, var(--st-n5), transparent 62%),
    linear-gradient(155deg,var(--st-n7),var(--st-n9));
  box-shadow:var(--st-glow),var(--st-shadow-lg)}
.why-art .khatam-in{position:absolute;inset:0;width:100%;height:100%;color:#fff;opacity:.13}
.why-art-in{position:relative;display:grid;place-items:center;width:100%;height:100%;
  padding:30px}
.why-art-in img{width:min(132px,36%);height:auto;border-radius:26px;
  box-shadow:0 0 0 1px rgba(216,174,67,.45), 0 24px 50px -20px rgba(0,0,0,.9)}
.why-ar{position:absolute;left:0;right:0;top:12%;text-align:center;
  font-family:var(--st-ar);font-size:clamp(26px,5vw,40px);line-height:1;
  color:var(--st-gold-3);opacity:.28;pointer-events:none;user-select:none}
.why-badge{position:absolute;inset-inline-end:18px;bottom:18px;
  background:color-mix(in srgb,var(--st-card) 94%,transparent);backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb,var(--st-gold) 40%,transparent);
  border-radius:15px;padding:11px 16px;text-align:center;box-shadow:var(--st-shadow-lg)}
.why-badge b{display:block;font-family:var(--st-serif);font-weight:600;font-size:19px;
  color:var(--st-ink);letter-spacing:-.01em}
.why-badge span{font-size:10.5px;color:var(--st-gold);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700}
.why-text{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.why-text h2{margin:0}
.why-text .sec-note{margin:0}
.why-list{list-style:none;margin:2px 0 4px;padding:0;
  display:flex;flex-direction:column;gap:11px}
.why-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;
  color:var(--st-ink-2);line-height:1.55}
.why-list .ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--st-gold)}
@media (max-width:920px){
  .why-wrap{grid-template-columns:1fr;gap:22px}
  .why-art{min-height:260px;order:-1}
}

/* --- Pastdagi chaqiruv tasmasi --- */
.cta-band{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;
  flex-wrap:wrap;margin-top:44px;border-radius:24px;padding:26px 30px;color:#fff;
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb,var(--st-gold) 18%,transparent), transparent 60%),
    linear-gradient(155deg,var(--st-n6),var(--st-n9));
  box-shadow:var(--st-glow),var(--st-shadow-lg)}
.cta-band::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--st-khatam);background-size:112px 112px;opacity:.12}
.cta-band > *{position:relative}
.cta-ico{width:56px;height:56px;flex:none;border-radius:16px;display:grid;place-items:center;
  background:rgba(216,174,67,.15);border:1px solid rgba(216,174,67,.36)}
.cta-ico .ico{width:26px;height:26px;color:var(--st-gold-2)}
.cta-text{flex:1 1 300px;display:flex;flex-direction:column;gap:5px}
.cta-text b{font-family:var(--st-serif);font-weight:600;font-size:21px;letter-spacing:-.02em}
.cta-text span{font-size:13.5px;color:#c6d2e8;line-height:1.55}
@media (max-width:560px){
  .cta-band{padding:20px;gap:14px;border-radius:18px}
  .cta-band .btn{width:100%}
}

/* --- Formadagi "tanlangan daraja" yorlig'i --- */
.lvl-pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:7px 8px 7px 14px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--st-n6);background:color-mix(in srgb,var(--st-gold) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--st-gold) 52%,transparent)}
.lvl-pill-x{width:22px;height:22px;flex:none;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font:inherit;font-size:15px;line-height:1;
  color:var(--st-n6);background:color-mix(in srgb,var(--st-gold) 34%,transparent)}
.lvl-pill-x:hover{background:var(--st-gold);color:#1a1405}

/* --- Ijtimoiy tarmoq tugmalari (ariza bloki va footer) ---
   Telegram va Instagram logotiplari — o'sha xizmatlarning rasmiy
   belgilari (assets/logo-*.png). Ko'rinishi saytning boshqa
   yorliqlariga (.lvl-pill) o'xshash: past, ixcham, yumaloq chetli.
   Logotip kichik doira ichida, yozuv yonida bitta qatorda.          */
.soc-btn{display:inline-flex;align-items:center;gap:8px;
  padding:4px 14px 4px 4px;border-radius:999px;
  font-size:12.5px;font-weight:600;line-height:1;
  color:var(--st-ink-2);text-decoration:none;
  background:var(--st-card);border:1px solid var(--st-line);
  transition:border-color .18s,background .18s,color .18s,transform .16s}
/* Logotip uchun oq doira — rangli belgi har qanday fonda toza ko'rinadi */
.soc-btn .soc-logo{width:26px;height:26px;flex:none;display:block;border-radius:50%;
  background:#fff;padding:1px;box-sizing:border-box;
  box-shadow:0 1px 2px rgba(10,40,35,.12)}
.soc-btn .soc-ico{width:26px;height:26px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:var(--st-n7)}
.soc-btn .soc-ico .ico{width:14px;height:14px;color:var(--st-gold-2)}
.soc-btn .soc-txt{display:inline-flex;align-items:center;gap:5px;min-width:0}
.soc-btn .soc-txt b{font-size:12.5px;color:var(--st-ink);font-weight:650;white-space:nowrap}
/* Filial nomi — yonida, ingichka va xiraroq */
.soc-btn .soc-txt span{font-size:11px;color:var(--st-mut);font-weight:500;white-space:nowrap}
.soc-btn .soc-txt span::before{content:'· '}
/* Ustiga kelganda: chegara o'sha tarmoqning rangiga kiradi, ko'tarilish arzimas */
.soc-btn:hover{color:var(--st-ink);transform:translateY(-1px);border-color:var(--st-gold)}
.soc-btn.soc-tg:hover{border-color:rgba(55,174,226,.60);background:rgba(55,174,226,.06)}
.soc-btn.soc-ig:hover{border-color:rgba(214,41,118,.50);background:rgba(214,41,118,.05)}
.soc-btn:active{transform:none}
.soc-btn:focus-visible{outline:2px solid var(--st-gold);outline-offset:3px}

/* Ariza blokidagi ko'rinish — to'q fonda, o'lchami bir xil */
.apply-soc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.apply-soc[hidden]{display:none}
.soc-btn.big{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.soc-btn.big .soc-txt b{color:#fff}
.soc-btn.big .soc-txt span{color:#a9b8d6}
.soc-btn.big:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42)}

/* Footerdagi ro'yxat — yonma-yon, o'ralib ketadi */
#foot-soc{display:flex;flex-wrap:wrap;gap:8px}

/* Telefonda barmoqqa qulay bo'lsin — kengligi emas, balandligi oshadi */
@media (hover:none) and (pointer:coarse){
  .soc-btn{padding:6px 15px 6px 6px;gap:9px}
  .soc-btn .soc-logo,.soc-btn .soc-ico{width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){
  .soc-btn{transition:none}
  .soc-btn:hover{transform:none}
}

/* ================= IZOHLAR (sharhlar) =================
   Tepada — sekin yurib turadigan tasma; pastda — to'liq ro'yxat.
   Izohni o'quvchining o'zi yozadi, markaz tasdiqlagach chiqadi.
   "Harakatni kamaytirish" rejimida tasma yurmaydi — o'zi siljitiladi. */

.rev-band{position:relative;overflow:hidden;margin-top:22px;
  border-radius:20px;padding:18px 0 20px;
  background:var(--st-paper-2);border:1px solid var(--st-line)}
.rev-band[hidden]{display:none}
.rev-band-head{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:0 22px 14px}
.rev-band-t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--st-gold)}

/* Aylanib turadigan tasma.
   Ro'yxat ikki teng yarmga qo'yilgan va -50% ga suriladi — ulanish joyi
   ko'rinmaydi. Chetlarda ikki qatlam bor: birinchisi kartani asta-sekin
   shaffof qiladi (mask), ikkinchisi orqadagini xiralashtiradi (blur).
   Shuning uchun karta chapdan xira bo'lib chiqadi va o'ngga xira bo'lib
   kirib ketadi.                                                        */
.rev-marquee{position:relative;overflow:hidden}
.rev-mask{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%)}
.rev-track{display:flex;width:max-content;animation:revRun 34s linear infinite;
  will-change:transform}
.rev-half{display:flex;gap:14px;padding-inline-end:14px}
.rev-marquee:hover .rev-track,.rev-marquee:focus-within .rev-track{animation-play-state:paused}
@keyframes revRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .rev-track{animation-name:revRunRtl}
@keyframes revRunRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* Chetlardagi xiralik */
.rev-edge{position:absolute;top:-4px;bottom:-4px;width:15%;min-width:54px;max-width:150px;
  pointer-events:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.rev-edge.l{left:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 30%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 30%,transparent 100%)}
.rev-edge.r{right:0;
  -webkit-mask-image:linear-gradient(270deg,#000 0,#000 30%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0,#000 30%,transparent 100%)}

/* Izoh kartasi */
.rev-card{margin:0;background:var(--st-card);border:1px solid var(--st-line);
  border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .18s,box-shadow .2s,transform .2s cubic-bezier(.22,.8,.3,1)}
.rev-card:hover{border-color:var(--st-line-2);box-shadow:var(--st-shadow);transform:translateY(-2px)}
.rev-card.sm{width:330px;flex:0 0 330px}
.rev-top{display:flex;align-items:center;gap:11px}
.rev-top > div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.rev-top b{font-size:14.5px;color:var(--st-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-about{font-size:11.5px;color:var(--st-mut)}
.rev-ava{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--st-serif);font-weight:700;font-size:16px;color:var(--st-gold-3);
  background:linear-gradient(150deg,var(--st-n5),var(--st-n8));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--st-gold) 40%,transparent)}
.rev-stars{flex:none;letter-spacing:1px;font-size:13px;color:var(--st-line-2)}
.rev-star.on{color:var(--st-gold-2)}
.rev-card blockquote{margin:0;font-size:13.5px;line-height:1.62;color:var(--st-ink-2)}
.rev-card.sm blockquote{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}

/* Hali izoh bo'lmaganda — tasma o'rnidagi qisqa qator */
.rev-empty{text-align:center;padding:6px 20px 10px;margin:0;
  font-size:13.5px;color:var(--st-mut)}
.rev-empty[hidden]{display:none}
.rev-marquee[hidden]{display:none}
@media (max-width:620px){
  .rev-card.sm{width:270px;flex:0 0 270px}
  .rev-band-head{padding:0 16px 12px}
}

/* Baho tanlash (oynada) */
.rev-pick{display:flex;gap:4px}
/* Yulduz barmoq bilan bosiladi — maydoni kamida 44×44 px */
.rev-pick-b{border:0;background:none;cursor:pointer;padding:2px 4px;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;color:var(--line-strong);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1),color .14s}
.rev-pick-b.on{color:#d8ae43}
.rev-pick-b:hover{transform:scale(1.15)}
.rev-pick-b:active{transform:scale(.94)}
.rev-pick-b:focus-visible{outline:2px solid #b8901f;outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .rev-track{animation:none}
  .rev-marquee{overflow-x:auto}
  /* Harakat o'chirilganda chetdagi xiralik ham kerak emas — odam
     tasmani o'zi surib ko'radi, kartalar to'liq ko'rinishi kerak.  */
  .rev-edge{display:none}
  .rev-mask{-webkit-mask-image:none;mask-image:none}
  .rev-card:hover{transform:none}
  .rev-pick-b{transition:none}
  .rev-pick-b:hover,.rev-pick-b:active{transform:none}
}

/* ================= SAYT: DETALLAR =================
   Bosilganda sezilishi kerak: tugma bir oz bosiladi, RANGI o'zgaradi va
   bosilgan joydan to'lqin tarqaladi. Klaviatura bilan yurganda tilla
   halqa ko'rinadi. Ikonkalar jonlanadi (o'q siljiydi, telefon tebranadi).
   "Harakatni kamaytirish" rejimida faqat rang o'zgaradi — pastdagi
   blokda harakat o'chiriladi.                                          */

/* --- Bosiladigan hamma narsa: to'lqin uchun joy --- */
.site .btn,.site .chip,.site .faq-q,.site .tch-card,.site .soc-btn,
.site .site-phone,.site .hero-tel,.site .foot-link,.site .lvl{
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
.site .foot-link{overflow:visible}

/* --- Bosilish to'lqini (JS qo'shadi, o'zi o'chadi) --- */
.site .rip{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(216,174,67,.5),rgba(216,174,67,0) 70%);
  transform:scale(0);opacity:.9;animation:stRip .58s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes stRip{to{transform:scale(1);opacity:0}}
/* Tilla tugmada to'lqin to'q, to'q fonda esa oq */
.site .btn.gold .rip{background:radial-gradient(circle,rgba(26,20,5,.32),rgba(26,20,5,0) 70%)}
.site .btn.on-dark .rip,.site .hero-tel .rip,.site .tier-hot .btn .rip{
  background:radial-gradient(circle,rgba(255,255,255,.42),rgba(255,255,255,0) 70%)}

/* --- Bosilganda: tugma bosiladi va rangi o'zgaradi --- */
.site .btn{transition:transform .13s cubic-bezier(.22,.9,.28,1),
  box-shadow .2s, background .18s, border-color .18s, color .18s}
.site .btn.pressing,.site .btn:active{transform:translateY(1px) scale(.974)}
.site .btn.gold.pressing,.site .btn.gold:active{
  background:linear-gradient(160deg,var(--st-gold),#a8801e);color:#140f02;
  box-shadow:0 5px 14px -9px rgba(216,174,67,.9)}
.site .btn.on-dark.pressing,.site .btn.on-dark:active{
  background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.58);color:#fff}
.site .btn.primary.pressing,.site .btn.primary:active{
  background:var(--st-n9);border-color:var(--st-n9)}
.site .btn.ghost.pressing,.site .btn.ghost:active{
  background:color-mix(in srgb,var(--st-gold) 15%,transparent);color:var(--st-n6)}
.site .btn:not(.gold):not(.ghost):not(.primary):not(.on-dark).pressing,
.site .btn:not(.gold):not(.ghost):not(.primary):not(.on-dark):active{
  border-color:var(--st-gold);background:color-mix(in srgb,var(--st-gold) 12%,transparent);
  color:var(--st-n6)}
.site .site-phone.pressing,.site .site-phone:active,
.site .soc-btn.pressing,.site .soc-btn:active{
  background:color-mix(in srgb,var(--st-gold) 14%,transparent);border-color:var(--st-gold);
  transform:scale(.97)}
.site .hero-tel.pressing,.site .hero-tel:active{
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55);transform:scale(.97)}
.site .foot-link.pressing,.site .foot-link:active{color:var(--st-gold)}

/* --- Klaviatura: tilla halqa (sichqoncha bilan chiqmaydi) --- */
.site .btn:focus-visible,.site .chip:focus-visible,.site .faq-q:focus-visible,
.site .tch-card:focus-visible,.site .soc-btn:focus-visible,
.site .foot-link:focus-visible,.site .site-phone:focus-visible,
.site .hero-tel:focus-visible,.site .site-brand:focus-visible{
  outline:2px solid var(--st-gold);outline-offset:3px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--st-gold) 22%,transparent)}

/* --- Maydonlar: fokusda tilla halqa --- */
.site .field input,.site .field select,.site .field textarea{
  transition:border-color .16s, box-shadow .2s, background .16s}
.site .field input:focus,.site .field select:focus,.site .field textarea:focus{
  outline:none;border-color:var(--st-gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--st-gold) 20%,transparent)}
.site .field input:hover,.site .field select:hover{border-color:var(--st-line-2)}
.site .field input::placeholder{color:color-mix(in srgb,var(--st-mut) 85%,transparent)}

/* Tanlash maydoni: o'z tilla o'qimiz (brauzer o'qi har joyda boshqacha) */
.site .field select{appearance:none;-webkit-appearance:none;
  padding-inline-end:36px;background-color:var(--st-card);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8901f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
[dir="rtl"] .site .field select{background-position:left 13px center}

/* --- Ikonkalar: tugma ichida jonlanadi --- */
.site .btn .ico{transition:transform .26s cubic-bezier(.34,1.56,.64,1)}
/* O'q bor tugmalarda o'q oldinga siljiydi */
.site .btn:hover .ico-go{transform:translateX(3px)}
[dir="rtl"] .site .btn:hover .ico-go{transform:translateX(-3px)}
.site .btn.pressing .ico-go{transform:translateX(6px)}
[dir="rtl"] .site .btn.pressing .ico-go{transform:translateX(-6px)}
/* Telefon ikonkasi ustiga kelganda tebranadi */
.site .site-phone:hover .ico,.site .hero-tel:hover .ico,
.site .contact-row:hover .ico{animation:stRing .55s ease-in-out}
@keyframes stRing{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-13deg)}45%{transform:rotate(11deg)}
  70%{transform:rotate(-7deg)}
}
/* Kirish/kabinet tugmalarining ikonkasi */
.site .btn.primary:hover .ico,.site .btn.gold:hover .ico{transform:scale(1.12)}

/* --- Imkoniyat kartalari: ikonka tilla halqa ichida --- */
.feat-ico{position:relative;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--st-gold) 26%,transparent),
    0 10px 22px -12px rgba(7,31,27,.8)}
.feat-ico::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(70% 70% at 30% 20%,rgba(216,174,67,.26),transparent 70%);
  opacity:0;transition:opacity .3s}
.feat:hover .feat-ico::after{opacity:1}
.feat:hover .feat-ico{box-shadow:0 0 0 1px color-mix(in srgb,var(--st-gold) 62%,transparent),
  0 16px 30px -12px rgba(7,31,27,.9)}
.feat{cursor:default}
.feat b{transition:color .2s}
.feat:hover b{color:var(--st-n6)}

/* --- Bosqich kartalari --- */
.tier .btn{width:100%}
.tier-ribbon{overflow:hidden}
.tier-ribbon::after{content:'';position:absolute;top:0;bottom:0;width:38%;left:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg)}
.js-reveal .tier-hot .tier-ribbon::after{animation:stRibbon 3.6s ease-in-out 1.6s infinite}
@keyframes stRibbon{0%{left:-50%}28%,100%{left:130%}}
.tier-fee b{transition:color .2s}
.tier:hover .tier-fee b{color:var(--st-gold)}
.tier-hot:hover .tier-fee b{color:#fff}
.tier-list li{transition:color .18s}
.tier:hover .tier-list .ico{color:var(--st-gold-2)}
.tier-extra{transition:border-color .18s,transform .18s}
.tier-extra:hover{border-color:color-mix(in srgb,var(--st-gold) 45%,transparent)}

/* --- Ustoz kartalari: surat yaqinlashadi, tagida "Batafsil" --- */
.tch-photo::after{content:'';position:absolute;inset:auto 0 0 0;height:56%;pointer-events:none;
  background:linear-gradient(to top,rgba(5,22,18,.82),transparent);opacity:.9}
.tch-photo .tch-ava img{transition:transform .5s cubic-bezier(.22,.9,.28,1)}
.tch-card:hover .tch-photo .tch-ava img{transform:scale(1.07)}
.tch-card:hover .tch-photo .tch-ava{transform:none;box-shadow:none}
.tch-ribbon{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.tch-card:hover .tch-ribbon{transform:translateY(-2px)}
.tch-card > b{transition:color .2s}
.tch-card:hover > b{color:var(--st-gold)}
.tch-card.pressing{transform:translateY(-2px) scale(.986)}
.tch-card .tch-bio{margin-bottom:6px}
.tch-card .tch-facts-mini:last-of-type{margin-bottom:6px}
.tch-go{display:flex;align-items:center;gap:7px;margin-top:auto;
  padding:12px 18px 15px;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--st-gold);border-top:1px solid var(--st-line);margin-inline:18px;
  padding-inline:0}
.tch-go .ico{width:15px;height:15px;transition:transform .26s cubic-bezier(.34,1.56,.64,1)}
.tch-card:hover .tch-go .ico{transform:translateX(4px)}
[dir="rtl"] .tch-card:hover .tch-go .ico{transform:translateX(-4px)}
.tch-card{cursor:pointer}
/* Ismi bor, surati yo'q ustozda harf naqsh ustida turadi */
.tch-photo .tch-ini{position:relative;z-index:1;
  text-shadow:0 8px 24px rgba(0,0,0,.6)}

/* --- Tanlov tugmachalari (chip): tanlanganda belgi chiqadi --- */
.chip{position:relative;transition:background .16s,border-color .16s,color .16s,
  transform .13s cubic-bezier(.22,.9,.28,1)}
.chip:hover{border-color:var(--st-gold);color:var(--st-n6)}
.chip.pressing,.chip:active{transform:scale(.955)}
.chip.on{background:var(--st-n6);border-color:var(--st-n6);color:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--st-gold) 24%,transparent)}
.chip.on::before{content:'';display:inline-block;width:12px;height:7px;margin-inline-end:7px;
  border-left:2px solid var(--st-gold-2);border-bottom:2px solid var(--st-gold-2);
  transform:rotate(-45deg) translateY(-2px);vertical-align:middle}

/* --- Savol-javob --- */
.faq-q{transition:background .18s,color .18s}
.faq-item.open .faq-q{background:color-mix(in srgb,var(--st-gold) 7%,transparent)}
.faq-q.pressing{background:color-mix(in srgb,var(--st-gold) 13%,transparent)}
.faq-item{transition:border-color .18s,box-shadow .22s}
.faq-item:hover{border-color:var(--st-line-2)}
.faq-item.open{box-shadow:0 10px 26px -18px rgba(7,31,27,.7)}

/* --- Dars vaqtlari: ustiga kelganda tilla nuqta --- */
.slot{position:relative}
.slot::before{content:'';position:absolute;top:12px;inset-inline-end:12px;
  width:6px;height:6px;border-radius:50%;background:var(--st-line-2);transition:background .2s,box-shadow .2s}
.slot:hover::before{background:var(--st-gold);box-shadow:0 0 8px var(--st-gold-2)}

/* --- Pastdagi ijtimoiy tugmalar --- */
.soc-btn{transition:background .18s,border-color .18s,color .18s,transform .13s}
.soc-btn:hover{transform:translateX(3px)}
[dir="rtl"] .soc-btn:hover{transform:translateX(-3px)}
.foot-link{transition:color .18s,transform .16s}
.foot-link:hover{transform:translateX(3px)}
[dir="rtl"] .foot-link:hover{transform:translateX(-3px)}

/* --- Markaz nomi (tepa chap) --- */
.site-brand{transition:transform .16s cubic-bezier(.22,.9,.28,1)}
.site-brand:active{transform:scale(.97)}
.site-brand .logo{transition:box-shadow .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.site-brand:hover .logo{transform:rotate(-5deg) scale(1.06);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--st-gold) 60%,transparent)}

/* --- Telefonda barmoq uchun kattaroq nishon --- */
@media (max-width:560px){
  .site .btn{min-height:44px}
  .site .btn.sm{min-height:38px}
  .chip{min-height:40px;display:inline-flex;align-items:center}
  .faq-q{padding:16px 16px}
  .tch-go{padding:11px 16px 14px}
}

/* --- Harakat kamaytirilgan rejim: faqat rang qoladi --- */
@media (prefers-reduced-motion:reduce){
  .site .rip{display:none}
  .site .btn.pressing,.site .btn:active,.site .chip.pressing,.site .chip:active,
  .site .tch-card.pressing,.site .soc-btn:hover,.site .foot-link:hover,
  .site .site-phone.pressing,.site .hero-tel.pressing,
  .site-brand:hover .logo,.site-brand:active,
  .tch-card:hover .tch-photo .tch-ava img,.tch-card:hover .tch-ribbon,
  .tch-card:hover .tch-go .ico,.site .btn:hover .ico,
  .site .btn.primary:hover .ico,.site .btn.gold:hover .ico{transform:none}
  .site .site-phone:hover .ico,.site .hero-tel:hover .ico,
  .site .contact-row:hover .ico,.js-reveal .tier-hot .tier-ribbon::after{animation:none}
  .site .field input,.site .field select,.site .field textarea,
  .site .btn,.chip,.faq-q,.faq-item,.soc-btn,.foot-link,.slot::before{transition:none}
}

/* ================= BOG'LANISH (qo'ng'iroq) =================
   Raqam bosilsa telefon o'zi teradi. Jadvalda ham, kartada ham bir xil
   ko'rinadi. Telefonda tugmalar barmoq uchun kattaroq.                 */
.tel-link{display:inline-flex;align-items:center;gap:6px;
  color:var(--ink);text-decoration:none;font-weight:600;
  padding:3px 8px;margin:-3px -8px;border-radius:8px;
  transition:background .14s,color .14s}
.tel-link .ico{width:14px;height:14px;flex:none;color:var(--brand);opacity:.9}
.tel-link:hover{background:var(--surface-2);color:var(--brand)}
.tel-link:active{background:var(--brand);color:#fff}
.tel-link:active .ico{color:#fff}
.tel-link:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

.contact-btns{gap:8px;flex-wrap:wrap}
.contact-btns .btn{text-decoration:none}
.btn.call-btn{border-color:color-mix(in srgb,var(--ok) 45%,var(--line-strong));
  color:var(--ok)}
.btn.call-btn:hover{background:var(--ok-soft);border-color:var(--ok)}
.btn.call-btn:active{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.call-btn .ico{color:currentColor}
/* Jadval ichidagi kichik tugma — faqat ikonka */
.btn.sm.call-btn{padding:6px 9px}

.quick-contact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;margin-bottom:14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line)}
.quick-contact[hidden]{display:none}
.quick-contact .qc-label{font-size:12.5px;font-weight:700;color:var(--muted);
  letter-spacing:.02em}

@media (max-width:560px){
  .btn.sm.call-btn{min-height:38px;min-width:42px}
  .contact-btns .btn{flex:1 1 auto;justify-content:center}
  .tel-link{padding:7px 8px;margin:-7px -8px}
}

/* ---------- O'qituvchi uchun davomat kartasi ---------- */
.att-list{display:flex;flex-direction:column;gap:8px}
.att-row{display:flex;align-items:center;gap:10px;width:100%;text-align:start;cursor:pointer;
  min-height:56px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--surface);color:var(--ink);font:inherit}
.att-row:hover{background:var(--surface-2)}
.att-row.done{border-color:var(--line);background:var(--surface-2)}
.att-time{flex:0 0 52px;font-size:15px;font-weight:700;color:var(--brand)}
.att-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.att-main b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-row .btn{pointer-events:none}
.att-late{margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}

/* ---------- Xodimga hisob ochish ---------- */
.acc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.acc-row label{display:flex;align-items:center;gap:8px;cursor:pointer}
.acc-box{margin-top:10px}

/* ---------- O'quvchi kabineti (kirishsiz sahifa) ---------- */
.login-alt{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid var(--line);margin-top:2px}
.login.kabinet{max-width:520px}
.kab-result:empty{display:none}
/* Daraja aniqlash testi (A1…C2) */
.login.test-box{max-width:620px}
.test-body{display:flex;flex-direction:column;gap:10px}
.test-lang{display:flex;flex-direction:column;gap:12px;align-items:stretch}
/* Testga berilgan vaqt: boshlashdan oldin yozuv, test davomida sanoq */
.test-rules{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:7px 13px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line)}
.test-rules svg{width:16px;height:16px;color:var(--accent)}
.test-clock{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 12px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);margin-bottom:10px;font-size:14px}
.test-clock svg{width:16px;height:16px;color:var(--muted)}
.test-clock-v{font-variant-numeric:tabular-nums;font-size:17px}
.test-clock.low{border-color:var(--bad);background:var(--bad-soft)}
.test-clock.low svg,.test-clock.low .test-clock-v{color:var(--bad)}
.test-timeup{font-weight:600;color:var(--bad)}
.test-lang-row{display:flex;gap:8px;flex-wrap:wrap}
.test-lang-row .btn{flex:1;min-width:120px;justify-content:center}
.test-box[dir="rtl"] .test-opt{text-align:right}
.test-box[dir="rtl"] .test-q{text-align:right}
.test-bar{height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.test-bar span{display:block;height:100%;background:var(--accent);
  transition:width .25s ease}
.test-meta{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:9px 0 3px}
.test-kind{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);font-weight:600}
.test-count{font-variant-numeric:tabular-nums}
.test-q{font-size:17px;line-height:1.5;margin:0 0 12px;text-wrap:balance}
.test-opts{display:flex;flex-direction:column;gap:8px}
.test-opt{text-align:start;padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface-2);color:var(--text);
  font:inherit;font-size:16px;line-height:1.5;cursor:pointer}
.test-opt:hover{border-color:var(--accent);background:var(--surface)}
.test-opt:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.test-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.test-end{display:flex;flex-direction:column;gap:10px}
.test-end input{padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);color:var(--text);font:inherit}
.test-res{display:flex;flex-direction:column;gap:10px}
.test-level{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2)}
.test-level b{font-size:40px;line-height:1.1;letter-spacing:.04em}
.test-rows{display:flex;flex-direction:column;gap:4px}
.test-row{display:flex;align-items:center;gap:10px;padding:7px 12px;
  border:1px solid var(--line);border-radius:var(--r-lg)}
.test-row b{min-width:28px}
.test-row span:nth-child(2){flex:1;min-width:0}
.test-row.ok{border-color:var(--ok, #2e7d52)}
.test-row span:last-child{font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .test-q{font-size:16px}
  .test-opt{font-size:15px;padding:10px 12px}
  .test-level b{font-size:34px}
}

/* Kabinetga kirish: 4 xonali kod */
.kab-howto{display:flex;flex-direction:column;gap:10px}
.kab-form{display:flex;flex-direction:column;gap:6px}
.kab-row{display:flex;gap:8px;align-items:stretch}
.kab-code{flex:1;min-width:0;font-size:28px;line-height:1.2;letter-spacing:.42em;
  text-align:center;font-variant-numeric:tabular-nums;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);color:var(--text)}
.kab-code:focus{outline:2px solid var(--accent);outline-offset:1px}
.kab-row .btn{white-space:nowrap;padding-left:18px;padding-right:18px}
.kab-out{display:flex;justify-content:flex-end;padding-top:8px;
  border-top:1px solid var(--line);margin-top:4px}
@media (max-width:560px){
  .kab-row{flex-direction:column}
  .kab-code{font-size:24px}
}
.kab-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px;background:var(--surface-2)}
.kab-card h3{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  margin:6px 0 0}
.kab-head{display:flex;align-items:center;gap:10px}
.kab-head .main-col{min-width:0}
.kab-head b{display:block;font-size:16px}
.kab-groups{display:flex;flex-direction:column;gap:8px}
.kab-group{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--surface)}
.kab-money{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-radius:10px;padding:10px 12px;font-size:15px}
.kab-money.bad{background:var(--bad-soft);color:var(--bad)}
.kab-money.ok{background:var(--ok-soft);color:var(--ok)}
.kab-line{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 2px;border-bottom:1px dashed var(--line);font-size:13.5px}
.kab-line:last-child{border-bottom:0}
.kab-line.warn{color:var(--warn)}
.kab-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
.kab-stats>div{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:8px 6px;text-align:center}
.kab-stats b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.kab-stats span{font-size:11.5px;color:var(--muted)}
.kab-last{margin-top:6px}
.code-chip{font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  background:var(--brand-soft);color:var(--brand);border-radius:8px;padding:3px 8px;display:inline-block}

/* ---------- Telefondagi "Menyu" varag'i ----------
   Alohida klass: umumiy .list-item uslubi o'zgarmaydi, boshqa sahifalar buzilmaydi.
   Ikonka o'lchami aniq belgilangan — cho'zilib ketmaydi.                      */
.menu-sheet{display:flex;flex-direction:column;gap:2px;
  max-height:min(60vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin:-6px -4px;padding:2px 4px}
.menu-sheet .menu-item{display:flex;align-items:center;gap:12px;width:100%;
  min-height:48px;padding:10px 12px;border:0;border-radius:10px;
  background:none;color:var(--ink);font:inherit;font-size:14.5px;font-weight:500;
  text-align:start;cursor:pointer}
.menu-sheet .menu-item .ico{width:22px;height:22px;flex:0 0 22px;opacity:.75;color:var(--muted)}
.menu-sheet .menu-item b{flex:1;min-width:0;font-weight:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-sheet .menu-item:hover{background:var(--surface-2)}
.menu-sheet .menu-item[aria-current="page"]{background:var(--brand-soft);color:var(--brand);font-weight:700}
.menu-sheet .menu-item[aria-current="page"] .ico{opacity:1;color:var(--brand)}
.menu-sheet .menu-item .tick{width:18px;height:18px;flex:0 0 18px;color:var(--brand)}

/* ---------- Ro'yxat elementlari ---------- */
.list{display:flex;flex-direction:column}
.list-item{display:flex;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.list-item:last-child{border-bottom:0}
.list-item:hover{background:var(--surface-2)}
.list-item .main-col{flex:1;min-width:0}
.list-item .main-col b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .main-col span{font-size:12px;color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:9px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;font-family:var(--display)}

/* ---------- Yorliqlar (tabs) ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:14px}
.tabs button{background:none;border:0;padding:9px 13px;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- Jadval (haftalik) ---------- */
.week{display:grid;grid-template-columns:repeat(7,minmax(112px,1fr));gap:8px;min-width:760px}
.week-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;min-height:120px}
.week-col h4{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.week-col h4 em{font-style:normal;color:var(--ink);font-weight:700;display:block;font-size:13px;text-transform:none;letter-spacing:0}
/* Bayram/tanaffus kuni — dars rejada tursa ham, o'tmaydi */
.week-col.holiday-col{background:color-mix(in srgb,var(--warn,#c8862a) 7%,var(--surface))}
.day-off{display:flex;align-items:center;gap:6px;margin-bottom:8px;
  font-size:11.5px;font-weight:600;color:var(--warn,#8a5d12)}
.day-off .ico{width:13px;height:13px;flex:none}
.holiday-col .lesson{opacity:.55}
.lesson{background:var(--brand-soft);border-left:3px solid var(--brand);border-radius:7px;padding:7px 8px;margin-bottom:6px;cursor:pointer;font-size:12px}
.lesson b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson span{color:var(--ink-2)}
.lesson.cancelled{background:var(--surface-2);border-left-color:var(--muted);opacity:.7;text-decoration:line-through}
.lesson.done{border-left-color:var(--ok)}
.today-col{outline:2px solid var(--brand);outline-offset:0}

/* ---------- Davomat ---------- */
.att-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.att-row .nm{flex:1;min-width:130px;font-weight:600;font-size:13.5px}
.att-opts{display:flex;gap:5px;flex-wrap:wrap}
.att-opts button{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:5px 9px;
  font-size:12px;font-weight:600;cursor:pointer;color:var(--muted)}
.att-opts button[aria-pressed="true"].ok{background:var(--ok);border-color:var(--ok);color:#fff}
.att-opts button[aria-pressed="true"].bad{background:var(--bad);border-color:var(--bad);color:#fff}
.att-opts button[aria-pressed="true"].warn{background:var(--warn);border-color:var(--warn);color:#fff}
.att-opts button[aria-pressed="true"].info{background:var(--info);border-color:var(--info);color:#fff}

/* ---------- Chek ---------- */
.receipt{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);border:1px dashed var(--line-strong);
  border-radius:var(--r);padding:16px;white-space:pre-wrap;line-height:1.6}
@media print{
  .sidebar,.topbar,.tabbar,.m-foot,#toasts{display:none!important}
  .modal-back{position:static;background:none;padding:0}
  .modal{box-shadow:none;max-width:none}
  body{background:#fff}
}

/* ---------- Progres chizig'i ---------- */
.bar{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:var(--brand)}
.bar.warn>i{background:var(--warn)}
.bar.bad>i{background:var(--bad)}

/* ================= TELEFON UCHUN ================= */
@media (max-width:760px){
  /* Bosish maydonlari kamida 44px */
  .btn{min-height:44px;padding:10px 14px}
  .btn.sm{min-height:40px;padding:8px 12px}
  .x-btn{min-width:44px;min-height:44px;display:grid;place-items:center}
  .att-opts button{min-height:44px;min-width:76px}
  .tabs button{min-height:44px}
  .nav button,.list-item{min-height:48px}
  /* iOS zoomni oldini olish uchun 16px */
  .field input,.field select,.field textarea,.topbar .search input{font-size:16px;min-height:44px}
  .field textarea{min-height:88px}

  /* Til va mavzu telefonda yuqoridagi tasmadan olib tashlandi — ular
     "Menyu" varag'ida va Sozlamalarda turibdi. Shu bilan har sahifada
     bir qator joy bo'shaydi.                                          */
  .topbar #lang-pick,.topbar #theme-toggle{display:none}
  .topbar{padding:8px 16px}

  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{padding:12px}
  .tile .val{font-size:21px}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .page-head h1{font-size:19px}
  .page-actions{width:100%}
  /* Asosiy amal butun enlikda, qolganlari ikkitadan yonma-yon —
     shunda sahifaning boshi uchta tugmadan iborat bo'lib qolmaydi.
     Uzun yozuv ikki qatorga tushadi, kesilmaydi.                    */
  .page-actions .btn{flex:1 1 calc(50% - 8px);min-width:0;white-space:normal;
    padding-inline:10px;line-height:1.2}
  .page-actions .btn.primary{flex:1 1 100%}
  .filters{flex-direction:column;align-items:stretch;padding:12px}
  .filters .field{flex:1 1 auto;width:100%}
  .filters .seg{width:100%;overflow-x:auto}
  .filters .seg button{flex:1;white-space:nowrap}
  .form-grid{grid-template-columns:1fr}

  /* Jadval → karta */
  table.tbl{min-width:0;display:block}
  table.tbl thead{display:none}
  table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%}
  table.tbl tr{border:1px solid var(--line);border-radius:12px;padding:6px 2px;margin-bottom:10px;background:var(--surface)}
  table.tbl tbody tr:hover{background:var(--surface)}
  table.tbl td{border-bottom:0;padding:7px 12px;display:flex;gap:12px;align-items:center;justify-content:space-between;text-align:left}
  table.tbl td.r{text-align:left}
  table.tbl td[data-label]::before{content:attr(data-label);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--muted);font-weight:700;flex:none}
  table.tbl td:empty{display:none}
  table.tbl td:first-child{border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:2px}
  table.tbl td:first-child[data-label]::before{display:none}
  .tbl-wrap{overflow-x:visible}
  .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Ro'yxat qatorlari telefonda o'ralsin */
  .list-item{flex-wrap:wrap;row-gap:6px;padding-inline:12px}
  /* Ichkaridagi hech bir ustun qatorni kengaytirib yubormasin —
     aks holda butun sahifa yon tomonga siljib ketadi.                */
  .list-item>*{min-width:0;max-width:100%}
  .list,.chat-list{min-width:0}
  .list-item .main-col{flex:1 1 60%;min-width:0}
  .pill{white-space:normal}

  /* Modal — pastdan chiquvchi varaq */
  .modal-back{align-items:flex-end;padding:0}
  .modal{max-width:none;border-radius:18px 18px 0 0;max-height:94dvh;display:flex;flex-direction:column;animation:sheet .18s ease-out}
  .modal .m-head{position:sticky;top:0;background:var(--surface);z-index:2;border-radius:18px 18px 0 0}
  .modal .m-body{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
  .modal .m-foot{position:sticky;bottom:0;background:var(--surface);
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .modal .m-foot .btn{flex:1 1 auto;min-width:120px}
  @keyframes sheet{from{transform:translateY(24px)}to{transform:none}}
  @media (prefers-reduced-motion:reduce){.modal{animation:none}}

  .att-row{gap:8px;padding:10px 12px}
  .att-row .nm{flex:1 1 100%}
  .daypick label{min-height:44px;min-width:48px;display:inline-flex;
    align-items:center;justify-content:center;padding:8px 12px}
  .receipt{font-size:11.5px;padding:12px}
  .kv{grid-template-columns:1fr auto}
  .week{min-width:640px}

  /* ---- Yon tomonga suriladigan tasmalar ---- */
  /* Bo'limlar va filtrlar ekranga sig'masa yon tomonga suriladi. Odam
     buni bilishi uchun o'ng chetda soyali "davomi bor" belgisi turadi.  */
  .tabs,.filters .seg,.day-strip,.ts-row{
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .tabs::-webkit-scrollbar,.filters .seg::-webkit-scrollbar{display:none}
  .tabs button,.filters .seg button{scroll-snap-align:start}
  /* Soya faqat surish mumkin bo'lgan tomonda ko'rinadi — oxiriga
     yetganda o'zi yo'qoladi. Qo'shimcha kod kerak emas.               */
  .tabs,.day-strip,.ts-row{
    background:
      linear-gradient(to right,var(--bg) 40%,transparent) left center/22px 100% no-repeat local,
      linear-gradient(to left,var(--bg) 40%,transparent) right center/22px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(15,23,42,.16),transparent) left center/11px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,rgba(15,23,42,.16),transparent) right center/11px 100% no-repeat scroll}

  /* Filtr tugmalari ham barmoqqa mos balandlikda */
  .seg button{min-height:40px;padding:9px 14px}

  /* ---- Barmoq bilan bosiladigan joylar ---- */
  /* Telefon havolasi, sayt pastidagi havolalar va belgilash katakchalari
     sichqoncha uchun yetarli edi, barmoq uchun kichik. */
  .tel-link{min-height:40px}
  .site .foot-link{min-height:40px;display:inline-flex;align-items:center}
  /* Telefon raqami va bot havolasi — bosish uchun yetarli baland */
  .contact-row a{min-height:40px;display:inline-flex;align-items:center}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px}
  .field label input[type="checkbox"],.check-row input[type="checkbox"]{margin-inline-end:8px}
  .check-row,label.check,.popts label,.perm-row label{min-height:40px;display:flex;align-items:center;gap:8px}
  select{min-height:40px}
  /* Oy oldinga-orqaga tugmalari */
  .month-nav .btn,.mon-nav .btn,.btn.sm.ico-only{min-width:44px}

  /* Davomatdagi "Bugungi darslar" sarlavhasi ikki qatorga tushsin */
  .today-strip .ts-head{flex-wrap:wrap;row-gap:2px}
  .today-strip .ts-head b{flex:1 1 100%}

  /* Telefondagi menyuda til va mavzu */
  .menu-tools{padding:0 0 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
  .menu-lang{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .menu-lang .btn{flex:1 1 auto;min-width:64px;justify-content:center}
}
@media (max-width:400px){
  .page-actions .btn{flex:1 1 calc(50% - 8px)}
  .page-actions .btn.primary{flex:1 1 100%}
  .tile .val{font-size:19px}
  .view{padding:14px 14px 84px}
}

/* ---- Barmoq bilan ishlatiladigan qurilma (ekran kengligidan qat'i nazar) ----
   Telefonni yotiq tutganda eni 760 px dan oshib ketadi, lekin bosish
   baribir barmoq bilan bo'ladi. Planshetda ham shunday. Shuning uchun
   bosish maydonlari ekran kengligiga emas, KURSOR turiga qarab
   kattalashtiriladi.                                                  */
@media (hover:none) and (pointer:coarse){
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
  .seg button,.tabs button{min-height:40px}
  /* Davomat belgilash tugmalari — telefonni yotiq tutganda ham katta */
  .att-opts button{min-height:44px;min-width:76px}
  .day-strip button{min-width:56px;min-height:56px}
  .x-btn{min-width:44px;min-height:44px;display:grid;place-items:center}
  .tel-link,.contact-row a,.site .foot-link{min-height:40px;
    display:inline-flex;align-items:center}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px}
  .popts label,.perm-row label,.check-row,label.check{min-height:40px;
    display:flex;align-items:center;gap:8px}
  /* Dars kunlari — barmoq bilan bosiladigan eng ko'p ishlatiladigan joy */
  .daypick label{min-height:44px;min-width:48px;display:inline-flex;
    align-items:center;justify-content:center;padding:8px 12px}
  select{min-height:40px}
  .field input,.field select,.field textarea{font-size:16px;min-height:44px}
  .rev-pick-b{min-width:44px;min-height:44px}
}

/* Kunlik sana tasmasi (telefon uchun) */
.day-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.day-strip button{scroll-snap-align:start}
/* Katta ekranda haftalik jadval, telefonda kun tasmasi */
@media (min-width:761px){ .day-strip{display:none} }
@media (max-width:760px){ .week-wrap{display:none} }
.day-strip button{flex:0 0 auto;min-width:56px;min-height:56px;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;
  font-size:11px;color:var(--muted);font-weight:600}
.day-strip button b{font-size:16px;color:var(--ink);font-family:var(--display)}
.day-strip button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.day-strip button[aria-pressed="true"] b{color:#fff}
.day-strip button .cnt{font-size:10px}

.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px;align-items:baseline}
.kv dt{color:var(--muted);font-size:12.5px}
.kv dd{margin:0;font-weight:600;text-align:right}
.stack{display:flex;flex-direction:column;gap:14px}
.rowflex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.right{text-align:right}
.nowrap{white-space:nowrap}
.hr{height:1px;background:var(--line);border:0;margin:4px 0}

/* ================= ARAB TILI (RTL) ================= */
[dir="rtl"] body{direction:rtl}
[dir="rtl"] .nav button,
[dir="rtl"] table.tbl th,
[dir="rtl"] table.tbl td{text-align:right}
[dir="rtl"] table.tbl th.r,[dir="rtl"] table.tbl td.r{text-align:left}
[dir="rtl"] .kv dd{text-align:left}
[dir="rtl"] .topbar .search input{padding:8px 34px 8px 12px}
[dir="rtl"] .topbar .search svg{left:auto;right:10px}
[dir="rtl"] .lesson{border-left:0;border-right:3px solid var(--brand)}
[dir="rtl"] .lesson.cancelled{border-right-color:var(--muted)}
[dir="rtl"] .lesson.done{border-right-color:var(--ok)}
[dir="rtl"] .list-item .main-col b,[dir="rtl"] .list-item .main-col span{text-align:right}
[dir="rtl"] .empty p{margin-inline:auto}
[dir="rtl"] .banner .btn{margin-left:0;margin-right:auto}
[dir="rtl"] .receipt{direction:ltr;text-align:left}
[dir="rtl"] .mono,[dir="rtl"] .num{direction:ltr;display:inline-block}
@media (max-width:760px){
  [dir="rtl"] table.tbl td{text-align:right}
  [dir="rtl"] table.tbl td.r{text-align:right}
}

/* ================= TIL TANLASH ================= */
.lang-pick{display:inline-flex;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;background:var(--surface)}
.lang-pick button{border:0;background:none;padding:7px 9px;cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);min-height:38px}
.lang-pick button[aria-pressed="true"]{background:var(--brand);color:#fff}
@media (max-width:760px){.lang-pick button{min-height:44px;padding:8px 10px}}

/* ================= SUHBAT ================= */
.chat{display:grid;grid-template-columns:230px 1fr;min-height:420px}
.chat-list{border-right:1px solid var(--line);overflow-y:auto;max-height:60vh}
[dir="rtl"] .chat-list{border-right:0;border-left:1px solid var(--line)}
.chat-main{display:flex;flex-direction:column;min-height:420px}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;max-height:52vh}
.msg{max-width:78%;padding:8px 11px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:13.5px}
.msg.me{align-self:flex-end;background:var(--brand-soft);border-color:transparent}
.msg .meta{font-size:10.5px;color:var(--muted);margin-top:3px}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-form input{flex:1;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface)}
.chat-unread{background:var(--bad);color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;padding:1px 6px;min-width:18px;text-align:center}
@media (max-width:760px){
  /* minmax(0,1fr) — aks holda uzun ism ustunni kengaytirib, butun
     sahifani yon tomonga siljitib yuboradi.                          */
  .chat{grid-template-columns:minmax(0,1fr)}
  .chat-main,.chat-msgs,.chat-form{min-width:0}
  .chat-list{border-right:0;border-bottom:1px solid var(--line);max-height:180px}
  [dir="rtl"] .chat-list{border-left:0;border-bottom:1px solid var(--line)}
  .chat-form input{font-size:16px;min-height:44px}
}

/* ================= RUXSATLAR JADVALI ================= */
.perm-grid{display:flex;flex-direction:column;gap:2px}
.perm-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;flex-wrap:wrap}
.perm-row:nth-child(odd){background:var(--surface-2)}
.perm-row .pname{flex:1;min-width:150px;font-weight:600;font-size:13.5px}
.perm-row .popts{display:flex;gap:6px;flex-wrap:wrap}
.perm-row .popts label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--line-strong);
  border-radius:8px;padding:6px 10px;cursor:pointer;min-height:38px;background:var(--surface)}
.perm-row .popts label:has(input:checked){background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:700}
@media (max-width:760px){.perm-row .popts label{min-height:44px}}

/* ================= IMPORT ================= */
.drop{border:2px dashed var(--line-strong);border-radius:12px;padding:22px;text-align:center;background:var(--surface-2)}
.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.map-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;padding:6px 0}
@media (max-width:760px){.map-row{grid-template-columns:1fr}}

/* ================= TEZKOR QIDIRUV TAKLIFLARI ================= */
.sg-wrap{position:relative}
.sg-box{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;
  max-height:min(60vh,420px);overflow-y:auto}
.sg-box:empty{display:none}
.sg-group{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;
  padding:9px 12px 4px;background:var(--surface-2)}
.sg-item{display:flex;gap:10px;align-items:center;padding:9px 12px;cursor:pointer;border:0;background:none;
  width:100%;text-align:left;font:inherit;color:inherit;min-height:46px}
.sg-item:hover,.sg-item[aria-selected="true"]{background:var(--brand-soft)}
.sg-item .sg-main{flex:1;min-width:0}
.sg-item b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-item span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sg-item mark{background:transparent;color:var(--brand);font-weight:800}
.sg-empty{padding:16px 12px;text-align:center;color:var(--muted);font-size:13px}
[dir="rtl"] .sg-item{text-align:right}
@media (max-width:760px){
  .sg-item{min-height:52px}
  .sg-box{max-height:55vh}
}

/* ================= ILOVANI O'RNATISH VA ULANISH HOLATI ================= */
.pwa-bar{position:fixed;left:12px;right:12px;z-index:200;display:flex;gap:10px;align-items:center;
  bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:10px 12px;font-size:13px}
.pwa-bar span{flex:1;min-width:0}
.pwa-bar .btn{min-height:40px;padding:6px 12px}
.pwa-bar.bad{border-color:var(--bad);background:var(--bad-soft,var(--surface))}
.pwa-bar.info{border-color:var(--brand)}
@media (max-width:760px){
  .pwa-bar{bottom:calc(env(safe-area-inset-bottom,0px) + 72px);flex-wrap:wrap}
  .pwa-bar span{flex-basis:100%}
  .pwa-bar .btn{min-height:44px;flex:1}
}

/* ================= O'QUVCHI KARTASI — TEZKOR BO'LIM ================= */
.quick-card{padding:16px;margin-bottom:14px}
.quick-card .q-top{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.quick-card .q-money{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);min-width:180px}
.quick-card .q-money span{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}
.quick-card .q-money b{font-size:22px;font-variant-numeric:tabular-nums}
.quick-card .q-money.bad{background:var(--bad-soft);border-color:var(--bad)}
.quick-card .q-money.bad b{color:var(--bad)}
.quick-card .q-money.ok b{color:var(--ok)}
.quick-card .q-lines{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px;line-height:1.5}
.quick-card .q-lines a{color:var(--brand);text-decoration:none}
.quick-card .q-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.quick-card .q-actions .btn{min-height:44px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
@media (max-width:760px){
  .quick-card .q-top{gap:12px}
  .quick-card .q-money{width:100%;min-width:0}
  .quick-card .q-actions .btn{flex:1 1 calc(50% - 10px);justify-content:center}
}

/* ================= SODDALASHTIRILGAN TO'LOV OYNASI ================= */
.pay-who{display:flex;gap:12px;align-items:center;
  padding:12px 14px;border:1px solid var(--brand);border-radius:12px;background:var(--brand-soft);margin-bottom:12px}
.pay-who .main-col{flex:1;min-width:0}
.pay-who .main-col b{font-size:15px;display:block}
.pay-hint{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 12px}
details.more{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--surface-2)}
details.more>summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--brand);
  list-style:none;min-height:34px;display:flex;align-items:center;gap:8px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:'+';font-size:16px;font-weight:800;line-height:1}
details.more[open]>summary::before{content:'−'}
@media (max-width:760px){
  details.more>summary{min-height:44px}
  .pay-who{flex-wrap:wrap}
  .pay-who .btn{min-height:44px}
}

/* ================= DAVOMAT — BUGUNGI DARSLAR TASMASI ================= */
.today-strip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
.today-strip .ts-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.today-strip .ts-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.ts-card{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  min-width:190px;min-height:44px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--surface-2);cursor:pointer;text-align:left;font:inherit;color:inherit}
.ts-card:hover{border-color:var(--brand)}
.ts-card.active{border-color:var(--brand);background:var(--brand-soft)}
.ts-card.done{border-color:var(--ok)}
/* Dars holati: hozir ketyapti / tugagan */
.today-strip .ts-part+.ts-part{margin-top:10px}
.today-strip .ts-sub{margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.ts-card.ph-hozir{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.ts-card.ph-tugadi{opacity:.72}
.ts-card.ph-tugadi:hover{opacity:1}
.ts-card .ts-time{font-family:var(--mono);font-size:15px;font-weight:600}
.ts-card .ts-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
@media (max-width:760px){
  /* Telefonda karta kengroq: guruh nomi va vaqti kesilmasin, barmoq
     bilan bosish ham oson bo'lsin.                                   */
  .ts-card{min-width:min(78vw,240px);min-height:64px}
}

/* ================= SANA TANLASH (o'z taqvimimiz) ================= */
.dp-wrap{position:relative}
.dp-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;padding:0;border:0;margin:0}
.dp-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:42px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.dp-btn:hover{border-color:var(--brand)}
.dp-btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.dp-btn.empty .dp-text{color:var(--muted)}
.dp-btn .ico{width:18px;height:18px;flex:none;color:var(--muted)}
.dp-btn:disabled{opacity:.6;cursor:not-allowed}
.field.err .dp-btn{border-color:var(--bad)}

.dp-pop{position:fixed;z-index:400;width:312px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:12px;animation:dpIn .12s ease-out}
@keyframes dpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dp-pop{animation:none}}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.dp-title{font-family:var(--display);font-size:15px}
.dp-title span{color:var(--muted);font-family:var(--mono);font-size:13px}
.dp-nav{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
  color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.dp-nav:hover{border-color:var(--brand);color:var(--brand)}
.dp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-week span{text-align:center;font-size:11px;font-weight:700;color:var(--muted);
  letter-spacing:.03em;text-transform:uppercase;padding:4px 0}
.dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-empty{height:38px}
.dp-day{height:38px;border:1px solid transparent;border-radius:9px;background:none;color:var(--ink);
  font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.dp-day:hover:not(:disabled){background:var(--brand-soft);color:var(--brand)}
.dp-day.rest{color:var(--bad)}
.dp-day.today{border-color:var(--brand);font-weight:700}
.dp-day.sel{background:var(--brand);color:#fff;font-weight:700;border-color:var(--brand)}
.dp-day.sel:hover{background:var(--brand);color:#fff}
.dp-day:disabled{opacity:.3;cursor:not-allowed}
.dp-foot{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dp-foot .btn{flex:1;min-height:38px}
[dir="rtl"] .dp-btn{text-align:right}
@media (max-width:760px){
  .dp-pop{width:calc(100vw - 24px);left:12px!important;padding:14px}
  .dp-day,.dp-empty{height:46px}
  .dp-nav{width:44px;height:44px}
  .dp-foot .btn{min-height:44px}
}

/* ---------- Oy va vaqt tanlash ---------- */
.dp-pop-month{width:300px}
.dp-months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dp-month{min-height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);
  color:var(--ink);font:inherit;font-size:13px;cursor:pointer;padding:6px 4px}
.dp-month:hover{border-color:var(--brand);color:var(--brand)}
.dp-month.today{border-color:var(--brand)}
.dp-month.sel{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700}

.dp-pop-time{width:250px}
.dp-head.time{justify-content:center}
.dp-head.time .dp-title b{font-family:var(--mono);font-size:24px;letter-spacing:.04em}
.tp-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-colwrap{display:flex;flex-direction:column;gap:4px;min-width:0}
.tp-lab{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center}
.tp-col{display:flex;flex-direction:column;gap:3px;max-height:210px;overflow-y:auto;
  border:1px solid var(--line);border-radius:10px;padding:4px;background:var(--surface-2)}
.tp-item{min-height:38px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);
  font:inherit;font-family:var(--mono);font-size:15px;cursor:pointer}
.tp-item:hover{background:var(--brand-soft);color:var(--brand)}
.tp-item.sel{background:var(--brand);color:#fff;font-weight:700}
@media (max-width:760px){
  .dp-pop-month,.dp-pop-time{width:calc(100vw - 24px)}
  .dp-month{min-height:48px}
  .tp-item{min-height:44px}
  .tp-col{max-height:240px}
}

/* Taqvim/soatda qo'lda yozish */
.dp-input,.tp-input{width:100%;min-height:42px;padding:8px 12px;border:1px solid var(--line-strong);
  border-radius:10px;background:var(--surface-2);color:var(--ink);font:inherit;
  font-family:var(--mono);text-align:center;margin-bottom:10px}
.tp-input{font-size:24px;letter-spacing:.06em;margin-bottom:0}
.dp-input:focus,.tp-input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.dp-input.bad,.tp-input.bad{border-color:var(--bad);color:var(--bad)}

/* Katta ro'yxatlarni bo'lib ko'rsatish */
.tbl-more{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:12px 2px 2px;border-top:1px solid var(--line);margin-top:8px}
.tbl-more .btn{min-height:40px}
@media (max-width:760px){.tbl-more .btn{flex:1;min-height:44px}}

/* ================= O'QUV QISMI ================= */
/* Dastur: modul → dars ro'yxati */
.cur-list{display:flex;flex-direction:column;gap:6px}
.cur-topic{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.cur-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  text-align:start;background:none;border:0;padding:0;font:inherit;color:var(--text);cursor:pointer}
button.cur-title:hover b{text-decoration:underline}
.cur-topic .row-actions{flex-wrap:nowrap}
.sec-h{font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 6px}

/* Test tuzgich */
.qz-list{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.qz-q{border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;
  background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
.qz-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.qz-q input[type=text]{width:100%;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);color:var(--text);font:inherit}
.qz-opts{display:flex;flex-direction:column;gap:6px}
.qz-opt{display:flex;align-items:center;gap:8px}
.qz-opt input[type=radio]{flex:none;width:18px;height:18px}

/* Savol-javob va fikr */
.qa-item{display:flex;flex-direction:column;gap:6px;padding:10px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.qa-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.qa-text{margin:0;line-height:1.5}
.qa-answers{display:flex;flex-direction:column;gap:6px;
  padding-inline-start:10px;border-inline-start:2px solid var(--line)}
.qa-answer{display:flex;flex-direction:column;gap:2px}
.fb-sum{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.fb-sum b{font-size:34px;line-height:1}
.fb-bars{display:flex;flex-direction:column;gap:5px}
.fb-bar{display:flex;align-items:center;gap:8px}
.fb-track{flex:1;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.fb-track span{display:block;height:100%;background:var(--accent)}

/* Ota-ona: farzandlar ro'yxati */
.par-kids{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:8px}
.par-kid{display:flex;align-items:center;gap:8px;cursor:pointer}

/* Kabinetdagi o'quv qismi */
.kab-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.kab-sec{display:flex;flex-direction:column;gap:8px}
.kab-item{display:flex;flex-direction:column;gap:3px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.kab-item b{line-height:1.35}
.kab-kid{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px;background:var(--surface-2);display:flex;flex-direction:column;gap:6px}
@media (max-width:560px){
  .cur-topic{flex-direction:column;align-items:stretch}
  .fb-sum b{font-size:28px}
}

/* --- Sayt: tepa panel va afzalliklar panjarasi (namunaga moslash) --- */
.site-brand{flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer;
  text-align:start;font:inherit;color:inherit}
.site-brand b,.site-brand span{white-space:nowrap}
.site-nav{margin-inline-start:auto}
.site-sec .feat-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1240px){
  .site-nav{gap:4px}
  .site-nav .btn.sm.ghost{padding:7px 9px}
}
@media (max-width:1080px){ .site-sec .feat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:1000px){ .site-brand{flex:1 1 100%} .site-nav{margin-inline-start:0} }
@media (max-width:560px){ .site-sec .feat-grid{grid-template-columns:1fr} }

/* Qo'shimcha taklif kartasida narx */
.tier-extra{justify-content:flex-start}
.tier-extra > div:first-child{flex:1 1 220px}
.extra-fee{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.extra-fee b{font-family:var(--st-serif);font-size:19px;color:var(--st-n6);
  font-variant-numeric:tabular-nums}
.extra-fee span{font-size:12px;color:var(--st-mut)}

/* ---- Zapusk tasmasi ---- */
.promo-band{padding-top:8px;padding-bottom:8px}
.promo-in{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px;box-shadow:var(--shadow)}
.promo-free,.promo-offer{display:flex;flex-direction:column;gap:4px;min-width:200px}
.promo-free b{font-size:17px}
.promo-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.promo-price b{font-size:22px;color:var(--brand-deep)}
.promo-seats{display:flex;flex-direction:column;gap:4px}
.promo-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;width:220px;max-width:100%}
.promo-bar i{display:block;height:100%;background:var(--brand)}
.promo-cd{font-size:13px;color:var(--warn);font-weight:600}
@media (max-width:600px){.promo-in{padding:14px 16px}.promo-in .btn{width:100%}}


/* =====================================================================
   ZUMRAD + TERRAKOTA MAVZUSI
   Yorug' qum fon, zumrad asosiy rang, iliq terrakota urg'u.
   Yulduz naqshi yo'q — yumaloq, to'lqinsimon yumshoq shakllar.
   Shrift: sarlavhalar Nunito (yumaloq), matn Manrope.
   ===================================================================== */
.site{
  --st-gold:#c2603a; --st-gold-2:#d9774f; --st-gold-3:#f0b49a; --st-gold-soft:#fbe9e0;
  --st-paper:#faf6f0; --st-paper-2:#f3ece2; --st-line:#eadfd2; --st-line-2:#dccbb8;
  --st-serif:'Nunito','Manrope',system-ui,sans-serif;
  --st-khatam:none;
  --st-glow:0 0 0 1px rgba(194,96,58,.18), 0 20px 60px -28px rgba(7,31,27,.45);
}
.site-bg .khatam,.medal-in .khatam-in,.why-art .khatam-in,.login-art .khatam{display:none}
.site h1,.site h2,.site h3{letter-spacing:-.01em}
.site-sec h2,.site-hero h1{font-weight:800}
.sec-eyebrow::after{display:none}
.sec-eyebrow{letter-spacing:.14em}

/* Fon: ikkita yumshoq "to'lqin" dog' */
.site-bg{background:
  radial-gradient(60% 45% at 92% 6%, rgba(217,119,79,.10), transparent 70%),
  radial-gradient(55% 45% at 4% 30%, rgba(26,94,81,.09), transparent 70%),
  var(--st-paper)}

/* --- Hero: yorug', to'lqinli --- */
.site-hero{color:var(--st-ink);border-radius:36px;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(217,119,79,.16), transparent 60%),
    radial-gradient(80% 100% at 0% 100%, rgba(26,94,81,.14), transparent 62%),
    linear-gradient(160deg,#ffffff,#f4efe7);
  box-shadow:0 0 0 1px var(--st-line), 0 30px 70px -40px rgba(7,31,27,.35)}
.site-hero::before{background:none;opacity:1;inset:auto -60px -90px auto;width:320px;height:320px;
  border-radius:46% 54% 60% 40% / 52% 44% 56% 48%;background-color:rgba(26,94,81,.07)}
.site-hero::after{box-shadow:none}
.site-hero h1{color:var(--st-n6)}
.site-hero h1 .gold{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--st-n6)}
.hero-eyebrow{color:var(--st-gold);background:var(--st-gold-soft);border-color:rgba(194,96,58,.25)}
.hero-eyebrow::before{background:var(--st-gold-2);box-shadow:none}
.hero-type{color:var(--st-gold);text-shadow:none}
.hero-type-cur{background:var(--st-gold-2);box-shadow:none}
.hero-type.full .hero-type-txt{text-shadow:none}
.hero-lead{color:var(--st-ink-2)}
.hero-rule{background:linear-gradient(90deg,var(--st-gold-2),transparent)}
.site .btn.gold{background:var(--st-gold-2);border-color:var(--st-gold-2);color:#fff;
  box-shadow:0 14px 30px -16px rgba(194,96,58,.75)}
.site .btn.gold:hover{background:var(--st-gold)}
.hero-cta .btn.on-dark{background:#fff;border-color:var(--st-line-2);color:var(--st-n6)}
.hero-cta .btn.on-dark:hover{background:#fff;border-color:var(--st-n4)}
.site .hero-tel{color:var(--st-n6);background:#fff;border-color:var(--st-line-2)}
.site .hero-hours{color:var(--st-mut)}
.site .hero-proof .proof-text{color:var(--st-ink-2)}

/* Hero rasmi: medal o'rniga yumaloq "tomchi" shakl */
.site-medal{border-radius:42% 58% 55% 45% / 48% 42% 58% 52%}
.site-medal::before{animation:none;inset:-14px;border-radius:inherit;
  background:linear-gradient(140deg,rgba(217,119,79,.35),rgba(26,94,81,.25));opacity:1}
.site-medal::after{border-radius:inherit;box-shadow:none;
  background:linear-gradient(150deg,var(--st-n5),var(--st-n7))}
.medal-in{border-radius:inherit}
.hero-art img{box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.hero-ar{color:#fff;opacity:.28}
.hero-badge{border-color:rgba(194,96,58,.35)}
.hero-badge span{color:var(--st-gold)}

/* Ko'rsatkichlar tasmasi — yorug' karta */
.stat-band{background:#fff !important;box-shadow:0 0 0 1px var(--st-line), var(--st-shadow) !important;color:var(--st-ink)}
.stat-band::before{display:none !important}
.stat-band .hero-stat b{color:var(--st-n6)}
.stat-band .hero-stat span{color:var(--st-mut)}
.stat-band .hero-stat{border-color:var(--st-line)}
.stat-band .stat-ico{color:var(--st-gold);background:var(--st-gold-soft);border-color:transparent}

/* Qolgan to'q panellar — zumrad, naqshsiz, yumaloqroq */
.price-card,.cta-band,.apply-wrap,.why-art{border-radius:32px}
.site .card,.lvl,.tch,.faq-item{border-radius:22px}
.medal-in img{display:none}
.site-medal .hero-ar{position:static;font-size:clamp(46px,9vw,72px);opacity:.95;color:#fbe9e0}
.promo-bar{background:var(--st-line)}
.promo-bar i{background:var(--st-gold-2)}
/* Ustoz kartasi bitta bo'lsa ham butun kenglikka cho'zilmasin */
.site .tch-grid{grid-template-columns:repeat(auto-fill,minmax(240px,300px)) !important;justify-content:start}

/* =====================================================================
   "ONLAYN DARSXONA" MAKETI — o'ziga xos tuzilma:
   ochiq (qutisiz) hero + jonli dars oynasi, natija yo'li, 3 qadam,
   kartali afzalliklar, oq/qum navbatlashgan bo'limlar.
   ===================================================================== */
.site-wrap{max-width:1180px}
.site-hero{background:none;box-shadow:none;border-radius:0;overflow:visible;
  grid-template-columns:1.02fr .98fr;gap:48px;padding:54px 0 40px;margin:0}
.site-hero::before,.site-hero::after{display:none}
.site-hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;color:var(--st-ink)}
.site-hero h1 .gold{color:var(--st-n6)}
.hero-type{font-size:clamp(22px,3vw,34px);min-height:46px;margin-bottom:14px}
.hero-rule{display:none}
.hero-lead{font-size:17.5px;max-width:50ch}
.hero-pill{display:none !important}

/* Jonli dars oynasi */
.lesson-art{position:relative;min-height:0;padding:20px 8px 34px;display:block}
.zm{position:relative;background:#fff;border-radius:24px;overflow:hidden;
  box-shadow:0 0 0 1px var(--st-line),0 40px 80px -40px rgba(7,31,27,.45);transform:rotate(-1.2deg)}
.zm-top{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--st-n7);color:#fff;font-size:12.5px}
.zm-live{background:#e5484d;color:#fff;font-weight:800;font-size:10.5px;letter-spacing:.12em;
  padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.zm-live::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;animation:zmBlink 1.4s infinite}
@keyframes zmBlink{50%{opacity:.25}}
.zm-title{flex:1;font-weight:600;opacity:.9}
.zm-time{font-family:var(--mono);opacity:.75}
.zm-body{display:grid;grid-template-columns:1.55fr 1fr;gap:10px;padding:12px;background:#f3efe8}
.zm-board{background:#fffdf8;border-radius:16px;padding:22px 16px;text-align:center;
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(26,94,81,.07) 31px 32px);
  box-shadow:inset 0 0 0 1px var(--st-line)}
.zm-ar{font-family:var(--st-ar);font-size:clamp(44px,5.4vw,64px);line-height:1.25;color:var(--st-n6);direction:rtl}
.zm-tr{font-size:13px;color:var(--st-gold);font-weight:700;margin:2px 0 14px}
.zm-letters{display:flex;justify-content:center;gap:8px;direction:rtl}
.zm-letters span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--st-ar);font-size:24px;background:var(--st-gold-soft);color:var(--st-gold)}
.zm-side{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.zm-tile{position:relative;border-radius:14px;background:linear-gradient(160deg,var(--st-n4),var(--st-n6));
  display:grid;place-items:center;min-height:74px;color:rgba(255,255,255,.85)}
.zm-tile.host{background:linear-gradient(160deg,var(--st-gold-2),var(--st-gold));box-shadow:0 0 0 2px #fff,0 0 0 4px var(--st-gold-2)}
.zm-ava svg{width:38px;height:38px}
.zm-name{position:absolute;left:6px;bottom:5px;font-size:10px;font-weight:700;background:rgba(0,0,0,.28);
  padding:1px 6px;border-radius:6px;color:#fff}
.zm-bar{display:flex;justify-content:center;gap:12px;padding:10px;background:#fff}
.zm-bar i{width:30px;height:30px;border-radius:50%;background:var(--st-paper-2)}
.zm-bar i.end{background:#e5484d;width:46px;border-radius:999px}
.zm-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;background:#fff;
  border-radius:14px;padding:10px 14px;font-size:13px;font-weight:700;color:var(--st-ink);
  box-shadow:0 0 0 1px var(--st-line),0 18px 36px -18px rgba(7,31,27,.45)}
.zm-chip .ico{width:16px;height:16px;color:var(--st-gold)}
.zm-chip.c1{left:-18px;bottom:2px}
.zm-chip.c2{right:-10px;top:0}

/* Navbatlashgan oq bo'limlar */
.rm-sec,.how-sec,#narx{position:relative}
.rm-sec::before,.how-sec::before{content:'';position:absolute;inset:0 -100vmax;background:#fff;z-index:-1;
  border-top:1px solid var(--st-line);border-bottom:1px solid var(--st-line)}
.rm-sec,.how-sec{padding:64px 0 60px;margin:28px 0}
.sec-note{color:var(--st-mut);max-width:60ch}

/* Natija yo'li */
.rm-line{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
.rm-line::before{content:'';position:absolute;left:24px;right:24px;top:23px;height:2px;
  background:repeating-linear-gradient(90deg,var(--st-gold-2) 0 8px,transparent 8px 16px)}
.rm-step{position:relative}
.rm-dot{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--st-gold-2);color:#fff;font-weight:800;font-size:18px;box-shadow:0 0 0 6px #fff}
.rm-when{display:block;margin:14px 0 4px;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--st-gold)}
.rm-step b{display:block;font-family:var(--st-serif);font-size:19px;color:var(--st-ink);margin-bottom:6px}
.rm-step p{margin:0;color:var(--st-mut);font-size:14px;line-height:1.55}

/* 3 qadam */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.how-card{border-radius:24px;padding:24px;background:var(--st-paper);border:1px solid var(--st-line)}
.how-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.how-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--st-n6);color:#fff}
.how-ico .ico{width:22px;height:22px}
.how-n{font-family:var(--st-serif);font-weight:800;font-size:38px;color:var(--st-line-2)}
.how-card b{display:block;font-family:var(--st-serif);font-size:19px;margin-bottom:6px;color:var(--st-ink)}
.how-card p{margin:0;color:var(--st-mut);font-size:14px;line-height:1.55}

/* Afzalliklar: rasm paneli o'rniga kartalar to'ri */
.why-wrap{grid-template-columns:1fr !important}
.why-art{display:none !important}
.why-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 24px}
.why-list li{background:#fff;border:1px solid var(--st-line);border-radius:18px;padding:16px 16px;align-items:flex-start}
.why-list li .ico{color:var(--st-gold)}


@media (max-width:900px){
  .site-hero{grid-template-columns:1fr;gap:26px;padding-top:30px}
  .rm-line{grid-template-columns:1fr 1fr;row-gap:28px}
  .rm-line::before{display:none}
  .how-grid,.why-list{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .zm{transform:none}
  .zm-chip{display:none}
  .zm-body{grid-template-columns:1fr}
  .zm-side{grid-template-columns:repeat(4,1fr)}
  .zm-tile{min-height:56px}
  .rm-line,.how-grid,.why-list{grid-template-columns:1fr}
}
.zm-chip.c2{top:-6px;right:-18px}
@media (max-width:900px){ .site-hero .lesson-art{order:2} .site-hero .hero-text{order:1} }

/* ===== YASHIL MAVZU: terrakota o'rniga yashil tuslar ===== */
.site{
  --st-gold:#17805f; --st-gold-2:#1f9d74; --st-gold-3:#8fd9bd; --st-gold-soft:#e2f4ec;
  --st-paper:#f5f9f7; --st-paper-2:#e9f2ee; --st-line:#dbe8e2; --st-line-2:#c5d9cf;
  --st-glow:0 0 0 1px rgba(31,157,116,.18), 0 20px 60px -28px rgba(7,31,27,.45);
}
.site-bg{background:
  radial-gradient(60% 45% at 92% 6%, rgba(31,157,116,.10), transparent 70%),
  radial-gradient(55% 45% at 4% 30%, rgba(15,74,64,.08), transparent 70%),
  var(--st-paper)}
.site .btn.gold{background:var(--st-gold-2);border-color:var(--st-gold-2);color:#fff;
  box-shadow:0 14px 30px -16px rgba(23,128,95,.75)}
.site .btn.gold:hover{background:var(--st-gold)}
.hero-eyebrow{border-color:rgba(23,128,95,.25)}
.hero-badge{border-color:rgba(23,128,95,.35)}
.zm-tile.host{background:linear-gradient(160deg,var(--st-gold-2),var(--st-gold))}
.zm-letters span{background:var(--st-gold-soft);color:var(--st-gold)}
.hero-tel:not([href^="tel:"]){display:none}
/* Ochiq sayt har doim yorug' ko'rinishda (qorong'i tizim mavzusida ham) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .site{
    --st-paper:#f5f9f7; --st-paper-2:#e9f2ee; --st-card:#ffffff;
    --st-ink:#10241f; --st-ink-2:#3a4f4a; --st-mut:#6c7d78;
    --st-line:#dbe8e2; --st-line-2:#c5d9cf;
    --st-gold:#17805f; --st-gold-2:#1f9d74; --st-gold-3:#8fd9bd; --st-gold-soft:#e2f4ec;
    --st-shadow:0 1px 2px rgba(10,40,35,.05), 0 14px 34px -18px rgba(10,40,35,.30);
    --st-shadow-lg:0 26px 60px -26px rgba(10,40,35,.45);
    --surface:#ffffff; --surface-2:#f8f9fc; --ink:#121826; --ink-2:#39435a; --muted:#69738a;
    --line:#e0e5ef; --bg:#f5f9f7;
    color-scheme:light;
  }
}
:root[data-theme="dark"] .site{
  --st-paper:#f5f9f7; --st-paper-2:#e9f2ee; --st-card:#ffffff;
  --st-ink:#10241f; --st-ink-2:#3a4f4a; --st-mut:#6c7d78;
  --st-line:#dbe8e2; --st-line-2:#c5d9cf;
  --st-gold:#17805f; --st-gold-2:#1f9d74; --st-gold-3:#8fd9bd; --st-gold-soft:#e2f4ec;
  --surface:#ffffff; --surface-2:#f8f9fc; --ink:#121826; --ink-2:#39435a; --muted:#69738a;
  --line:#e0e5ef; --bg:#f5f9f7;
  color-scheme:light;
}

/* =====================================================================
   ONLAYN DARSXONA (#kurs) — o'quvchi platformasi
   ===================================================================== */
.cr{
  --c-g1:#0f4a40; --c-g2:#1f9d74; --c-g3:#8fd9bd; --c-gs:#e2f4ec; --c-bg:#f3f8f6; --c-card:#ffffff;
  --c-ink:#10241f; --c-ink2:#3a4f4a; --c-mut:#6c7d78; --c-line:#dbe8e2; --c-warn:#b7791f; --c-bad:#c2453d;
  --c-ar:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;
  min-height:100vh;background:var(--c-bg);color:var(--c-ink);color-scheme:light;
  font-family:var(--sans);
}
.cr .btn.primary{background:var(--c-g2);border-color:var(--c-g2);color:#fff}
.cr .btn.primary:hover{background:var(--c-g1)}
.cr-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--c-g1);color:#fff}
.cr-top-in{max-width:1280px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cr-brand{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;cursor:pointer;text-align:start;flex:1;min-width:0;padding:0}
.cr-brand img{width:38px;height:38px;border-radius:12px}
.cr-brand b{display:block;font-size:15px}
.cr-brand span{display:block;font-size:11.5px;opacity:.75}
.cr-chip{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.12)}
.cr-chip.warn{background:#f2c94c;color:#3a2a00}
.cr-progress{display:flex;align-items:center;gap:8px;font-size:12.5px}
.cr-bar{width:140px;max-width:40vw;height:8px;border-radius:8px;background:rgba(255,255,255,.18);overflow:hidden}
.cr-bar i{display:block;height:100%;background:var(--c-g3);border-radius:8px;transition:width .5s}
.cr-top .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.cr-body{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:290px minmax(0,1fr);gap:22px;padding:20px 16px 60px}
.cr-side{display:flex;flex-direction:column;gap:6px;align-self:start;position:sticky;top:76px}
.cr-unit{display:flex;align-items:baseline;gap:8px;margin:12px 4px 4px;flex-wrap:wrap}
.cr-unit-n{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-g2)}
.cr-unit b{font-size:15px}
.cr-ar{font-family:var(--c-ar);direction:rtl;unicode-bidi:isolate;line-height:1.6}
.cr-ar.sm{font-size:16px;color:var(--c-ink2)}
.cr-ar.md{font-size:22px}
.cr-ar.lg{font-size:34px;color:var(--c-g1)}
.cr-ar.xl{font-size:46px;color:var(--c-g1)}
.cr-lesson{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:14px;padding:9px 12px;cursor:pointer;color:var(--c-ink);font:inherit}
.cr-lesson:hover{border-color:var(--c-g3)}
.cr-lesson.cur{border-color:var(--c-g2);box-shadow:0 0 0 2px var(--c-gs)}
.cr-lesson.locked{opacity:.55;cursor:not-allowed;background:transparent}
.cr-lesson-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;font-size:13px;
  background:var(--c-gs);color:var(--c-g1)}
.cr-lesson.done .cr-lesson-ico{background:var(--c-g2);color:#fff}
.cr-lesson.cur .cr-lesson-ico{background:var(--c-g1);color:#fff}
.cr-lesson-t{display:flex;flex-direction:column;min-width:0;flex:1}
.cr-lesson-t b{font-size:13.5px}
.cr-lesson-s{font-size:12px;font-weight:700;color:var(--c-g2)}
.cr-rule{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--c-gs);font-size:12.5px;color:var(--c-ink2)}
.cr-rule p{margin:4px 0 0}
.cr-main{min-width:0}
.cr-lhead{position:relative;overflow:hidden;border-radius:24px;padding:22px 24px;color:#fff;
  background:radial-gradient(80% 120% at 100% 0%,rgba(143,217,189,.25),transparent 60%),linear-gradient(150deg,#14604f,var(--c-g1))}
.cr-lhead::after{content:'';position:absolute;right:-30px;bottom:-60px;width:220px;height:260px;border-radius:110px 110px 0 0;
  border:2px solid rgba(255,255,255,.14)}
.cr-lhead h1{font-size:clamp(24px,3.4vw,34px);margin:6px 0 4px;color:#fff;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.cr-lhead .cr-ar{color:var(--c-g3);font-size:.9em}
.cr-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-g3)}
.cr-goal{margin:0;opacity:.85;max-width:60ch}
.cr-steps{display:flex;gap:6px;overflow-x:auto;padding:14px 0 12px;scrollbar-width:none}
.cr-step{display:flex;align-items:center;gap:8px;flex:none;border:1px solid var(--c-line);background:var(--c-card);
  border-radius:999px;padding:7px 14px 7px 7px;font:inherit;font-size:13px;font-weight:600;color:var(--c-ink2);cursor:pointer}
.cr-step-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--c-gs);color:var(--c-g1);font-size:12px;font-weight:800}
.cr-step.seen .cr-step-n{background:var(--c-g3)}
.cr-step.on{background:var(--c-g1);color:#fff;border-color:var(--c-g1)}
.cr-step.on .cr-step-n{background:#fff;color:var(--c-g1)}
.cr-panel{background:var(--c-card);border:1px solid var(--c-line);border-radius:24px;padding:22px}
.cr-ph{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.cr-ph h2{margin:0;font-size:22px}
.cr-ph p{margin:0;color:var(--c-mut)}
.cr-ph .btn{align-self:flex-start}
.cr-ico{width:16px;height:16px}
.cr-say{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--c-gs);color:var(--c-g1);
  border-radius:999px;padding:7px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;flex:none}
.cr-say:hover{background:var(--c-g3)}
.cr-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cr-word{position:relative;border:1px solid var(--c-line);border-radius:20px;overflow:hidden;cursor:pointer;background:#fff;
  transition:transform .2s,box-shadow .2s}
.cr-word:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(15,74,64,.45)}
.cr-word .cr-say{position:absolute;top:10px;right:10px}
.cr-anim{background:linear-gradient(180deg,#f6fbf9,var(--c-gs));display:grid;place-items:center}
.cr-anim svg{width:100%;max-width:240px;height:auto;display:block}
.cr-word-txt{padding:10px 14px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.cr-tr{font-size:12px;color:var(--c-mut);font-style:italic}
.cr-uz{font-size:15px;color:var(--c-ink)}
.cr-next{display:flex;justify-content:flex-end;margin-top:20px}
.cr-dialog{display:flex;flex-direction:column;gap:12px}
.cr-line{display:flex;flex-direction:column;gap:4px;max-width:78%}
.cr-line.l{align-self:flex-start}
.cr-line.r{align-self:flex-end;align-items:flex-end}
.cr-who{font-size:12px;font-weight:800;color:var(--c-g2)}
.cr-bubble{border-radius:18px;padding:10px 14px;background:var(--c-gs)}
.cr-line.r .cr-bubble{background:#fff;border:1px solid var(--c-line)}
.cr-bubble-ar{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.cr-bubble-uz{font-size:13.5px;color:var(--c-ink2);margin-top:4px}
.cr-rulecard{display:flex;gap:14px;padding:16px;border:1px solid var(--c-line);border-radius:18px;margin-bottom:12px}
.cr-rulecard-n{width:32px;height:32px;border-radius:10px;background:var(--c-g1);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.cr-rulecard p{margin:0 0 8px;font-size:15px}
.cr-ex{display:flex;flex-direction:column;gap:6px}
.cr-ex-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 10px;border-radius:12px;background:var(--c-bg)}
.cr-ex-row span:not(.cr-ar){color:var(--c-ink2);font-size:14px;flex:1}
.cr-q{border:1px solid var(--c-line);border-radius:18px;padding:16px;margin-bottom:12px}
.cr-q-t{margin:0 0 10px;font-weight:700}
.cr-q-show{display:flex;align-items:center;gap:12px;justify-content:center;margin:6px 0 12px}
.cr-q .cr-anim{border-radius:14px;margin-bottom:12px}
.cr-q .cr-anim svg{max-width:280px}
.cr-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cr-opt{border:1px solid var(--c-line);background:#fff;border-radius:14px;padding:10px 12px;font:inherit;font-size:15px;cursor:pointer;color:var(--c-ink);min-height:48px}
.cr-opt:hover{border-color:var(--c-g2)}
.cr-opt.sel{border-color:var(--c-g2);background:var(--c-gs);box-shadow:0 0 0 2px var(--c-g3)}
.cr-opt.ok{border-color:var(--c-g2);background:#d8f3e7}
.cr-opt.bad{border-color:var(--c-bad);background:#fbe4e2}
.cr-order-line{min-height:54px;border:2px dashed var(--c-line);border-radius:14px;padding:6px;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cr-order-bank{display:flex;flex-wrap:wrap;gap:6px}
.cr-tok{border:1px solid var(--c-line);background:#fff;border-radius:12px;padding:4px 12px;cursor:pointer}
.cr-tok.on{background:var(--c-gs);border-color:var(--c-g3)}
.cr-q-res{margin-top:8px;font-weight:700}
.cr-q-res.ok{color:var(--c-g2)} .cr-q-res.bad{color:var(--c-bad)}
.cr-score{font-weight:700;color:var(--c-g1);margin-top:6px}
.cr-testbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:13px;color:var(--c-mut)}
.cr-testbar .cr-bar{background:var(--c-gs);flex:1;max-width:none}
.cr-testbar .cr-bar i{background:var(--c-g2)}
.cr-result{text-align:center;padding:26px;border-radius:20px;display:flex;flex-direction:column;gap:8px;align-items:center}
.cr-result.ok{background:#e3f6ee} .cr-result.bad{background:#fdf0e5}
.cr-result-big{font-size:54px;font-weight:800;color:var(--c-g1);line-height:1}
.cr-result p{margin:0;color:var(--c-ink2)}
.cr-ta{width:100%;box-sizing:border-box;border:1px solid var(--c-line);border-radius:14px;padding:12px;font:inherit;font-size:16px;resize:vertical}
.cr-file-in{position:absolute;width:1px;height:1px;opacity:0}
.cr-files{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cr-file{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--c-bg);border-radius:10px;font-size:13px}
.cr-hwstat{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;margin-bottom:14px;background:#fff7e6;border:1px solid #f2d9a6}
.cr-hwstat.qabul{background:#e3f6ee;border-color:var(--c-g3)}
.cr-hwstat.qayta{background:#fbe4e2;border-color:#efb8b3}
.cr-hwstat p{margin:4px 0 0}
.cr-mini{display:flex;align-items:center;gap:8px}
.cr-mini .cr-bar{width:90px;background:var(--surface-2,#eef3f1)}
.cr-mini .cr-bar i{background:#1f9d74}
.cr-dots{display:flex;gap:4px;flex-wrap:wrap}
.cr-dot{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800}
.cr-dot.ok{background:#1f9d74;color:#fff} .cr-dot.open{background:#e2f4ec;color:#0f4a40;box-shadow:inset 0 0 0 1.5px #1f9d74} .cr-dot.lock{background:#eef1f0;color:#9aa6a2}
.cr-review{display:flex;flex-direction:column;gap:10px}
.cr-review-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.cr-review-text{white-space:pre-wrap;background:var(--surface-2,#f5f7f6);border-radius:12px;padding:12px;font-size:16px;font-family:'Amiri',var(--sans)}
.cr-filelinks{display:flex;gap:8px;flex-wrap:wrap}
.cr-thumb img{width:120px;height:90px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.kab-course{display:flex;flex-direction:column;gap:2px;margin:14px 0;padding:14px 16px;border-radius:16px;text-decoration:none;
  background:linear-gradient(150deg,#1f9d74,#0f4a40);color:#fff}
.kab-course span{font-size:12.5px;opacity:.85}
@media (max-width:900px){
  .cr-body{grid-template-columns:1fr;padding-top:12px;gap:14px}
  /* Telefonda darslar ro'yxati — gorizontal lenta: kontent darhol ko'rinadi */
  .cr-side{position:static;display:flex;flex-direction:row;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
    padding:2px 2px 8px;margin:0;scrollbar-width:none;min-width:0}
  .cr-side::-webkit-scrollbar{display:none}
  .cr-unit{display:none}
  .cr-lesson{flex:0 0 auto;width:auto;max-width:200px;scroll-snap-align:start;padding:8px 12px 8px 8px}
  .cr-lesson-t .cr-ar{display:none}
  .cr-lesson-t b{white-space:nowrap;font-size:13px}
  .cr-rule{display:none}
  .cr-line{max-width:92%}
}
@media (max-width:560px){
  .cr-brand span{display:none}
  .cr-brand img{width:32px;height:32px}
  .cr-top-in{gap:8px;padding:8px 12px}
  .cr-progress .cr-bar{width:56px}
  .cr-chip{display:none}
  .cr-panel{padding:16px;border-radius:18px}
  .cr-lhead{padding:18px}
  .cr-words{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cr-ar.lg{font-size:26px}
}

/* ===== So'z animatsiyalari ===== */
.ca-svg{overflow:visible}
.ca-bob{animation:caBob 2.4s ease-in-out infinite}
.ca-bob.d2{animation-delay:.4s}
@keyframes caBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ca-glow{animation:caGlow 2.4s ease-in-out infinite;transform-origin:center}
@keyframes caGlow{0%,100%{opacity:.5}50%{opacity:1}}
.ca-pop{animation:caPop 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.ca-pop.d2{animation-delay:.25s}.ca-pop.d3{animation-delay:.5s}.ca-pop.d4{animation-delay:.75s}
@keyframes caPop{0%{transform:scale(0);opacity:0}12%{transform:scale(1.06);opacity:1}18%,85%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
.ca-point{animation:caPoint 1.4s ease-in-out infinite}
@keyframes caPoint{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.ca-flash{opacity:0;animation:caFlash 3s infinite}
@keyframes caFlash{0%,78%,100%{opacity:0}80%{opacity:.9}86%{opacity:0}}
.ca-pulse{animation:caPulse 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes caPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ca-draw{stroke-dasharray:140;animation:caDraw 3s ease-in-out infinite}
@keyframes caDraw{0%{stroke-dashoffset:140}60%,100%{stroke-dashoffset:0}}
.ca-write{animation:caWrite 3s ease-in-out infinite}
@keyframes caWrite{0%,10%{opacity:0}40%,90%{opacity:1}100%{opacity:0}}
.ca-pointer{animation:caPtr 1.5s ease-in-out infinite;transform-box:fill-box;transform-origin:0 100%}
@keyframes caPtr{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
.ca-walk{animation:caWalk 3.2s ease-in-out infinite}
@keyframes caWalk{0%,100%{transform:translateX(-6px)}50%{transform:translateX(8px)}}
.ca-lamp{animation:caLamp 2.6s ease-in-out infinite;opacity:.4}
@keyframes caLamp{0%,100%{opacity:.15}50%{opacity:.8}}
.ca-drop{animation:caDrop 1.1s linear infinite;opacity:0}
.ca-drop.d2{animation-delay:.37s}.ca-drop.d3{animation-delay:.74s}
@keyframes caDrop{0%{transform:translateY(0);opacity:1}100%{transform:translateY(30px);opacity:0}}
.ca-shimmer{animation:caShim 2.2s ease-in-out infinite}
@keyframes caShim{0%,100%{opacity:.45}50%{opacity:1}}
.ca-swing{animation:caSwing 2.6s ease-in-out infinite}
@keyframes caSwing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.ca-glint{stroke-dasharray:20;animation:caGlint 2.4s ease-in-out infinite}
@keyframes caGlint{0%,40%{stroke-dashoffset:20;opacity:0}60%{opacity:1;stroke-dashoffset:0}100%{opacity:0}}
.ca-sway{animation:caSway 3s ease-in-out infinite}
@keyframes caSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.ca-leaf{animation:caLeaf 3.4s ease-in infinite}
@keyframes caLeaf{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(18px,36px) rotate(120deg);opacity:0}}
.ca-bounce{animation:caBounce 1.2s ease-in-out infinite}
@keyframes caBounce{0%,100%{transform:translateY(-8px)}50%{transform:translateY(0)}}
/* o'tirdi: stul yoniga keladi, pastga tushadi */
.ca-sit{animation:caSit 3.6s ease-in-out infinite}
@keyframes caSit{0%,15%{transform:translate(-14px,0)}40%{transform:translate(20px,0)}60%,90%{transform:translate(28px,22px)}100%{transform:translate(-14px,0)}}
.ca-page{animation:caPage 2.2s ease-in-out infinite}
@keyframes caPage{0%,30%{transform:scaleX(1)}60%,100%{transform:scaleX(-1)}}
.ca-rub{animation:caRub .5s ease-in-out infinite alternate}
@keyframes caRub{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
/* namoz: qiyom → ruku → qiyom */
.ca-bow{animation:caBow 4s ease-in-out infinite}
@keyframes caBow{0%,25%{transform:rotate(0)}40%,65%{transform:rotate(80deg)}80%,100%{transform:rotate(0)}}
.ca-coat-on{animation:caCoatOn 3.4s ease-in-out infinite}
@keyframes caCoatOn{0%,15%{transform:translate(0,0);opacity:1}55%,85%{transform:translate(61px,20px);opacity:.92}100%{transform:translate(0,0);opacity:1}}
.ca-coat-off{animation:caCoatOff 3.4s ease-in-out infinite}
@keyframes caCoatOff{0%,15%{transform:translate(61px,20px);opacity:.92}55%,85%{transform:translate(0,0);opacity:1}100%{transform:translate(61px,20px)}}
.ca-box-give{animation:caGive 3s ease-in-out infinite}
@keyframes caGive{0%,15%{transform:translate(60px,0)}70%,100%{transform:translate(104px,0)}}
.ca-box-take{animation:caTake 3s ease-in-out infinite}
@keyframes caTake{0%,15%{transform:translate(104px,0)}70%,100%{transform:translate(60px,0)}}
.ca-smoke{animation:caSteam 2.6s ease-out infinite}
.ca-light{animation:caLight 3.2s steps(1) infinite;opacity:.35}
.ca-light.d2{animation-delay:.8s}.ca-light.d3{animation-delay:1.6s}.ca-light.d4{animation-delay:2.4s}
@keyframes caLight{0%,49%{opacity:.35}50%,100%{opacity:1}}
.ca-z{animation:caZ 2.4s ease-out infinite;opacity:0}
.ca-z.d2{animation-delay:1.2s}
@keyframes caZ{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(10px,-18px);opacity:0}}
.ca-jiggle{animation:caJig .4s ease-in-out infinite alternate}
@keyframes caJig{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
.ca-steam{animation:caSteam 2.2s ease-out infinite;opacity:0}
.ca-steam.d2{animation-delay:1.1s}
@keyframes caSteam{0%{transform:translateY(6px);opacity:0}30%{opacity:.9}100%{transform:translateY(-14px);opacity:0}}
.ca-door-open{animation:caDoorOpen 3.4s ease-in-out infinite}
@keyframes caDoorOpen{0%,15%{transform:scaleX(1)}50%,85%{transform:scaleX(.18)}100%{transform:scaleX(1)}}
.ca-door-close{animation:caDoorClose 3.4s ease-in-out infinite}
@keyframes caDoorClose{0%,15%{transform:scaleX(.18)}50%,85%{transform:scaleX(1)}100%{transform:scaleX(.18)}}
.ca-beam{animation:caBeam 3.4s ease-in-out infinite;opacity:0}
@keyframes caBeam{0%,20%{opacity:0}50%,85%{opacity:.8}100%{opacity:0}}
.ca-curtain-l{animation:caCurL 3s ease-in-out infinite}
.ca-curtain-r{animation:caCurR 3s ease-in-out infinite}
@keyframes caCurL{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
@keyframes caCurR{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.ca-grow{animation:caGrow 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.ca-grow.d2{animation-delay:.6s}
@keyframes caGrow{0%{transform:scaleY(0)}40%,100%{transform:scaleY(1)}}
.ca-wd-l{animation:caWdL 3.4s ease-in-out infinite}
.ca-wd-r{animation:caWdR 3.4s ease-in-out infinite}
@keyframes caWdL{0%,15%,100%{transform:scaleX(1)}50%,85%{transform:scaleX(.2)}}
@keyframes caWdR{0%,15%,100%{transform:scaleX(1)}50%,85%{transform:scaleX(.2)}}
.ca-floor{opacity:0;animation:caFloor 4s steps(1) infinite}
.ca-floor.d1{animation-delay:0s}.ca-floor.d2{animation-delay:1s}.ca-floor.d3{animation-delay:2s}.ca-floor.d4{animation-delay:3s}
@keyframes caFloor{0%{opacity:.9}25%,100%{opacity:0}}
.ca-lift{animation:caLift 4s ease-in-out infinite}
@keyframes caLift{0%,15%{transform:translateY(0)}50%,65%{transform:translateY(-60px)}100%{transform:translateY(0)}}
.ca-climb{animation:caClimb 3.2s linear infinite}
@keyframes caClimb{0%{transform:translate(30px,100px)}20%{transform:translate(54px,82px)}40%{transform:translate(78px,64px)}60%{transform:translate(102px,46px)}80%,100%{transform:translate(126px,28px)}}
.ca-car{animation:caCar 3.4s linear infinite}
@keyframes caCar{from{transform:translateX(0)}to{transform:translateX(210px)}}
.ca-dash{stroke-dashoffset:0;animation:caDash 1.2s linear infinite}
@keyframes caDash{to{stroke-dashoffset:-14}}
.ca-walk-in{animation:caWalkIn 3.6s ease-in-out infinite}
@keyframes caWalkIn{0%{transform:translateX(0);opacity:1}70%{transform:translateX(60px);opacity:1}85%,100%{transform:translateX(70px);opacity:0}}
.ca-walk-out{animation:caWalkOut 3.6s ease-in-out infinite}
@keyframes caWalkOut{0%,10%{transform:translateX(0);opacity:0}25%{opacity:1}90%{transform:translateX(70px);opacity:1}100%{transform:translateX(70px);opacity:0}}
.ca-bubble{animation:caBub 2s ease-out infinite;opacity:0}
.ca-bubble.d2{animation-delay:1s}
@keyframes caBub{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-20px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ca-svg *{animation:none !important}
}

/* ===== O'quvchi kabineti — to'liq sahifa (portal) ===== */
.screen.kab-screen{display:block;place-items:initial;padding:0;background:#f3f8f5;min-height:100vh}
.login.kabinet.portal{max-width:none;width:100%;background:transparent;box-shadow:none;border-radius:0;padding:0;border:0}
.login.kabinet.portal>.brandline,.login.kabinet.portal>.login-alt{display:none}
.kab-card.kp{border:0;background:transparent;padding:0;gap:0}
.kp-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px max(16px,calc((100vw - 1200px)/2));
  background:#0f4a40;color:#fff;box-shadow:0 2px 12px rgba(6,40,32,.18)}
.kp-brand{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;cursor:pointer;flex:1;min-width:0;text-align:start;padding:0;font:inherit}
.kp-brand img{width:38px;height:38px;border-radius:12px}
.kp-brand b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-brand span{display:block;font-size:12px;opacity:.75}
.kp-who{display:flex;align-items:center;gap:10px}
.kp-who b{font-size:14px}
.kp-bar .kab-out{border:0;padding:0;margin:0}
.kp-bar .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.kp-hero{max-width:1200px;margin:22px auto 0;padding:0 16px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px}
.kp-hero-t,.kp-hero-c{border-radius:24px;padding:26px 28px;position:relative;overflow:hidden}
.kp-hero-t{background:linear-gradient(140deg,#17805f,#0f4a40);color:#fff}
.kp-hero-t::after{content:"";position:absolute;inset:auto -40px -60px auto;width:220px;height:260px;border-radius:110px 110px 0 0;
  border:2px solid rgba(143,217,189,.35);pointer-events:none}
.kp-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8fd9bd}
.kp-hero-t h1{font-size:30px;margin:8px 0 8px;color:#fff;line-height:1.2}
.kp-hero-t p{margin:0;opacity:.85;max-width:46ch;line-height:1.55}
.kp-hero-c{background:#fff;border:1px solid #dcebe3;display:flex;align-items:center;gap:22px}
.kp-ring{--p:0;flex:none;width:118px;height:118px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,#fff 79%,transparent 80%),conic-gradient(#1f9d74 calc(var(--p)*1%),#e2f4ec 0)}
.kp-ring b{font-size:26px;color:#0f4a40;line-height:1}
.kp-ring span{font-size:11.5px;color:#5c7a70;margin-top:4px}
.kp-next{display:flex;flex-direction:column;gap:4px;min-width:0}
.kp-next>.small{color:#5c7a70}
.kp-next b{font-size:19px;color:#0f2e27}
.kp-warn{font-size:12.5px;font-weight:700;color:#9a5b00;background:#fff4dc;border-radius:8px;padding:5px 9px;margin-top:4px}
.btn.kp-go{margin-top:10px;background:#1f9d74;border-color:#1f9d74;color:#fff;font-weight:800;padding:11px 18px;border-radius:14px;align-self:flex-start}
.btn.kp-go:hover{background:#17805f}
.kp-grid{max-width:1200px;margin:18px auto 40px;padding:0 16px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.kp-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.kp-card{background:#fff;border:1px solid #dcebe3;border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.kp-card h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#17805f;margin:0}
.kp-card .kab-sec h3{margin-top:8px}
.kp-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kp-all{font-size:13px;font-weight:700;color:#17805f;text-decoration:none}
.kp-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kp-l{display:flex;align-items:center;gap:12px;text-align:start;background:#f6faf8;border:1px solid #dcebe3;border-radius:16px;padding:12px;cursor:pointer;font:inherit;color:inherit;min-width:0}
.kp-l:hover{border-color:#8fd9bd;background:#fff}
.kp-l.open{background:#fff;border-color:#1f9d74;box-shadow:0 0 0 3px #e2f4ec}
.kp-l.locked{opacity:.55;cursor:not-allowed}
.kp-l-n{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;background:#e2f4ec;color:#0f4a40}
.kp-l.open .kp-l-n{background:#0f4a40;color:#fff}
.kp-l.done .kp-l-n{background:#1f9d74;color:#fff}
.kp-l-t{display:flex;flex-direction:column;min-width:0;gap:1px}
.kp-l-t b{font-size:14px}
.kp-ar{font-family:var(--c-ar,'Amiri',serif);font-size:16px;color:#17805f;text-align:start}
.kp-help{padding:0 4px}
.kp-kids{max-width:1200px;margin:18px auto 40px;padding:0 16px;display:grid !important;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:18px}
.kp-kids .kab-kid{background:#fff}
.kp>.small.muted{max-width:1200px;margin:0 auto 30px;padding:0 16px}
@media (max-width:900px){
  .kp-hero,.kp-grid{grid-template-columns:1fr}
  .kp-hero-t h1{font-size:24px}
}
@media (max-width:560px){
  .kp-who .main-col,.kp-brand span{display:none}
  .kp-hero{margin-top:14px;gap:12px}
  .kp-hero-t,.kp-hero-c{padding:20px;border-radius:20px}
  .kp-hero-c{gap:16px}
  .kp-ring{width:92px;height:92px}
  .kp-ring b{font-size:21px}
  .kp-map{grid-template-columns:1fr}
  .kp-card{padding:16px}
}
.kp-ar{align-self:flex-start}
.kp-me{margin-bottom:8px;font-size:13.5px;font-weight:700;color:#bfeedd}
.kp-phead{max-width:1200px;margin:22px auto 0;padding:0 16px}
.kp-phead h1{font-size:26px;margin:0;color:#0f2e27}
.kp-phead span{color:#17805f;font-weight:700;font-size:13.5px}
.kp-kids,.kp-phead,.kp-hero,.kp-grid{width:100%;box-sizing:border-box}
.kp-phead{text-align:start}

/* ===================== O'QUVCHI PORTALI (sp-) ===================== */
.kab-card.sp{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;border:0;background:#f3f8f5;padding:0;min-height:100vh;border-radius:0}
.sp-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;padding:22px 16px;
  background:linear-gradient(175deg,#0f4a40 0%,#0b3a32 100%);color:#fff;overflow:auto}
.sp-brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.sp-brand img{width:40px;height:40px;border-radius:12px}
.sp-brand b{display:block;font-size:15px;line-height:1.2}
.sp-brand span{font-size:12px;opacity:.7}
.sp-nav{display:flex;flex-direction:column;gap:4px}
.sp-nav-i{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:12px;border:0;background:transparent;
  color:rgba(255,255,255,.82);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;text-align:start;position:relative}
.sp-nav-i .ico{width:19px;height:19px;flex:none}
.sp-nav-i:hover{background:rgba(255,255,255,.07);color:#fff}
.sp-nav-i.on{background:#fff;color:#0f4a40;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.sp-badge{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#f2c94c;color:#3a2a00;
  font-style:normal;font-size:11.5px;font-weight:800;display:inline-grid;place-items:center}
.sp-badge[hidden]{display:none}
.sp-side-foot{margin-top:auto;padding:12px;border-radius:14px;background:rgba(255,255,255,.07);font-size:12.5px;display:flex;flex-direction:column;gap:2px}
.sp-side-foot span{opacity:.7}
.sp-main{min-width:0;display:flex;flex-direction:column}
.sp-top{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 28px;background:rgba(243,248,245,.92);backdrop-filter:blur(10px);border-bottom:1px solid #dcebe3}
.sp-top-l{display:flex;align-items:center;gap:10px;min-width:0}
.sp-top-logo{display:none;width:34px;height:34px;border-radius:10px}
.sp-top-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#17805f}
.sp-top-l b{font-size:20px;color:#0f2e27}
.sp-top-r{display:flex;align-items:center;gap:10px}
.sp-me{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dcebe3;border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;font:inherit;color:#0f2e27}
.sp-me-n{font-size:13.5px;font-weight:700;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-top .kab-out{border:0;padding:0;margin:0}
.sp-view{padding:24px 28px 60px;max-width:1180px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:18px}
.sp-tabs{display:none}
.sp-card{background:#fff;border:1px solid #dcebe3;border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.sp-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sp-card-h h3{margin:0;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:#17805f}
.sp-link{background:none;border:0;color:#17805f;font-weight:700;cursor:pointer;font:inherit;font-size:13px}
.sp-muted{color:#6b8a80;font-size:13.5px;margin:0}
.sp-muted.light{color:rgba(255,255,255,.75)}
.sp-lead{margin:0;color:#3d5a51;line-height:1.55}
.sp-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.sp-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.sp-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8fd9bd}
.sp-ar{font-family:var(--c-ar,'Amiri',serif);direction:rtl;color:#17805f;font-size:17px}
/* Hero */
.sp-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;border-radius:26px;overflow:hidden;
  background:linear-gradient(135deg,#17805f,#0f4a40);color:#fff;position:relative}
.sp-hero::after{content:"";position:absolute;right:-50px;top:-40px;width:260px;height:300px;border-radius:130px 130px 0 0;border:2px solid rgba(143,217,189,.25);pointer-events:none}
.sp-hero-l{padding:28px 30px}
.sp-hero-l h1{color:#fff;font-size:32px;margin:6px 0 4px}
.sp-hero-me{font-weight:700;color:#bfeedd;margin:0 0 10px;font-size:13.5px}
.sp-hero-l p{margin:0;opacity:.88;line-height:1.55;max-width:46ch}
.sp-hero-r{background:rgba(255,255,255,.96);margin:14px;border-radius:20px;padding:20px;display:flex;align-items:center;gap:18px;color:#0f2e27;position:relative;z-index:1}
.sp-ring{--p:0;flex:none;width:112px;height:112px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,#fff 79%,transparent 80%),conic-gradient(#1f9d74 calc(var(--p)*1%),#e2f4ec 0)}
.sp-ring b{font-size:25px;color:#0f4a40;line-height:1}
.sp-ring span{font-size:11.5px;color:#5c7a70;margin-top:3px}
.sp-hero-next{display:flex;flex-direction:column;gap:3px;min-width:0}
.sp-hero-next>span:first-child{font-size:12.5px;color:#5c7a70}
.sp-hero-next b{font-size:18px}
.btn.sp-cta{margin-top:10px;background:#1f9d74;border-color:#1f9d74;color:#fff;font-weight:800;padding:11px 18px;border-radius:14px;align-self:flex-start;text-decoration:none}
.btn.sp-cta:hover{background:#17805f}
/* Tiles */
.sp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sp-tile{display:flex;gap:12px;align-items:flex-start;text-align:start;background:#fff;border:1px solid #dcebe3;border-radius:18px;padding:16px;cursor:pointer;font:inherit;color:#0f2e27;min-width:0}
.sp-tile:hover{border-color:#8fd9bd;transform:translateY(-1px);transition:.15s}
.sp-tile-i{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#e2f4ec;color:#17805f}
.sp-tile-i .ico{width:20px;height:20px}
.sp-tile small{display:block;font-size:12px;color:#6b8a80;font-weight:700}
.sp-tile b{display:block;font-size:19px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-tile span{display:block;font-size:12px;color:#6b8a80}
.sp-tile.bad .sp-tile-i{background:#fde8e6;color:#c0392b}.sp-tile.bad b{color:#c0392b}
.sp-tile.warn .sp-tile-i{background:#fff4dc;color:#9a5b00}
.sp-tile.ok b{color:#17805f}
/* To-do */
.sp-todo{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#f6faf8;border:1px solid #e3efe9}
.sp-todo+.sp-todo{margin-top:8px}
.sp-todo-i{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#e2f4ec;color:#17805f}
.sp-todo-i .ico{width:18px;height:18px}
.sp-todo.warn .sp-todo-i{background:#fff4dc;color:#9a5b00}.sp-todo.bad .sp-todo-i{background:#fde8e6;color:#c0392b}
.sp-todo-t{flex:1;min-width:0;display:flex;flex-direction:column}
.sp-todo-t b{font-size:14px}.sp-todo-t span{font-size:12.5px;color:#6b8a80}
/* Lessons */
.sp-unit{display:flex;align-items:baseline;gap:10px;margin:6px 2px -4px}
.sp-unit>span:first-child{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1f9d74}
.sp-unit b{font-size:17px}
.sp-lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.sp-lesson{display:flex;flex-direction:column;gap:8px;text-align:start;background:#fff;border:1px solid #dcebe3;border-radius:18px;padding:16px;cursor:pointer;font:inherit;color:#0f2e27}
.sp-lesson:hover{border-color:#8fd9bd;box-shadow:0 8px 22px rgba(15,74,64,.08)}
.sp-lesson.open{border-color:#1f9d74;box-shadow:0 0 0 3px #e2f4ec}
.sp-lesson.locked{opacity:.55;cursor:not-allowed;background:#f6faf8}
.sp-lesson-top{display:flex;align-items:center;justify-content:space-between}
.sp-lesson-n{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;background:#e2f4ec;color:#0f4a40}
.sp-lesson.open .sp-lesson-n{background:#0f4a40;color:#fff}.sp-lesson.done .sp-lesson-n{background:#1f9d74;color:#fff}
.sp-lesson b{font-size:15px}
.sp-steps{display:flex;gap:4px}
.sp-steps i{flex:1;height:6px;border-radius:4px;background:#e3efe9}
.sp-steps i.on{background:#1f9d74}
.sp-steps i:last-child{background:#efe6cf}.sp-steps i:last-child.on{background:#c79a2c}
.sp-lesson-s{font-size:12.5px;color:#6b8a80}
/* Homework */
.sp-chips{display:flex;gap:8px;flex-wrap:wrap}
.sp-chip{border:1px solid #cfe3da;background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:700;color:#3d5a51;cursor:pointer}
.sp-chip.on{background:#0f4a40;border-color:#0f4a40;color:#fff}
.sp-hw{background:#fff;border:1px solid #dcebe3;border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.sp-hw+.sp-hw{margin-top:12px}
.sp-hw.qayta{border-color:#f2c94c;box-shadow:0 0 0 3px #fff4dc}
.sp-hw.yopiq{opacity:.6}
.sp-hw-h{display:flex;align-items:center;gap:12px}
.sp-hw-n{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;background:#e2f4ec;color:#0f4a40}
.sp-hw-t{flex:1;min-width:0;display:flex;flex-direction:column}
.sp-hw-t b{font-size:15px}.sp-hw-t span{font-size:12.5px;color:#6b8a80}
.sp-hw-c{background:#fff8e6;border-radius:12px;padding:10px 12px;font-size:13.5px}
.sp-hw-ans{background:#f6faf8;border-radius:12px;padding:10px 12px;font-size:14px;white-space:pre-wrap}
.sp-hw-files{display:flex;gap:6px;flex-wrap:wrap}
.sp-filechip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:#e2f4ec;color:#0f4a40;font-size:12.5px;font-weight:700;text-decoration:none}
.sp-filechip .ico{width:14px;height:14px}
.sp-hw-f{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sp-pill{flex:none;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;background:#eef3f1;color:#3d5a51;white-space:nowrap}
.sp-pill.ok{background:#e2f4ec;color:#17805f}.sp-pill.warn{background:#fff4dc;color:#9a5b00}
.sp-pill.bad{background:#fde8e6;color:#c0392b}.sp-pill.info{background:#e6f0fb;color:#2462a8}.sp-pill.todo{background:#0f4a40;color:#fff}
.sp-pill.muted{background:#f1f4f3;color:#8aa39b}
/* Schedule */
.sp-next{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-radius:24px;padding:24px 26px;
  background:linear-gradient(135deg,#17805f,#0f4a40);color:#fff}
.sp-next h2{color:#fff;margin:6px 0 4px;font-size:26px}
.sp-next p{margin:0;opacity:.85}
.sp-next.live{background:linear-gradient(135deg,#1f9d74,#17805f);box-shadow:0 0 0 4px #bfeedd}
.sp-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.sp-day{border:1px solid #e3efe9;border-radius:14px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;gap:4px;background:#f9fcfb}
.sp-day b{font-size:13px;color:#6b8a80}
.sp-day.has{background:#e2f4ec;border-color:#bfe3d3}.sp-day.has span{font-weight:800;color:#0f4a40}
.sp-day.today{outline:2px solid #1f9d74}
/* Pay */
.sp-paybig{display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:24px;padding:24px 26px;color:#fff}
.sp-paybig.ok{background:linear-gradient(135deg,#17805f,#0f4a40)}
.sp-paybig.bad{background:linear-gradient(135deg,#b4473a,#7d2a22)}
.sp-paybig h2{color:#fff;margin:6px 0 4px;font-size:30px}
.sp-paybig p{margin:2px 0 0;opacity:.9}
.sp-paybig .sp-eyebrow{color:rgba(255,255,255,.75)}
.sp-od{font-weight:800}
.sp-adv{background:rgba(255,255,255,.15);border-radius:16px;padding:12px 16px;text-align:end}
.sp-adv small{display:block;opacity:.8}.sp-adv b{font-size:18px}
.sp-cardbox{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:center}
.sp-bankcard{aspect-ratio:1.6;border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,#2fb889 0%,#17805f 45%,#0b3a32 100%);box-shadow:0 14px 30px rgba(15,74,64,.25)}
.sp-bankcard small{opacity:.8;font-weight:700;letter-spacing:.08em}
.sp-bankcard b{font-size:21px;letter-spacing:.08em;font-family:var(--mono,monospace)}
.sp-bankcard span{font-size:13px;opacity:.9;text-transform:uppercase;letter-spacing:.05em}
.sp-steps-how p{margin:0 0 6px;font-size:14px;line-height:1.5}
.sp-inv{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed #e3efe9}
.sp-inv:last-child{border-bottom:0}
.sp-inv>div:first-child{display:flex;flex-direction:column;min-width:0}
.sp-inv>div:first-child span{font-size:12.5px;color:#6b8a80}
.sp-inv-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sp-inv-r b.pos{color:#17805f}.sp-inv-r b.neg{color:#c0392b}
/* Files */
.sp-drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 16px;border:2px dashed #9fd6c1;border-radius:18px;background:#f6fbf9;cursor:pointer}
.sp-drop:hover,.sp-drop.over{background:#e2f4ec;border-color:#1f9d74}
.sp-drop-i{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#1f9d74;color:#fff}
.sp-drop-i .ico{width:24px;height:24px}
.sp-drop b{font-size:16px}.sp-drop span{font-size:13px;color:#6b8a80;max-width:44ch}
.sp-input{width:100%;box-sizing:border-box;border:1px solid #cfe3da;border-radius:12px;padding:11px 12px;font:inherit;font-size:14.5px;background:#fff}
.sp-input:focus{outline:2px solid #8fd9bd;border-color:#1f9d74}
.sp-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.sp-file{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid #e3efe9;border-radius:14px;text-decoration:none;color:#0f2e27;background:#fff;min-width:0}
.sp-file:hover{border-color:#8fd9bd}
.sp-file-th{flex:none;width:56px;height:56px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:#e2f4ec;color:#17805f;font-weight:800;font-size:12px}
.sp-file-th.pdf{background:#fde8e6;color:#c0392b}
.sp-file-th img{width:100%;height:100%;object-fit:cover}
.sp-file-t{display:flex;flex-direction:column;min-width:0}
.sp-file-t b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-file-t span{font-size:12px;color:#6b8a80}
.sp-file-n{font-style:italic}
.sp-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 10px;color:#6b8a80}
.sp-empty-i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#e2f4ec;color:#17805f}
.sp-empty b{color:#0f2e27}
/* Q&A */
.sp-qa{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px dashed #e3efe9}
.sp-qa:last-child{border-bottom:0}
.sp-q{display:flex;flex-direction:column}.sp-q span{font-size:12px;color:#6b8a80}
.sp-a{background:#e2f4ec;border-radius:14px 14px 14px 4px;padding:10px 12px;display:flex;flex-direction:column;align-self:flex-start;max-width:90%}
.sp-a small{font-weight:800;color:#17805f;font-size:11.5px}
/* Profile */
.sp-profile{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #dcebe3;border-radius:20px;padding:20px}
.sp-profile .avatar{width:64px;height:64px;font-size:22px}
.sp-profile h2{margin:0;font-size:22px}.sp-profile span{color:#6b8a80}
.sp-warnbox{display:flex;gap:12px;align-items:flex-start;background:#fff8e6;border:1px solid #f2dfa6;border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.5}
.sp-warnbox .ico{flex:none;color:#9a5b00;width:20px;height:20px;margin-top:2px}
.sp-form .sp-input{margin-bottom:2px}
.sp-more{display:flex;flex-direction:column;gap:6px}
.sp-more-i{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1px solid #e3efe9;background:#fff;font:inherit;font-weight:700;cursor:pointer;color:#0f2e27}
.sp-more-i span{flex:1;text-align:start}.sp-more-i .ico{width:20px;height:20px;color:#17805f}
@media (max-width:1100px){ .sp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .kab-card.sp{grid-template-columns:1fr;padding-bottom:76px}
  .sp-side{display:none}
  .sp-top{padding:10px 14px}
  .sp-top-logo{display:block}
  .sp-top-k{font-size:10.5px}.sp-top-l b{font-size:17px}
  .sp-me-n{display:none}.sp-me{padding:3px;border:0;background:transparent}
  .sp-view{padding:14px 14px 30px;gap:14px}
  .sp-hero,.sp-grid2,.sp-cardbox{grid-template-columns:1fr}
  .sp-hero-l{padding:22px 20px 6px}
  .sp-hero-l h1{font-size:26px}
  .sp-hero-r{margin:12px}
  .sp-tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;
    border-top:1px solid #dcebe3;padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(15,74,64,.08)}
  .sp-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border:0;background:none;font:inherit;
    font-size:11px;font-weight:700;color:#6b8a80;cursor:pointer;border-radius:12px}
  .sp-tab .ico{width:22px;height:22px}
  .sp-tab.on{color:#0f4a40;background:#e2f4ec}
  .sp-tab .sp-badge{position:absolute;top:0;right:14%;margin:0;min-width:16px;height:16px;font-size:10px}
  .sp-bankcard{max-width:340px}
}
@media (max-width:560px){
  .sp-tiles{gap:10px}
  .sp-tile{padding:12px;flex-direction:column;gap:8px}
  .sp-tile b{font-size:16px}
  .sp-ring{width:90px;height:90px}.sp-ring b{font-size:20px}
  .sp-hero-r{gap:14px;padding:16px}
  .sp-week{gap:4px}.sp-day{padding:8px 2px;font-size:12px}
  .sp-paybig{flex-direction:column;align-items:flex-start;padding:20px}
  .sp-paybig h2{font-size:25px}
  .sp-lessons{grid-template-columns:1fr 1fr;gap:10px}
  .sp-lesson{padding:12px}
  .sp-hw{padding:14px}
  .sp-top .kab-out .btn{padding:6px 10px}
}

/* ---- Kirish sahifasi (login + parol) ---- */
.kab-form{display:flex;flex-direction:column;gap:8px}
.kab-lb{font-size:13px;font-weight:700;color:var(--ink2,#3d5a51);margin-top:4px}
.kab-in{width:100%;box-sizing:border-box;border:1.5px solid #cfe3da;border-radius:14px;padding:13px 14px;font:inherit;font-size:16px;background:#fff}
.kab-in:focus{outline:3px solid #e2f4ec;border-color:#1f9d74}
.kab-passw{position:relative}
.kab-passw .kab-in{padding-inline-end:48px}
.kab-eye{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:18px;cursor:pointer;padding:6px}
#kab-go{margin-top:10px}
.kab-hint{background:#e2f4ec;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:#0f2e27}

/* ---- Darsda / Uyda bosqichlari ---- */
.cr-steps.grouped{display:flex;gap:12px;flex-wrap:wrap;overflow:visible}
.cr-stepgrp{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:18px;background:#fff;border:1px solid #dcebe3}
.cr-stepgrp.home{background:#fffaf0;border-color:#f0dfb4}
.cr-stepgrp-t{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#17805f;padding:0 6px}
.cr-stepgrp.home .cr-stepgrp-t{color:#9a6b00}
.cr-stepgrp-b{display:flex;gap:6px;flex-wrap:wrap}
.cr-stepgrp.home .cr-step.on{background:#c79a2c;border-color:#c79a2c}
.cr-eyebrow.dark{color:#1f9d74}
@media (max-width:700px){
  .cr-steps.grouped{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cr-steps.grouped::-webkit-scrollbar{display:none}
  .cr-stepgrp{flex:none}.cr-stepgrp-b{flex-wrap:nowrap}
}

/* ---- Qissa paneli ---- */
.cr-howread{background:#f6faf8;border:1px solid #e3efe9;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.6;margin-bottom:12px}
.cr-story-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cr-line.now .cr-bubble{box-shadow:0 0 0 3px #8fd9bd;background:#fff}
.cr-say.mic{background:#fff4dc;color:#9a5b00}
.cr-say.mic.rec{background:#c0392b;color:#fff;animation:crPulse 1s infinite}
@keyframes crPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}50%{box-shadow:0 0 0 8px rgba(192,57,43,0)}}
.cr-readres{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.cr-readres:empty{display:none}
.cr-listen{font-size:13px;color:#2462a8;font-weight:700}
.cr-marked{font-family:var(--c-ar,'Amiri',serif);font-size:20px;line-height:1.8}
.cr-marked .g{color:#17805f}.cr-marked .r{color:#c0392b;text-decoration:underline wavy rgba(192,57,43,.5)}
.cr-readpct{font-size:13px;font-weight:800;align-self:flex-start;padding:4px 10px;border-radius:999px}
.cr-readpct.ok{background:#e2f4ec;color:#17805f}.cr-readpct.bad{background:#fde8e6;color:#c0392b}
.cr-readsum{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:12px 16px;border-radius:14px;background:#e2f4ec}
.cr-readsum[hidden]{display:none}
.cr-audio{width:100%;max-width:420px;height:40px}
/* Uy vazifasi: qissa tepada qotib turadi */
.cr-pin{position:sticky;top:62px;z-index:6;background:#fbfdfc;border:1.5px solid #bfe3d3;border-radius:18px;padding:10px 14px 12px;margin:0 0 16px;
  box-shadow:0 10px 26px rgba(15,74,64,.10)}
.cr-pin .cr-story{max-height:34vh;overflow:auto}
.cr-pin.min .cr-story{display:none}
.cr-pin-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.cr-pin-h b{font-size:14px;color:#0f4a40}
.cr-pin-tg{border:0;background:#e2f4ec;color:#0f4a40;font:inherit;font-size:12.5px;font-weight:800;padding:6px 10px;border-radius:999px;cursor:pointer}
.cr-story.compact .cr-dialog{gap:6px}
.cr-story.compact .cr-bubble{padding:8px 12px}
.cr-story.compact .cr-ar{font-size:19px}
.cr-story.compact .cr-who{font-size:11px}
.cr-story.compact .cr-story-bar{margin-bottom:8px}
.cr-kbbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:-6px 0 10px}
.cr-ex-card{border:1px solid #dcebe3;border-radius:18px;padding:16px;margin-bottom:14px;background:#fff}
.cr-ex-h{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cr-ex-n{flex:none;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#0f4a40;color:#fff;border-radius:10px;padding:6px 10px}
.cr-ex-h b{display:block;font-size:15.5px}.cr-ex-h span{display:block;font-size:12.5px;color:#6b8a80}
.cr-ex-card .cr-q{border:0;padding:6px 0;margin:0;background:none}
.cr-fill{padding:10px 0;border-bottom:1px dashed #e3efe9}
.cr-fill:last-child{border-bottom:0}
.cr-fill-ar{font-family:var(--c-ar,'Amiri',serif);font-size:22px;line-height:2.1;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cr-fill-n{font-family:inherit;font-size:14px;color:#6b8a80}
.cr-fill-in{width:150px;max-width:45vw;border:0;border-bottom:2.5px solid #1f9d74;background:#f2faf6;border-radius:8px 8px 0 0;padding:4px 8px;
  font-family:var(--c-ar,'Amiri',serif);font-size:22px;text-align:center}
.cr-fill-in:focus{outline:none;background:#e2f4ec}
.cr-fill-uz{font-size:12.5px;color:#6b8a80}
/* Arab klaviaturasi */
.cr-kb{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#e9f1ed;border-top:1px solid #cfe3da;padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:6px;box-shadow:0 -10px 30px rgba(0,0,0,.12)}
.cr-kb-row{display:flex;gap:4px;justify-content:center}
.cr-kb-k{flex:1;max-width:46px;min-width:0;height:44px;border:0;border-radius:9px;background:#fff;box-shadow:0 1px 0 #b9cfc5;
  font-family:var(--c-ar,'Amiri',serif);font-size:21px;cursor:pointer;color:#0f2e27}
.cr-kb-k:active{background:#bfeedd}
.cr-kb-k.wide{max-width:220px;flex:4;font-family:inherit;font-size:13px}
/* Ustoz paneli: yozma javoblar */
.cr-wrs{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.cr-wr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 10px;border-radius:10px;background:#f6faf8}
.cr-wr.no{background:#fff5f4}
.cr-wr .cr-ar{font-size:18px}
.cr-audio-w{display:flex;flex-direction:column;gap:4px;width:100%}
.sp-hero-next .sp-ar{align-self:flex-start}
body.kb-open{padding-bottom:280px}
body.kb-open .cr-pin .cr-story{max-height:16vh}
@media (max-width:700px){
  .cr-pin{top:58px;padding:8px 10px 10px;border-radius:14px}
  .cr-pin .cr-story{max-height:26vh}
  .cr-pin .cr-story-bar .btn{padding:6px 10px;font-size:12px}
  .cr-pin .cr-story-bar{flex-wrap:nowrap;overflow-x:auto}
  .cr-pin-h b{font-size:13px}
  .cr-fill-ar{font-size:20px}
  .cr-fill-in{width:120px;font-size:20px}
  .cr-ex-card{padding:12px}
  .cr-kbbar{justify-content:space-between}
}
.chat-form input{min-width:0}.chat-form .btn{flex:none}

/* ===================== QISSA VIDEO (qv-) ===================== */
.qv{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.qv-stage{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#eef7f2;box-shadow:0 14px 34px rgba(15,74,64,.16);
  container-type:inline-size;user-select:none}
.qv.render .qv-stage{border-radius:0;box-shadow:none}
.qv-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.qv-pos{transition:transform 1.7s cubic-bezier(.45,.05,.3,1)}
.qv-char .qv-body{transform-origin:0 0}
.qv-char.walk .qv-body{animation:qvWalk .42s ease-in-out infinite alternate}
@keyframes qvWalk{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-7px) rotate(1.5deg)}}
.qv-char.talk .qv-body{animation:qvTalk .36s ease-in-out infinite alternate}
@keyframes qvTalk{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.qv-waves{opacity:0;transition:opacity .2s}
.qv-char.talk .qv-waves{opacity:1;animation:qvWv .5s ease-in-out infinite alternate}
@keyframes qvWv{from{opacity:.35}to{opacity:1}}
.qv-char[data-char="B"] .qv-waves{transform:translate(-52px,-250px) scale(-1,1)}
.qv-q{opacity:0;transition:opacity .3s}
.qv-char.asking .qv-q{opacity:1;animation:qvPop .6s ease-out}
@keyframes qvPop{0%{transform:translate(-6px,-310px) scale(.3)}70%{transform:translate(-6px,-336px) scale(1.15)}100%{transform:translate(-6px,-330px) scale(1)}}
.qv-arm{transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
.qv-arm-l{transform:rotate(9deg)}.qv-arm-r{transform:rotate(-9deg)}
/* Maryam (A) — o'ng qo'li bilan */
.qv-char[data-char="A"][data-g="wave"] .qv-arm-r{animation:qvWaveR .45s ease-in-out 5 alternate;transform:rotate(-160deg)}
@keyframes qvWaveR{from{transform:rotate(-140deg)}to{transform:rotate(-178deg)}}
.qv-char[data-char="A"][data-g="point"] .qv-arm-r{transform:rotate(-118deg)}
.qv-char[data-char="A"][data-g="chest"] .qv-arm-l{transform:rotate(-42deg)}
.qv-char[data-g="up"] .qv-arm-l{transform:rotate(150deg)}
.qv-char[data-g="up"] .qv-arm-r{transform:rotate(-150deg)}
/* Zaynab (B) — chap qo'li bilan ko'rsatadi */
.qv-char[data-char="B"][data-g="wave"] .qv-arm-l{animation:qvWaveL .45s ease-in-out 5 alternate;transform:rotate(160deg)}
@keyframes qvWaveL{from{transform:rotate(140deg)}to{transform:rotate(178deg)}}
.qv-char[data-char="B"][data-g="point"] .qv-arm-l{transform:rotate(122deg)}
.qv-char[data-char="B"][data-g="chest"] .qv-arm-r{transform:rotate(42deg)}
/* Devordagi surat → katta surat */
.qv-wallframe{transition:opacity .6s}
.qv-stage[data-photo="1"] .qv-wallframe{opacity:0}
.qv-photo{transform:translate(420px,70px) scale(.23);opacity:0;transition:transform 1.1s cubic-bezier(.5,0,.2,1),opacity .6s}
.qv-stage[data-photo="1"] .qv-photo{transform:translate(220px,22px) scale(1);opacity:1}
.qv-mem{transition:opacity .4s}
.qv-mem-glow{opacity:0;transition:opacity .3s}
.qv-mem.hl .qv-mem-glow{opacity:1;animation:qvGlow 1s ease-in-out infinite alternate}
@keyframes qvGlow{from{opacity:.5}to{opacity:1}}
.qv-mem.hl>*:not(.qv-mem-glow){filter:drop-shadow(0 0 6px rgba(31,157,116,.65))}
.qv-mem.dim{opacity:.32}
.qv-mem.q{animation:qvShake .5s ease-in-out 2}
@keyframes qvShake{0%,100%{opacity:1}50%{opacity:.55}}
.qv-tag{opacity:0;transition:opacity .4s,transform .4s}
.qv-tag.on{opacity:1}
.qv-ar-t{font-family:var(--c-ar,'Amiri',serif);font-weight:700}
/* Sarlavha (boshlanish) */
.qv-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;text-align:center;
  background:rgba(15,74,64,.92);color:#fff;border-radius:22px;padding:3.2cqw 5cqw;transition:opacity .5s,transform .5s;display:flex;flex-direction:column;gap:.6cqw}
.qv-stage.intro .qv-title{opacity:1;transform:translate(-50%,-50%) scale(1)}
.qv-title-ar{font-family:var(--c-ar,'Amiri',serif);font-size:5.2cqw;line-height:1.2}
.qv-title b{font-size:2.1cqw;color:#bfeedd}
/* Subtitr */
.qv-sub{position:absolute;left:3%;right:3%;bottom:2.6%;background:rgba(255,255,255,.94);border-radius:2cqw;padding:1.2cqw 2cqw 1.4cqw;
  box-shadow:0 8px 24px rgba(15,74,64,.15);opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s;text-align:center}
.qv-sub.on{opacity:1;transform:none}
.qv-sub-who{position:absolute;top:-1.4cqw;font-size:1.45cqw;font-weight:800;color:#fff;padding:.35cqw 1.1cqw;border-radius:999px;background:#1f9d74}
.qv-sub-who.A{left:2cqw}.qv-sub-who.B{right:2cqw;background:#2b6f5d}
.qv-sub-ar{font-family:var(--c-ar,'Amiri',serif);font-size:3.5cqw;line-height:1.5;color:#7f9a91}
.qv-sub-ar span{transition:color .15s}
.qv-sub-ar .said{color:#0f4a40}
.qv-sub-ar .now{color:#1f9d74;text-shadow:0 0 1px #1f9d74}
.qv-sub-uz{font-size:1.75cqw;color:#3d5a51;font-weight:600}
.qv-stage.no-uz .qv-sub-uz{display:none}
.qv-stage.recap-on .qv-sub{opacity:0}
/* Takrorlash */
.qv-repeat{position:absolute;top:4%;left:50%;transform:translateX(-50%);background:#fff4dc;color:#7a4b00;border-radius:999px;padding:.9cqw 2.2cqw;
  display:flex;gap:1.2cqw;align-items:center;font-size:1.8cqw;opacity:0;transition:opacity .3s;box-shadow:0 6px 18px rgba(0,0,0,.1)}
.qv-repeat.on{opacity:1}
/* Yakun: so'zlar va qoida */
.qv-recap{position:absolute;inset:6% 8% 6%;background:rgba(255,255,255,.97);border-radius:2.4cqw;padding:2.4cqw;opacity:0;pointer-events:none;
  transition:opacity .5s;display:flex;flex-direction:column;align-items:center;gap:1.6cqw;box-shadow:0 18px 40px rgba(15,74,64,.18)}
.qv-stage.recap-on .qv-recap{opacity:1}
.qv-recap h3{margin:0;font-size:2.6cqw;color:#0f4a40}
.qv-rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;width:100%}
.qv-rc{border:2px solid #dcebe3;border-radius:1.6cqw;padding:1.2cqw;text-align:center;display:flex;flex-direction:column;gap:.3cqw;transition:all .3s}
.qv-rc b{font-family:var(--c-ar,'Amiri',serif);font-size:3.8cqw;color:#0f4a40;line-height:1.3}
.qv-rc span{font-size:1.7cqw;color:#5c7a70;font-weight:700}
.qv-rc.on{border-color:#1f9d74;background:#e2f4ec;transform:scale(1.06);box-shadow:0 8px 20px rgba(31,157,116,.25)}
.qv-rc.done b{color:#17805f}
.qv-rule{display:flex;flex-direction:column;gap:1.4cqw;width:80%}
.qv-rule-r{display:grid;grid-template-columns:1fr 1.4fr 1.3fr;align-items:center;gap:1.4cqw;background:#f6faf8;border-radius:1.6cqw;padding:1.4cqw 2cqw}
.qv-rule-r b{font-family:var(--c-ar,'Amiri',serif);font-size:4.4cqw;color:#1f9d74;text-align:center}
.qv-rule-r span{font-size:1.9cqw;font-weight:700;color:#0f2e27}
.qv-rule-r i{font-style:normal;font-family:var(--c-ar,'Amiri',serif);font-size:3cqw;color:#0f4a40;text-align:center}
.qv-end{margin-top:auto;font-size:1.9cqw;font-weight:800;color:#17805f}
.qv-bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:13cqw;height:13cqw;border-radius:50%;border:0;
  background:#1f9d74;color:#fff;font-size:5cqw;cursor:pointer;box-shadow:0 12px 30px rgba(15,74,64,.35);padding-left:1cqw}
.qv-bigplay:hover{background:#17805f}
.qv-bigplay[hidden]{display:none}
/* Boshqaruv */
.qv-ctrl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qv-btn{border:1px solid #cfe3da;background:#fff;color:#0f4a40;border-radius:12px;padding:9px 14px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.qv-btn.primary{background:#1f9d74;border-color:#1f9d74;color:#fff}
.qv-btn.on:not(.primary){background:#e2f4ec;border-color:#8fd9bd}
.qv-dots{display:flex;gap:6px;margin-inline-start:auto}
.qv-dot{width:14px;height:14px;border-radius:50%;border:2px solid #8fd9bd;background:#fff;cursor:pointer;padding:0}
.qv-dot.done{background:#8fd9bd}.qv-dot.on{background:#1f9d74;border-color:#1f9d74;transform:scale(1.25)}
@media (max-width:600px){ .qv-ctrl .qv-btn{padding:8px 10px;font-size:12.5px} .qv-dots{width:100%;justify-content:center;margin:2px 0 0} }
@media (prefers-reduced-motion:reduce){ .qv-char .qv-body,.qv-arm{animation:none!important} }
.qv.render .qv-bigplay{display:none}

/* ===================== LUG'AT YODLASH ===================== */
.sp-lesson.sp-rv{background:#fffaf0;border-color:#f0dfb4}
.sp-lesson.sp-rv .sp-lesson-n{background:#f6e7bf;color:#7a4b00}
.sp-lesson.sp-rv.open{border-color:#c79a2c;box-shadow:0 0 0 3px #fbefd2}
.sp-lesson.sp-rv.done .sp-lesson-n{background:#c79a2c;color:#fff}
.sp-rv-k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9a6b00}
.sp-vhero{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-radius:24px;padding:24px 26px;color:#fff;
  background:linear-gradient(135deg,#c79a2c,#8a5f12)}
.sp-vhero h2{color:#fff;margin:6px 0 6px;font-size:24px}
.sp-vhero p{margin:0;opacity:.9;max-width:52ch;line-height:1.5}
.sp-vhero .sp-eyebrow{color:#fde9b8}
.sp-vhero-b{display:flex;flex-direction:column;gap:8px}
.sp-vhero .btn.sp-cta{background:#fff;color:#7a4b00;border-color:#fff;margin:0}
.btn.sp-cta2{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:700;border-radius:14px;padding:10px 16px}
.sp-rvlist{display:flex;flex-direction:column;gap:8px}
.sp-rvrow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#f9fbfa;border:1px solid #e3efe9}
.sp-rvrow.open{background:#fffaf0;border-color:#f0dfb4}
.sp-rvrow.locked{opacity:.6}
.sp-rvrow-n{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f6e7bf;font-size:16px}
.sp-rvrow.done .sp-rvrow-n{background:#c79a2c;color:#fff;font-weight:800}
.sp-rvrow-t{flex:1;min-width:0;display:flex;flex-direction:column}
.sp-rvrow-t span{font-size:12.5px;color:#6b8a80}
.sp-boxes{display:inline-flex;gap:3px}
.sp-boxes i{width:8px;height:8px;border-radius:50%;background:#e3efe9}
.sp-boxes i.on{background:#1f9d74}
.sp-wlist{display:flex;flex-direction:column}
.sp-wgroup{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#17805f;margin:14px 0 4px}
.sp-word{display:grid;grid-template-columns:40px minmax(90px,1fr) 1fr 1.4fr auto;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed #e3efe9}
.sp-word-say{width:36px;height:36px;border-radius:10px;border:0;background:#e2f4ec;cursor:pointer;font-size:15px}
.sp-word-ar{font-family:var(--c-ar,'Amiri',serif);font-size:22px;color:#0f4a40;text-align:start}
.sp-word-tr{font-size:12.5px;color:#8aa39b;font-style:italic}
.sp-word-uz{font-weight:700;font-size:14px}
/* Kartochkalar */
.sp-cards{max-width:620px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:14px}
.sp-chead{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;color:#3d5a51}
.sp-cbar{height:8px;border-radius:8px;background:#e3efe9;overflow:hidden}
.sp-cbar i{display:block;height:100%;background:#1f9d74;border-radius:8px;transition:width .3s}
.sp-flash{background:#fff;border:1px solid #dcebe3;border-radius:26px;padding:24px;min-height:300px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;box-shadow:0 16px 40px rgba(15,74,64,.10);cursor:pointer}
.sp-flash.test{cursor:default;min-height:220px}
.sp-canim{width:220px;max-width:70%}
.sp-canim svg{width:100%;height:auto}
.sp-car{font-family:var(--c-ar,'Amiri',serif);font-size:56px;line-height:1.3;color:#0f4a40}
.sp-cq{font-size:14px;font-weight:700;color:#6b8a80}
.sp-cuz-big{font-size:30px;font-weight:800;color:#0f2e27}
.sp-cback{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:10px;border-top:2px dashed #e3efe9;width:100%}
.sp-cback[hidden]{display:none}
.sp-cuz{font-size:26px;font-weight:800;color:#17805f}
.sp-ctr{font-size:14px;color:#8aa39b;font-style:italic}
.sp-csay{border:0;background:#e2f4ec;color:#0f4a40;border-radius:999px;padding:8px 16px;font:inherit;font-weight:700;cursor:pointer}
.sp-csay.big{padding:12px 22px;font-size:16px}
.sp-cact{display:flex;gap:10px}
.sp-cact .btn{flex:1;padding:16px;font-size:16px;font-weight:800;border-radius:16px}
.btn.sp-show{background:#0f4a40;color:#fff;border-color:#0f4a40}
.btn.sp-no{background:#fde8e6;color:#c0392b;border-color:#f6c9c3}
.btn.sp-yes{background:#1f9d74;color:#fff;border-color:#1f9d74}
.sp-cdone{align-items:center;text-align:center;padding:30px}
.sp-cdone h2{margin:6px 0}
.sp-cdone-big{font-size:46px;font-weight:800;color:#17805f}
.sp-cdone-big.bad{color:#c0392b}
.sp-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-opt{border:1.5px solid #cfe3da;background:#fff;border-radius:16px;padding:16px;font:inherit;font-size:16px;font-weight:700;cursor:pointer;color:#0f2e27}
.sp-opts.ar .sp-opt{font-family:var(--c-ar,'Amiri',serif);font-size:26px;font-weight:400}
.sp-opt:hover:not(:disabled){border-color:#1f9d74}
.sp-opt.ok{background:#e2f4ec;border-color:#1f9d74;color:#17805f}
.sp-opt.bad{background:#fde8e6;border-color:#e2a59d;color:#c0392b}
@media (max-width:560px){
  .sp-word{grid-template-columns:36px 1fr auto;row-gap:2px}
  .sp-word-tr{display:none}
  .sp-word-uz{grid-column:2/3;font-size:13px}
  .sp-word .sp-boxes{grid-row:1/3;grid-column:3}
  .sp-car{font-size:46px}
  .sp-flash{min-height:260px;padding:18px}
  .sp-vhero{padding:20px}.sp-vhero h2{font-size:20px}
}
/* Darsdagi takrorlash chaqiruvi va video joyi */
.cr-gate{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;border-radius:18px;background:#fffaf0;border:1.5px solid #f0dfb4;margin-top:12px}
.cr-gate b{font-size:17px;color:#7a4b00}
.cr-video{margin-bottom:6px}
/* Telefonda o'qilishi uchun minimal o'lchamlar */
.qv-sub-ar{font-size:max(17px,3.5cqw)}
.qv-sub-uz{font-size:max(11.5px,1.75cqw)}
.qv-sub-who{font-size:max(10px,1.45cqw);top:max(-9px,-1.4cqw)}
.qv-sub{padding:max(6px,1.2cqw) max(10px,2cqw) max(7px,1.4cqw)}
.qv-rc b{font-size:max(18px,3.8cqw)}.qv-rc span{font-size:max(10px,1.7cqw)}
.qv-recap h3{font-size:max(14px,2.6cqw)}
.qv-rule-r b{font-size:max(20px,4.4cqw)}.qv-rule-r span{font-size:max(10px,1.9cqw)}.qv-rule-r i{font-size:max(15px,3cqw)}
.qv-title-ar{font-size:max(22px,5.2cqw)}.qv-title b{font-size:max(11px,2.1cqw)}
.qv-repeat{font-size:max(12px,1.8cqw)}
.qv-end{font-size:max(11px,1.9cqw)}
.sp-word{grid-template-columns:40px 150px 130px 1fr auto}
.sp-word-ar{text-align:right}
@media (max-width:560px){ .sp-word{grid-template-columns:36px 1fr auto} .qv-recap{inset:3% 3% 3%} .qv-rgrid{gap:6px} }
/* Yordam (ishora) tizimi */
.cr-fill-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.cr-fill-mark{font-size:13px;font-weight:800}
.cr-fill-mark.ok{color:#17805f}.cr-fill-mark.bad{color:#c0392b}
.cr-fill-in.ok{border-bottom-color:#17805f;background:#e2f4ec}
.cr-fill-in.bad{border-bottom-color:#c0392b;background:#fff5f4}
.cr-hint-btn{border:1.5px dashed #e0b64a;background:#fffaf0;color:#7a4b00;border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;animation:crHintIn .4s ease-out}
.cr-hint-btn[hidden]{display:none}
.cr-hint-btn:disabled{opacity:.55;cursor:default}
@keyframes crHintIn{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.cr-hints{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cr-hints:empty{display:none}
.cr-hint{display:flex;align-items:center;gap:8px;background:#fff8e6;border-radius:12px;padding:8px 12px;font-size:13.5px;color:#5a4300}
.cr-marked .gap{color:#c0392b;letter-spacing:.1em}
.cr-tr-res{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.cr-tr-res:empty{display:none}
.cr-mp4{width:100%;border-radius:20px;background:#000;aspect-ratio:16/9}

/* =====================================================================
   PREMIUM MAVZU — ichkarida toza oq panel, tashqarida boy zumrad yashil.
   Zumrad + tilla: yon panel, kirish oynasi va sayt boshi to'q yashil,
   orqasida xatam naqshi va yumshoq nur. Ish maydoni — oq, aniq, tinch.
   ===================================================================== */
:root{
  --em-950:#021a14; --em-900:#032a20; --em-800:#05402f; --em-700:#065f46; --em-600:#047857; --em-500:#059669;
  --au-500:#c9a24c; --au-400:#e2c272; --au-200:#f3e3b5; --au-soft:#faf3df;
  --px-khatam:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22132%22%20height%3D%22132%22%20viewBox%3D%220%200%20132%20132%22%3E%3Cpath%20d%3D%22M66.00%2026.00L72.34%2050.69L94.28%2037.72L81.31%2059.66L106.00%2066.00L81.31%2072.34L94.28%2094.28L72.34%2081.31L66.00%20106.00L59.66%2081.31L37.72%2094.28L50.69%2072.34L26.00%2066.00L50.69%2059.66L37.72%2037.72L59.66%2050.69ZM0.00%20-40.00L6.34%20-15.31L28.28%20-28.28L15.31%20-6.34L40.00%200.00L15.31%206.34L28.28%2028.28L6.34%2015.31L0.00%2040.00L-6.34%2015.31L-28.28%2028.28L-15.31%206.34L-40.00%200.00L-15.31%20-6.34L-28.28%20-28.28L-6.34%20-15.31ZM132.00%20-40.00L138.34%20-15.31L160.28%20-28.28L147.31%20-6.34L172.00%200.00L147.31%206.34L160.28%2028.28L138.34%2015.31L132.00%2040.00L125.66%2015.31L103.72%2028.28L116.69%206.34L92.00%200.00L116.69%20-6.34L103.72%20-28.28L125.66%20-15.31ZM0.00%2092.00L6.34%20116.69L28.28%20103.72L15.31%20125.66L40.00%20132.00L15.31%20138.34L28.28%20160.28L6.34%20147.31L0.00%20172.00L-6.34%20147.31L-28.28%20160.28L-15.31%20138.34L-40.00%20132.00L-15.31%20125.66L-28.28%20103.72L-6.34%20116.69ZM132.00%2092.00L138.34%20116.69L160.28%20103.72L147.31%20125.66L172.00%20132.00L147.31%20138.34L160.28%20160.28L138.34%20147.31L132.00%20172.00L125.66%20147.31L103.72%20160.28L116.69%20138.34L92.00%20132.00L116.69%20125.66L103.72%20103.72L125.66%20116.69ZM72.47%2050.39L81.61%2059.53L81.61%2072.47L72.47%2081.61L59.53%2081.61L50.39%2072.47L50.39%2059.53L59.53%2050.39ZM5.71%2052.22L13.78%2060.29L13.78%2071.71L5.71%2079.78L-5.71%2079.78L-13.78%2071.71L-13.78%2060.29L-5.71%2052.22ZM137.71%2052.22L145.78%2060.29L145.78%2071.71L137.71%2079.78L126.29%2079.78L118.22%2071.71L118.22%2060.29L126.29%2052.22ZM71.71%20-13.78L79.78%20-5.71L79.78%205.71L71.71%2013.78L60.29%2013.78L52.22%205.71L52.22%20-5.71L60.29%20-13.78ZM71.71%20118.22L79.78%20126.29L79.78%20137.71L71.71%20145.78L60.29%20145.78L52.22%20137.71L52.22%20126.29L60.29%20118.22Z%22%20fill%3D%22none%22%20stroke%3D%22%23d8ae43%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --brand:#05704f; --brand-deep:#043f2e; --brand-light:#045c41; --brand-soft:#e7f5ef;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f6f8f7; --line:#e6ebe9; --line-strong:#d4ddd9;
  --ink:#0d1a15; --ink-2:#33433d; --muted:#6a7a73;
  --ok:#0f7a4c; --ok-soft:#e5f5ed;
  --side-bg:#032a20; --side-ink:#f3f8f5; --side-ink-2:rgba(226,240,233,.74);
  --side-hover:rgba(255,255,255,.07); --side-line:rgba(226,194,114,.16);
  --side-active-bg:#ffffff; --side-active-ink:#043f2e;
  --shadow:0 1px 2px rgba(13,26,21,.04), 0 8px 24px -16px rgba(5,64,47,.22);
  --shadow-lg:0 24px 60px -24px rgba(3,42,32,.45);
  --r:11px; --r-lg:18px;
}
body{background:var(--bg)}

/* ---------- Yon panel: boy zumrad, tilla naqsh ---------- */
.sidebar{position:sticky;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(120% 45% at 0% 0%, rgba(16,185,129,.24), transparent 62%),
    radial-gradient(110% 40% at 100% 100%, rgba(201,162,76,.20), transparent 62%),
    linear-gradient(180deg,#05402f 0%,#032a20 55%,#021a14 100%);
  box-shadow:inset -1px 0 0 rgba(226,194,114,.22)}
.sidebar::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--px-khatam);background-size:120px 120px;opacity:.085;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,#000 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,#000 100%)}
.sidebar::after{content:'';position:absolute;left:-60px;bottom:-60px;width:240px;height:240px;z-index:-1;
  border-radius:50%;border:1px solid rgba(226,194,114,.16);box-shadow:0 0 0 22px rgba(226,194,114,.04),0 0 0 44px rgba(226,194,114,.03);
  pointer-events:none}
.sidebar .head{padding:20px 16px 16px;border-bottom:1px solid var(--side-line)}
.sidebar .head .logo-sm{width:38px;height:38px;border-radius:12px;
  box-shadow:0 0 0 1px rgba(226,194,114,.55),0 8px 18px -8px rgba(0,0,0,.6)}
.sidebar .head b{font-size:16.5px;color:#fff}
.sidebar .head span{color:var(--au-400);opacity:.9;font-weight:600;font-size:10.5px;letter-spacing:.14em}
.nav{padding:12px 10px;gap:3px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.nav button{position:relative;padding:10px 12px;border-radius:11px;font-weight:600;font-size:13.5px;
  transition:background .15s,color .15s,transform .15s}
.nav button:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}
.nav button[aria-current="page"]{background:linear-gradient(180deg,#ffffff,#f3f8f5);color:var(--em-800);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.65),inset 0 -1px 0 rgba(5,64,47,.08);transform:none}
.nav button[aria-current="page"]::before{content:'';position:absolute;left:-10px;top:9px;bottom:9px;width:4px;
  border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--au-400),var(--au-500))}
.nav button[aria-current="page"] .ico{color:var(--em-600)}
.nav .group-label{color:var(--au-400);opacity:.75;font-weight:700}
.sidebar .foot{border-top:1px solid var(--side-line);padding:12px;background:rgba(0,0,0,.14)}
.sidebar .foot .avatar{background:linear-gradient(150deg,var(--au-400),var(--au-500)) !important;color:#2a1f05 !important;font-weight:800}
.sidebar .foot .who b{color:#fff}
.sidebar .foot .who span{color:var(--au-200);opacity:.8}

/* ---------- Ish maydoni: oq va toza ---------- */
.main{background:#fff}
.topbar{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);padding:12px 24px}
.topbar .search input{background:var(--surface-2);border-color:transparent;border-radius:12px;padding:10px 14px 10px 38px;
  transition:border-color .15s,box-shadow .15s,background .15s}
.topbar .search input:focus{outline:none;background:#fff;border-color:var(--em-500);box-shadow:0 0 0 4px rgba(5,150,105,.12)}
.topbar .search svg{left:12px;top:11px}
.view{padding:26px 28px 40px}
.page-head h1{font-size:24px;letter-spacing:-.02em}
.page-head p{font-size:13.5px}

.card{border-color:var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card>.card-head{padding:16px 18px}
.card>.card-head h2{font-size:15.5px}
.card>.card-body{padding:18px}

.tiles{gap:14px}
.tile{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:16px 18px;gap:7px;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.tile::before{content:'';position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--em-500),var(--au-400));opacity:0;transition:opacity .2s}
.tile:hover{border-color:color-mix(in srgb,var(--em-500) 45%,var(--line));transform:translateY(-2px);
  box-shadow:0 18px 36px -22px rgba(5,64,47,.35)}
.tile:hover::before{opacity:1}
.tile .lbl{font-size:12.5px;color:var(--muted)}
.tile .val{font-size:28px;letter-spacing:-.02em}
.tile.money .val{color:var(--em-600)}

.btn{border-radius:11px;transition:background .15s,border-color .15s,box-shadow .15s,transform .08s}
.btn:hover{border-color:color-mix(in srgb,var(--em-500) 35%,var(--line-strong))}
.btn.primary{background:linear-gradient(180deg,#078160,#05603f);border-color:#05603f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 18px -10px rgba(5,96,63,.75)}
.btn.primary:hover{background:linear-gradient(180deg,#08906b,#056947);border-color:#056947}
.btn.ghost:hover{border-color:transparent}
.btn.sm{border-radius:9px}

.field input,.field select,.field textarea{border-radius:11px;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--em-500);box-shadow:0 0 0 4px rgba(5,150,105,.12)}

table.tbl th{background:#f7f9f8;color:#5d6d66}
table.tbl tbody tr:hover{background:#f4faf7}
.pill.ok{background:var(--ok-soft)}

@media (max-width:900px){
  .view{padding:18px 16px 92px}
  .topbar{padding:10px 16px}
  .tabbar{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
    box-shadow:0 -10px 30px -20px rgba(5,64,47,.35)}
  .tabbar button[aria-current="page"]{color:var(--em-700)}
  .tabbar button[aria-current="page"] .ico{background:var(--brand-soft);border-radius:999px;padding:3px 14px;width:48px;height:28px;box-sizing:border-box}
}

/* ---------- Kirish oynasi: to'q zumrad, tilla naqsh, nur ---------- */
.login-screen{
  background:
    radial-gradient(60% 55% at 12% 8%, rgba(16,185,129,.30), transparent 62%),
    radial-gradient(50% 50% at 92% 92%, rgba(201,162,76,.26), transparent 62%),
    radial-gradient(120% 90% at 50% 50%, #05402f 0%, #032a20 55%, #01130e 100%)}
.login-screen .login-art .khatam{display:block;color:var(--au-400);opacity:.075}
.login-art::before,.login-art::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.login-art::before{width:520px;height:520px;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px solid rgba(226,194,114,.20);box-shadow:0 0 0 46px rgba(226,194,114,.035),0 0 0 92px rgba(226,194,114,.025),0 0 0 138px rgba(226,194,114,.018)}
.login-art::after{width:46vw;height:46vw;right:-14vw;top:-16vw;filter:blur(40px);
  background:radial-gradient(circle,rgba(16,185,129,.28),transparent 68%);animation:stDrift2 24s ease-in-out infinite}
.login-ar{color:var(--au-400);opacity:.10}
.login-screen .login{box-shadow:0 0 0 1px rgba(226,194,114,.45),0 0 0 8px rgba(226,194,114,.06),0 50px 90px -40px rgba(0,0,0,.95)}
.login-screen .login .btn.primary{background:linear-gradient(180deg,#078160,#044d36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 34px -18px rgba(3,42,32,.95)}
.login-screen .login .btn.primary:hover{background:linear-gradient(180deg,#08906b,#05603f)}
.login-screen .field input:focus{border-color:var(--au-500);box-shadow:0 0 0 4px rgba(201,162,76,.20)}
@media (prefers-reduced-motion:reduce){ .login-art::after{animation:none} }
@media (max-width:560px){ .login-art::before{width:340px;height:340px} }

/* ---------- Ochiq sayt: boshida boy zumrad band ---------- */
.site{--st-paper:#f7faf8}
.site-top{background:rgba(3,42,32,.94);backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid rgba(226,194,114,.18)}
.site-top.stuck{border-bottom-color:rgba(226,194,114,.25);box-shadow:0 14px 34px -22px rgba(0,0,0,.8)}
.site-brand b{color:#fff}
.site-brand span{color:var(--au-200);opacity:.85}
.site-brand .logo{box-shadow:0 0 0 1px rgba(226,194,114,.6),0 8px 18px -8px rgba(0,0,0,.6)}
.site-nav .btn.ghost{color:rgba(240,248,244,.86)}
.site-nav .btn.ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.site-nav .btn:not(.ghost):not(.primary){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.site-nav .btn:not(.ghost):not(.primary):hover{background:rgba(255,255,255,.12)}
.site-top .site-nav .btn.primary{background:linear-gradient(180deg,var(--au-400),var(--au-500));border-color:transparent;color:#241a03;
  box-shadow:0 10px 24px -12px rgba(201,162,76,.9)}
.site .site-phone{background:transparent;border-color:rgba(226,194,114,.45);color:#fff}
.site .site-phone:hover{border-color:var(--au-400);color:var(--au-200)}
.site .site-phone .ico{color:var(--au-400)}

.site-hero{position:relative;isolation:isolate;padding:64px 0 108px;color:#fff}
.site-hero::before{display:block;content:'';position:absolute;z-index:-2;inset:0 -100vmax;width:auto;height:auto;border-radius:0;opacity:1;background-color:transparent;pointer-events:none;
  background:
    var(--px-khatam) 0 0/132px 132px,
    radial-gradient(55% 80% at 10% 0%, rgba(16,185,129,.30), transparent 62%),
    radial-gradient(45% 70% at 92% 100%, rgba(201,162,76,.24), transparent 62%),
    linear-gradient(170deg,#05402f 0%,#032a20 60%,#021a14 100%);
  background-blend-mode:soft-light,normal,normal,normal;
  border-bottom:1px solid rgba(226,194,114,.25)}
.site-hero::after{display:block;content:'';position:absolute;z-index:-1;pointer-events:none;
  width:min(620px,70vw);height:min(620px,70vw);right:-8%;top:50%;transform:translateY(-50%);border-radius:50%;
  border:1px solid rgba(226,194,114,.18);
  box-shadow:0 0 0 40px rgba(226,194,114,.03),0 0 0 80px rgba(226,194,114,.02),inset 0 0 120px rgba(16,185,129,.18)}
.site-hero h1{color:#fff}
.site-hero h1 .gold{color:var(--au-400)}
.hero-eyebrow{color:var(--au-200);background:rgba(226,194,114,.10);border-color:rgba(226,194,114,.38)}
.hero-eyebrow::before{background:var(--au-400);box-shadow:0 0 10px var(--au-400)}
.hero-type{color:var(--au-400);text-shadow:0 0 28px rgba(201,162,76,.35)}
.hero-type-cur{background:var(--au-400)}
.hero-lead{color:rgba(232,243,238,.84)}
.site .btn.gold{background:linear-gradient(180deg,#ecd08a,var(--au-500));border-color:rgba(255,255,255,.2);color:#231903;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 18px 38px -18px rgba(201,162,76,.95)}
.site .btn.gold:hover{background:linear-gradient(180deg,#f3dca0,#d4ae58)}
.hero-cta .btn.on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
.hero-cta .btn.on-dark:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.site .hero-tel{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:#fff}
.site .hero-hours,.site .hero-proof .proof-text{color:rgba(232,243,238,.75)}
.zm{box-shadow:0 0 0 1px rgba(226,194,114,.35),0 50px 90px -40px rgba(0,0,0,.85)}
.zm-top{background:#021a14}
.zm-chip{box-shadow:0 0 0 1px rgba(226,194,114,.35),0 18px 36px -18px rgba(0,0,0,.6)}
.stat-band{position:relative;z-index:2;margin-top:-70px !important;
  box-shadow:0 0 0 1px var(--st-line),0 30px 60px -30px rgba(3,42,32,.45) !important}
@media (max-width:900px){
  .site-hero{padding:34px 0 96px}
  .site-hero::after{width:90vw;height:90vw;right:-40vw;top:30%}
}

/* Tepadagi asosiy chaqiruv: "Tekin darsga yozilish" */
.site-top .site-nav .btn.nav-free{background:linear-gradient(180deg,var(--au-400),var(--au-500));border-color:transparent;color:#241a03;
  font-weight:700;box-shadow:0 10px 24px -12px rgba(201,162,76,.9)}
.site-top .site-nav .btn.nav-free:hover{filter:brightness(1.06)}
@media (max-width:900px){.site-top .site-nav .btn.nav-free{display:none}}