/* =====================================================================
   ZAMONAVIY PREMIUM TEMA — Uzzehn (qora + oltin, glassmorphism)
   style.css dan KEYIN ulanadi — kaskad bo'yicha ustun.
   Layout tegilmaydi, faqat ko'rinish zamonaviylashtiriladi.
   ===================================================================== */
:root{
  --gold:#ffd15c; --gold-2:#f5a623; --gold-deep:#e0912a;
  --ink:#0a0e17; --ink-2:#0f1522; --card:#151c2c; --card-2:#1a2334;
  --stroke:rgba(255,255,255,.08); --stroke-2:rgba(255,255,255,.14);
  --txt:#eef2fb; --muted:#8b96ad;
  --grad-gold:linear-gradient(135deg,#ffe08a 0%,#ffcb52 40%,#f5a623 100%);
  --grad-cta:linear-gradient(135deg,#ffd15c 0%,#f5a623 100%);
  --glow-gold:0 10px 30px rgba(245,166,35,.35);
}
html,body{
  background:
    radial-gradient(120% 60% at 50% -10%, #1a2440 0%, transparent 60%),
    radial-gradient(90% 50% at 100% 0%, rgba(245,166,35,.10) 0%, transparent 55%),
    var(--ink) !important;
  color:var(--txt) !important;
}
#app{ padding-bottom:100px; }

/* ---------- HEADER ---------- */
.header{
  background:linear-gradient(180deg, rgba(26,35,64,.7), rgba(10,14,23,0)) !important;
  border-radius:0 0 28px 28px; position:relative;
}
.header-bg-pattern{
  background:radial-gradient(60% 80% at 85% 10%, rgba(245,166,35,.18), transparent 60%) !important;
  opacity:1 !important;
}
.user-avatar{
  background:var(--grad-gold) !important; color:#1a1200 !important;
  box-shadow:var(--glow-gold); border:2px solid rgba(255,255,255,.25) !important; font-weight:800;
}
.user-greeting{ color:var(--muted) !important; }
.user-name{ color:var(--txt) !important; letter-spacing:-.02em; }
.user-role{
  background:rgba(245,166,35,.14) !important; color:var(--gold) !important;
  border:1px solid rgba(245,166,35,.3) !important; border-radius:99px; padding:3px 12px !important; font-weight:700;
}

/* ---------- STAT KARTALAR (glass) ---------- */
.stat-card{
  background:linear-gradient(160deg, var(--card-2), var(--card)) !important;
  border:1px solid var(--stroke) !important; border-radius:18px !important;
  box-shadow:0 8px 20px rgba(0,0,0,.35) !important; backdrop-filter:blur(8px);
}
.stat-value{ color:var(--txt) !important; font-weight:800 !important; letter-spacing:-.02em; }
.stat-label{ color:var(--muted) !important; }
.stat-streak .stat-value{ color:#ff9a3c !important; }
.stat-xp .stat-value{ color:var(--gold) !important; }
.stat-acc .stat-value{ color:#4ade80 !important; }

/* ---------- ASOSIY CTA (oltin) ---------- */
.cta-card{
  background:var(--grad-cta) !important; color:#1a1200 !important; border:none !important;
  border-radius:22px !important; box-shadow:var(--glow-gold), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.cta-title{ color:#1a1200 !important; font-weight:800 !important; }
.cta-subtitle{ color:rgba(26,18,0,.72) !important; font-weight:600; }
.cta-arrow{ color:#1a1200 !important; }

/* ---------- QUICK ACTIONS ---------- */
.quick-btn{
  background:linear-gradient(160deg, var(--card-2), var(--card)) !important;
  border:1px solid var(--stroke) !important; border-radius:18px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.3) !important; transition:transform .15s ease;
}
.quick-btn:active{ transform:scale(.95); }
.quick-label{ color:var(--txt) !important; font-weight:600; }

/* ---------- SECTION SARLAVHA ---------- */
.section-title{ color:var(--txt) !important; font-weight:800 !important; letter-spacing:-.01em; }
.section-link{ color:var(--gold) !important; font-weight:700; }

/* ---------- TOPIC KARTALAR ---------- */
.topic-card{
  background:linear-gradient(160deg, var(--card-2), var(--card)) !important;
  border:1px solid var(--stroke) !important; border-radius:18px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.3) !important; transition:transform .15s, border-color .2s;
}
.topic-card:active{ transform:scale(.97); border-color:rgba(245,166,35,.4) !important; }
.topic-name{ color:var(--txt) !important; font-weight:700; }
.topic-desc{ color:var(--muted) !important; }

/* ---------- PROGRESS / WEAK / LEADERBOARD / PROFILE ---------- */
.progress-item,.weak-item,.lb-item,.profile-card,.setting-item,.empty-state,.profile-stat{
  background:linear-gradient(160deg, var(--card-2), var(--card)) !important;
  border:1px solid var(--stroke) !important; border-radius:16px !important;
  box-shadow:0 4px 12px rgba(0,0,0,.28) !important;
}
.progress-name,.weak-name,.lb-name,.profile-name,.setting-label,.profile-stat-value{ color:var(--txt) !important; }
.progress-value,.weak-meta,.lb-meta,.setting-value,.profile-stat-label,.profile-role{ color:var(--muted) !important; }
.progress-bar{ background:rgba(255,255,255,.08) !important; }
.progress-bar-fill{ background:var(--grad-gold) !important; }
.weak-accuracy{ color:#ff7a7a !important; font-weight:800; }
.lb-rank,.lb-xp{ color:var(--gold) !important; font-weight:800; }
.lb-item:nth-child(1){ border-color:rgba(245,166,35,.45) !important; box-shadow:var(--glow-gold) !important; }

/* ---------- PREMIUM BANNER ---------- */
.premium-banner{
  background:linear-gradient(135deg, #2a2140, #1a2334) !important;
  border:1px solid rgba(245,166,35,.35) !important; border-radius:20px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.4) !important;
}
.premium-title{ color:var(--gold) !important; font-weight:800; }
.premium-sub{ color:var(--muted) !important; }
.premium-arrow{ color:var(--gold) !important; }

/* ---------- TUGMALAR ---------- */
.btn-primary{
  background:var(--grad-cta) !important; color:#1a1200 !important; font-weight:800 !important;
  border:none !important; box-shadow:var(--glow-gold) !important; border-radius:14px !important;
}
.btn-primary:active{ transform:scale(.97); }
.btn-ghost{
  background:rgba(255,255,255,.05) !important; color:var(--txt) !important;
  border:1px solid var(--stroke-2) !important; border-radius:14px !important;
}
.btn-icon{
  background:rgba(255,255,255,.06) !important; color:var(--txt) !important;
  border:1px solid var(--stroke) !important; border-radius:12px !important;
}

/* ---------- TEST EKRANI ---------- */
.page-header h2, .test-topic{ color:var(--txt) !important; }
.test-question{
  background:linear-gradient(160deg, var(--card-2), var(--card)) !important;
  border:1px solid var(--stroke) !important; border-radius:18px !important;
  color:var(--txt) !important; box-shadow:0 8px 20px rgba(0,0,0,.35) !important;
}
.option-btn{
  background:linear-gradient(160deg, var(--card-2), var(--card)) !important;
  border:1.5px solid var(--stroke) !important; border-radius:16px !important;
  color:var(--txt) !important; transition:transform .12s, border-color .2s, background .2s;
}
.option-btn:active{ transform:scale(.98); }
.option-letter{
  background:rgba(245,166,35,.16) !important; color:var(--gold) !important;
  border:1px solid rgba(245,166,35,.3) !important; font-weight:800;
}
.option-btn.correct{ border-color:#22c55e !important; background:rgba(34,197,94,.14) !important; }
.option-btn.correct .option-letter{ background:#22c55e !important; color:#04220f !important; }
.option-btn.wrong{ border-color:#ef4444 !important; background:rgba(239,68,68,.12) !important; }
.test-progress-bar{ background:rgba(255,255,255,.1) !important; }
.test-progress-fill{ background:var(--grad-gold) !important; }
.test-timer{ color:var(--gold) !important; }

/* ---------- NATIJA ---------- */
.result-card{
  background:linear-gradient(160deg, var(--card-2), var(--card)) !important;
  border:1px solid rgba(245,166,35,.3) !important; border-radius:24px !important;
  box-shadow:0 20px 50px rgba(0,0,0,.5) !important;
}
.result-score,.result-stat-value,.result-accuracy{ color:var(--gold) !important; }
.result-title{ color:var(--txt) !important; }

/* ---------- TUTOR ---------- */
.tutor-bubble{ background:var(--card-2) !important; border:1px solid var(--stroke) !important; color:var(--txt) !important; }
.tutor-msg-user .tutor-bubble{ background:var(--grad-cta) !important; color:#1a1200 !important; }
.tutor-input{ background:var(--card) !important; border:1px solid var(--stroke-2) !important; color:var(--txt) !important; border-radius:14px !important; }
.tutor-send-btn{ background:var(--grad-cta) !important; color:#1a1200 !important; }

/* ---------- MOCK ---------- */
.mock-hero,.mock-rule{ background:linear-gradient(160deg,var(--card-2),var(--card)) !important; border:1px solid var(--stroke) !important; border-radius:16px !important; color:var(--txt) !important; }
.mock-hero-title,.mock-rule{ color:var(--txt) !important; }

/* ---------- PASTKI NAVIGATSIYA (suzuvchi shisha) ---------- */
.bottom-nav{
  background:rgba(15,21,34,.9) !important; backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--stroke-2) !important;
  border-radius:22px 22px 0 0 !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  transform:none !important;                 /* eski translateX(-50%) ni bekor qiladi */
  width:100% !important; max-width:480px !important; margin:0 auto !important;
  box-shadow:0 -8px 30px rgba(0,0,0,.5) !important;
  padding-bottom:max(8px, env(safe-area-inset-bottom)) !important;
}
.nav-item .nav-icon{ opacity:.55; transition:.2s; }
.nav-item .nav-label{ color:var(--muted) !important; }
.nav-item.active .nav-icon{ opacity:1; transform:translateY(-2px) scale(1.12); filter:drop-shadow(0 3px 6px rgba(245,166,35,.5)); }
.nav-item.active .nav-label{ color:var(--gold) !important; font-weight:700; }

/* ---------- LOCK / EMPTY / MODAL / SKELETON ---------- */
.lock-title{ color:var(--txt) !important; }
.lock-sub, .empty-state{ color:var(--muted) !important; }
.modal-content{ background:var(--card) !important; border:1px solid var(--stroke-2) !important; color:var(--txt) !important; }
.skeleton-loader{ background:linear-gradient(90deg,var(--card) 25%,var(--card-2) 50%,var(--card) 75%) !important; }
.admin-info{ color:var(--muted) !important; }
.admin-info a{ color:var(--gold) !important; }
.section-title span:first-child{ color:var(--txt) !important; opacity:1 !important; }
.section-title{ opacity:1 !important; }

/* ═══════════════ ADMIN (Mini App) ═══════════════ */
.page-admin{ padding:0 14px 20px; }
.adm-tabs{ display:flex; gap:8px; margin:8px 0 14px; }
.adm-tab{
  flex:1; padding:10px 6px; border-radius:12px; font-size:13px; font-weight:700;
  background:var(--card); color:var(--muted);
  border:1px solid var(--stroke); cursor:pointer; transition:.2s;
}
.adm-tab.active{ background:var(--grad-cta); color:#1a1200; border-color:transparent; box-shadow:var(--glow-gold); }
.adm-pane{ display:none; }
.adm-pane.active{ display:block; }

.adm-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.adm-card{
  background:linear-gradient(160deg,var(--card-2),var(--card));
  border:1px solid var(--stroke); border-radius:16px; padding:14px 12px; text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.adm-card.gold{ border-color:rgba(245,166,35,.4); }
.adm-card.gold .adm-card-val{ color:var(--gold); }
.adm-card.warn{ border-color:rgba(239,68,68,.45); }
.adm-card.warn .adm-card-val{ color:#ff7a7a; }
.adm-card-ico{ font-size:20px; }
.adm-card-val{ font-size:24px; font-weight:800; color:var(--txt); margin:2px 0; letter-spacing:-.02em; }
.adm-card-lbl{ font-size:11px; color:var(--muted); font-weight:600; }

.adm-block{
  background:linear-gradient(160deg,var(--card-2),var(--card));
  border:1px solid var(--stroke); border-radius:18px; padding:14px; margin-bottom:14px;
}
.adm-block-title{ font-size:14px; font-weight:800; color:var(--txt); margin-bottom:12px; }

/* Grafik */
.chart-bars{ display:flex; align-items:flex-end; gap:4px; height:110px; }
.chart-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.chart-bar{ width:100%; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#ffd15c,#f5a623); min-height:3px; }
.chart-x{ font-size:9px; color:var(--muted); margin-top:5px; }
.chart-note{ font-size:11px; color:var(--muted); margin-top:10px; text-align:right; }

/* Qoplam */
.cov-row{ margin-bottom:12px; }
.cov-lbl{ display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--txt); margin-bottom:6px; }
.cov-lbl span{ color:var(--muted); font-weight:600; }
.cov-track{ height:9px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.cov-fill{ height:100%; border-radius:99px; transition:width .5s; }
.cov-sum{ font-size:11px; color:var(--muted); margin-top:10px; text-align:center; }

/* Asboblar */
.adm-toolbar{ display:flex; gap:8px; margin-bottom:12px; }
.adm-search, .adm-select{
  padding:10px 12px; border-radius:12px; font-size:13px;
  background:var(--card); color:var(--txt); border:1px solid var(--stroke-2); outline:none;
}
.adm-search{ flex:1; } .adm-select{ width:auto; }
.adm-search:focus{ border-color:rgba(245,166,35,.5); }

/* Jadval */
.adm-table-wrap{
  overflow-x:auto; border-radius:14px; border:1px solid var(--stroke);
  background:linear-gradient(160deg,var(--card-2),var(--card));
}
.adm-table{ width:100%; border-collapse:collapse; font-size:12px; }
.adm-table thead th{
  position:sticky; top:0; background:#1b2740; color:var(--gold);
  font-weight:800; text-align:left; padding:10px 8px; font-size:11px;
  border-bottom:1px solid var(--stroke-2); white-space:nowrap;
}
.adm-table td{ padding:9px 8px; color:var(--txt); border-bottom:1px solid rgba(255,255,255,.05); vertical-align:top; }
.adm-table tbody tr:active{ background:rgba(255,255,255,.04); }
.adm-table .adm-sec td{
  background:rgba(245,166,35,.10); color:var(--gold); font-weight:800; font-size:11px; padding:7px 8px;
}
.adm-topic{ max-width:170px; }
.adm-sub{ font-size:10px; color:var(--muted); }
.muted{ color:var(--muted); }

/* ===== O'rganish oqimi (journey.js) =====
   Botdagi tartib mini ilovada ham shu uslublar bilan ko'rsatiladi.
   Alohida fayl ochilmadi: ranglar va o'lchamlar shu yerdagi
   o'zgaruvchilardan olinadi, ikki xil ko'rinish bo'lmasin. */
.page-journey { padding: 12px; }

/* Nazariya beti — rasm ko'rinishida.
 *
 * Telefonda A4 beti ekran eniga siqiladi va formulalar mayda bo'lib
 * qoladi. `max-width: none` + gorizontal aylantirish rasmni ASL
 * o'lchamida ko'rish imkonini beradi: o'quvchi ikki barmoq bilan
 * kattalashtirmasdan ham o'qiy oladi.
 *
 * `image-rendering` — brauzer rasmni kichraytirganda formulaning
 * ingichka chiziqlari yo'qolmasin. */
#journey-root .j-rasm-oram {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    background: #fff;
    margin: 8px 0;
}

#journey-root .j-rasm {
    width: 100%;
    min-width: 320px;
    border-radius: 12px;
    background: #fff;
    margin: 8px 0;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

/* Kattalashtirilgan holat: rasm ekranga sig'maydi va aylantiriladi. */
#journey-root .j-rasm-oram.kattalashtirilgan .j-rasm {
    width: auto;
    max-width: none;
    height: 78vh;
}

#journey-root .j-katta {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .75;
    font-size: 13px;
    padding: 6px 0;
    cursor: pointer;
}

#journey-root .j-bet {
    text-align: center;
    font-size: 13px;
    opacity: .7;
    margin-bottom: 8px;
}

#journey-root .j-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

#journey-root .j-nav .btn { flex: 1; }

#journey-root .card {
    background: var(--card, rgba(255, 255, 255, .06));
    border-radius: 12px;
    padding: 12px 14px;
    margin: 8px 0;
    line-height: 1.5;
}

#journey-root .loading {
    text-align: center;
    padding: 40px 0;
    opacity: .7;
}

#journey-root .hint {
    font-size: 13px;
    opacity: .65;
    margin: 8px 0;
    text-align: center;
}

#journey-root .feedback-header {
    padding: 10px 12px;
    border-radius: 10px;
    margin: 10px 0;
    line-height: 1.5;
}

#journey-root .feedback-header.ok { background: rgba(52, 199, 89, .15); }
#journey-root .feedback-header.bad { background: rgba(255, 69, 58, .15); }

#journey-root .btn-full { width: 100%; margin: 6px 0; }

/* ── Mutaxassis tahlili ──────────────────────────────────────────
 * Botdagi ro'yxatning jadval ko'rinishi. Har qator — bitta o'quvchi
 * yoki bitta savol; ichida zaif joylar sanab o'tiladi. */
.tahlil-qator {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.tahlil-bosh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.tahlil-bosh code {
    font-size: 12px;
    opacity: .6;
}

.tahlil-izoh {
    font-size: 13px;
    opacity: .85;
    padding: 2px 0;
}

/* Savol matni — bir necha qatorga cho'zilmasin, jadval o'qilishi
 * qiyinlashadi. */
.tahlil-matn {
    font-size: 12px;
    opacity: .7;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-tahlil .adm-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.page-tahlil .adm-tab { flex: 1; }

/* ── O'quv oqimi: savol ekrani ───────────────────────────────────
 *
 * Bu ekran mavjud uslub tizimiga ulanmagan edi: variantlar
 * uslublanmagan `option` klassida turardi va qorong'i ilovada
 * brauzerning OQ sukut tugmalari chiqardi. Endi mock ekranidagi
 * `option-btn` komponenti ishlatiladi — bitta ko'rinish, bitta joy.
 *
 * Bu yerda faqat SHU ekranga xos ikkita narsa qo'shiladi: sarlavha
 * qatori va sanoq. Rang ham, shrift ham yangisi kiritilmaydi. */

#journey-root .j-sarlavha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

/* Sanoq — o'quvchi qayerda turganini bilsin. Oltin, lekin kichik:
 * u yo'l ko'rsatkichi, diqqat markazi emas. */
#journey-root .j-hisob {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 13px;
    color: var(--gold);
    opacity: .85;
    flex-shrink: 0;
}

#journey-root .test-progress-bar {
    height: 4px;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 16px;
}

#journey-root .test-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .35s ease;
}

/* Savol matni — o'qish uchun bir oz kattaroq va havodorroq.
 * Formulalar ko'p, siqilgan matn ularni o'qishni qiyinlashtiradi. */
#journey-root .test-question {
    font-size: 17px;
    line-height: 1.55;
    padding: 18px 16px;
}

/* Javob berilgach so'ngan variant bosilmaydi va e'tibor tortmaydi. */
#journey-root .option-btn.disabled {
    opacity: .4;
    pointer-events: none;
}

/* `style.css` xato javobga `incorrect`, `modern.css` esa `wrong`
 * deb uslub bergan edi — natijada noto'g'ri javob qorong'i ekranda
 * OCH ko'rinardi. Ikkala nom ham bir xil ishlasin. */
.option-btn.incorrect{
  border-color:#ef4444 !important;
  background:rgba(239,68,68,.12) !important;
}
.option-btn.incorrect .option-letter{
  background:#ef4444 !important; color:#fff !important;
  border-color:transparent !important;
}