/* Saodat — maketdagi «firuza» uslub. Ranglar faqat shu yerdagi tokenlardan. */
:root {
  --fon: #F3F5F2;
  --oq: #FFFFFF;
  --siyoh: #142420;
  --siyoh-2: #2C3B37;
  --sub: #4E5E59;
  --nav: #56655F;
  --chiziq: #E1E6E3;
  --chiziq-2: #C9D2CF;
  --chiziq-uzuq: #A9B6B2;
  --belgi-chegara: #7C8B86;
  --asosiy: #0B5E5A;
  --asosiy-toq: #084744;
  --asosiy-och: #E3F0EE;
  --asosiy-ust: #FFFFFF;
  --sarlavha-sub: #CFE6E3;
  --zafar: #E7B04A;
  --zafar-och: #FDF3E0;
  --zafar-orta: #F6E1B6;
  --zafar-matn: #7A4F06;
  --kok-och: #E3EAF6;
  --kok-matn: #234C8C;
  --anor-och: #F7E4E2;
  --anor-matn: #8E2F27;
  --qisman: #A9D3CC;
  --qisman-matn: #0B3E3B;
  --kulrang-tab: #E6EBE8;
  --xato: #8E2F27;
  --r: 16px;
  --r-katta: 20px;
  --shrift: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

:root[data-tema="toq"] {
  color-scheme: dark;
  --fon: #0F1715;
  --oq: #17211F;
  --siyoh: #E7EEEC;
  --siyoh-2: #CBD6D3;
  --sub: #9FB0AB;
  --nav: #9FB0AB;
  --chiziq: #26332F;
  --chiziq-2: #33423E;
  --chiziq-uzuq: #4A5B56;
  --belgi-chegara: #7F928C;
  --asosiy: #2E9C93;
  --asosiy-toq: #3DB3A9;
  --asosiy-och: #183330;
  --asosiy-ust: #06201E;
  --sarlavha-sub: #0B3532;
  --zafar-och: #2C2414;
  --zafar-orta: #3D311A;
  --zafar-matn: #EBC27A;
  --kok-och: #1B2638;
  --kok-matn: #9DB8E8;
  --anor-och: #35201E;
  --anor-matn: #F0A79F;
  --qisman: #1F5550;
  --qisman-matn: #CDEDE8;
  --kulrang-tab: #1D2826;
  --xato: #F0A79F;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fon); color: var(--siyoh); font-family: var(--shrift); }
body { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--asosiy); }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.yashirin-matn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#ilova { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
#sahifa { flex: 1 1 auto; padding-bottom: 96px; }
#ilova.menyusiz #sahifa { padding-bottom: 24px; }
#ilova.panelli #sahifa { padding-bottom: 190px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 2px; }
.izoh-kichik { font-size: 12px; color: var(--sub); line-height: 1.4; }

/* ---------- pastki menyu ---------- */
#menyu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: center; background: var(--oq); border-top: 1px solid var(--chiziq);
  padding: 4px 8px calc(8px + env(safe-area-inset-bottom));
}
#menyu .ichki { display: flex; width: 100%; max-width: 560px; }
#menyu button {
  flex: 1 1 0; min-height: 52px; border: 0; background: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; color: var(--nav); font-size: 12px; font-weight: 500;
}
#menyu button[aria-current="page"] { color: var(--asosiy); font-weight: 600; }
#menyu svg { width: 22px; height: 22px; }

/* ---------- umumiy bloklar ---------- */
.ust { padding: 22px 20px 6px; display: flex; flex-direction: column; gap: 4px; }
.ust h1 { font-size: 26px; font-weight: 600; }
.ust .izoh { font-size: 13px; color: var(--sub); display: inline-flex; align-items: center; gap: 6px; }
.ust .izoh svg, .ogohlantirish svg, .qulf svg, .chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.ust .izoh svg { color: var(--zafar-matn); }
.blok { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.blok-sarlavha { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.blok-sarlavha h2 { font-size: 17px; font-weight: 600; }
.blok-sarlavha span { font-size: 12px; color: var(--sub); }
.karta { background: var(--oq); border: 1px solid var(--chiziq); border-radius: var(--r); padding: 14px; }
.karta-katta { border-radius: 18px; padding: 16px; }
.tile {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; background: var(--asosiy-och); color: var(--asosiy);
}
.tile svg { width: 20px; height: 20px; }
.tile.zafar { background: var(--zafar-orta); color: var(--zafar-matn); }
.tile.kok { background: var(--kok-och); color: var(--kok-matn); }
.tile.katta { width: 44px; height: 44px; border-radius: 13px; }
.chip {
  font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--fon); color: var(--siyoh-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.chip.oq { background: var(--oq); border: 1px solid var(--chiziq); padding: 5px 10px; }
.chip.zafar { background: var(--zafar-och); color: var(--zafar-matn); font-weight: 600; }
.chip svg { width: 14px; height: 14px; }
.chiplar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bar { height: 6px; border-radius: 3px; background: var(--kulrang-tab); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 3px; background: var(--asosiy); }
.tugma {
  min-height: 48px; border-radius: 14px; border: 1.5px solid var(--asosiy); background: var(--oq);
  color: var(--asosiy); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; padding: 0 16px; text-decoration: none;
}
.tugma.asosiy { background: var(--asosiy); color: var(--asosiy-ust); border-color: var(--asosiy); }
.tugma:disabled { opacity: .55; cursor: default; }
.tugma svg { width: 18px; height: 18px; }
.havola-tugma {
  border: 0; background: none; color: var(--asosiy); font-weight: 600; font-size: 13px; padding: 4px 0 0;
  text-align: left; min-height: 32px;
}
.pastki-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--oq);
  border-top: 1px solid var(--chiziq); padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
}
.pastki-panel .ichki { display: flex; gap: 10px; width: 100%; max-width: 528px; }
.pastki-panel .tugma { flex: 1 1 0; }
.pastki-panel.ustma .ichki { flex-direction: column; gap: 8px; }
.pastki-panel.ustma .tugma { flex: 0 0 auto; }
.bosh-holat { padding: 48px 24px; text-align: center; color: var(--sub); font-size: 15px; line-height: 1.5; }
.ogohlantirish {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
  background: var(--zafar-och); color: var(--zafar-matn); font-size: 13px; line-height: 1.45;
}
.ogohlantirish svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Bugun ---------- */
.bosh {
  position: relative; overflow: hidden; background: var(--asosiy); color: #FFFFFF;
  padding: 24px 20px 22px; display: flex; flex-direction: column; gap: 18px; border-radius: 0 0 24px 24px;
}
:root[data-tema="toq"] .bosh { background: #0B4A47; }
.bosh .naqsh { position: absolute; right: -44px; top: -40px; width: 170px; height: 170px; opacity: .16; }
.bosh .sana { font-size: 13px; color: #CFE6E3; }
.bosh h1 { font-size: 24px; font-weight: 600; line-height: 1.2; }
.bosh .qator { display: flex; align-items: center; gap: 14px; }
.bosh .qator > div { display: flex; flex-direction: column; gap: 6px; }
.bosh .reja-son { font-size: 17px; font-weight: 600; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13px;
  padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14);
}
.pill svg { width: 14px; height: 14px; }
.vaqt-qator { display: flex; gap: 10px; align-items: stretch; }
.vaqt-qator .vaqt { width: 56px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 14px; }
.vaqt-qator .vaqt b { font-size: 13px; font-weight: 600; }
.vaqt-qator .vaqt span { font-size: 12px; color: var(--sub); }
.vazifa {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--r); border: 1px solid var(--chiziq); background: var(--oq); text-align: left;
}
.vazifa.joriy { border: 2px solid var(--asosiy); padding: 11px; }
.vazifa.boshliq { border: 1px dashed var(--chiziq-uzuq); background: transparent; }
.vazifa .ochish {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none;
  padding: 0; text-align: left; color: inherit; min-height: 44px;
}
.vazifa .havola-matn { font-size: 13px; font-weight: 600; color: var(--asosiy); padding-top: 4px; }
.vazifa .matn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vazifa .nom { font-size: 15px; font-weight: 500; line-height: 1.3; }
.vazifa.bajarilgan .nom { color: var(--sub); }
.vazifa .meta { font-size: 12px; color: var(--sub); }
.vazifa .shukr-matn { font-size: 13px; color: var(--siyoh-2); font-style: italic; }
.belgi {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0; border-radius: 22px; border: 2px solid var(--belgi-chegara);
  background: var(--oq); color: var(--asosiy-ust); display: flex; align-items: center; justify-content: center;
}
.belgi[aria-pressed="true"] { border-color: var(--asosiy); background: var(--asosiy); }
.belgi svg { width: 20px; height: 20px; }
.qulf { color: var(--sub); display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.qulf svg { width: 14px; height: 14px; }
.teaser {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r);
  background: var(--zafar-och); color: var(--siyoh); border: 0; text-align: left; width: 100%;
}
.teaser .kim { font-size: 12px; font-weight: 600; color: var(--zafar-matn); }
.teaser .matn { font-size: 14px; line-height: 1.35; }

/* ---------- Darslar ---------- */
.tablar { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: var(--kulrang-tab); }
.tablar button {
  flex: 1 1 0; min-height: 40px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600;
  background: transparent; color: var(--sub);
}
.tablar button[aria-selected="true"] { background: var(--oq); color: var(--asosiy); }
.kurs { display: flex; flex-direction: column; gap: 12px; }
.kurs .bosh-qator { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 0; text-align: left; width: 100%; }
.kurs .bosh-qator .matn { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.kurs .bosh-qator b { font-size: 17px; font-weight: 600; }
.kurs .bosh-qator span { font-size: 13px; color: var(--sub); }
.kurs .son { font-size: 13px; font-weight: 600; color: var(--asosiy); white-space: nowrap; }
.kurs .keyingi { font-size: 13px; color: var(--siyoh-2); }
.kurs details summary { font-size: 13px; color: var(--asosiy); font-weight: 600; cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.dars-qator {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 10px 0;
  border-top: 1px solid var(--chiziq); text-align: left; font-size: 14px; min-height: 44px;
}
.dars-qator .r { width: 24px; height: 24px; flex-shrink: 0; border-radius: 12px; background: var(--asosiy-och); color: var(--asosiy); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.dars-qator .r.ok { background: var(--asosiy); color: var(--asosiy-ust); }
.dars-qator .r svg { width: 14px; height: 14px; }
.dars-qator .nom { flex: 1 1 auto; }
.tez-orada { border: 1px dashed var(--chiziq-uzuq); border-radius: var(--r); }
.tez-orada > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px dashed var(--chiziq-2); }
.tez-orada > div:first-child { border-top: 0; }
.tez-orada svg { width: 18px; height: 18px; color: var(--nav); flex-shrink: 0; }
.tez-orada b { font-size: 14px; font-weight: 500; display: block; }
.tez-orada span { font-size: 12px; color: var(--sub); }

/* ---------- Dars ---------- */
.yuqori-panel { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; }
.orqaga { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; background: none; color: var(--asosiy); font-size: 15px; font-weight: 500; }
.orqaga svg { width: 20px; height: 20px; }
.dars-bosh {
  position: relative; overflow: hidden; height: 120px; border-radius: var(--r-katta); background: var(--zafar-orta);
  display: flex; align-items: flex-end; padding: 14px; color: var(--zafar-matn);
}
.dars-bosh.kok { background: var(--kok-och); color: var(--kok-matn); }
.dars-bosh.yashil { background: var(--asosiy-och); color: var(--asosiy); }
.dars-bosh .naqsh { position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; opacity: .35; }
.dars-bosh svg.belgisi { width: 36px; height: 36px; position: relative; }
.dars-nom { display: flex; flex-direction: column; gap: 6px; }
.dars-nom .kurs { font-size: 13px; font-weight: 600; color: var(--asosiy); }
.dars-nom h1 { font-size: 26px; font-weight: 600; line-height: 1.15; }
.ovoz { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--asosiy); color: #FFFFFF; }
:root[data-tema="toq"] .ovoz { background: #0B4A47; }
.ovoz .qator { display: flex; align-items: center; gap: 12px; }
.ovoz .ijro { width: 48px; height: 48px; flex-shrink: 0; padding: 0; border: 0; border-radius: 24px; background: #FFFFFF; color: #0B5E5A; display: flex; align-items: center; justify-content: center; }
.ovoz .ijro svg { width: 20px; height: 20px; }
.ovoz b { font-size: 15px; font-weight: 600; }
.ovoz span { font-size: 13px; color: #CFE6E3; }
.ovoz .bar { background: rgba(255, 255, 255, .25); height: 4px; }
.ovoz .bar > span { background: var(--zafar); }
.ovoz .tg { border: 1.5px solid rgba(255, 255, 255, .6); background: transparent; color: #FFFFFF; min-height: 40px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.dars-matn p { font-size: 15px; line-height: 1.55; margin: 0 0 10px; white-space: pre-line; }
.masalliq { margin: 0; padding: 4px 14px; list-style: none; }
.masalliq li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--chiziq); font-size: 14px; }
.masalliq li:last-child { border-bottom: 0; }
.masalliq li span:last-child { color: var(--sub); text-align: right; }
.qadamlar { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.qadamlar li { display: flex; gap: 12px; font-size: 14px; line-height: 1.45; }
.qadamlar li > span:first-child { width: 26px; height: 26px; flex-shrink: 0; border-radius: 13px; background: var(--asosiy-och); color: var(--asosiy); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.ustoza { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; background: var(--asosiy-och); color: var(--asosiy); }
.avatar.r0 { background: var(--zafar-orta); color: var(--zafar-matn); }
.avatar.r1 { background: var(--kok-och); color: var(--kok-matn); }
.avatar.r2 { background: var(--asosiy-och); color: var(--asosiy); }
.avatar.r3 { background: var(--anor-och); color: var(--anor-matn); }
.avatar.kichik { width: 36px; height: 36px; border-radius: 18px; font-size: 14px; }
.avatar.ustoza { background: var(--asosiy); color: var(--asosiy-ust); font-size: 13px; }

/* ---------- Halqa ---------- */
.maqsad { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--asosiy); color: #FFFFFF; }
:root[data-tema="toq"] .maqsad { background: #0B4A47; }
.maqsad .lab { font-size: 12px; font-weight: 600; color: #CFE6E3; letter-spacing: .02em; text-transform: uppercase; }
.maqsad .nom { font-size: 18px; font-weight: 600; line-height: 1.3; }
.maqsad .bar { background: rgba(255, 255, 255, .25); }
.maqsad .bar > span { background: var(--zafar); }
.maqsad .ost { display: flex; justify-content: space-between; font-size: 13px; color: #CFE6E3; }
.azolar { display: flex; align-items: center; padding-top: 2px; }
.azolar .avatar { width: 32px; height: 32px; border-radius: 16px; font-size: 12px; border: 2px solid #0B5E5A; margin-left: -8px; }
.azolar .avatar:first-child { margin-left: 0; }
.azolar .qolgan { font-size: 13px; color: #CFE6E3; padding-left: 10px; }
.post { display: flex; flex-direction: column; gap: 10px; }
.post.ustoza-post { background: var(--zafar-och); border-color: transparent; }
.post .kim { display: flex; align-items: center; gap: 10px; }
.post .kim b { font-size: 14px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.post .kim span { font-size: 12px; color: var(--sub); }
.post .belgi-ustoza { font-size: 11px; font-weight: 600; color: var(--zafar-matn); background: var(--zafar-orta); padding: 2px 7px; border-radius: 999px; }
.post p { font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.post .amallar { display: flex; gap: 8px; flex-wrap: wrap; }
.reaksiya {
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--chiziq); background: var(--oq); color: var(--siyoh-2); font-size: 13px; font-weight: 600;
}
.reaksiya[aria-pressed="true"] { border-color: var(--asosiy); background: var(--asosiy-och); color: var(--asosiy); }
.reaksiya svg { width: 16px; height: 16px; }
.kichik-tugma { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--sub); font-size: 13px; }
.yozish {
  position: fixed; left: 0; right: 0; z-index: 4; bottom: calc(60px + env(safe-area-inset-bottom));
  background: var(--oq); border-top: 1px solid var(--chiziq); padding: 10px 16px 8px; display: flex; justify-content: center;
}
.yozish form { display: flex; gap: 8px; align-items: flex-end; width: 100%; max-width: 528px; }
.yozish textarea {
  flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 120px; resize: none; padding: 11px 14px; border-radius: 22px;
  border: 1px solid var(--chiziq-2); background: var(--fon); font-size: 14px; line-height: 1.35;
}
.yozish button { width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: 22px; background: var(--asosiy); color: var(--asosiy-ust); display: flex; align-items: center; justify-content: center; }
.yozish button svg { width: 18px; height: 18px; }
.halqa-sahifa #sahifa, #ilova.halqa-sahifa #sahifa { padding-bottom: 170px; }

/* ---------- Natijam ---------- */
.zanjir { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--zafar-och); }
.zanjir .tile { width: 52px; height: 52px; border-radius: 16px; }
.zanjir .tile svg { width: 26px; height: 26px; }
.zanjir b { font-size: 22px; font-weight: 600; display: block; }
.zanjir span { font-size: 13px; color: var(--zafar-matn); }
.kalendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kalendar .hk { font-size: 11px; font-weight: 500; color: var(--sub); text-align: center; }
.kalendar .k { height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; background: var(--fon); color: var(--sub); }
.kalendar .k.bosh-k { background: transparent; }
.kalendar .k.toliq { background: var(--asosiy); color: var(--asosiy-ust); }
.kalendar .k.qisman { background: var(--qisman); color: var(--qisman-matn); }
.kalendar .k.bugun { border: 2px solid var(--asosiy); }
.izohlar { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--sub); }
.izohlar span { display: inline-flex; align-items: center; gap: 6px; }
.izohlar i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat > div { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--r); background: var(--oq); border: 1px solid var(--chiziq); }
.stat b { font-size: 24px; font-weight: 600; }
.stat span { font-size: 13px; color: var(--sub); }
.ehson { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--asosiy); color: #FFFFFF; }
:root[data-tema="toq"] .ehson { background: #0B4A47; }
.ehson h2 { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.ehson h2 svg { width: 22px; height: 22px; color: var(--zafar); }
.ehson p { font-size: 14px; line-height: 1.45; color: #E4F1EF; }
.ehson .ichki { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.ehson .ichki span { font-size: 12px; color: #CFE6E3; }
.ehson .ichki b { font-size: 18px; font-weight: 600; }
.qator-havola {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; width: 100%;
  border-radius: var(--r); background: var(--oq); border: 1px solid var(--chiziq); color: var(--siyoh); text-align: left;
}
.qator-havola b { font-size: 15px; font-weight: 500; display: block; }
.qator-havola span { font-size: 12px; color: var(--sub); }
.qator-havola em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--asosiy); white-space: nowrap; }

/* ---------- Obuna ---------- */
.obuna-bosh {
  position: relative; overflow: hidden; background: var(--asosiy); color: #FFFFFF; padding: 8px 20px 24px;
  display: flex; flex-direction: column; gap: 14px; border-radius: 0 0 24px 24px;
}
:root[data-tema="toq"] .obuna-bosh { background: #0B4A47; }
.obuna-bosh .orqaga { color: #FFFFFF; margin-left: -10px; padding: 0; width: 44px; justify-content: center; }
.obuna-bosh .naqsh { position: absolute; right: -50px; top: -20px; width: 200px; height: 200px; opacity: .14; }
.logo { display: flex; align-items: center; gap: 10px; position: relative; font-size: 20px; font-weight: 600; }
.logo svg { width: 34px; height: 34px; }
.obuna-bosh h1 { font-size: 28px; font-weight: 600; line-height: 1.15; position: relative; }
.obuna-bosh p { font-size: 15px; line-height: 1.4; color: #E4F1EF; position: relative; }
.tarif {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r); width: 100%; text-align: left;
  border: 1px solid var(--chiziq-2); background: var(--oq);
}
.tarif[aria-checked="true"] { border: 2px solid var(--asosiy); padding: 13px; }
.tarif .nuqta { width: 22px; height: 22px; flex-shrink: 0; border-radius: 11px; border: 2px solid var(--belgi-chegara); }
.tarif[aria-checked="true"] .nuqta { border: 7px solid var(--asosiy); }
.tarif .matn { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.tarif b { font-size: 16px; font-weight: 600; }
.tarif span { font-size: 13px; color: var(--sub); }
.royxat { margin: 0; padding: 0 4px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.royxat li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.royxat svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--asosiy); }

/* ---------- Sozlama ---------- */
.maydon { display: flex; flex-direction: column; gap: 6px; }
.maydon > label, .maydon .lab { font-size: 13px; font-weight: 600; color: var(--siyoh-2); }
.maydon select {
  min-height: 48px; border-radius: 14px; border: 1px solid var(--chiziq-2); background: var(--oq); padding: 0 14px; font-size: 15px;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.tanlov {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r); border: 1px solid var(--chiziq-2);
  background: var(--oq); cursor: pointer;
}
.tanlov:has(input:checked) { border: 2px solid var(--asosiy); padding: 13px; }
.tanlov input { width: 22px; height: 22px; accent-color: var(--asosiy); flex-shrink: 0; margin: 0; }
.tanlov .matn { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.tanlov b { font-size: 15px; font-weight: 600; }
.tanlov .matn > span { font-size: 13px; color: var(--sub); }

/* ---------- oyna va xabar ---------- */
#oyna { position: fixed; inset: 0; z-index: 20; background: rgba(8, 20, 18, .45); display: flex; align-items: flex-end; justify-content: center; }
#oyna .ichki { width: 100%; max-width: 560px; background: var(--oq); border-radius: 24px 24px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
#oyna h2 { font-size: 18px; font-weight: 600; }
#oyna p { font-size: 14px; color: var(--sub); line-height: 1.4; }
#oyna textarea { min-height: 110px; border-radius: 14px; border: 1px solid var(--chiziq-2); background: var(--fon); padding: 12px 14px; font-size: 15px; line-height: 1.4; resize: vertical; }
#oyna .tugmalar { display: flex; gap: 10px; }
#oyna .tugmalar .tugma { flex: 1 1 0; }
#xabar {
  position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 30; max-width: calc(100% - 32px); background: var(--siyoh); color: var(--fon); padding: 10px 16px; border-radius: 12px;
  font-size: 14px; line-height: 1.35; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; transition: opacity .2s;
}
#xabar.korin { opacity: 1; }
.yuklanmoqda { padding: 64px 24px; text-align: center; color: var(--sub); font-size: 14px; }