/* Mayoq — asosiy uslub: ranglar, shrift, tugma, kartochka, forma, savat-fon.
   Ekranlar: shell.css (kirish, farzandlar, kurslar, panellar), quiz.css (savollar), result.css (natija, xarita, hisobot).
   Dizayn qoidalari: REDESIGN.md. Rang va o'lchamlar faqat shu yerdagi o'zgaruvchilardan olinadi. */

:root {
  /* matn */
  --ink: #1B1A40;          /* asosiy matn va to'q tugmalar */
  --ink-2: #3A3970;        /* ikkinchi darajali matn */
  --muted: #5A5889;        /* xira matn: oq fonda 6.6:1, sahifaning to'q yuqori lavanda yo'lida (--bg-top) ham >= 4.7:1 */

  /* fon va yuzalar */
  --bg: #F1F0FD;
  --bg-top: #DAD7F8;
  --card: #FFFFFF;
  --sky: #E6EEF9;          /* sovuq ko'k kartochka (ma'lumot kartochkalari) */
  --soft: #EEECFC;         /* kartochka ichidagi yumshoq yuza */
  --field: #FFFFFF;

  /* asosiy rang: periwinkle */
  --brand: #7573DA;        /* katta sirtlar va ustidagi oq KATTA matn */
  --brand-deep: #4B49B5;   /* kichik matn, ikonka, fokus */
  --brand-soft: #E1DFFA;
  --brand-tint: #C9C6F4;
  --hl: #8785E3;           /* sarlavhada ajratilgan so'z */

  /* qo'shimcha rang */
  --peach: #FFBE8C;        /* asosiy tugma */
  --peach-deep: #F4A261;
  --navy: #1B1A40;         /* pastki panel, to'q tugma */
  --navy-2: #2B2A66;
  --sun: #FFC93C;         /* yulduz */

  /* holatlar */
  --ok: #2DB985;
  --ok-bg: #DCF5EA;
  --ok-ink: #12704F;
  --ok-seg: #7ED9B5;
  --bad: #FF7A7A;
  --bad-bg: #FFE3E1;
  --bad-ink: #B3261E;
  --bad-seg: #FF9C9C;
  --warn-bg: #FFF1D6;
  --warn-ink: #7A4B00;     /* --warn-bg ustidagi matn (kontrast 7:1) */

  /* shakl */
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --sh-1: 0 8px 24px -10px rgba(58, 52, 140, .30);
  --sh-2: 0 18px 42px -16px rgba(58, 52, 140, .42);
  --sh-peach: 0 12px 24px -12px rgba(244, 162, 97, .95);

  /* shrift */
  --font: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* pastki panel egallagan joy (panel yo'q bo'lsa 0) */
  --dock: 0px;
}
body.has-tabbar { --dock: 96px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

button { font-family: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 3px; }
h1, h2, h3 { letter-spacing: -.015em; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 700; }
/* ekran almashganda fokus sarlavhaga o'tadi (ekran o'quvchi yangi sahifani e'lon qiladi); u bosiladigan emas, halqa kerak emas */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
/* overflow:hidden kartochka ichidagi fokus halqasi kesilmasligi uchun ichkariga chiziladi (guruhlash savoli, quiz.css) */
.grp-title:focus-visible { outline-offset: -4px; }

/* Fokus suzuvchi panel ostida qolmasin (WCAG 2.4.11): klaviatura bilan yurganda brauzer elementni
   panelning tepa chetigacha emas, uning ustigacha olib chiqadi.
   pastda: pastki panel (--dock), savol ekranidagi tugmalar qatori, o'rnatish paneli (--pwa-h, pwa.js yozadi); tepada: yopishqoq yuqori panel. */
html {
  --sp-dock: 0px;
  --sp-pwa: 0px;
  scroll-padding-top: 84px;
  scroll-padding-bottom: calc(24px + var(--sp-dock) + var(--sp-pwa) + env(safe-area-inset-bottom));
}
html:has(body.has-tabbar) { --sp-dock: 96px; }
html:has(body[data-screen="quiz"]) { --sp-dock: 88px; }
html:has(body.pwa-bar-on) { --sp-pwa: calc(var(--pwa-h, 130px) + 12px); }
html:has(body:is([data-screen="login"], [data-screen="quiz"], [data-screen="report"])) { scroll-padding-top: 16px; }

.app {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(110% 34% at 50% 0%, var(--bg-top) 0%, rgba(218, 215, 248, 0) 100%),
    linear-gradient(180deg, #ECEAFD 0%, #F5F4FE 50%, #FAF9FF 100%);
}

/* orqa fon: yumshoq dog'lar va xira matematik belgilar */
.decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.decor i { position: absolute; border-radius: 50%; filter: blur(2px); }
.decor::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%23D2CFF4' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M30 40h22M41 29v22'/%3E%3Cpath d='M140 30l18 18M158 30l-18 18'/%3E%3Cpath d='M60 150h24M60 168h24'/%3E%3Cpath d='M160 140h22'/%3E%3Ccircle cx='171' cy='128' r='3'/%3E%3Ccircle cx='171' cy='152' r='3'/%3E%3Ccircle cx='118' cy='100' r='8'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
/* closest-side: gradient qutining chetida aynan 0 ga tushadi, to'rtburchak/doira qirrasi qolmaydi. Dog' yopishqoq tepa panel (~80px) ostidan boshlanadi:
   panelning xira yo'li dog'ni kesib, "tokcha" hosil qilmasin. */
.d1 { right: -130px; top: 24px; width: 400px; height: 400px; background: radial-gradient(closest-side at 50% 50%, rgba(185, 182, 241, .9) 0%, rgba(185, 182, 241, .55) 38%, rgba(185, 182, 241, .18) 72%, rgba(185, 182, 241, 0) 100%); }
.d2 { left: -80px; bottom: 120px; width: 220px; height: 220px; background: radial-gradient(circle at 50% 50%, rgba(255, 190, 140, .5) 0%, rgba(255, 190, 140, 0) 70%); }
/* yopishqoq tepa panelning xira yo'li (shell.css) faqat siljiganda (.lift) kerak: tepada ostida kontent yo'q, u esa sahifa fonining
   to'q yuqori qismini oqartirib, y~80 da gorizontal "tokcha" qirrasini hosil qilar edi */
.topbar:not(.lift)::before { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.screen { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; width: 100%; margin: 0 auto; padding: 20px 20px calc(48px + var(--dock)); }
.screen.narrow { max-width: 600px; }
.screen.wide { max-width: 1080px; }
@media (min-width: 760px) {
  .screen { padding: 28px 28px calc(56px + var(--dock)); }
  .screen.narrow .card { padding: 24px; }
}

/* ---------- xabarlar ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(18px + var(--dock) + env(safe-area-inset-bottom)); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.toast { max-width: 460px; padding: 13px 20px; background: var(--navy); color: #fff; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1.35; text-align: center; box-shadow: var(--sh-2); animation: pop .25s ease both; }
.toast.ok { background: var(--ok-ink); }
.toast.bad { background: var(--bad-ink); }
/* savol ekranida pastki panel yo'q, lekin yopishqoq tugmalar qatori (.bottom, ~80px) bor: xabar uning ustida turadi, "Tekshirish / Keyingi"ni yopmaydi */
body[data-screen="quiz"] .toasts { bottom: calc(104px + env(safe-area-inset-bottom)); }
/* mavzu tanlash ekranida yopishqoq "Boshladik!" tugmasi pastki panel ustida turadi: xabar uning ham ustida */
body[data-screen="start"] .toasts { top: calc(72px + env(safe-area-inset-top)); bottom: auto; }
/* o'rnatish paneli ochiq bo'lsa, xabar uning ustini yopmasligi uchun tepada chiqadi: yuqori panel (orqaga, avatar) ostida */
body.pwa-bar-on .toasts { top: calc(80px + env(safe-area-inset-top)); bottom: auto; }
body.pwa-bar-on:is([data-screen="login"], [data-screen="report"]) .toasts { top: calc(12px + env(safe-area-inset-top)); }

/* ---------- umumiy ---------- */
.top { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.logo-mark { width: 36px; height: 36px; }
.pill { display: inline-flex; align-items: center; background: rgba(255, 255, 255, .85); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; color: var(--ink); box-shadow: 0 2px 10px -4px rgba(58, 52, 140, .25); }
.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 11px; font-weight: 800; font-size: 13px; white-space: nowrap; background: var(--brand-soft); color: var(--ink); }
.chip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.chip.mid { background: var(--warn-bg); color: var(--warn-ink); }
.chip.bad { background: var(--bad-bg); color: var(--bad-ink); }
.muted { color: var(--muted); font-weight: 700; font-size: 14px; }
.muted-p { margin: 0; color: var(--muted); font-weight: 600; font-size: 15px; line-height: 1.5; }
.center { text-align: center; }
.note { margin: 0; text-align: center; font-weight: 700; font-size: 14px; color: var(--muted); }
.error { margin: 0; font-weight: 700; font-size: 14px; color: var(--bad-ink); }
.h2 { margin: 0 0 12px; font-weight: 800; font-size: 23px; line-height: 1.2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sample { background: var(--warn-bg); border-radius: var(--r-sm); padding: 9px 14px; font-weight: 700; font-size: 13px; }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hl { background: var(--hl); color: #fff; padding: .02em .22em .06em; border-radius: .24em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* chiziqli o'lchagich (daraja, jarayon): <div class="meter" style="--v:40%"><i></i></div> */
.meter { position: relative; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .85); }
.meter > i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); min-width: 14px; border-radius: 999px; background: var(--peach); }
.meter > i::after { content: ""; position: absolute; right: -2px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(27, 26, 64, .25), inset 0 0 0 5px var(--peach); }

/* ---------- qahramon ---------- */
.mascot-row { display: flex; align-items: flex-end; gap: 14px; }
.mascot-row.small { align-items: center; }
.owl-wrap { width: 132px; height: 132px; flex: none; }
.mascot-row.small .owl-wrap { width: 116px; height: 116px; }
.owl { width: 100%; height: 100%; display: block; }
.bob { animation: bob 2.4s ease-in-out infinite; }
.jump { animation: jump .7s ease; }
.shake { animation: shake .5s ease; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes jump { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-22px) rotate(-8deg); } 70% { transform: translateY(0) rotate(6deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-5deg); } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

.bubble { position: relative; flex: 1; min-width: 0; overflow-wrap: break-word; background: #fff; border-radius: 24px; padding: 15px 18px; font-size: 17px; line-height: 1.4; font-weight: 700; box-shadow: var(--sh-1); }
.bubble::before { content: ""; position: absolute; left: -7px; bottom: 26px; width: 18px; height: 18px; background: #fff; border-radius: 4px; transform: rotate(45deg); }
.mascot-row.small .bubble::before { bottom: auto; top: 40px; }
.bubble h1 { margin: 0; font-weight: 800; font-size: 25px; line-height: 1.2; }

/* ---------- kartochka va forma ---------- */
.card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.card.tint { background: linear-gradient(160deg, var(--sky) 0%, var(--soft) 100%); box-shadow: none; }
.card.soft { background: rgba(255, 255, 255, .6); box-shadow: none; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .label { font-weight: 800; font-size: 18px; }
/* maydon chegarasi fondan ajralib turishi kerak (WCAG 1.4.11, >= 3:1): --brand oq ustida 4:1 */
input[type="text"] { width: 100%; height: 56px; border: 0; border-radius: 18px; padding: 0 18px; font: 700 19px var(--font); color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 2px var(--brand); transition: box-shadow .15s; }
input[type="text"]:focus { outline: none; box-shadow: inset 0 0 0 3px var(--brand-deep); }
input[type="text"]::placeholder { color: var(--muted); opacity: 1; font-weight: 600; } /* oq fonda 6:1 */

/* ---------- tugmalar ---------- */
.press { cursor: pointer; transition: transform .12s, box-shadow .12s, background .15s; }
.btn-sq { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); color: var(--ink); }
.btn-sq:not(:disabled):active { transform: scale(.92); }
.btn-sq:disabled { opacity: .35; cursor: default; }

.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 60px; padding: 0 26px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: var(--sh-1); font: 800 20px/1 var(--font); text-decoration: none; cursor: pointer; }
.btn:not(:disabled):active { transform: scale(.975); }
.btn.cta { background: var(--peach); box-shadow: var(--sh-peach); }
/* oxirida ikonka bo'lsa: matn chapda, to'q aylana ichida o'q o'ngda (referensdagi "Start Learning ↗") */
.btn.cta:has(> .ico:last-child) { justify-content: space-between; padding: 0 8px 0 28px; }
.btn.cta > .ico:last-child { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--navy); color: #fff; stroke-width: 2.4; }
.btn.ghost { background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 2px var(--brand); height: 56px; font-size: 18px; }
.btn.dark { background: var(--navy); color: #fff; height: 56px; font-size: 18px; box-shadow: 0 12px 24px -12px rgba(27, 26, 64, .8); }
.btn.dark .ico { stroke: #fff; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.link { background: none; border: 0; padding: 8px 0 2px; font-weight: 800; font-size: 15px; color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: center; }

@media (max-width: 380px) {
  .screen { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- telefon ilovasi (PWA) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain; /* tortib yangilash test o'rtasida sahifani o'chirib yubormasin */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button, .btn, .press, a, select, summary { touch-action: manipulation; } /* ikki marta bosganda kattalashish kechikishi yo'q */
.app { min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }

/* o'rnatish / yangilash paneli: pastki panel bo'lsa uning tepasida turadi */
.pwa-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--dock) + env(safe-area-inset-bottom)); z-index: 90; max-width: 520px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; background: #fff; border-radius: 26px; box-shadow: var(--sh-2); animation: pwa-up .25s ease both; }
.pwa-owl { width: 44px; height: 44px; flex: none; }
.pwa-txt { flex: 1 1 120px; min-width: 0; order: 1; display: flex; flex-direction: column; gap: 1px; }
.pwa-txt strong { font: 800 18px/1.15 var(--font); }
.pwa-txt span { font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--muted); }
.pwa-txt b { display: inline-block; vertical-align: -4px; color: var(--ink); }
.pwa-share { width: 20px; height: 20px; }
.pwa-owl { order: 0; }
.pwa-x { order: 2; }
.pwa-bar .pwa-go { order: 3; width: auto; height: 48px; flex: 1 1 100%; margin: 0 4px 2px 0; padding: 0 20px; font-size: 18px; }
@media (min-width: 560px) { .pwa-bar .pwa-go { order: 1; flex: none; margin: 0; } .pwa-txt { order: 1; } }
.pwa-x { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted); }
.pwa-x .ico { width: 20px; height: 20px; }
@keyframes pwa-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pwa-bar { animation: none; } }
/* panel balandligi 110-170px (qatorlar soniga qarab): pwa.js o'lchab --pwa-h ga yozadi, oxirgi kontent panel ostida qolmaydi */
body.pwa-bar-on { padding-bottom: calc(var(--pwa-h, 130px) + env(safe-area-inset-bottom)); }
@media print { .pwa-bar, .tabbar { display: none !important; } body { padding: 0; } }

/* uzun ism va uzun bob nomlari (Parallelogramm, romb va trapetsiya; 30 belgili ism) kenglikdan chiqib, sahifani yonga surmasin */
h1, h2, .h2, .pill, .rp-meta, .det-t, .role-t, .role-d, .pi-title, .next-t { overflow-wrap: anywhere; }
.pill { max-width: 100%; }
.role-grid, .role-card, .role-card > * { min-width: 0; }
.role-page > .link { min-height: 44px; padding: 0 16px; }